From 698ea070ae14a241b028d262c07caf2ec4aa04af Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8?= <frankyang0820@outlook.com>
Date: Sat, 9 May 2026 13:56:35 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AF=BC=E8=88=AA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pnpm-lock.yaml                             | 210 +++++++++++
 pnpm-workspace.yaml                        |   5 +
 src/api/modules/profile/personalCenter.ts  |   2 +-
 src/components/layout/Breadcrumb.vue       |  65 ++++
 src/components/layout/Header.vue           | 302 ++++++++++-----
 src/components/layout/Layout.vue           |  98 ++++-
 src/components/layout/Sidebar.vue          | 117 +++---
 src/components/layout/Tabs.vue             | 411 +++++++++++++++++++++
 src/stores/modules/tabs.ts                 | 229 ++++++++++++
 src/views/profile/personalCenter/index.vue |   6 +-
 10 files changed, 1289 insertions(+), 156 deletions(-)
 create mode 100644 pnpm-workspace.yaml
 create mode 100644 src/components/layout/Breadcrumb.vue
 create mode 100644 src/components/layout/Tabs.vue
 create mode 100644 src/stores/modules/tabs.ts

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6191d69..cf38f76 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -44,6 +44,9 @@ importers:
       pinia:
         specifier: ^3.0.4
         version: 3.0.4(typescript@5.9.3)(vue@3.5.29(typescript@5.9.3))
+      qrcode:
+        specifier: ^1.5.4
+        version: 1.5.4
       vue:
         specifier: ^3.5.29
         version: 3.5.29(typescript@5.9.3)
@@ -1262,6 +1265,14 @@ packages:
   alien-signals@3.1.2:
     resolution: {integrity: sha512-d9dYqZTS90WLiU0I5c6DHj/HcKkF8ZyGN3G5x8wSbslulz70KOxaqCT0hQCo9KOyhVqzqGojvNdJXoTumZOtcw==}
 
+  ansi-regex@5.0.1:
+    resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
+    engines: {node: '>=8'}
+
+  ansi-styles@4.3.0:
+    resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
+    engines: {node: '>=8'}
+
   ansi-styles@6.2.3:
     resolution: {integrity: sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==}
     engines: {node: '>=12'}
@@ -1323,6 +1334,10 @@ packages:
     resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==}
     engines: {node: '>= 0.4'}
 
+  camelcase@5.3.1:
+    resolution: {integrity: sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==}
+    engines: {node: '>=6'}
+
   caniuse-lite@1.0.30001774:
     resolution: {integrity: sha512-DDdwPGz99nmIEv216hKSgLD+D4ikHQHjBC/seF98N9CPqRX4M5mSxT9eTV6oyisnJcuzxtZy4n17yKKQYmYQOA==}
 
@@ -1338,10 +1353,20 @@ packages:
     resolution: {integrity: sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==}
     engines: {node: '>= 20.19.0'}
 
+  cliui@6.0.0:
+    resolution: {integrity: sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==}
+
   codepage@1.15.0:
     resolution: {integrity: sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA==}
     engines: {node: '>=0.8'}
 
+  color-convert@2.0.1:
+    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
+    engines: {node: '>=7.0.0'}
+
+  color-name@1.1.4:
+    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
+
   combined-stream@1.0.8:
     resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
     engines: {node: '>= 0.8'}
@@ -1398,6 +1423,10 @@ packages:
       supports-color:
         optional: true
 
+  decamelize@1.2.0:
+    resolution: {integrity: sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==}
+    engines: {node: '>=0.10.0'}
+
   deep-is@0.1.4:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
 
@@ -1421,6 +1450,9 @@ packages:
     resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
     engines: {node: '>=8'}
 
+  dijkstrajs@1.0.3:
+    resolution: {integrity: sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==}
+
   dom7@3.0.0:
     resolution: {integrity: sha512-oNlcUdHsC4zb7Msx7JN3K0Nro1dzJ48knvBOnDPKJ2GV9wl1i5vydJZUSyOfrkKFDZEud/jBsTk92S/VGSAe/g==}
 
@@ -1436,6 +1468,9 @@ packages:
     peerDependencies:
       vue: ^3.3.0
 
+  emoji-regex@8.0.0:
+    resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
+
   entities@7.0.1:
     resolution: {integrity: sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==}
     engines: {node: '>=0.12'}
@@ -1607,6 +1642,10 @@ packages:
     resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
     engines: {node: '>=8'}
 
+  find-up@4.1.0:
+    resolution: {integrity: sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==}
+    engines: {node: '>=8'}
+
   find-up@5.0.0:
     resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
     engines: {node: '>=10'}
@@ -1647,6 +1686,10 @@ packages:
     resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
     engines: {node: '>=6.9.0'}
 
+  get-caller-file@2.0.5:
+    resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
+    engines: {node: 6.* || 8.* || >= 10.*}
+
   get-intrinsic@1.3.0:
     resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
     engines: {node: '>= 0.4'}
@@ -1715,6 +1758,10 @@ packages:
     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
     engines: {node: '>=0.10.0'}
 
+  is-fullwidth-code-point@3.0.0:
+    resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
+    engines: {node: '>=8'}
+
   is-glob@4.0.3:
     resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
     engines: {node: '>=0.10.0'}
@@ -1803,6 +1850,10 @@ packages:
     resolution: {integrity: sha512-arhlxbFRmoQHl33a0Zkle/YWlmNwoyt6QNZEIJcqNbdrsix5Lvc4HyyI3EnwxTYlZYc32EbYrQ8SzEZ7dqgg9A==}
     engines: {node: '>=14'}
 
+  locate-path@5.0.0:
+    resolution: {integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==}
+    engines: {node: '>=8'}
+
   locate-path@6.0.0:
     resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
     engines: {node: '>=10'}
@@ -1966,14 +2017,26 @@ packages:
       oxlint-tsgolint:
         optional: true
 
+  p-limit@2.3.0:
+    resolution: {integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==}
+    engines: {node: '>=6'}
+
   p-limit@3.1.0:
     resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
     engines: {node: '>=10'}
 
+  p-locate@4.1.0:
+    resolution: {integrity: sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==}
+    engines: {node: '>=8'}
+
   p-locate@5.0.0:
     resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
     engines: {node: '>=10'}
 
+  p-try@2.2.0:
+    resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==}
+    engines: {node: '>=6'}
+
   path-browserify@1.0.1:
     resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
 
@@ -2025,6 +2088,10 @@ packages:
   pkg-types@2.3.0:
     resolution: {integrity: sha512-SIqCzDRg0s9npO5XQ3tNZioRY1uK06lA41ynBC1YmFTmnY6FjUjVt6s4LoADmwoig1qqD0oK8h1p/8mlMx8Oig==}
 
+  pngjs@5.0.0:
+    resolution: {integrity: sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==}
+    engines: {node: '>=10.13.0'}
+
   postcss-selector-parser@7.1.1:
     resolution: {integrity: sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg==}
     engines: {node: '>=4'}
@@ -2056,6 +2123,11 @@ packages:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
 
