登录界面已完成

package-lock.json

@@ -11,7 +11,8 @@
         "@element-plus/icons-vue": "^2.3.2",
         "axios": "^1.13.2",
         "element-plus": "^2.11.8",
-        "vue": "^3.5.22"
+        "vue": "^3.5.22",
+        "vue-router": "^5.0.2"
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^6.0.1",
@@ -79,14 +80,13 @@
       }
     },
     "node_modules/@babel/generator": {
-      "version": "7.28.5",
+      "version": "7.29.0",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.28.5.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.29.0.tgz",
-      "integrity": "sha512-3EwLFhZ38J4VyIP6WNtt2kUdW9dokXA9Cr4IVIFHuCpZ3H8/YFOl5JjZHisrn1fATPBmKKqXzDFvh9fUwHz6CQ==",
+      "integrity": "sha512-vSH118/wwM/pLR38g/Sgk05sNtro6TlTJKuiMXDaZqPUfjTFcudpCOt00IhOfj+1BFAX+UFAlzCU+6WXr3GLFQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/parser": "^7.28.5",
+        "@babel/parser": "^7.29.0",
-        "@babel/types": "^7.28.5",
+        "@babel/types": "^7.29.0",
         "@jridgewell/gen-mapping": "^0.3.12",
         "@jridgewell/trace-mapping": "^0.3.28",
         "jsesc": "^3.0.2"
@@ -301,12 +301,12 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.28.5",
+      "version": "7.29.0",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.5.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.0.tgz",
-      "integrity": "sha512-KKBU1VGYR7ORr3At5HAtUQ+TV3SzRCXmA/8OdDZiLDBIZxVyzXuztPjfLd3BV1PRAQGCMWWSHYhL0F8d5uHBDQ==",
+      "integrity": "sha512-IyDgFV5GeDUVX4YdF/3CPULtVGSXXMLh1xVIgdCgxApktqnQV0r7/8Nqthg+8YLGaAtdyIlo2qIdZrbCv4+7ww==",
       "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.28.5"
+        "@babel/types": "^7.29.0"
       },
       "bin": {
         "parser": "bin/babel-parser.js"
@@ -465,9 +465,9 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.28.5",
+      "version": "7.29.0",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.5.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.0.tgz",
-      "integrity": "sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA==",
+      "integrity": "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-string-parser": "^7.27.1",
@@ -966,7 +966,6 @@
       "version": "0.3.13",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
       "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.5.0",
@@ -977,7 +976,6 @@
       "version": "2.3.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
       "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.5",
@@ -988,7 +986,6 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
       "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.0.0"
@@ -1004,7 +1001,6 @@
       "version": "0.3.31",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
       "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
@@ -1389,6 +1385,33 @@
         "vue": "^3.2.25"
       }
     },
+    "node_modules/@vue-macros/common": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@vue-macros/common/-/common-3.1.2.tgz",
+      "integrity": "sha512-h9t4ArDdniO9ekYHAD95t9AZcAbb19lEGK+26iAjUODOIJKmObDNBSe4+6ELQAA3vtYiFPPBtHh7+cQCKi3Dng==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-sfc": "^3.5.22",
+        "ast-kit": "^2.1.2",
+        "local-pkg": "^1.1.2",
+        "magic-string-ast": "^1.0.2",
+        "unplugin-utils": "^0.3.0"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/vue-macros"
+      },
+      "peerDependencies": {
+        "vue": "^2.7.0 || ^3.2.25"
+      },
+      "peerDependenciesMeta": {
+        "vue": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@vue/babel-helper-vue-transform-on": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/@vue/babel-helper-vue-transform-on/-/babel-helper-vue-transform-on-1.5.0.tgz",
@@ -1492,6 +1515,15 @@
         "@vue/shared": "3.5.24"
       }
     },
+    "node_modules/@vue/devtools-api": {
+      "version": "8.0.5",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-8.0.5.tgz",
+      "integrity": "sha512-DgVcW8H/Nral7LgZEecYFFYXnAvGuN9C3L3DtWekAncFBedBczpNW8iHKExfaM559Zm8wQWrwtYZ9lXthEHtDw==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-kit": "^8.0.5"
+      }
+    },
     "node_modules/@vue/devtools-core": {
       "version": "8.0.5",
       "resolved": "https://registry.npmjs.org/@vue/devtools-core/-/devtools-core-8.0.5.tgz",
@@ -1533,7 +1565,6 @@
       "version": "8.0.5",
       "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-8.0.5.tgz",
       "integrity": "sha512-q2VV6x1U3KJMTQPUlRMyWEKVbcHuxhqJdSr6Jtjz5uAThAIrfJ6WVZdGZm5cuO63ZnSUz0RCsVwiUUb0mDV0Yg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@vue/devtools-shared": "^8.0.5",
@@ -1549,7 +1580,6 @@
       "version": "8.0.5",
       "resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-8.0.5.tgz",
       "integrity": "sha512-bRLn6/spxpmgLk+iwOrR29KrYnJjG9DGpHGkDFG82UM21ZpJ39ztUT9OXX3g+usW7/b2z+h46I9ZiYyB07XMXg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "rfdc": "^1.4.1"
@@ -1693,6 +1723,18 @@
         }
       }
     },
+    "node_modules/acorn": {
+      "version": "8.15.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
+      "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
+      "license": "MIT",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/ansis": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/ansis/-/ansis-4.2.0.tgz",
@@ -1703,6 +1745,38 @@
         "node": ">=14"
       }
     },
+    "node_modules/ast-kit": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/ast-kit/-/ast-kit-2.2.0.tgz",
+      "integrity": "sha512-m1Q/RaVOnTp9JxPX+F+Zn7IcLYMzM8kZofDImfsKZd8MbR+ikdOzTeztStWqfrqIxZnYWryyI9ePm3NGjnZgGw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.28.5",
+        "pathe": "^2.0.3"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sxzz"
+      }
+    },
+    "node_modules/ast-walker-scope": {
+      "version": "0.8.3",
+      "resolved": "https://registry.npmjs.org/ast-walker-scope/-/ast-walker-scope-0.8.3.tgz",
+      "integrity": "sha512-cbdCP0PGOBq0ASG+sjnKIoYkWMKhhz+F/h9pRexUdX2Hd38+WOlBkRKlqkGOSm0YQpcFMQBJeK4WspUAkwsEdg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.28.4",
+        "ast-kit": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sxzz"
+      }
+    },
     "node_modules/async-validator": {
       "version": "4.2.5",
       "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-4.2.5.tgz",
@@ -1740,7 +1814,6 @@
       "version": "2.8.0",
       "resolved": "https://registry.npmjs.org/birpc/-/birpc-2.8.0.tgz",
       "integrity": "sha512-Bz2a4qD/5GRhiHSwj30c/8kC8QGj12nNDwz3D4ErQ4Xhy35dsSDvF+RA/tWpjyU0pdGtSDiEk6B5fBGE1qNVhw==",
-      "dev": true,
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/antfu"
@@ -1830,6 +1903,21 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/chokidar": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-5.0.0.tgz",
+      "integrity": "sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==",
+      "license": "MIT",
+      "dependencies": {
+        "readdirp": "^5.0.0"
+      },
+      "engines": {
+        "node": ">= 20.19.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
     "node_modules/combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -1842,6 +1930,12 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/confbox": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.2.2.tgz",
+      "integrity": "sha512-1NB+BKqhtNipMsov4xI/NnhCKp9XG9NamYp5PVm9klAT0fsrNPjaFICsCFhNhwZJKNh7zB/3q8qXz0E9oaMNtQ==",
+      "license": "MIT"
+    },
     "node_modules/convert-source-map": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
@@ -1853,7 +1947,6 @@
       "version": "4.0.5",
       "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-4.0.5.tgz",
       "integrity": "sha512-7Vv6asjS4gMOuILabD3l739tsaxFQmC+a7pLZm02zyvs8p977bL3zEgq3yDk5rn9B0PbYgIv++jmHcuUab4RhA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-what": "^5.2.0"
@@ -2118,11 +2211,16 @@
       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
       "license": "MIT"
     },
+    "node_modules/exsolve": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/exsolve/-/exsolve-1.0.8.tgz",
+      "integrity": "sha512-LmDxfWXwcTArk8fUEnOfSZpHOJ6zOMUJKOtFLFqJLoKJetuQG874Uc7/Kki7zFLzYybmZhp1M7+98pfMqeX8yA==",
+      "license": "MIT"
+    },
     "node_modules/fdir": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
       "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12.0.0"
@@ -2298,7 +2396,6 @@
       "version": "5.5.3",
       "resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz",
       "integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/is-docker": {
@@ -2340,7 +2437,6 @@
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/is-what/-/is-what-5.5.0.tgz",
       "integrity": "sha512-oG7cgbmg5kLYae2N5IVd3jm2s+vldjxJzK1pcu9LfpGuQ93MQSzo0okvRna+7y5ifrD+20FE8FvjusyGaz14fw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=18"
@@ -2376,7 +2472,6 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
       "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
-      "dev": true,
       "license": "MIT",
       "bin": {
         "jsesc": "bin/jsesc"
@@ -2389,7 +2484,6 @@
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
       "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
-      "dev": true,
       "license": "MIT",
       "bin": {
         "json5": "lib/cli.js"
@@ -2405,6 +2499,23 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/local-pkg": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-1.1.2.tgz",
+      "integrity": "sha512-arhlxbFRmoQHl33a0Zkle/YWlmNwoyt6QNZEIJcqNbdrsix5Lvc4HyyI3EnwxTYlZYc32EbYrQ8SzEZ7dqgg9A==",
+      "license": "MIT",
+      "dependencies": {
+        "mlly": "^1.7.4",
+        "pkg-types": "^2.3.0",
+        "quansync": "^0.2.11"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
@@ -2447,6 +2558,21 @@
         "@jridgewell/sourcemap-codec": "^1.5.5"
       }
     },
+    "node_modules/magic-string-ast": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/magic-string-ast/-/magic-string-ast-1.0.3.tgz",
+      "integrity": "sha512-CvkkH1i81zl7mmb94DsRiFeG9V2fR2JeuK8yDgS8oiZSFa++wWLEgZ5ufEOyLHbvSbD1gTRKv9NdX69Rnvr9JA==",
+      "license": "MIT",
+      "dependencies": {
+        "magic-string": "^0.30.19"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sxzz"
+      }
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -2487,9 +2613,37 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
       "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==",
-      "dev": true,
       "license": "MIT"
     },
+    "node_modules/mlly": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.8.0.tgz",
+      "integrity": "sha512-l8D9ODSRWLe2KHJSifWGwBqpTZXIXTeo8mlKjY+E2HAakaTeNpqAyBZ8GSqLzHgw4XmHmC8whvpjJNMbFZN7/g==",
+      "license": "MIT",
+      "dependencies": {
+        "acorn": "^8.15.0",
+        "pathe": "^2.0.3",
+        "pkg-types": "^1.3.1",
+        "ufo": "^1.6.1"
+      }
+    },
+    "node_modules/mlly/node_modules/confbox": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.1.8.tgz",
+      "integrity": "sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==",
+      "license": "MIT"
+    },
+    "node_modules/mlly/node_modules/pkg-types": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.3.1.tgz",
+      "integrity": "sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==",
+      "license": "MIT",
+      "dependencies": {
+        "confbox": "^0.1.8",
+        "mlly": "^1.7.4",
+        "pathe": "^2.0.1"
+      }
+    },
     "node_modules/mrmime": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.1.tgz",