+  qrcode@1.5.4:
+    resolution: {integrity: sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==}
+    engines: {node: '>=10.13.0'}
+    hasBin: true
+
   quansync@0.2.11:
     resolution: {integrity: sha512-AifT7QEbW9Nri4tAwR5M/uzpBuqfZf+zwaEM/QkzEjj7NBuFD2rBuy0K3dE+8wltbezDV7JMA0WfnCPYRSYbXA==}
 
@@ -2074,6 +2146,13 @@ packages:
     resolution: {integrity: sha512-9u/XQ1pvrQtYyMpZe7DXKv2p5CNvyVwzUB6uhLAnQwHMSgKMBR62lc7AHljaeteeHXn11XTAaLLUVZYVZyuRBQ==}
     engines: {node: '>= 20.19.0'}
 
+  require-directory@2.1.1:
+    resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
+    engines: {node: '>=0.10.0'}
+
+  require-main-filename@2.0.0:
+    resolution: {integrity: sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==}
+
   reusify@1.1.0:
     resolution: {integrity: sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==}
     engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
@@ -2113,6 +2192,9 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
+  set-blocking@2.0.0:
+    resolution: {integrity: sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==}
+
   shebang-command@2.0.0:
     resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
     engines: {node: '>=8'}
@@ -2156,6 +2238,14 @@ packages:
   ssr-window@3.0.0:
     resolution: {integrity: sha512-q+8UfWDg9Itrg0yWK7oe5p/XRCJpJF9OBtXfOPgSJl+u3Xd5KI328RUEvUqSMVM9CiQUEf1QdBzJMkYGErj9QA==}
 
+  string-width@4.2.3:
+    resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
+    engines: {node: '>=8'}
+
+  strip-ansi@6.0.1:
+    resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
+    engines: {node: '>=8'}
+
   strip-literal@3.1.0:
     resolution: {integrity: sha512-8r3mkIM/2+PpjHoOtiAW8Rg3jJLHaV7xPwG+YRGrv6FP0wwk/toTpATxWYOW0BKdWwl82VT2tFYi5DlROa0Mxg==}
 
@@ -2382,6 +2472,9 @@ packages:
   webpack-virtual-modules@0.6.2:
     resolution: {integrity: sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==}
 
+  which-module@2.0.1:
+    resolution: {integrity: sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==}
+
   which@2.0.2:
     resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
     engines: {node: '>= 8'}
@@ -2407,6 +2500,10 @@ packages:
     resolution: {integrity: sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA==}
     engines: {node: '>=0.8'}
 
+  wrap-ansi@6.2.0:
+    resolution: {integrity: sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==}
+    engines: {node: '>=8'}
+
   wsl-utils@0.1.0:
     resolution: {integrity: sha512-h3Fbisa2nKGPxCpm89Hk33lBLsnaGBvctQopaBSOW/uIs6FTe1ATyAnKFJrzVs9vpGdsTe73WF3V4lIsk4Gacw==}
     engines: {node: '>=18'}
@@ -2420,6 +2517,9 @@ packages:
     resolution: {integrity: sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==}
     engines: {node: '>=12'}
 
+  y18n@4.0.3:
+    resolution: {integrity: sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==}
+
   yallist@3.1.1:
     resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
 
@@ -2428,6 +2528,14 @@ packages:
     engines: {node: '>= 14.6'}
     hasBin: true
 
+  yargs-parser@18.1.3:
+    resolution: {integrity: sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==}
+    engines: {node: '>=6'}
+
+  yargs@15.4.1:
+    resolution: {integrity: sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==}
+    engines: {node: '>=8'}
+
   yocto-queue@0.1.0:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
@@ -3516,6 +3624,12 @@ snapshots:
 
   alien-signals@3.1.2: {}
 
+  ansi-regex@5.0.1: {}
+
+  ansi-styles@4.3.0:
+    dependencies:
+      color-convert: 2.0.1
+
   ansi-styles@6.2.3: {}
 
   ansis@4.2.0: {}
@@ -3575,6 +3689,8 @@ snapshots:
       es-errors: 1.3.0
       function-bind: 1.1.2
 
+  camelcase@5.3.1: {}
+
   caniuse-lite@1.0.30001774: {}
 
   cfb@1.2.2:
@@ -3590,8 +3706,20 @@ snapshots:
     dependencies:
       readdirp: 5.0.0
 
+  cliui@6.0.0:
+    dependencies:
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+      wrap-ansi: 6.2.0
+
   codepage@1.15.0: {}
 
+  color-convert@2.0.1:
+    dependencies:
+      color-name: 1.1.4
+
+  color-name@1.1.4: {}
+
   combined-stream@1.0.8:
     dependencies:
       delayed-stream: 1.0.0
@@ -3633,6 +3761,8 @@ snapshots:
     dependencies:
       ms: 2.1.3
 
+  decamelize@1.2.0: {}
+
   deep-is@0.1.4: {}
 
   default-browser-id@5.0.1: {}
@@ -3649,6 +3779,8 @@ snapshots:
   detect-libc@2.1.2:
     optional: true
 
+  dijkstrajs@1.0.3: {}
+
   dom7@3.0.0:
     dependencies:
       ssr-window: 3.0.0
@@ -3681,6 +3813,8 @@ snapshots:
     transitivePeerDependencies:
       - '@vue/composition-api'
 
+  emoji-regex@8.0.0: {}
+
   entities@7.0.1: {}
 
   error-stack-parser-es@1.0.5: {}
@@ -3896,6 +4030,11 @@ snapshots:
     dependencies:
       to-regex-range: 5.0.1
 
+  find-up@4.1.0:
+    dependencies:
+      locate-path: 5.0.0
+      path-exists: 4.0.0
+
   find-up@5.0.0:
     dependencies:
       locate-path: 6.0.0
@@ -3927,6 +4066,8 @@ snapshots:
 
   gensync@1.0.0-beta.2: {}
 
+  get-caller-file@2.0.5: {}
+
   get-intrinsic@1.3.0:
     dependencies:
       call-bind-apply-helpers: 1.0.2
@@ -3987,6 +4128,8 @@ snapshots:
 
   is-extglob@2.1.1: {}
 
+  is-fullwidth-code-point@3.0.0: {}
+
   is-glob@4.0.3:
     dependencies:
       is-extglob: 2.1.1
@@ -4050,6 +4193,10 @@ snapshots:
       pkg-types: 2.3.0
       quansync: 0.2.11
 
+  locate-path@5.0.0:
+    dependencies:
+      p-locate: 4.1.0
+
   locate-path@6.0.0:
     dependencies:
       p-locate: 5.0.0
@@ -4208,14 +4355,24 @@ snapshots:
       '@oxlint/binding-win32-ia32-msvc': 1.50.0
       '@oxlint/binding-win32-x64-msvc': 1.50.0
 
+  p-limit@2.3.0:
+    dependencies:
+      p-try: 2.2.0
+
   p-limit@3.1.0:
     dependencies:
       yocto-queue: 0.1.0
 
+  p-locate@4.1.0:
+    dependencies:
+      p-limit: 2.3.0
+
   p-locate@5.0.0:
     dependencies:
       p-limit: 3.1.0
 