@@ -2507,6 +2661,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/muggle-string": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/muggle-string/-/muggle-string-0.4.1.tgz",
+      "integrity": "sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==",
+      "license": "MIT"
+    },
     "node_modules/nanoid": {
       "version": "3.3.11",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
@@ -2568,14 +2728,12 @@
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
       "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/perfect-debounce": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-2.0.0.tgz",
       "integrity": "sha512-fkEH/OBiKrqqI/yIgjR92lMfs2K8105zt/VT6+7eTjNwisrsh47CeIED9z58zI7DfKdH3uHAn25ziRZn3kgAow==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/picocolors": {
@@ -2588,7 +2746,6 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -2597,6 +2754,17 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pkg-types": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-2.3.0.tgz",
+      "integrity": "sha512-SIqCzDRg0s9npO5XQ3tNZioRY1uK06lA41ynBC1YmFTmnY6FjUjVt6s4LoADmwoig1qqD0oK8h1p/8mlMx8Oig==",
+      "license": "MIT",
+      "dependencies": {
+        "confbox": "^0.2.2",
+        "exsolve": "^1.0.7",
+        "pathe": "^2.0.3"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.5.6",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
@@ -2631,11 +2799,39 @@
       "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
       "license": "MIT"
     },
+    "node_modules/quansync": {
+      "version": "0.2.11",
+      "resolved": "https://registry.npmjs.org/quansync/-/quansync-0.2.11.tgz",
+      "integrity": "sha512-AifT7QEbW9Nri4tAwR5M/uzpBuqfZf+zwaEM/QkzEjj7NBuFD2rBuy0K3dE+8wltbezDV7JMA0WfnCPYRSYbXA==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/antfu"
+        },
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/sxzz"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/readdirp": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-5.0.0.tgz",
+      "integrity": "sha512-9u/XQ1pvrQtYyMpZe7DXKv2p5CNvyVwzUB6uhLAnQwHMSgKMBR62lc7AHljaeteeHXn11XTAaLLUVZYVZyuRBQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 20.19.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
     "node_modules/rfdc": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz",
       "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/rollup": {
@@ -2693,6 +2889,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/scule": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/scule/-/scule-1.3.0.tgz",
+      "integrity": "sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==",
+      "license": "MIT"
+    },
     "node_modules/semver": {
       "version": "6.3.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
@@ -2731,7 +2933,6 @@
       "version": "14.0.1",
       "resolved": "https://registry.npmjs.org/speakingurl/-/speakingurl-14.0.1.tgz",
       "integrity": "sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==",
-      "dev": true,
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
@@ -2741,7 +2942,6 @@
       "version": "2.2.5",
       "resolved": "https://registry.npmjs.org/superjson/-/superjson-2.2.5.tgz",
       "integrity": "sha512-zWPTX96LVsA/eVYnqOM2+ofcdPqdS1dAF1LN4TS2/MWuUpfitd9ctTa87wt4xrYnZnkLtS69xpBdSxVBP5Rm6w==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "copy-anything": "^4"
@@ -2754,7 +2954,6 @@
       "version": "0.2.15",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
       "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "fdir": "^6.5.0",
@@ -2777,11 +2976,30 @@
         "node": ">=6"
       }
     },
+    "node_modules/ufo": {
+      "version": "1.6.3",
+      "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.6.3.tgz",
+      "integrity": "sha512-yDJTmhydvl5lJzBmy/hyOAA0d+aqCBuwl818haVdYCRrWV84o7YyeVm4QlVHStqNrrJSTb6jKuFAVqAFsr+K3Q==",
+      "license": "MIT"
+    },
+    "node_modules/unplugin": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-3.0.0.tgz",
+      "integrity": "sha512-0Mqk3AT2TZCXWKdcoaufeXNukv2mTrEZExeXlHIOZXdqYoHHr4n51pymnwV8x2BOVxwXbK2HLlI7usrqMpycdg==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/remapping": "^2.3.5",
+        "picomatch": "^4.0.3",
+        "webpack-virtual-modules": "^0.6.2"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
     "node_modules/unplugin-utils": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/unplugin-utils/-/unplugin-utils-0.3.1.tgz",
       "integrity": "sha512-5lWVjgi6vuHhJ526bI4nlCOmkCIF3nnfXkCMDeMJrtdvxTs6ZFCM8oNufGTsDbKv/tJ/xj8RpvXjRuPBZJuJog==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "pathe": "^2.0.3",
@@ -3025,6 +3243,57 @@
         }
       }
     },
+    "node_modules/vue-router": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-5.0.2.tgz",
+      "integrity": "sha512-YFhwaE5c5JcJpNB1arpkl4/GnO32wiUWRB+OEj1T0DlDxEZoOfbltl2xEwktNU/9o1sGcGburIXSpbLpPFe/6w==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/generator": "^7.28.6",
+        "@vue-macros/common": "^3.1.1",
+        "@vue/devtools-api": "^8.0.0",
+        "ast-walker-scope": "^0.8.3",
+        "chokidar": "^5.0.0",
+        "json5": "^2.2.3",
+        "local-pkg": "^1.1.2",
+        "magic-string": "^0.30.21",
+        "mlly": "^1.8.0",
+        "muggle-string": "^0.4.1",
+        "pathe": "^2.0.3",
+        "picomatch": "^4.0.3",
+        "scule": "^1.3.0",
+        "tinyglobby": "^0.2.15",
+        "unplugin": "^3.0.0",
+        "unplugin-utils": "^0.3.1",
+        "yaml": "^2.8.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "@pinia/colada": ">=0.21.2",
+        "@vue/compiler-sfc": "^3.5.17",
+        "pinia": "^3.0.4",
+        "vue": "^3.5.0"
+      },
+      "peerDependenciesMeta": {
+        "@pinia/colada": {
+          "optional": true
+        },
+        "@vue/compiler-sfc": {
+          "optional": true
+        },
+        "pinia": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/webpack-virtual-modules": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz",
+      "integrity": "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==",
+      "license": "MIT"
+    },
     "node_modules/wsl-utils": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/wsl-utils/-/wsl-utils-0.1.0.tgz",
@@ -3047,6 +3316,21 @@
       "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
       "dev": true,
       "license": "ISC"
+    },
+    "node_modules/yaml": {
+      "version": "2.8.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.2.tgz",
+      "integrity": "sha512-mplynKqc1C2hTVYxd0PU2xQAc22TI1vShAYGksCCfxbn/dFwnHTNi1bvYsBTkhdUNtGIf5xNOg938rrSSYvS9A==",
+      "license": "ISC",
+      "bin": {
+        "yaml": "bin.mjs"
+      },
+      "engines": {
+        "node": ">= 14.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/eemeli"
+      }
     }
   }
 }

package.json

@@ -15,7 +15,8 @@
     "@element-plus/icons-vue": "^2.3.2",
     "axios": "^1.13.2",
     "element-plus": "^2.11.8",
-    "vue": "^3.5.22"
+    "vue": "^3.5.22",
+    "vue-router": "^5.0.2"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.1",

src/App.vue

@@ -1,389 +1,12 @@
 <template>
-  <div class="full-screen-layout">
+  <router-view />
-    <el-container class="full-screen-container">
-      <!-- 侧边栏 -->
-      <el-aside width="200px" class="siderbar">
-        <div class="sidebar-header">
-          <div class="logo-container">
-            <!-- 添加 logo 图片 -->
-            <img src="@/assets/logo.jpg" alt="方舟网络" class="logo-image" />
-            <div class="text-content">
-              <h2 class="company-name">方舟网络</h2>
-              <p class="system-name">工单管理系统</p>
-            </div>
-          </div>
-        </div>
-        <!-- 这里可以放菜单 -->
-        <el-menu
-          default-active="1"
-          class="sidebar-menu"
-          router
-        >
-          <el-menu-item index="1">
-            <el-icon><icon-menu /></el-icon>
-            <span>工单管理</span>
-          </el-menu-item>
-          <el-menu-item index="2">
-            <el-icon><document /></el-icon>
-            <span>数据统计</span>
-          </el-menu-item>
-        </el-menu>
-      </el-aside>
-
-      <!-- 主内容区域 -->
-      <el-container class="main-container">
-        <!-- 顶部导航栏 -->
-        <el-header class="main-header">
-          <div class="header-content">
-            <div class="user-info">
-              <el-avatar :size="32" :src="user.avatar" />
-              <span class="username">{{ user.name }}</span>
-            </div>
-          </div>
-        </el-header>
-        
-        <!-- 主要内容 -->
-        <el-main class="main-content">
-          <TicketManagement />
-          <!-- <router-view /> -->
-        </el-main>
-      </el-container>
-    </el-container>
-  </div>
 </template>
 