+  p-try@2.2.0: {}
+
   path-browserify@1.0.1: {}
 
   path-exists@4.0.0: {}
@@ -4255,6 +4412,8 @@ snapshots:
       exsolve: 1.0.8
       pathe: 2.0.3
 
+  pngjs@5.0.0: {}
+
   postcss-selector-parser@7.1.1:
     dependencies:
       cssesc: 3.0.0
@@ -4278,6 +4437,12 @@ snapshots:
 
   punycode@2.3.1: {}
 
+  qrcode@1.5.4:
+    dependencies:
+      dijkstrajs: 1.0.3
+      pngjs: 5.0.0
+      yargs: 15.4.1
+
   quansync@0.2.11: {}
 
   queue-microtask@1.2.3: {}
@@ -4291,6 +4456,10 @@ snapshots:
 
   readdirp@5.0.0: {}
 
+  require-directory@2.1.1: {}
+
+  require-main-filename@2.0.0: {}
+
   reusify@1.1.0: {}
 
   rfdc@1.4.1: {}
@@ -4350,6 +4519,8 @@ snapshots:
 
   semver@7.7.4: {}
 
+  set-blocking@2.0.0: {}
+
   shebang-command@2.0.0:
     dependencies:
       shebang-regex: 3.0.0
@@ -4387,6 +4558,16 @@ snapshots:
 
   ssr-window@3.0.0: {}
 
+  string-width@4.2.3:
+    dependencies:
+      emoji-regex: 8.0.0
+      is-fullwidth-code-point: 3.0.0
+      strip-ansi: 6.0.1
+
+  strip-ansi@6.0.1:
+    dependencies:
+      ansi-regex: 5.0.1
+
   strip-literal@3.1.0:
     dependencies:
       js-tokens: 9.0.1
@@ -4635,6 +4816,8 @@ snapshots:
 
   webpack-virtual-modules@0.6.2: {}
 
+  which-module@2.0.1: {}
+
   which@2.0.2:
     dependencies:
       isexe: 2.0.0
@@ -4651,6 +4834,12 @@ snapshots:
 
   word@0.3.0: {}
 
+  wrap-ansi@6.2.0:
+    dependencies:
+      ansi-styles: 4.3.0
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+
   wsl-utils@0.1.0:
     dependencies:
       is-wsl: 3.1.1
@@ -4667,8 +4856,29 @@ snapshots:
 
   xml-name-validator@4.0.0: {}
 
+  y18n@4.0.3: {}
+
   yallist@3.1.1: {}
 
   yaml@2.8.2: {}
 