-
+<style>
-
+/* 全局样式，比如重置 margin/padding */
-
+body,
-<style scoped>
+html {
-.full-screen-layout {
-  height: 100vh;
-  width: 100vw;
   margin: 0;
   padding: 0;
-  overflow: hidden;
-}
-
-.full-screen-container {
-  height: 100vh;
-  width: 100vw;
-  margin: 0;
-  padding: 0;
-}
-
-.siderbar {
-  background-color: #001529;
-  color: white;
-  margin: 0;
-  padding: 0;
-}
-
-.sidebar-header {
-  padding: 16px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-  height: 80px;
-  display: flex;
-  align-items: center;
-}
-
-.logo-container {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  width: 100%;
-}
-
-.logo-image {
-  width: 40px;
-  height: 40px;
-  border-radius: 6px;
-  object-fit: cover;
-  flex-shrink: 0;
-}
-
-.text-content {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  overflow: hidden;
-}
-
-.company-name {
-  margin: 0;
-  font-size: 16px;
-  font-weight: 600;
-  color: #ffffff;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.system-name {
-  margin: 0;
-  font-size: 12px;
-  color: rgba(255, 255, 255, 0.7);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.sidebar-menu {
-  border: none;
-  background-color: transparent;
-}
-
-.sidebar-menu .el-menu-item {
-  color: rgba(255, 255, 255, 0.8);
-}
-
-.sidebar-menu .el-menu-item:hover {
-  background-color: rgba(24, 144, 255, 0.2);
-  color: #ffffff;
-}
-
-.sidebar-menu .el-menu-item.is-active {
-  background-color: #1890ff;
-  color: #ffffff;
-}
-
-.main-container {
-  height: 100vh;
-  margin: 0;
-  padding: 0;
-}
-
-.main-header {
-  background-color: #fff;
-  border-bottom: 1px solid #e6e6e6;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  padding: 0 20px;
-  height: 60px;
-  margin: 0;
-}
-
-.header-content {
-  display: flex;
-  align-items: center;
-}
-
-.user-info {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.username {
-  font-size: 14px;
-  color: #333;
-}
-
-.main-content {
-  padding: 20px;
-  background-color: #f5f7fa;
-  height: calc(100vh - 60px);
-  margin: 0;
-  overflow-y: auto;
 }
 </style>
-
-
-
-
-
-
-
-
-<script setup>
-import { reactive } from 'vue'
-import TicketManagement from './views/TicketManagement.vue'
-
-const user = reactive({
-  name: '管理员',
-  avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
-})
-</script>
-
-<!-- <style scoped>
-
-/* 关键：禁止水平滚动和溢出 */
-.full-screen-layout {
-  position: fixed !important;
-  top: 0 !important;
-  left: 0 !important;
-  width: 100vw !important;
-  height: 100vh !important;
-  margin: 0 !important;
-  padding: 0 !important;
-  overflow: hidden !important; /* 禁止任何滚动 */
-  max-width: 100vw !important;
-}
-
-
-/* 关键：让 el-container 铺满 */
-.full-screen-container {
-  height: 100vh !important;
-  width: 100vw !important;
-  margin: 0 !important;
-  padding: 0 !important;
-}
-
-/* 侧边栏样式 */
-.el-aside {
-  background-color: #001529;
-  color: white;
-  display: flex;
-  flex-direction: column;
-}
-
-.sidebar {
-  background-color: #001529;
-  color: white;
-  margin: 0 !important;
-  padding: 0 !important;
-}
-
-
-.sidebar-header {
-  padding: 24px 16px;
-  text-align: center;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-  height: 80px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: linear-gradient(135deg, #001529 0%, #002140 100%);
-}
-
-.logo-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 4px;
-}
-
-.company-name {
-  margin: 0;
-  font-size: 18px;
-  font-weight: 600;
-  color: #ffffff;
-  letter-spacing: 1px;
-}
-
-.system-name {
-  margin: 0;
-  font-size: 12px;
-  color: rgba(255, 255, 255, 0.7);
-  font-weight: 300;
-}
-
-.sidebar-header h2 {
-  margin: 0;
-  font-size: 18px;
-  color: #fff;
-}
-
-.sidebar-header p {
-  margin: 5px 0 0 0;
-  font-size: 12px;
-  color: #aaa;
-}
-
-.sidebar-menu {
-  border: none;
-  background-color: transparent;
-  flex: 1;
-}
-
-.sidebar-menu .el-menu-item {
-  color: #fff;
-}
-
-.sidebar-menu .el-menu-item:hover {
-  background-color: #1890ff;
-}
-
-/* 主内容区域头部 */
-.main-header {
-  background-color: #fff;
-  border-bottom: 1px solid #e6e6e6;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  padding: 0 20px;
-}
-
-.header-content {
-  display: flex;
-  align-items: center;
-}
-
-.user-info {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.username {
-  font-size: 14px;
-  color: #333;
-}
-
-/* 主要内容区域 */
-.main-content {
-  padding: 20px;
-  background-color: #f5f7fa;
-  height: calc(100vh - 60px); /* 减去头部高度 */
-  overflow-y: auto; /* 允许内容滚动 */
-}
-</style> -->
-
-
-
-
-
-
-<!-- <style scoped>
-.app-container {
-  min-height: 100vh;
-  background: #409EFF;
-}
-
-.app-header {
-  background: #409eff;
-  color: white;
-  padding: 0 20px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-.header-content {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  height: 100%;
-  background: #409EFF;
-}
-
-.header-content h1 {
-  margin: 0;
-  font-size: 24px;
-  font-weight: 500;
-}
-
-.user-info {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.username {
-  font-size: 14px;
-}
-
-.app-main {
-  padding: 20px;
-  max-width: 1400px;
-  margin: 0 auto;
-}
-</style> -->

src/api/ticket.js

@@ -1,9 +1,22 @@
-import axios from 'axios'
+import request from '@/utils/request'
 
-const request = axios.create({
+
-  baseURL: '/api', // 所有通过实例发送的请求都会加上前缀
+export const userApi = {
-  timeout: 10000  // 单位为ms
+  // 登录接口
+  login(username, password) {
+    // 这里的 data 会被 axios 放在请求体 (Body) 中发送
+    return request.post('/login', {
+      username,
+      password
     })
+  },
+
+  // 退出登录
+  logout() {
+    return request.post('/logout')
+  }
+}
+
 
 export const ticketApi = {
   // 获取工单列表

src/layouts/MainLayout.vue

@@ -0,0 +1,236 @@
+<template>
+  <div class="full-screen-layout">
+    <el-container class="full-screen-container">
+      <!-- 侧边栏 -->
+      <el-aside width="200px" class="siderbar">
+        <div class="sidebar-header">
+          <div class="logo-container">
+            <!-- 添加 logo 图片 -->
+            <img src="@/assets/logo.jpg" alt="方舟网络" class="logo-image" />
+            <div class="text-content">
+              <h2 class="company-name">方舟网络</h2>
+              <p class="system-name">工单管理系统</p>
+            </div>
+          </div>
+        </div>
+        <!-- 这里可以放菜单 -->
+        <el-menu default-active="/" class="sidebar-menu" router>
+          <el-menu-item index="/">
+            <el-icon><icon-menu /></el-icon>
+            <span>工单管理</span>
+          </el-menu-item>
+          <el-menu-item index="/stats">
+            <el-icon>
+              <document />
+            </el-icon>
+            <span>数据统计</span>
+          </el-menu-item>
+        </el-menu>
+      </el-aside>
+
+      <!-- 主内容区域 -->
+      <el-container class="main-container">
+        <!-- 顶部导航栏 -->
+        <el-header class="main-header">
+          <div class="header-content">
+            <div class="user-info">
+              <el-dropdown>
+                <div class="user-profile">
+                  <el-avatar :size="32" :src="user.avatar" />
+                  <span class="username">{{ user.name }}</span>
+                </div>
+                <template #dropdown>
+                  <el-dropdown-menu>
+                    <el-dropdown-item @click="handleLogout">退出登录</el-dropdown-item>
+                  </el-dropdown-menu>
+                </template>
+              </el-dropdown>
+            </div>
+          </div>
+        </el-header>
+
+        <!-- 主要内容 -->
+        <el-main class="main-content">
+          <router-view v-slot="{ Component }">
+            <transition name="fade-transform" mode="out-in">
+              <component :is="Component" />
+            </transition>
+          </router-view>
+        </el-main>
+      </el-container>
+    </el-container>
+  </div>
+</template>
+
+
+
+
+<style scoped>
+.full-screen-layout {
+  height: 100vh;
+  width: 100vw;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+}
+
+.full-screen-container {
+  height: 100vh;
+  width: 100vw;
+  margin: 0;
+  padding: 0;
+}
+
+.siderbar {
+  background-color: #001529;
+  color: white;
+  margin: 0;
+  padding: 0;
+}
+
+.sidebar-header {
+  padding: 16px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  height: 80px;
+  display: flex;
+  align-items: center;
+}
+
+.logo-container {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+}
+
+.logo-image {
+  width: 40px;
+  height: 40px;
+  border-radius: 6px;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
+.text-content {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  overflow: hidden;
+}
+
+.company-name {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: #ffffff;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.system-name {
+  margin: 0;
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.7);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.sidebar-menu {
+  border: none;
+  background-color: transparent;
+}
+
+.sidebar-menu .el-menu-item {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.sidebar-menu .el-menu-item:hover {
+  background-color: rgba(24, 144, 255, 0.2);
+  color: #ffffff;
+}
+
+.sidebar-menu .el-menu-item.is-active {
+  background-color: #1890ff;
+  color: #ffffff;
+}
+
+.main-container {
+  height: 100vh;
+  margin: 0;
+  padding: 0;
+}
+
+.main-header {
+  background-color: #fff;
+  border-bottom: 1px solid #e6e6e6;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 0 20px;
+  height: 60px;
+  margin: 0;
+}
+
+.header-content {
+  display: flex;
+  align-items: center;
+}
+
+.user-info {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.username {
+  font-size: 14px;
+  color: #333;
+}
+
+.main-content {
+  padding: 20px;
+  background-color: #f5f7fa;
+  height: calc(100vh - 60px);
+  margin: 0;
+  overflow-y: auto;
+}
+</style>
+
+
+
+
+
+
+
+
+<script setup>
+import { reactive, onMounted } from 'vue'
+import { Menu as IconMenu, Document } from '@element-plus/icons-vue' // 补充图标引入
+import { useRouter } from 'vue-router'
+
+
+const router = useRouter()
+
+const user = reactive({
+  name: '加载中...',
+  avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
+})
+
+onMounted(() => {
+  const savedUser = localStorage.getItem('user_info') || sessionStorage.getItem('user_info')
+  if (savedUser) {
+    const data = JSON.parse(savedUser)
+    // 根据你 ThinkPHP 返回的字段来赋值，假设是 username
+    user.name = data.username || '管理员'
+  }
+})
+
+
+const handleLogout = () => {
+  localStorage.clear()
+  sessionStorage.clear()
+  router.push('/login')
+}
+</script>

src/main.js

@@ -1,22 +1,17 @@
-import './assets/main.css'
-
 import { createApp } from 'vue'
 import App from './App.vue'
+import router from './router' // 1. 导入我们创建的 router
+
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
-import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
-
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 
 const app = createApp(App)
 
-app.use(ElementPlus, {
-  locale: zhCn,
-})
-
-// 注册所有图标
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
   app.component(key, component)
 }
 
+app.use(ElementPlus)
+app.use(router) // 2. 在这里使用 router
 app.mount('#app')

src/router/index.js

@@ -0,0 +1,59 @@
+import { createRouter, createWebHistory } from 'vue-router'
+
+const router = createRouter({
+    history: createWebHistory(import.meta.env.BASE_URL),
+    routes: [
+        {
+            path: '/',
+            component: () => import('../layouts/MainLayout.vue'),
+            children: [
+                {
+                    path: '', // 默认访问 / 显示工单管理
+                    name: 'home',
+                    component: () => import('../views/TicketManagement.vue'),
+                    meta: { requiresAuth: true }
+                },
+                {
+                    path: 'stats', // 访问 /stats
+                    name: 'stats',
+                    component: () => import('../views/StatsView.vue'),
+                    meta: { requiresAuth: true }
+                }
+            ]
+        },
+        {
+            path: '/login',
+            name: 'login',
+            component: () => import('../views/LoginView.vue')    // 懒加载登录组件，
+        },
+    ]
+})
+
+
+// 全局前置守卫
+router.beforeEach((to, from, next) => {
+    // 1. 尝试从 localStorage 或 sessionStorage 获取 Token
+    const token = localStorage.getItem('token') || sessionStorage.getItem('token');
+
+    // 2. 判断目标路由是否需要登录权限
+    // matches 可以检查嵌套路由中父级或子级是否有 requiresAuth
+    const isRequiresAuth = to.matched.some(record => record.meta.requiresAuth);
+
+    if (isRequiresAuth && !token) {
+        // 3. 如果需要登录但没有 Token，强制拦截并跳转到登录页
+        // 顺便把当前想去的页面路径传给登录页，方便登录后跳回来（可选增强逻辑）
+        next({
+            name: 'login',
+            query: { redirect: to.fullPath }
+        });
+    } else if (to.name === 'login' && token) {
+
+        // 4. 如果用户已经登录了，还想手动输入 /login 去登录页，直接把他弹回首页
+        next({ name: 'home' });
+    } else {
+        // 5. 否则直接放行
+        next();
+    }
+});
+
+export default router

src/utils/request.js

@@ -0,0 +1,45 @@
+import axios from 'axios'
+import { ElMessage } from 'element-plus'
+import router from '@/router'
+
+const service = axios.create({
+    baseURL: '/api',
+    timeout: 10000
+})
+
+// 请求拦截器
+service.interceptors.request.use(
+    config => {
+        // 自动获取 Token（兼顾两种存储方式）
+        const token = localStorage.getItem('token') || sessionStorage.getItem('token')
+        if (token) {
+            config.headers['Authorization'] = `Bearer ${token}`
+        }
+        return config
+    },
+    error => Promise.reject(error)
+)
+
+// 响应拦截器
+service.interceptors.response.use(
+    response => response.data,
+    error => {
+        // 这里的 error.response.data 就是你发给我的那一长串报错 JSON
+        if (error.response && error.response.status === 500) {
+            const msg = error.response.data.message;
+            if (msg === 'The token is expired.') {
+                // 关键：发现过期，立刻清空！
+                localStorage.clear();
+                sessionStorage.clear();
+
+                ElMessage.error('会话已过期，请重新登录');
+
+                // 此时再跳转，守卫检查没有 token，就能进 /login 了
+                router.push('/login');
+            }
+        }
+        return Promise.reject(error);
+    }
+)
+
+export default service

src/views/LoginView.vue

@@ -0,0 +1,367 @@
+<template>
+  <div class="ark-wrapper">
+    <div class="grid-bg"></div>
+    <div class="scan-line"></div>
+
+    <div class="login-container">
+      <transition name="ark-fade" appear>
+        <div class="ark-card">
+          <div class="corner-decorator top-left"></div>
+          <div class="corner-decorator bottom-right"></div>
+
+          <div class="card-header">
+            <div class="brand-icon">
+              <el-icon>
+                <DataBoard />
+              </el-icon>
+            </div>
+            <div class="brand-text">
+              <h1 class="title">方舟工单</h1>
+              <span class="sub-text">ARK TICKET SYSTEM v3.0</span>
+            </div>
+          </div>
+
+          <div class="system-monitor">
+            <span class="label">STATUS:</span>
+            <span class="value online">ENCRYPTED CONNECTION</span>
+          </div>
+
+          <el-form :model="loginForm" :rules="loginRules" ref="loginFormRef" class="ark-form">
+            <el-form-item prop="username">
+              <div class="input-prefix">ID</div>
+              <el-input v-model="loginForm.username" placeholder="工员编号" class="ark-input" />
+            </el-form-item>
+
+            <el-form-item prop="password">
+              <div class="input-prefix">KEY</div>
+              <el-input v-model="loginForm.password" type="password" placeholder="访问密钥" show-password
+                class="ark-input" />
+            </el-form-item>
+
+            <div class="options-bar">
+              <el-checkbox v-model="rememberMe">保持认证状态</el-checkbox>
+            </div>
+
+            <!--loading为true时候,会转圈圈-->
+            <el-button type="primary" class="ark-btn" @click="handleLogin" :loading="loading">
+
+              <div class="btn-content">
+                <span class="main-btn-text">INITIALIZE / 启动</span>
+              </div>
+            </el-button>
+          </el-form>
+
+          <div class="card-footer">
+            <span class="code">SECURE PROTOCOL 801-ARK</span>
+          </div>
+        </div>
+      </transition>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue';
+import { DataBoard } from '@element-plus/icons-vue';
+import { ElMessage } from 'element-plus';
+import { userApi } from '@/api/ticket';
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+
+
+const loginForm = reactive({ username: '', password: '' });
+const rememberMe = ref(false);
+const loading = ref(false);
+const loginFormRef = ref(null);
+
+const loginRules = reactive({
+  username: [{ required: true, message: '请输入工员编号', trigger: 'blur' }],
+  password: [{ required: true, message: '请输入密钥', trigger: 'blur' }]
+});
+
+const handleLogin = async () => {
+  if (!loginFormRef.value) return;
+  try {
+    await loginFormRef.value.validate();
+    loading.value = true;
+
+    const res = await userApi.login(loginForm.username, loginForm.password);
+
+    // 注意：这里由于你之前的封装，可能需要判断 res.data.code 还是 res.code
+    // 如果用了拦截器，直接判断 res.code
+    if (res.code === 200) {
+      const token = res.data.token;
+      const userInfo = JSON.stringify(res.data.user_info);
+
+      // --- 核心逻辑开始 ---
+      if (rememberMe.value) {
+        // 勾选了：存入 localStorage，实现持久化
+        localStorage.setItem('token', token);
+        localStorage.setItem('user_info', userInfo);
+      } else {
+        // 没勾选：存入 sessionStorage，关闭标签页即失效
+        sessionStorage.setItem('token', token);
+        sessionStorage.setItem('user_info', userInfo);
+      }
+      // --- 核心逻辑结束 ---
+
+      ElMessage.success('身份验证通过，方舟系统加载中...');
+
+      setTimeout(() => {
+        router.push('/');
+      }, 1000);
+    } else {
+      ElMessage.error(res.message || '登录失败');
+    }
+  } catch (error) {
+    console.error('Login Error:', error);
+  } finally {
+    loading.value = false;
+  }
+};
+</script>
+
+<style scoped>
+/* 1. 全局背景：工业网格风格 */
+.ark-wrapper {
+  position: relative;
+  width: 100vw;
+  height: 100vh;
+  background-color: #0b111a;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+}
+
+.grid-bg {
+  position: absolute;
+  inset: 0;
+  background-image:
+    linear-gradient(rgba(0, 242, 255, 0.05) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(0, 242, 255, 0.05) 1px, transparent 1px);
+  background-size: 40px 40px;
+  mask-image: radial-gradient(circle at center, black, transparent 80%);
+}
+
+.scan-line {
+  position: absolute;
+  width: 100%;
+  height: 2px;
+  background: linear-gradient(90deg, transparent, rgba(0, 242, 255, 0.2), transparent);
+  top: 0;
+  animation: scan 4s linear infinite;
+}
+
+@keyframes scan {
+  0% {
+    top: -10%;
+  }
+
+  100% {
+    top: 110%;
+  }
+}
+
+/* 2. 方舟卡片 */
+.ark-card {
+  position: relative;
+  width: 420px;
+  background: rgba(13, 22, 34, 0.85);
+  border: 1px solid rgba(0, 242, 255, 0.3);
+  padding: 40px;
+  box-shadow: 0 0 40px rgba(0, 242, 255, 0.1), inset 0 0 20px rgba(0, 242, 255, 0.05);
+  backdrop-filter: blur(10px);
+}
+
+/* 装饰性角标 */
+.corner-decorator {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  border-color: #00f2ff;
+  border-style: solid;
+}
+
+.top-left {
+  top: -2px;
+  left: -2px;
+  border-width: 3px 0 0 3px;
+}
+
+.bottom-right {
+  bottom: -2px;
+  right: -2px;
+  border-width: 0 3px 3px 0;
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  margin-bottom: 30px;
+}
+
+.brand-icon {
+  background: rgba(0, 242, 255, 0.1);
+  padding: 10px;
+  border: 1px solid #00f2ff;
+  display: flex;
+  color: #00f2ff;
+  clip-path: polygon(20% 0%, 100% 0%, 100% 80%, 80% 100%, 0% 100%, 0% 20%);
+}
+
+.title {
+  color: #fff;
+  font-size: 24px;
+  margin: 0;
+  letter-spacing: 2px;
+}
+
+.sub-text {
+  color: #00f2ff;
+  font-size: 10px;
+  opacity: 0.7;
+}
+
+/* 3. 监控条 */
+.system-monitor {
+  background: rgba(0, 0, 0, 0.4);
+  padding: 5px 12px;
+  margin-bottom: 25px;
+  border-left: 3px solid #00f2ff;
+  font-family: monospace;
+  font-size: 11px;
+}
+
+.system-monitor .label {
+  color: #64748b;
+  margin-right: 10px;
+}
+
+.system-monitor .value {
+  color: #22c55e;
+  text-shadow: 0 0 5px #22c55e;
+}
+
+/* 4. 输入框定制 */
+.input-prefix {
+  position: absolute;
+  left: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 10;
+  font-size: 10px;
+  color: #00f2ff;
+  font-weight: bold;
+  opacity: 0.6;
+}
+
+:deep(.ark-input .el-input__wrapper) {
+  background: rgba(0, 242, 255, 0.03) !important;
+  box-shadow: none !important;
+  border: 1px solid rgba(0, 242, 255, 0.2);
+  border-radius: 0;
+  /* 工业风通常使用直角 */
+  height: 50px;
+  padding-left: 45px;
+}
+
+:deep(.ark-input .is-focus) {
+  border-color: #00f2ff !important;
+  background: rgba(0, 242, 255, 0.08) !important;
+}
+
+/* 5. 启动按钮 */
+.ark-btn {
+  width: 100%;
+  height: 50px;
+  background: transparent !important;
+  border: 1px solid #00f2ff !important;
+  color: #00f2ff !important;
+  border-radius: 0;
+  position: relative;
+  transition: all 0.3s;
+  font-weight: bold;
+}
+
+.ark-btn:hover {
+  background: #00f2ff !important;
+  color: #000 !important;
+  box-shadow: 0 0 20px rgba(0, 242, 255, 0.4);
+}
+
+.options-bar {
+  margin: 15px 0 25px;
+}
+
+:deep(.el-checkbox__label) {
+  color: #64748b;
+  font-size: 12px;
+}
+
+:deep(.el-checkbox__inner) {
+  background: transparent;
+  border-color: #334155;
+}
+
+.card-footer {
+  margin-top: 30px;
+  text-align: right;
+  border-top: 1px dashed rgba(0, 242, 255, 0.1);
+  padding-top: 15px;
+}
+
+.code {
+  font-family: monospace;
+  font-size: 10px;
+  color: #334155;
+}
+
+/* 入场动画 */
+.ark-fade-enter-active {
+  transition: all 0.6s ease-out;
+}
+
+.ark-fade-enter-from {
+  opacity: 0;
+  transform: scale(1.1);
+  filter: brightness(2);
+}
+
+
+/* 1. 核心修复：禁止卡片内非交互元素的文本选中 */
+.ark-card,
+.card-header,
+.brand-text,
+.title,
+.sub-text,
+.system-monitor,
+.options-bar,
+.card-footer,
+.code,
+.input-prefix {
+  user-select: none;
+  /* 禁止选中文字 */
+  -webkit-user-select: none;
+  /* 兼容 Safari */
+  -moz-user-select: none;
+  /* 兼容 Firefox */
+  -ms-user-select: none;
+  /* 兼容 IE */
+  cursor: default;
+  /* 强制鼠标指针为标准箭头，不变成 I 型 */
+}
+
+/* 2. 确保输入框内部依然可以正常输入和选中（不受父级影响） */
+:deep(.el-input__inner) {
+  user-select: text !important;
+  cursor: text !important;
+}
+
+/* 3. 确保复选框的 Label 也不会被选中（防止点击勾选时变蓝） */
+:deep(.el-checkbox) {
+  user-select: none;
+}
+</style>

src/views/StatsView.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="stats-view">
+    <el-card>
+      <template #header>
+        <h2>数据统计</h2>
+      </template>
+      <p>数据统计页面正在建设中...</p>
+    </el-card>
+  </div>
+</template>
+
+<script setup></script>

src/views/TicketManagement.vue

@@ -101,10 +101,9 @@ const initGlobalStats = async () => {
     // 请求第一页，且不带任何筛选条件（filters）
     // 目的只是为了拿到全量数据来统计卡片
     const response = await ticketApi.getTickets({ page: 1, limit: 1000 })
-    const resData = response.data
+    if (response.code) {
-    if (resData.code) {
+      const allData = response.data.data
-      const allData = resData.data.data
+      allStats.total = response.data.total
-      allStats.total = resData.data.total
       allStats.pending = allData.filter(t => t.is_complete === '未分配').length
       allStats.ongoing = allData.filter(t => t.is_complete === '进行中').length
       allStats.completed = allData.filter(t => t.is_complete === '已完成' || t.is_complete === '已完结').length
@@ -126,10 +125,10 @@ const loadTickets = async () => {
       ...filters
     }
     const response = await ticketApi.getTickets(params)
-    const resData = response.data
+    console.log('工单列表响应:', response)
-    if (resData.code) {
+    if (response.code) {
-      tickets.value = resData.data.data
+      tickets.value = response.data.data
-      pagination.total = resData.data.total
+      pagination.total = response.total
     }
   } catch (error) {
     ElMessage.error('加载列表失败')