+  yargs-parser@18.1.3:
+    dependencies:
+      camelcase: 5.3.1
+      decamelize: 1.2.0
+
+  yargs@15.4.1:
+    dependencies:
+      cliui: 6.0.0
+      decamelize: 1.2.0
+      find-up: 4.1.0
+      get-caller-file: 2.0.5
+      require-directory: 2.1.1
+      require-main-filename: 2.0.0
+      set-blocking: 2.0.0
+      string-width: 4.2.3
+      which-module: 2.0.1
+      y18n: 4.0.3
+      yargs-parser: 18.1.3
+
   yocto-queue@0.1.0: {}
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
new file mode 100644
index 0000000..7ccf592
--- /dev/null
+++ b/pnpm-workspace.yaml
@@ -0,0 +1,5 @@
+allowBuilds:
+  '@parcel/watcher': set this to true or false
+  es5-ext: set this to true or false
+  esbuild: set this to true or false
+  vue-demi: set this to true or false
diff --git a/src/api/modules/profile/personalCenter.ts b/src/api/modules/profile/personalCenter.ts
index e0c1003..d1188e3 100644
--- a/src/api/modules/profile/personalCenter.ts
+++ b/src/api/modules/profile/personalCenter.ts
@@ -30,7 +30,7 @@ export async function bindEmailApi(data: BindEmailParams): Promise<void> {
 
 // 修改用户名
 export async function editUsernameApi(data: EditUsernameParams): Promise<void> {
-  return request.post('/user/editUser', data);
+  return request.post('/user/editUserName', data);
 }
 
 // 验证码修改密码（统一接口）
diff --git a/src/components/layout/Breadcrumb.vue b/src/components/layout/Breadcrumb.vue
new file mode 100644
index 0000000..2b37086
--- /dev/null
+++ b/src/components/layout/Breadcrumb.vue
@@ -0,0 +1,65 @@
+<template>
+  <div class="breadcrumb-container">
+    <el-breadcrumb separator="/">
+      <el-breadcrumb-item
+        v-for="(item, index) in breadcrumbList"
+        :key="index"
+        :to="item.path"
+      >
+        {{ item.title }}
+      </el-breadcrumb-item>
+    </el-breadcrumb>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useTabsStore } from '@/stores/modules/tabs'
+
+interface BreadcrumbItem {
+  title: string
+  path: string
+}
+
+const tabsStore = useTabsStore()
+
+// 从 tabs store 获取当前激活标签页的面包屑
+const breadcrumbList = computed<BreadcrumbItem[]>(() => tabsStore.currentBreadcrumbs)
+</script>
+
+<style scoped lang="scss">
+.breadcrumb-container {
+  padding: 12px 16px;
+  background: #fff;
+  border-bottom: 1px solid var(--el-border-color-light);
+
+  :deep(.el-breadcrumb) {
+    font-size: 14px;
+
+    .el-breadcrumb__item {
+      .el-breadcrumb__inner {
+        color: #606266;
+        font-weight: normal;
+
+        &:hover {
+          color: var(--el-color-primary);
+        }
+
+        &.is-link {
+          color: #606266;
+        }
+      }
+
+      &:last-child {
+        .el-breadcrumb__inner {
+          color: #909399;
+          cursor: default;
+
+          &:hover {
+            color: #909399;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/layout/Header.vue b/src/components/layout/Header.vue
index 8a76bc0..1d79f70 100644
--- a/src/components/layout/Header.vue
+++ b/src/components/layout/Header.vue
@@ -1,116 +1,242 @@
 <template>
-    <header>
-        <div class="logo"></div>
+  <header class="layout-header">
+    <!-- 左侧：Logo 和系统名称 -->
+    <div class="header-left">
+      <div class="logo">
+        <img src="@/assets/images/logo.webp" alt="logo" />
+        <span class="system-name">Admin System</span>
+      </div>
+    </div>
+
+    <!-- 右侧：功能按钮和用户信息 -->
+    <div class="header-right">
+      <!-- 全屏 -->
+      <el-tooltip :content="isFullscreen ? '退出全屏' : '全屏'">
+        <el-button :icon="isFullscreen ? Crop : FullScreen" circle @click="toggleFullscreen" />
+      </el-tooltip>
+
+      <!-- 语言选择 -->
+      <LanguageSelect v-model="languageStore.lang" @change="languageStore.changeLang" />
+
+      <!-- 用户信息下拉菜单 -->
+      <el-dropdown @command="handleCommand" class="user-dropdown">
         <div class="user-info">
-            <LanguageSelect v-model="languageStore.lang" @change="languageStore.changeLang" />
-            <el-dropdown @command="handleCommand">
-                <el-button class="user-button">
-                    {{ activeUserName }}<el-icon class="el-icon--right">
-                        <ArrowDownBold />
-                    </el-icon>
-                </el-button>
-                <template #dropdown>
-                    <el-dropdown-menu>
-                        <el-dropdown-item v-for="item in dropdownItems" :key="item.command" :command="item.command">
-                            {{ item.label }}
-                        </el-dropdown-item>
-                    </el-dropdown-menu>
-                </template>
-            </el-dropdown>
+          <el-avatar :size="32" :src="userAvatar" class="user-avatar">
+            <el-icon><User /></el-icon>
+          </el-avatar>
+          <span class="username">{{ activeUserName }}</span>
+          <el-icon class="dropdown-icon"><ArrowDown /></el-icon>
         </div>
-    </header>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item command="profile">
+              <el-icon><User /></el-icon>
+              个人中心
+            </el-dropdown-item>
+            <el-dropdown-item command="password">
+              <el-icon><Lock /></el-icon>
+              修改密码
+            </el-dropdown-item>
+            <el-dropdown-item divided command="logout">
+              <el-icon><SwitchButton /></el-icon>
+              退出登录
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+    </div>
+  </header>
 </template>
 
 <script setup lang="ts">
-import { ArrowDownBold } from '@element-plus/icons-vue'
-//引入语言选择组件和导入Pinia状态
-import LanguageSelect from '@/components/LanguageSelect/index.vue'
-import { useLanguageStore } from '@/stores/modules/language'
-
-//引入store和storage
+import {
+  Bell,
+  Sunny,
+  Moon,
+  FullScreen,
+  Crop,
+  User,
+  Lock,
+  SwitchButton,
+  ArrowDown
+} from '@element-plus/icons-vue'
 import { useUserStore } from '@/stores/modules/user'
+import { useLanguageStore } from '@/stores/modules/language'
+import LanguageSelect from '@/components/LanguageSelect/index.vue'
 import { getStorage } from '@/utils/storage'
 
-//定义路由/Store实例
 const router = useRouter()
 const userStore = useUserStore()
 const languageStore = useLanguageStore()
-//获取用户信息
+
+// 用户信息
 const userInfo = getStorage<any>('userInfo')
+const activeUserName = ref(userInfo?.username || 'Admin')
+const userAvatar = ref(userInfo?.avatar || '')
+const unreadCount = ref(3) // 未读消息数量
 
-//用户操作实例
-const activeUserName = ref(userInfo?.username || '')
-const activeItem = ref('currentUser')
-const dropdownItems = [
-    // { label: '切换账户', command: 'account' },
-    { label: '修改密码', command: 'password' },
-    { label: '退出登录', command: 'logout' }
-]
-
-
-const handleAccount = async () => {
-    userStore.switchAccount()
-    await router.push('/user/login')
+// 全屏相关
+const isFullscreen = ref(false)
+const toggleFullscreen = () => {
+  if (!document.fullscreenElement) {
+    document.documentElement.requestFullscreen()
+    isFullscreen.value = true
+  } else {
+    if (document.exitFullscreen) {
+      document.exitFullscreen()
+      isFullscreen.value = false
+    }
+  }
 }
 
-const handleChangePassword = () => {
-    router.push('/user/change-password')
+// 监听全屏变化
+onMounted(() => {
+  document.addEventListener('fullscreenchange', () => {
+    isFullscreen.value = !!document.fullscreenElement
+  })
+})
+
+// 消息通知
+const handleNotification = () => {
+  ElMessage.info('暂无新消息')
+  unreadCount.value = 0
 }
 
+// 用户操作
+const handleCommand = (command: string) => {
+  switch (command) {
+    case 'profile':
+      router.push('/profile/personal-center')
+      break
+    case 'password':
+      router.push('/user/change-password')
+      break
+    case 'logout':
+      handleLogout()
+      break
+  }
+}
+
+// 退出登录
 const handleLogout = () => {
-    // 示例：退出登录逻辑
+  ElMessageBox.confirm('确定要退出登录吗？', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
     const deviceNo = getStorage('device_no') as string
     userStore.logout({ device_no: String(deviceNo) })
-}
-
-// 处理菜单项点击
-const handleCommand = (command: string) => {
-    activeItem.value = command
-    // 不同指令的业务逻辑
-    switch (command) {
-        case 'currentUser':
-            // 点击当前用户：无操作（仅选中）
-            break
-        case 'account':
-            // 这里添加切换账户的逻辑（如弹窗/路由跳转）
-            handleAccount()
-            break
-        case 'password':
-            // 示例：跳转到修改密码页
-            handleChangePassword()
-            break
-        case 'logout':
-            // 示例：退出登录逻辑
-            handleLogout()
-            break
-    }
+  }).catch(() => {
+    // 取消退出
+  })
 }
 </script>
 
 <style scoped lang="scss">
-header {
-    height: 60px;
-    border-bottom: solid 1px var(--el-menu-border-color);
-    padding: 0 10px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+.layout-header {
+  height: 60px;
+  background: #fff;
+  border-bottom: 1px solid var(--el-border-color-light);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 20px;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
 
-    .user-info {
-        .el-select {
-            margin-right: 10px;
-        }
-        .el-dropdown {
-            .user-button {
-                border: none;
-                &:focus-visible {
-                    outline: none;
-                }
-                &:hover {
-                    background-color: transparent;
-                }
-            }
-        }
+  .header-left {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+
+    .logo {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+
+      img {
+        height: 32px;
+        width: auto;
+      }
+
+      .system-name {
+        font-size: 18px;
+        font-weight: 600;
+        color: var(--el-text-color-primary);
+      }
     }
+  }
+
+  .header-right {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+
+    .notification-badge {
+      :deep(.el-badge__content) {
+        transform: translateY(-50%) translateX(50%);
+      }
+    }
+
+    .el-button {
+      border: none;
+      background: transparent;
+      padding: 8px;
+      color: var(--el-text-color-regular);
+
+      &:hover {
+        background: var(--el-fill-color-light);
+        color: var(--el-color-primary);
+      }
+    }
+
+    .user-dropdown {
+      margin-left: 8px;
+      cursor: pointer;
+
+      .user-info {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 4px 8px;
+        border-radius: 4px;
+        transition: background 0.3s;
+
+        &:hover {
+          background: var(--el-fill-color-light);
+        }
+
+        .user-avatar {
+          background: var(--el-color-primary);
+        }
+
+        .username {
+          font-size: 14px;
+          color: var(--el-text-color-primary);
+          max-width: 100px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        .dropdown-icon {
+          font-size: 12px;
+          color: var(--el-text-color-regular);
+        }
+      }
+    }
+  }
 }
-</style>
\ No newline at end of file
+
+// 暗色模式适配
+:deep(.dark) {
+  .layout-header {
+    background: var(--el-bg-color);
+    border-bottom-color: var(--el-border-color-darker);
+  }
+}
+</style>
diff --git a/src/components/layout/Layout.vue b/src/components/layout/Layout.vue
index e2f9542..7c281cd 100644
--- a/src/components/layout/Layout.vue
+++ b/src/components/layout/Layout.vue
@@ -1,23 +1,89 @@
-<!-- src/components/layout/Layout.vue -->
-<template class="layout">
-    <section class="layout">
-        <!-- 左侧菜单：Sidebar -->
-        <Sidebar />
+<template>
+  <section class="layout">
+    <!-- 顶部导航栏：固定在顶部 -->
+    <Header />
 
-        <!-- 标红区域：MainContent（主内容区） -->
-        <section class="main-container">
-            <!-- Header -->
-            <Header />
+    <!-- 主体内容区域 -->
+    <section class="main-container">
+      <!-- 左侧侧边菜单：固定在左侧 -->
+      <Sidebar />
 
-            <!-- 内容路由视图 -->
-            <main>
-                <router-view/>
-            </main>
-        </section>
+      <!-- 右侧内容区：面包屑 + 页签 + 主体内容 -->
+      <section class="content-container">
+        <!-- 面包屑导航 -->
+        <Breadcrumb />
+
+        <!-- 页签标签栏 -->
+        <Tabs />
+
+        <!-- 主体内容区 -->
+        <main class="main-content">
+          <router-view v-slot="{ Component }">
+            <transition name="fade-transform" mode="out-in">
+              <KeepAlive>
+                <component :is="Component" :key="route.path" />
+              </KeepAlive>
+            </transition>
+          </router-view>
+        </main>
+      </section>
     </section>
+  </section>
 </template>
 
 <script setup lang="ts">
-import Sidebar from './Sidebar.vue'
 import Header from './Header.vue'
-</script>
\ No newline at end of file
+import Sidebar from './Sidebar.vue'
+import Breadcrumb from './Breadcrumb.vue'
+import Tabs from './Tabs.vue'
+
+const route = useRoute()
+
+</script>
+
+<style scoped lang="scss">
+.layout {
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+  background: var(--el-bg-color-page);
+
+  .main-container {
+    display: flex;
+    height: calc(100vh - 60px);
+    margin-top: 60px;
+
+    .content-container {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      margin-left: 200px;
+
+      .main-content {
+        flex: 1;
+        padding: 16px;
+        overflow-y: auto;
+        overflow-x: hidden;
+        background: var(--el-bg-color-page);
+      }
+    }
+  }
+}
+
+// 页面切换动画
+.fade-transform-enter-active,
+.fade-transform-leave-active {
+  transition: all 0.3s;
+}
+
+.fade-transform-enter-from {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+.fade-transform-leave-to {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+</style>
diff --git a/src/components/layout/Sidebar.vue b/src/components/layout/Sidebar.vue
index 7ec91c4..d9fdfec 100644
--- a/src/components/layout/Sidebar.vue
+++ b/src/components/layout/Sidebar.vue
@@ -1,34 +1,34 @@
 <template>
-  <aside>
-    <div class="sidebar-header">
-      <div class="logo">
-        <img src="@/assets/images/logo.webp" alt="logo" :router="true" />
-        <span>Admin System</span>
-      </div>
-    </div>
-
+  <aside class="sidebar">
     <!-- 菜单区域 -->
-    <el-menu class="menu" :unique-opened="true" :default-active="activeMenu" router>
+    <el-menu
+      class="sidebar-menu"
+      :unique-opened="true"
+      :default-active="activeMenu"
+      router
+    >
       <template v-for="menu in menuList" :key="menu.id">
         <!-- 无子菜单 -->
         <el-menu-item v-if="!menu.children || menu.children.length === 0" :index="menu.path">
-          <el-icon>
+          <el-icon v-if="menu.icon">
             <component :is="iconMap[menu.icon]" />
           </el-icon>
           <template #title>{{ menu.label }}</template>
         </el-menu-item>
 
+        <!-- 有子菜单 -->
         <el-sub-menu v-else :index="menu.path">
           <template #title>
-            <el-icon>
+            <el-icon v-if="menu.icon">
               <component :is="iconMap[menu.icon]" />
             </el-icon>
             <span>{{ menu.label }}</span>
           </template>
-          <el-menu-item v-for="subMenu in menu.children" :key="subMenu.id" :index="subMenu.path">
-<!--            <el-icon v-if="subMenu.icon">-->
-<!--              <component :is="iconMap[subMenu.icon]" />-->
-<!--            </el-icon>-->
+          <el-menu-item
+            v-for="subMenu in menu.children"
+            :key="subMenu.id"
+            :index="subMenu.path"
+          >
             <template #title>{{ subMenu.label }}</template>
           </el-menu-item>
         </el-sub-menu>
@@ -48,25 +48,22 @@ import {
   WarningFilled,
   Tools,
 } from '@element-plus/icons-vue'
-
-//获取格式化后的菜单列表
 import { useUserStore } from '@/stores/modules/user'
 
 const route = useRoute()
 const userStore = useUserStore()
-const menuList = ref<any[]>([])
 
-// 计算当前激活的菜单 index（取路由 fullPath 作为激活标识）
+// 计算当前激活的菜单 index
 const activeMenu = computed(() => {
-  return route.fullPath // 直接使用完整路径，和菜单 path 保持一致
-})
-// 组件挂载时异步加载菜单
-onMounted(async () => {
-  menuList.value = userStore.sideMenu || []
-  console.log('menuList.value', menuList.value)
+  return route.fullPath
 })
 
-//图标映射表
+// 获取完整菜单列表
+const menuList = computed(() => {
+  return userStore.sideMenu || []
+})
+
+// 图标映射表
 const iconMap: Record<string, any> = {
   HomeFilled,
   List,
@@ -77,36 +74,64 @@ const iconMap: Record<string, any> = {
   WarningFilled,
   Tools,
 }
-
-
 </script>
 
 <style scoped lang="scss">
-aside {
-  .sidebar-header {
-    height: 60px;
-    border-bottom: solid 1px var(--el-menu-border-color);
-    padding: 0 10px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+.sidebar {
+  position: fixed;
+  top: 60px;
+  left: 0;
+  bottom: 0;
+  width: 200px;
+  background: var(--el-bg-color-page);
+  border-right: 1px solid var(--el-border-color-light);
+  overflow-y: auto;
+  overflow-x: hidden;
+  z-index: 999;
 
-    .logo {
-      display: flex;
-      align-items: center;
+  .sidebar-menu {
+    height: 100%;
+    border: none;
+    background: transparent;
 
-      img {
-        width: 100px;
+    :deep(.el-menu-item) {
+      height: 50px;
+      line-height: 50px;
+
+      &.is-active {
+        background: var(--el-color-primary-light-9);
+        color: var(--el-color-primary);
+        border-right: 3px solid var(--el-color-primary);
+      }
+    }
+
+    :deep(.el-sub-menu) {
+      .el-sub-menu__title {
+        height: 50px;
+        line-height: 50px;
+      }
+
+      &.is-active {
+        > .el-sub-menu__title {
+          color: var(--el-color-primary);
+        }
       }
     }
   }
+}
 
-  .menu {
-    height: 100%;
-    border: none;
+// 暗色模式适配
+:deep(.dark) {
+  .sidebar {
+    background: var(--el-bg-color);
+    border-right-color: var(--el-border-color-darker);
 
-    :deep(.el-menu-item.is-active) {
-      background-color: var(--el-menu-hover-bg-color);
+    .sidebar-menu {
+      :deep(.el-menu-item) {
+        &.is-active {
+          background: var(--el-color-primary-dark-2);
+        }
+      }
     }
   }
 }
diff --git a/src/components/layout/Tabs.vue b/src/components/layout/Tabs.vue
new file mode 100644
index 0000000..11a2958
--- /dev/null
+++ b/src/components/layout/Tabs.vue
@@ -0,0 +1,411 @@
+<template>
+  <div class="tabs-container">
+    <el-tabs
+      v-model="tabsStore.activeTab"
+      type="card"
+      closable
+      @tab-click="handleTabClick"
+      @tab-remove="handleTabRemove"
+    >
+      <el-tab-pane
+        v-for="(tab, index) in tabsStore.tabs"
+        :key="tab.path"
+        :label="tab.title"
+        :name="tab.path"
+      >
+        <template #label>
+          <div
+            class="tab-label"
+            :class="{ 'is-context-active': contextMenuPath === tab.path }"
+            draggable="true"
+            @dragstart="handleDragStart($event, index)"
+            @dragover.prevent="handleDragOver($event, index)"
+            @drop="handleDrop($event, index)"
+            @dragend="handleDragEnd"
+            @contextmenu.prevent="handleContextMenu($event, tab.path)"
+          >
+            <span class="tab-text">{{ tab.title }}</span>
+          </div>
+        </template>
+      </el-tab-pane>
+    </el-tabs>
+
+    <!-- 右键菜单 -->
+    <el-dropdown
+      popper-class="el-droMenu"
+      :popper-style="style"
+      ref="contextMenuRef"
+      trigger="contextmenu"
+      @command="handleContextMenuCommand"
+      @visible-change="handleMenuVisibleChange"
+    >
+      <span class="context-menu-trigger"></span>
+      <template #dropdown>
+        <el-dropdown-menu>
+          <el-dropdown-item command="refresh">刷新当前页</el-dropdown-item>
+          <el-dropdown-item command="close">关闭当前</el-dropdown-item>
+          <el-dropdown-item command="closeOther">关闭其他</el-dropdown-item>
+          <el-dropdown-item command="closeLeft">关闭左侧</el-dropdown-item>
+          <el-dropdown-item command="closeRight">关闭右侧</el-dropdown-item>
+          <el-dropdown-item command="closeAll" divided>关闭全部</el-dropdown-item>
+        </el-dropdown-menu>
+      </template>
+    </el-dropdown>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useTabsStore } from '@/stores/modules/tabs'
+import type { TabItem } from '@/stores/modules/tabs'
+
+const router = useRouter()
+const route = useRoute()
+const tabsStore = useTabsStore()
+const contextMenuRef = ref()
+
+// 当前右键点击的页签路径
+let contextMenuPath = ''
+
+// 拖拽相关
+let dragIndex: number | null = null
+let dropIndex: number | null = null
+
+// 组件挂载后，检查是否需要跳转到保存的激活页面
+onMounted(() => {
+  // 如果当前路由不是保存的激活页面，则跳转
+  if (tabsStore.activeTab && tabsStore.activeTab !== route.path) {
+    const targetTab = tabsStore.tabs.find(item => item.path === tabsStore.activeTab)
+    if (targetTab) {
+      router.replace({ path: targetTab.path, query: targetTab.query })
+    }
+  }
+})
+
+// 监听路由变化，自动添加页签
+watch(
+  () => route.fullPath,
+  (newPath) => {
+    if (route.meta?.title && !route.meta?.isAuthPage) {
+      tabsStore.addTab({
+        title: route.meta.title as string,
+        path: route.path,
+        query: route.query
+      })
+    }
+  },
+  { immediate: true }
+)
+
+// 页签点击
+const handleTabClick = (tab: any) => {
+  const targetTab = tabsStore.tabs.find(item => item.path === tab.paneName)
+  if (targetTab) {
+    router.push({ path: targetTab.path, query: targetTab.query })
+  }
+}
+
+// 页签关闭
+const handleTabRemove = (path: string) => {
+  tabsStore.removeTab(path)
+  // 如果关闭的是当前页签，跳转到新的激活页签
+  if (path === route.path && tabsStore.activeTab) {
+    const targetTab = tabsStore.tabs.find(item => item.path === tabsStore.activeTab)
+    if (targetTab) {
+      router.push({ path: targetTab.path, query: targetTab.query })
+    }
+  }
+}
+
+// 右键菜单命令处理
+const handleContextMenuCommand = (command: string) => {
+  const currentPath = contextMenuPath || tabsStore.activeTab
+
+  switch (command) {
+    case 'refresh':
+      router.go(0)
+      break
+    case 'close':
+      if (currentPath) {
+        handleTabRemove(currentPath)
+      }
+      break
+    case 'closeOther':
+      if (currentPath) {
+        tabsStore.closeOtherTabs(currentPath)
+      }
+      break
+    case 'closeLeft':
+      if (currentPath) {
+        tabsStore.closeLeftTabs(currentPath)
+      }
+      break
+    case 'closeRight':
+      if (currentPath) {
+        tabsStore.closeRightTabs(currentPath)
+      }
+      break
+    case 'closeAll':
+      tabsStore.closeAllTabs()
+      router.push('/dashboard')
+      break
+  }
+}
+
+// 处理右键菜单显示/隐藏
+const handleMenuVisibleChange = (visible: boolean) => {
+  if (!visible) {
+    contextMenuPath = ''
+  }
+}
+const style = ref('')
+// 处理右键菜单点击
+const handleContextMenu = (e: MouseEvent, path: string) => {
+  contextMenuPath = path
+  // 右键时激活该标签并跳转
+  tabsStore.setActiveTab(path)
+  const targetTab = tabsStore.tabs.find(item => item.path === path)
+  if (targetTab && path !== route.path) {
+    router.push({ path: targetTab.path, query: targetTab.query })
+  }
+  // 手动触发 dropdown
+  const dropdown = contextMenuRef.value
+  if (dropdown) {
+    // 获取 dropdown 实例
+    const dropdownInstance = dropdown
+    // 计算菜单位置
+    const x = e.clientX
+    const y = e.clientY
+    // 使用 Element Plus 的内部方法显示菜单
+    dropdownInstance?.handleOpen()
+    // 设置菜单位置
+    nextTick().then(() => {
+      const menu = document.querySelector('.el-droMenu')
+      if (menu) {
+        style.value = `position: fixed; z-index: 9999; left: ${x}px; top: ${y}px;`
+         
+      }
+    })
+  }
+}
+
+// 拖拽开始
+const handleDragStart = (e: DragEvent, index: number) => {
+  dragIndex = index
+  if (e.dataTransfer) {
+    e.dataTransfer.effectAllowed = 'move'
+    e.dataTransfer.setData('text/plain', index.toString())
+  }
+  // 添加拖拽样式
+  const target = e.target as HTMLElement
+  target.classList.add('dragging')
+}
+
+// 拖拽经过
+const handleDragOver = (e: DragEvent, index: number) => {
+  e.preventDefault()
+  if (e.dataTransfer) {
+    e.dataTransfer.dropEffect = 'move'
+  }
+  dropIndex = index
+}
+
+// 拖拽结束
+const handleDragEnd = (e: DragEvent) => {
+  const target = e.target as HTMLElement
+  target.classList.remove('dragging')
+  dragIndex = null
+  dropIndex = null
+}
+
+// 拖拽放置
+const handleDrop = (e: DragEvent, index: number) => {
+  e.preventDefault()
+  if (dragIndex === null || dragIndex === index) {
+    return
+  }
+
+  // 重新排序 tabs
+  const newTabs = [...tabsStore.tabs]
+  const [draggedTab] = newTabs.splice(dragIndex, 1)
+  if (draggedTab) {
+    newTabs.splice(index, 0, draggedTab)
+    // 更新 store
+    tabsStore.setTabs(newTabs)
+  }
+
+  // 移除拖拽样式
+  const target = e.target as HTMLElement
+  target.classList.remove('dragging')
+}
+</script>
+
+<style scoped lang="scss">
+.tabs-container {
+  background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
+  border-bottom: 1px solid var(--el-border-color-light);
+  padding: 8px 20px 0;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
+  position: relative;
+  z-index: 10;
+
+  :deep(.el-tabs) {
+    .el-tabs__header {
+      margin: 0;
+      border: none;
+    }
+
+    .el-tabs__nav {
+      border: none !important;
+      gap: 8px;
+    }
+
+    .el-tabs__item {
+      border: 1px solid var(--el-border-color-lighter) !important;
+      border-bottom: none !important;
+      margin-right: 0;
+      border-radius: 8px 8px 0 0;
+      background: linear-gradient(180deg, #f8f9fb 0%, #f0f2f5 100%);
+      color: #5a5e66;
+      height: 38px;
+      line-height: 38px;
+      padding: 0 18px;
+      font-size: 13px;
+      cursor: pointer;
+      user-select: none;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      position: relative;
+      overflow: hidden;
+
+      // 顶部渐变装饰
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 3px;
+        background: linear-gradient(90deg, var(--el-color-primary), var(--el-color-primary-light-3));
+        transform: scaleX(0);
+        transition: transform 0.3s ease;
+        border-radius: 8px 8px 0 0;
+      }
+
+      // 底部白色边框效果
+      &::after {
+        content: '';
+        position: absolute;
+        bottom: -1px;
+        left: 0;
+        right: 0;
+        height: 2px;
+        background: #fff;
+        transform: scaleX(0);
+        transition: transform 0.3s ease;
+      }
+
+      &:hover {
+        color: var(--el-color-primary);
+        background: linear-gradient(180deg, #fff 0%, #f5f7fa 100%);
+        border-color: var(--el-color-primary-light-6) !important;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+        transform: translateY(-2px);
+
+        &::before {
+          transform: scaleX(0.7);
+        }
+
+        &::after {
+          transform: scaleX(1);
+        }
+      }
+
+      &.is-active,
+      &.is-context-active {
+        background: #fff;
+        color: var(--el-color-primary);
+        // border-bottom: 1px solid #fff !important;
+        border-color: var(--el-color-primary-light-4) !important;
+        box-shadow: 0 4px 16px rgba(var(--el-color-primary-rgb), 0.15);
+        font-weight: 500;
+        z-index: 2;
+
+        &::before {
+          transform: scaleX(1);
+        }
+
+        &::after {
+          transform: scaleX(1);
+        }
+      }
+
+      // 右键选中时的特殊样式
+      &.is-context-active:not(.is-active) {
+        background: linear-gradient(180deg, #fff 0%, #f0f7ff 100%);
+        border-color: var(--el-color-primary-light-5) !important;
+      }
+
+      // 关闭按钮样式
+      .el-icon-close {
+        width: 16px;
+        height: 16px;
+        border-radius: 50%;
+        transition: all 0.2s ease;
+        font-size: 12px;
+        margin-left: 6px;
+        vertical-align: middle;
+
+        &:hover {
+          background: var(--el-color-danger);
+          color: #fff;
+          transform: scale(1.15) rotate(90deg);
+        }
+      }
+
+      // 拖拽样式
+      .tab-label {
+        display: inline-flex;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+        gap: 6px;
+
+        .tab-text {
+          display: inline-block;
+          max-width: 150px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        &.dragging {
+          opacity: 0.5;
+          cursor: move;
+        }
+      }
+    }
+
+    .el-tabs__nav-wrap::after {
+      display: none;
+    }
+
+    // 左右滚动按钮样式
+    .el-tabs__nav-prev,
+    .el-tabs__nav-next {
+      width: 32px;
+      line-height: 38px;
+      color: var(--el-text-color-secondary);
+      transition: all 0.2s ease;
+      border-radius: 4px;
+
+      &:hover {
+        color: var(--el-color-primary);
+        background: var(--el-fill-color-light);
+      }
+    }
+  }
+
+  .context-menu-trigger {
+    display: none;
+  }
+}
+</style>
diff --git a/src/stores/modules/tabs.ts b/src/stores/modules/tabs.ts
new file mode 100644
index 0000000..d00b28c
--- /dev/null
+++ b/src/stores/modules/tabs.ts
@@ -0,0 +1,229 @@
+import { defineStore } from 'pinia'
+import { getStorage, setStorage, removeStorage } from '@/utils/storage'
+import { useUserStore } from './user'
+
+export interface BreadcrumbItem {
+  title: string
+  path: string
+}
+
+export interface TabItem {
+  title: string
+  path: string
+  query?: any
+  breadcrumbs?: BreadcrumbItem[]
+}
+
+export const useTabsStore = defineStore('tabs', () => {
+  const userStore = useUserStore()
+  
+  // 从本地存储恢复页签数据
+  const savedTabs = getStorage('tabs')
+  const savedActiveTab = getStorage('activeTab')
+  
+  // 验证恢复的数据是否有效
+  const tabs = ref<TabItem[]>(Array.isArray(savedTabs) && savedTabs.length > 0 ? savedTabs : [])
+  const activeTab = ref<string>(
+    typeof savedActiveTab === 'string' &&
+    tabs.value.some(t => t.path === savedActiveTab)
+      ? savedActiveTab
+      : '/dashboard'
+  )
+  
+  // 如果没有有效的标签页，初始化添加首页
+  if (tabs.value.length === 0) {
+    tabs.value.push({
+      title: '首页',
+      path: '/dashboard'
+    })
+    activeTab.value = '/dashboard'
+  }
+
+  /**
+   * 从菜单中查找当前路由的面包屑路径
+   */
+  const findBreadcrumbPath = (path: string): BreadcrumbItem[] => {
+    const list: BreadcrumbItem[] = []
+
+    // 添加首页
+    list.push({
+      title: '首页',
+      path: '/dashboard'
+    })
+
+    // 如果是首页，直接返回
+    if (path === '/dashboard') {
+      return list
+    }
+
+    // 从菜单中查找当前路由的层级信息
+    const findMenuPath = (menus: any[], targetPath: string, currentPath: any[] = []): any[] | null => {
+      for (const menu of menus) {
+        const menuPath = menu.path || menu.api || `/menu-${menu.id}`
+        const newPath = [...currentPath, menu]
+
+        if (menuPath === targetPath) {
+          return newPath
+        }
+
+        // 兼容 children 和 son 两种子菜单字段名
+        const subMenus = menu.children || menu.son
+        if (subMenus && subMenus.length > 0) {
+          const result = findMenuPath(subMenus, targetPath, newPath)
+          if (result) {
+            return result
+          }
+        }
+      }
+      return null
+    }
+
+    const menuPath = findMenuPath(userStore.sideMenu, path)
+    console.log('menuPath:', menuPath);
+
+    if (menuPath) {
+    console.log('list:', menuPath)
+      menuPath.forEach((menu: any, index: number) => {
+        // 跳过第一个（首页已添加）
+        if (index === 0 && menu.label === '首页') {
+          return
+        }
+        list.push({
+          title: menu.label,
+          path: menu.path || menu.api || `/menu-${menu.id}`
+        })
+      })
+    }
+;
+    return list
+  }
+
+  // 添加页签
+  const addTab = (tab: TabItem) => {
+    // 检查是否已存在
+    const existIndex = tabs.value.findIndex(item => item.path === tab.path)
+    // 计算面包屑路径
+    const breadcrumbs = findBreadcrumbPath(tab.path)
+    console.log('aaaaaaaaaaaaa:', breadcrumbs);
+    
+    if (existIndex === -1) {
+      // 新标签页，添加到列表
+      tabs.value.push({ ...tab, breadcrumbs })
+    } else {
+      // 已存在的标签页，更新面包屑（确保数据是最新的）
+      const existingTab = tabs.value[existIndex]
+      if (existingTab) {
+        existingTab.breadcrumbs = breadcrumbs
+      }
+    }
+    activeTab.value = tab.path
+    saveTabs()
+  }
+
+  // 移除页签
+  const removeTab = (path: string) => {
+    const index = tabs.value.findIndex(item => item.path === path)
+    if (index !== -1) {
+      tabs.value.splice(index, 1)
+      // 如果移除的是当前激活的页签，则激活前一个或后一个
+      if (activeTab.value === path && tabs.value.length > 0) {
+        const newIndex = Math.max(0, index - 1)
+        const newTab = tabs.value[newIndex]
+        if (newTab) {
+          activeTab.value = newTab.path
+        }
+      }
+      saveTabs()
+    }
+  }
+
+  // 关闭其他页签
+  const closeOtherTabs = (path: string) => {
+    const currentTab = tabs.value.find(item => item.path === path)
+    if (currentTab) {
+      tabs.value = [currentTab]
+      activeTab.value = path
+      saveTabs()
+    }
+  }
+
+  // 关闭所有页签
+  const closeAllTabs = () => {
+    // 保留首页
+    tabs.value = [{
+      title: '首页',
+      path: '/dashboard'
+    }]
+    activeTab.value = '/dashboard'
+    saveTabs()
+  }
+
+  // 关闭左侧页签
+  const closeLeftTabs = (path: string) => {
+    const index = tabs.value.findIndex(item => item.path === path)
+    if (index > 0) {
+      tabs.value = tabs.value.slice(index)
+      saveTabs()
+    }
+  }
+
+  // 关闭右侧页签
+  const closeRightTabs = (path: string) => {
+    const index = tabs.value.findIndex(item => item.path === path)
+    if (index !== -1 && index < tabs.value.length - 1) {
+      tabs.value = tabs.value.slice(0, index + 1)
+      saveTabs()
+    }
+  }
+
+  // 设置当前激活的页签
+  const setActiveTab = (path: string) => {
+    activeTab.value = path
+    saveTabs()
+  }
+
+  // 保存到本地存储
+  const saveTabs = () => {
+    setStorage('tabs', tabs.value)
+    setStorage('activeTab', activeTab.value)
+  }
+
+  // 清空页签
+  const clearTabs = () => {
+    tabs.value = []
+    activeTab.value = ''
+    removeStorage('tabs')
+    removeStorage('activeTab')
+  }
+
+  // 设置标签页列表（用于拖拽排序）
+  const setTabs = (newTabs: TabItem[]) => {
+    tabs.value = newTabs
+    saveTabs()
+  }
+
+  // 获取当前激活标签页的面包屑
+  const currentBreadcrumbs = computed<BreadcrumbItem[]>(() => {
+    const currentTab = tabs.value.find(item => item.path === activeTab.value)
+    if (currentTab && currentTab.breadcrumbs) {
+      return currentTab.breadcrumbs
+    }
+    // 默认返回首页
+    return [{ title: '首页', path: '/dashboard' }]
+  })
+
+  return {
+    tabs,
+    activeTab,
+    currentBreadcrumbs,
+    addTab,
+    removeTab,
+    closeOtherTabs,
+    closeAllTabs,
+    closeLeftTabs,
+    closeRightTabs,
+    setActiveTab,
+    clearTabs,
+    setTabs
+  }
+})
diff --git a/src/views/profile/personalCenter/index.vue b/src/views/profile/personalCenter/index.vue
index d1e6e69..a46e13d 100644
--- a/src/views/profile/personalCenter/index.vue
+++ b/src/views/profile/personalCenter/index.vue
@@ -317,9 +317,7 @@ const handleLanguageChange = async (val: number) => {
     await editLangTypeApi({ lang_type: val });
     userInfo.lang_type = val;
     languageStore.changeLang(val === 1 ? 'zh-CN' : 'en-US');
-    ElMessage.success('语言切换成功');
   } catch (error) {
-    ElMessage.error('语言切换失败');
     console.error('语言切换失败:', error);
   }
 };
@@ -331,7 +329,7 @@ const handleEditConfirm = async () => {
     await editFormRef.value.validate();
 
     if (editField.value === 'username') {
-      const params: EditUsernameParams = { username: editForm.value, user_id: userInfo.id };
+      const params: EditUsernameParams = { username: editForm.value };
       await editUsernameApi(params);
       userInfo.username = editForm.value;
     }
@@ -345,7 +343,6 @@ const handleEditConfirm = async () => {
       await bindEmailApi(params);
       userInfo.email = editForm.value;
     }
-    ElMessage.success('操作成功');
     dialogVisible.value = false;
     editFormRef.value.resetFields();
   } catch (err) {
@@ -424,7 +421,6 @@ const handlePasswordConfirm = async () => {
     };
 
     await updatePwdByCaptchaApi(params);
-    ElMessage.success('密码修改成功');
     passwordDialogVisible.value = false;
     passwordFormRef.value.resetFields();
   } catch (err) {