diff --git a/admin-system/index.html b/admin-system/index.html
index 79e3534..e0f1a90 100644
--- a/admin-system/index.html
+++ b/admin-system/index.html
@@ -4,12 +4,12 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title><%- VITE_APP_NAME %></title>
+    <title><%=VITE_APP_NAME %></title>
     <meta name="description" content="结伴客后台管理系统 - 专业的旅行结伴与动物认领平台管理后台" />
     <meta name="keywords" content="结伴客,后台管理,旅行,动物认领,商家管理" />
     
     <!-- 预加载关键资源 -->
-    <link rel="preconnect" href="<%- VITE_API_BASE_URL %>" crossorigin>
+    <link rel="preconnect" href="<%= VITE_API_BASE_URL %>" crossorigin>
     
     <!-- 主题颜色 -->
     <meta name="theme-color" content="#1890ff">
@@ -17,7 +17,7 @@
     <!-- 移动端优化 -->
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="default">
-    <meta name="apple-mobile-web-app-title" content="<%- VITE_APP_NAME %>">
+    <meta name="apple-mobile-web-app-title" content="<%= VITE_APP_NAME %>">
     
     <!-- 避免被搜索引擎索引 -->
     <meta name="robots" content="noindex, nofollow">
@@ -27,10 +27,10 @@
     <script type="module" src="/src/main.ts"></script>
     
     <!-- 环境变量提示 -->
-    <script>
-      console.log('环境:', '<%- NODE_ENV %>');
-      console.log('版本:', '<%- VITE_APP_VERSION %>');
-      console.log('API地址:', '<%- VITE_API_BASE_URL %>');
+    <script type="module">
+      console.log('环境:', import.meta.env.MODE);
+      console.log('版本:', import.meta.env.VITE_APP_VERSION);
+      console.log('API地址:', import.meta.env.VITE_API_BASE_URL);
     </script>
   </body>
 </html>
\ No newline at end of file
diff --git a/admin-system/package-lock.json b/admin-system/package-lock.json
index 6f623c4..2f4e244 100644
--- a/admin-system/package-lock.json
+++ b/admin-system/package-lock.json
@@ -29,6 +29,7 @@
         "prettier": "^2.8.0",
         "typescript": "~5.0.0",
         "vite": "^4.3.0",
+        "vite-plugin-html": "^3.2.2",
         "vue-tsc": "^1.4.0"
       }
     },
@@ -571,11 +572,50 @@
       "deprecated": "Use @eslint/object-schema instead",
       "dev": true
     },
+    "node_modules/@jridgewell/gen-mapping": {
+      "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,
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "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,
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/source-map": {
+      "version": "0.3.11",
+      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.11.tgz",
+      "integrity": "sha512-ZMp1V8ZFcPG5dIWnQLr3NSI1MiCU7UETdS/A0G8V/XWHvJv3ZsFqutJn1Y5RPmAPX6F3BiE397OqveU/9NCuIA==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.25"
+      }
+    },
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.5.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
       "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og=="
     },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.30",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.30.tgz",
+      "integrity": "sha512-GQ7Nw5G2lTu/BtHTKfXhKHok2WGetd4XYcVKGx00SjAk8GMwgJM3zr6zORiPGuOE+/vkc90KtTosSSvaCjKb2Q==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -611,6 +651,19 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@rollup/pluginutils": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.1.tgz",
+      "integrity": "sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==",
+      "dev": true,
+      "dependencies": {
+        "estree-walker": "^2.0.1",
+        "picomatch": "^2.2.2"
+      },
+      "engines": {
+        "node": ">= 8.0.0"
+      }
+    },
     "node_modules/@simonwep/pickr": {
       "version": "1.8.2",
       "resolved": "https://registry.npmjs.org/@simonwep/pickr/-/pickr-1.8.2.tgz",
@@ -1198,6 +1251,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/async": {
+      "version": "3.2.6",
+      "resolved": "https://registry.npmjs.org/async/-/async-3.2.6.tgz",
+      "integrity": "sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==",
+      "dev": true
+    },
     "node_modules/async-validator": {
       "version": "4.2.5",
       "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-4.2.5.tgz",
@@ -1252,6 +1311,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/buffer-from": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
+      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
+      "dev": true
+    },
     "node_modules/call-bind-apply-helpers": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
@@ -1273,6 +1338,22 @@
         "node": ">=6"
       }
     },
+    "node_modules/camel-case": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-4.1.2.tgz",
+      "integrity": "sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==",
+      "dev": true,
+      "dependencies": {
+        "pascal-case": "^3.1.2",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/camel-case/node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "dev": true
+    },
     "node_modules/chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -1289,6 +1370,18 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/clean-css": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.3.tgz",
+      "integrity": "sha512-D5J+kHaVb/wKSFcyyV75uCn8fiY4sV38XJoe4CUyGQ+mOU/fMVYUdH1hJC+CJQ5uY3EnW27SbJYS4X8BiLrAFg==",
+      "dev": true,
+      "dependencies": {
+        "source-map": "~0.6.0"
+      },
+      "engines": {
+        "node": ">= 10.0"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -1307,6 +1400,12 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "dev": true
     },
+    "node_modules/colorette": {
+      "version": "2.0.20",
+      "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz",
+      "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
+      "dev": true
+    },
     "node_modules/combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -1318,6 +1417,15 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/commander": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
+      "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
+      "dev": true,
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/compute-scroll-into-view": {
       "version": "1.0.20",
       "resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-1.0.20.tgz",
@@ -1335,6 +1443,21 @@
       "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
       "dev": true
     },
+    "node_modules/connect-history-api-fallback": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/connect-history-api-fallback/-/connect-history-api-fallback-1.6.0.tgz",
+      "integrity": "sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/consola": {
+      "version": "2.15.3",
+      "resolved": "https://registry.npmjs.org/consola/-/consola-2.15.3.tgz",
+      "integrity": "sha512-9vAdYbHj6x2fLKC4+oPH0kFzY/orMZyG2Aj+kNylHxKGJ/Ed4dpNyAQYwJOdqO4zdM7XpVHmyejQDcQHrnuXbw==",
+      "dev": true
+    },
     "node_modules/copy-anything": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.6.tgz",
@@ -1371,6 +1494,34 @@
         "node": ">= 8"
       }
     },
+    "node_modules/css-select": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.3.0.tgz",
+      "integrity": "sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==",
+      "dev": true,
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-what": "^6.0.1",
+        "domhandler": "^4.3.1",
+        "domutils": "^2.8.0",
+        "nth-check": "^2.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/css-what": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.2.2.tgz",
+      "integrity": "sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -1464,6 +1615,107 @@
       "resolved": "https://registry.npmjs.org/dom-scroll-into-view/-/dom-scroll-into-view-2.0.1.tgz",
       "integrity": "sha512-bvVTQe1lfaUr1oFzZX80ce9KLDlZ3iU+XGNE/bz9HnGdklTieqsbmsLHe+rT2XWqopvL0PckkYqN7ksmm5pe3w=="
     },
+    "node_modules/dom-serializer": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
+      "integrity": "sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==",
+      "dev": true,
+      "dependencies": {
+        "domelementtype": "^2.0.1",
+        "domhandler": "^4.2.0",
+        "entities": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/dom-serializer/node_modules/entities": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
+      "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ]
+    },
+    "node_modules/domhandler": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.3.1.tgz",
+      "integrity": "sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==",
+      "dev": true,
+      "dependencies": {
+        "domelementtype": "^2.2.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/domutils": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
+      "integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==",
+      "dev": true,
+      "dependencies": {
+        "dom-serializer": "^1.0.1",
+        "domelementtype": "^2.2.0",
+        "domhandler": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
+    "node_modules/dot-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
+      "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==",
+      "dev": true,
+      "dependencies": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/dot-case/node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "dev": true
+    },
+    "node_modules/dotenv": {
+      "version": "16.6.1",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.6.1.tgz",
+      "integrity": "sha512-uBq4egWHTcTt33a72vpSG0z3HnPuIl6NqYcTrKEg2azoEyl2hpW0zqlxysq2pK9HlDIHyHyakeYaYnSAwd8bow==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
+    },
+    "node_modules/dotenv-expand": {
+      "version": "8.0.3",
+      "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-8.0.3.tgz",
+      "integrity": "sha512-SErOMvge0ZUyWd5B0NXMQlDkN+8r+HhVUsxgOO7IoPDOdDRD2JjExpN6y3KnFR66jsJMwSn1pqIivhU5rcJiNg==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -1477,6 +1729,21 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/ejs": {
+      "version": "3.1.10",
+      "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.10.tgz",
+      "integrity": "sha512-UeJmFfOrAQS8OJWPZ4qtgHyWExa088/MtK5UEyoJGFH67cDEXkZSviOiKRCZ4Xij0zxI3JECgYs3oKx+AizQBA==",
+      "dev": true,
+      "dependencies": {
+        "jake": "^10.8.5"
+      },
+      "bin": {
+        "ejs": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/entities": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
@@ -1868,6 +2135,36 @@
         "node": "^10.12.0 || >=12.0.0"
       }
     },
+    "node_modules/filelist": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.4.tgz",
+      "integrity": "sha512-w1cEuf3S+DrLCQL7ET6kz+gmlJdbq9J7yXCSjK/OZCPA+qEN1WyF4ZAf0YYJa4/shHJra2t/d/r8SV4Ji+x+8Q==",
+      "dev": true,
+      "dependencies": {
+        "minimatch": "^5.0.1"
+      }
+    },
+    "node_modules/filelist/node_modules/brace-expansion": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/filelist/node_modules/minimatch": {
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
+      "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/fill-range": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
@@ -1950,6 +2247,20 @@
         "node": ">= 6"
       }
     },
+    "node_modules/fs-extra": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
+      "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
+      "dev": true,
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -2096,8 +2407,7 @@
       "version": "4.2.11",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
       "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
-      "dev": true,
-      "optional": true
+      "dev": true
     },
     "node_modules/graphemer": {
       "version": "1.4.0",
@@ -2159,6 +2469,27 @@
         "he": "bin/he"
       }
     },
+    "node_modules/html-minifier-terser": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
+      "integrity": "sha512-YXxSlJBZTP7RS3tWnQw74ooKa6L9b9i9QYXY21eUEvhZ3u9XLfv6OnFsQq6RxkhHygsaUMvYsZRV5rU/OVNZxw==",
+      "dev": true,
+      "dependencies": {
+        "camel-case": "^4.1.2",
+        "clean-css": "^5.2.2",
+        "commander": "^8.3.0",
+        "he": "^1.2.0",
+        "param-case": "^3.0.4",
+        "relateurl": "^0.2.7",
+        "terser": "^5.10.0"
+      },
+      "bin": {
+        "html-minifier-terser": "cli.js"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/iconv-lite": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
@@ -2295,6 +2626,23 @@
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
       "dev": true
     },
+    "node_modules/jake": {
+      "version": "10.9.4",
+      "resolved": "https://registry.npmjs.org/jake/-/jake-10.9.4.tgz",
+      "integrity": "sha512-wpHYzhxiVQL+IV05BLE2Xn34zW1S223hvjtqk0+gsPrwd/8JNLXJgZZM/iPFsYc1xyphF+6M6EvdE5E9MBGkDA==",
+      "dev": true,
+      "dependencies": {
+        "async": "^3.2.6",
+        "filelist": "^1.0.4",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "jake": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -2330,6 +2678,18 @@
       "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
       "dev": true
     },
+    "node_modules/jsonfile": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.2.0.tgz",
+      "integrity": "sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==",
+      "dev": true,
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -2426,6 +2786,21 @@
         "loose-envify": "cli.js"
       }
     },
+    "node_modules/lower-case": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
+      "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
+      "dev": true,
+      "dependencies": {
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/lower-case/node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "dev": true
+    },
     "node_modules/magic-string": {
       "version": "0.30.18",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.18.tgz",
@@ -2595,6 +2970,32 @@
         "node": ">= 4.4.x"
       }
     },
+    "node_modules/no-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
+      "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
+      "dev": true,
+      "dependencies": {
+        "lower-case": "^2.0.2",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/no-case/node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "dev": true
+    },
+    "node_modules/node-html-parser": {
+      "version": "5.4.2",
+      "resolved": "https://registry.npmjs.org/node-html-parser/-/node-html-parser-5.4.2.tgz",
+      "integrity": "sha512-RaBPP3+51hPne/OolXxcz89iYvQvKOydaqoePpOgXcrOKZhjVIzmpKZz+Hd/RBO2/zN2q6CNJhQzucVz+u3Jyw==",
+      "dev": true,
+      "dependencies": {
+        "css-select": "^4.2.1",
+        "he": "1.2.0"
+      }
+    },
     "node_modules/nth-check": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
@@ -2663,6 +3064,22 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/param-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
+      "integrity": "sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==",
+      "dev": true,
+      "dependencies": {
+        "dot-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/param-case/node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "dev": true
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -2684,6 +3101,22 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/pascal-case": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz",
+      "integrity": "sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==",
+      "dev": true,
+      "dependencies": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/pascal-case/node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "dev": true
+    },
     "node_modules/path-browserify": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
@@ -2726,6 +3159,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/pathe": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-0.2.0.tgz",
+      "integrity": "sha512-sTitTPYnn23esFR3RlqYBWn4c45WGeLcsKzQiUpXJAyfcWkolvlYpV8FLo7JishK946oQwMFUCHXQ9AjGPKExw==",
+      "dev": true
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -2879,6 +3318,15 @@
         }
       ]
     },
+    "node_modules/relateurl": {
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz",
+      "integrity": "sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
     "node_modules/resize-observer-polyfill": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
@@ -3032,7 +3480,6 @@
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
       "dev": true,
-      "optional": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -3045,6 +3492,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/source-map-support": {
+      "version": "0.5.21",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
+      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
+      "dev": true,
+      "dependencies": {
+        "buffer-from": "^1.0.0",
+        "source-map": "^0.6.0"
+      }
+    },
     "node_modules/strip-ansi": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
@@ -3086,6 +3543,30 @@
         "node": ">=8"
       }
     },
+    "node_modules/terser": {
+      "version": "5.43.1",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.43.1.tgz",
+      "integrity": "sha512-+6erLbBm0+LROX2sPXlUYx/ux5PyE9K/a92Wrt6oA+WDAoFTdpHE5tCYCI5PNzq2y8df4rA+QgHLJuR4jNymsg==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/source-map": "^0.3.3",
+        "acorn": "^8.14.0",
+        "commander": "^2.20.0",
+        "source-map-support": "~0.5.20"
+      },
+      "bin": {
+        "terser": "bin/terser"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/terser/node_modules/commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+      "dev": true
+    },
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -3176,6 +3657,15 @@
       "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
       "dev": true
     },
+    "node_modules/universalify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
     "node_modules/uri-js": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
@@ -3246,6 +3736,29 @@
         }
       }
     },
+    "node_modules/vite-plugin-html": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/vite-plugin-html/-/vite-plugin-html-3.2.2.tgz",
+      "integrity": "sha512-vb9C9kcdzcIo/Oc3CLZVS03dL5pDlOFuhGlZYDCJ840BhWl/0nGeZWf3Qy7NlOayscY4Cm/QRgULCQkEZige5Q==",
+      "dev": true,
+      "dependencies": {
+        "@rollup/pluginutils": "^4.2.0",
+        "colorette": "^2.0.16",
+        "connect-history-api-fallback": "^1.6.0",
+        "consola": "^2.15.3",
+        "dotenv": "^16.0.0",
+        "dotenv-expand": "^8.0.2",
+        "ejs": "^3.1.6",
+        "fast-glob": "^3.2.11",
+        "fs-extra": "^10.0.1",
+        "html-minifier-terser": "^6.1.0",
+        "node-html-parser": "^5.3.3",
+        "pathe": "^0.2.0"
+      },
+      "peerDependencies": {
+        "vite": ">=2.0.0"
+      }
+    },
     "node_modules/vue": {
       "version": "3.5.20",
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.20.tgz",
diff --git a/admin-system/package.json b/admin-system/package.json
index c7e89f2..5ec88ca 100644
--- a/admin-system/package.json
+++ b/admin-system/package.json
@@ -32,6 +32,7 @@
     "prettier": "^2.8.0",
     "typescript": "~5.0.0",
     "vite": "^4.3.0",
+    "vite-plugin-html": "^3.2.2",
     "vue-tsc": "^1.4.0"
   },
   "browserslist": [
diff --git a/admin-system/src/App.vue b/admin-system/src/App.vue
index bcfc90e..94ac392 100644
--- a/admin-system/src/App.vue
+++ b/admin-system/src/App.vue
@@ -1,25 +1,40 @@
 <template>
   <a-config-provider :locale="zhCN">
-    <router-view />
+    <component :is="layout">
+      <router-view />
+    </component>
   </a-config-provider>
 </template>
 
 <script setup lang="ts">
-import zhCN from 'ant-design-vue/es/locale/zh_CN'
-import { onMounted } from 'vue'
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
 import { useAppStore } from '@/stores/app'
+import MainLayout from '@/layouts/MainLayout.vue'
+import zhCN from 'ant-design-vue/es/locale/zh_CN'
 
+const route = useRoute()
 const appStore = useAppStore()
 
-onMounted(() => {
-  // 初始化应用
-  appStore.initialize()
+// 根据路由元信息确定使用的布局
+const layout = computed(() => {
+  const layoutName = route.meta?.layout || 'default'
   
-  // 开发环境调试信息
-  if (import.meta.env.DEV) {
-    console.log('🎯 应用组件挂载完成')
+  if (layoutName === 'main') {
+    return MainLayout
   }
+  
+  // 默认布局（如登录页）
+  return 'div'
 })
+
+// 初始化应用
+appStore.initialize()
+
+// 开发环境调试信息
+if (import.meta.env.DEV) {
+  console.log('🎯 应用组件挂载完成')
+}
 </script>
 
 <style scoped>
diff --git a/admin-system/src/api/merchant.ts b/admin-system/src/api/merchant.ts
index 43d37ed..4b0a56a 100644
--- a/admin-system/src/api/merchant.ts
+++ b/admin-system/src/api/merchant.ts
@@ -78,11 +78,31 @@ export const deleteMerchant = (id: number) =>
 export const updateMerchantStatus = (id: number, status: string) =>
   request.put<{ success: boolean; code: number; message: string }>(`/merchants/${id}/status`, { status })
 
+// 审核通过商家
+export const approveMerchant = (id: number) =>
+  request.put<{ success: boolean; code: number; message: string }>(`/merchants/${id}/approve`)
+
+// 审核拒绝商家
+export const rejectMerchant = (id: number, reason: string) =>
+  request.put<{ success: boolean; code: number; message: string }>(`/merchants/${id}/reject`, { reason })
+
+// 禁用商家
+export const disableMerchant = (id: number) =>
+  request.put<{ success: boolean; code: number; message: string }>(`/merchants/${id}/disable`)
+
+// 启用商家
+export const enableMerchant = (id: number) =>
+  request.put<{ success: boolean; code: number; message: string }>(`/merchants/${id}/enable`)
+
 export default {
   getMerchants,
   getMerchant,
   createMerchant,
   updateMerchant,
   deleteMerchant,
-  updateMerchantStatus
+  updateMerchantStatus,
+  approveMerchant,
+  rejectMerchant,
+  disableMerchant,
+  enableMerchant
 }
\ No newline at end of file
diff --git a/admin-system/src/api/user.ts b/admin-system/src/api/user.ts
index 080efdf..08f2bc0 100644
--- a/admin-system/src/api/user.ts
+++ b/admin-system/src/api/user.ts
@@ -8,7 +8,7 @@ export interface User {
   email: string
   phone: string
   avatar: string
-  gender: string
+  gender: number
   birthday: string
   points: number
   level: number
@@ -25,13 +25,10 @@ export interface User {
 
 export interface UserQueryParams {
   page?: number
-  limit?: number
-  username?: string
-  nickname?: string
-  phone?: string
+  pageSize?: number
+  keyword?: string
+  userType?: string
   status?: string
-  start_date?: string
-  end_date?: string
 }
 
 export interface UserCreateData {
@@ -65,9 +62,19 @@ export interface ApiResponse<T = any> {
   data: T
 }
 
+export interface UserListResponse {
+  users: User[]
+  pagination: {
+    page: number
+    pageSize: number
+    total: number
+    totalPages: number
+  }
+}
+
 // 获取用户列表
 export const getUsers = (params?: UserQueryParams) =>
-  request.get<ApiResponse<{ users: User[]; pagination: any }>>('/users', { params })
+  request.get<ApiResponse<UserListResponse>>('/users', { params })
 
 // 获取用户详情
 export const getUser = (id: number) =>
@@ -85,17 +92,14 @@ export const updateUser = (id: number, data: UserUpdateData) =>
 export const deleteUser = (id: number) =>
   request.delete<ApiResponse<void>>(`/users/${id}`)
 
-// 批量删除用户
-export const batchDeleteUsers = (ids: number[]) =>
-  request.post<ApiResponse<void>>('/users/batch-delete', { ids })
+// 批量更新用户状态
+export const batchUpdateUserStatus = (userIds: number[], status: string) =>
+  request.post<ApiResponse<{ message: string; affectedRows: number }>>('/users/batch-status', { userIds, status })
 
 // 更新用户状态
 export const updateUserStatus = (id: number, status: string) =>
   request.put<ApiResponse<User>>(`/users/${id}/status`, { status })
 
-// 重置用户密码
-export const resetUserPassword = (id: number, password: string) =>
-  request.put<ApiResponse<User>>(`/users/${id}/password`, { password })
 
 export default {
   getUsers,
@@ -103,7 +107,5 @@ export default {
   createUser,
   updateUser,
   deleteUser,
-  batchDeleteUsers,
-  updateUserStatus,
-  resetUserPassword
+  batchUpdateUserStatus
 }
\ No newline at end of file
diff --git a/admin-system/src/pages/user/index.vue b/admin-system/src/pages/user/index.vue
index 89c9317..3efd2b4 100644
--- a/admin-system/src/pages/user/index.vue
+++ b/admin-system/src/pages/user/index.vue
@@ -50,7 +50,8 @@
           <a-form-item label="注册时间">
             <a-range-picker
               v-model:value="searchForm.registerTime"
-              :placeholder="['开始时间', '结束时间']"
+              format="YYYY-MM-DD"
+              allow-clear
             />
           </a-form-item>
           
@@ -68,577 +69,580 @@
         </a-form>
       </div>
 
-      <!-- 用户表格 -->
-      <a-table
-        :columns="columns"
-        :data-source="userList"
-        :loading="loading"
-        :pagination="pagination"
-        :row-key="record => record.id"
-        @change="handleTableChange"
-      >
-        <template #bodyCell="{ column, record }">
-          <template v-if="column.key === 'avatar'">
-            <a-avatar :src="record.avatar" :size="32">
-              {{ record.nickname?.charAt(0) }}
-            </a-avatar>
-          </template>
-          
-          <template v-else-if="column.key === 'status'">
-            <a-tag :color="getStatusColor(record.status)">
-              {{ getStatusText(record.status) }}
-            </a-tag>
-          </template>
-          
-          <template v-else-if="column.key === 'level'">
-            <a-tag color="blue">Lv.{{ record.level }}</a-tag>
-          </template>
-          
-          <template v-else-if="column.key === 'actions'">
-            <a-space :size="8">
-              <a-button size="small" @click="handleView(record)">
-                <EyeOutlined />
-                查看
-              </a-button>
-              
-              <a-button size="small" @click="handleEdit(record)">
-                <EditOutlined />
-                编辑
-              </a-button>
-              
-              <a-dropdown>
-                <a-button size="small">
-                  更多
-                  <DownOutlined />
+      <!-- 表格区域 -->
+      <div class="table-container">
+        <a-table
+          :columns="columns"
+          :data-source="dataSource"
+          :pagination="pagination"
+          :loading="loading"
+          row-key="id"
+          @change="handleTableChange"
+        >
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.dataIndex === 'avatar'">
+              <a-avatar :src="record.avatar" :size="32" />
+            </template>
+            
+            <template v-else-if="column.dataIndex === 'status'">
+              <a-tag :color="getStatusColor(record.status)">
+                {{ getStatusText(record.status) }}
+              </a-tag>
+            </template>
+            
+            <template v-else-if="column.dataIndex === 'level'">
+              <a-tag :color="getLevelColor(record.level)">
+                {{ getLevelText(record.level) }}
+              </a-tag>
+            </template>
+            
+            <template v-else-if="column.dataIndex === 'action'">
+              <a-space>
+                <a-button type="link" size="small" @click="showEditModal(record)">
+                  编辑
                 </a-button>
-                <template #overlay>
-                  <a-menu>
-                    <a-menu-item
-                      v-if="record.status === 'active'"
-                      @click="handleDisable(record)"
-                    >
-                      <StopOutlined />
-                      禁用
-                    </a-menu-item>
-                    <a-menu-item
-                      v-else
-                      @click="handleEnable(record)"
-                    >
-                      <PlayCircleOutlined />
-                      启用
-                    </a-menu-item>
-                    <a-menu-item
-                      v-if="record.status !== 'banned'"
-                      @click="handleBan(record)"
-                    >
-                      <WarningOutlined />
-                      封禁
-                    </a-menu-item>
-                    <a-menu-divider />
-                    <a-menu-item
-                      danger
-                      @click="handleDelete(record)"
-                    >
-                      <DeleteOutlined />
-                      删除
-                    </a-menu-item>
-                  </a-menu>
-                </template>
-              </a-dropdown>
-            </a-space>
+                <a-button type="link" size="small" @click="showDetailModal(record)">
+                  详情
+                </a-button>
+                <a-popconfirm
+                  title="确定要删除这个用户吗？"
+                  ok-text="确定"
+                  cancel-text="取消"
+                  @confirm="handleDelete(record.id)"
+                >
+                  <a-button type="link" size="small" danger>
+                    删除
+                  </a-button>
+                </a-popconfirm>
+              </a-space>
+            </template>
           </template>
-        </template>
-      </a-table>
+        </a-table>
+      </div>
     </a-card>
 
     <!-- 创建/编辑用户模态框 -->
     <a-modal
       v-model:open="modalVisible"
       :title="modalTitle"
-      width="600px"
       :confirm-loading="modalLoading"
       @ok="handleModalOk"
       @cancel="handleModalCancel"
     >
       <a-form
-        ref="formRef"
-        :model="formState"
+        ref="userFormRef"
+        :model="currentUser"
         :rules="formRules"
         layout="vertical"
       >
-        <a-row :gutter="16">
-          <a-col :span="12">
-            <a-form-item label="用户名" name="username">
-              <a-input
-                v-model:value="formState.username"
-                placeholder="请输入用户名"
-              />
-            </a-form-item>
-          </a-col>
-          <a-col :span="12">
-            <a-form-item label="昵称" name="nickname">
-              <a-input
-                v-model:value="formState.nickname"
-                placeholder="请输入昵称"
-              />
-            </a-form-item>
-          </a-col>
-        </a-row>
-
-        <a-row :gutter="16">
-          <a-col :span="12">
-            <a-form-item label="密码" name="password" v-if="isCreate">
-              <a-input-password
-                v-model:value="formState.password"
-                placeholder="请输入密码"
-              />
-            </a-form-item>
-          </a-col>
-          <a-col :span="12">
-            <a-form-item label="手机号" name="phone">
-              <a-input
-                v-model:value="formState.phone"
-                placeholder="请输入手机号"
-              />
-            </a-form-item>
-          </a-col>
-        </a-row>
-
-        <a-row :gutter="16">
-          <a-col :span="12">
-            <a-form-item label="邮箱" name="email">
-              <a-input
-                v-model:value="formState.email"
-                placeholder="请输入邮箱"
-              />
-            </a-form-item>
-          </a-col>
-          <a-col :span="12">
-            <a-form-item label="状态" name="status">
-              <a-select v-model:value="formState.status" placeholder="请选择状态">
-                <a-select-option value="active">正常</a-select-option>
-                <a-select-option value="inactive">禁用</a-select-option>
-              </a-select>
-            </a-form-item>
-          </a-col>
-        </a-row>
-
-        <a-form-item label="备注" name="remark">
-          <a-textarea
-            v-model:value="formState.remark"
-            placeholder="请输入备注信息"
-            :rows="3"
-          />
+        <a-form-item label="用户名" name="username">
+          <a-input v-model:value="currentUser.username" />
+        </a-form-item>
+        
+        <a-form-item label="昵称" name="nickname">
+          <a-input v-model:value="currentUser.nickname" />
+        </a-form-item>
+        
+        <a-form-item label="手机号" name="phone">
+          <a-input v-model:value="currentUser.phone" />
+        </a-form-item>
+        
+        <a-form-item label="邮箱" name="email">
+          <a-input v-model:value="currentUser.email" />
+        </a-form-item>
+        
+        <a-form-item label="头像" name="avatar">
+          <a-upload
+            v-model:file-list="avatarFileList"
+            list-type="picture-card"
+            class="avatar-uploader"
+            :show-upload-list="false"
+            :before-upload="beforeUpload"
+            @change="handleAvatarChange"
+          >
+            <img v-if="currentUser.avatar" :src="currentUser.avatar" alt="avatar" style="width: 100%" />
+            <div v-else>
+              <plus-outlined />
+              <div style="margin-top: 8px">上传</div>
+            </div>
+          </a-upload>
+        </a-form-item>
+        
+        <a-form-item label="性别" name="gender">
+          <a-radio-group v-model:value="currentUser.gender">
+            <a-radio :value="0">未知</a-radio>
+            <a-radio :value="1">男</a-radio>
+            <a-radio :value="2">女</a-radio>
+          </a-radio-group>
+        </a-form-item>
+        
+        <a-form-item label="状态" name="status">
+          <a-select v-model:value="currentUser.status">
+            <a-select-option value="active">正常</a-select-option>
+            <a-select-option value="inactive">禁用</a-select-option>
+            <a-select-option value="banned">封禁</a-select-option>
+          </a-select>
+        </a-form-item>
+        
+        <a-form-item label="等级" name="level">
+          <a-select v-model:value="currentUser.level">
+            <a-select-option :value="0">普通用户</a-select-option>
+            <a-select-option :value="1">认证用户</a-select-option>
+            <a-select-option :value="2">管理员</a-select-option>
+            <a-select-option :value="3">超级管理员</a-select-option>
+          </a-select>
         </a-form-item>
       </a-form>
     </a-modal>
+
+    <!-- 用户详情模态框 -->
+    <a-modal
+      v-model:open="detailVisible"
+      title="用户详情"
+      :footer="null"
+      width="600px"
+    >
+      <a-descriptions bordered size="small" :column="2">
+        <a-descriptions-item label="用户ID">
+          {{ detailUser.id }}
+        </a-descriptions-item>
+        <a-descriptions-item label="用户名">
+          {{ detailUser.username }}
+        </a-descriptions-item>
+        <a-descriptions-item label="昵称">
+          {{ detailUser.nickname }}
+        </a-descriptions-item>
+        <a-descriptions-item label="手机号">
+          {{ detailUser.phone }}
+        </a-descriptions-item>
+        <a-descriptions-item label="邮箱">
+          {{ detailUser.email }}
+        </a-descriptions-item>
+        <a-descriptions-item label="性别">
+          {{ getGenderText(detailUser.gender) }}
+        </a-descriptions-item>
+        <a-descriptions-item label="状态">
+          <a-tag :color="getStatusColor(detailUser.status)">
+            {{ getStatusText(detailUser.status) }}
+          </a-tag>
+        </a-descriptions-item>
+        <a-descriptions-item label="等级">
+          <a-tag :color="getLevelColor(detailUser.level)">
+            {{ getLevelText(detailUser.level) }}
+          </a-tag>
+        </a-descriptions-item>
+        <a-descriptions-item label="注册时间">
+          {{ formatDate(detailUser.created_at) }}
+        </a-descriptions-item>
+        <a-descriptions-item label="最后登录">
+          {{ formatDate(detailUser.last_login_at) }}
+        </a-descriptions-item>
+        <a-descriptions-item label="头像" :span="2">
+          <a-avatar :src="detailUser.avatar" :size="64" />
+        </a-descriptions-item>
+        <a-descriptions-item label="简介" :span="2">
+          {{ detailUser.bio || '暂无简介' }}
+        </a-descriptions-item>
+      </a-descriptions>
+    </a-modal>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, computed, onMounted, h } from 'vue'
-import { message, Modal, type FormInstance, TableProps } from 'ant-design-vue'
-import {
+import { ref, reactive, onMounted } from 'vue'
+import { 
+  ReloadOutlined,
   UserAddOutlined,
   SearchOutlined,
-  ReloadOutlined,
-  EyeOutlined,
-  EditOutlined,
-  DeleteOutlined,
-  StopOutlined,
-  PlayCircleOutlined,
-  WarningOutlined,
-  DownOutlined,
-  type TableProps
+  PlusOutlined
 } from '@ant-design/icons-vue'
+import { 
+  message, 
+  Modal,
+  type UploadProps
+} from 'ant-design-vue'
 import { getUsers, getUser, updateUser, createUser, deleteUser } from '@/api/user'
-import type { User } from '@/api/user'
-
-interface SearchForm {
-  keyword: string
-  status: string
-  registerTime: any[]
-}
-
-interface FormState {
-  username: string
-  nickname: string
-  password: string
-  email: string
-  phone: string
-  status: string
-  remark: string
-}
+import type { User } from '@/types/user'
 
+// 表格相关
 const loading = ref(false)
-const modalVisible = ref(false)
-const modalLoading = ref(false)
-const formRef = ref<FormInstance>()
-const editingUser = ref<User | null>(null)
-
-const searchForm = reactive<SearchForm>({
-  keyword: '',
-  status: '',
-  registerTime: []
-})
-
-const formState = reactive<FormState>({
-  username: '',
-  nickname: '',
-  password: '',
-  email: '',
-  phone: '',
-  status: 'active',
-  remark: ''
-})
-
-const formRules = {
-  username: [
-    { required: true, message: '请输入用户名', trigger: 'blur' },
-    { min: 4, max: 20, message: '用户名长度为4-20个字符', trigger: 'blur' }
-  ],
-  nickname: [
-    { required: true, message: '请输入昵称', trigger: 'blur' }
-  ],
-  password: [
-    { required: true, message: '请输入密码', trigger: 'blur' },
-    { min: 6, message: '密码长度至少6个字符', trigger: 'blur' }
-  ],
-  email: [
-    { type: 'email', message: '请输入有效的邮箱地址', trigger: 'blur' }
-  ],
-  phone: [
-    { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号', trigger: 'blur' }
-  ]
-}
-
-const userList = ref<User[]>([])
+const dataSource = ref<User[]>([])
 const pagination = reactive({
   current: 1,
-  pageSize: 20,
+  pageSize: 10,
   total: 0,
   showSizeChanger: true,
-  showQuickJumper: true,
-  showTotal: (total: number) => `共 ${total} 条记录`
+  showQuickJumper: true
 })
 
+// 搜索表单
+const searchForm = reactive({
+  keyword: '',
+  status: undefined as string | undefined,
+  registerTime: [] as [string, string] | []
+})
+
+// 表格列定义
 const columns = [
   {
-    title: '用户',
-    key: 'avatar',
-    width: 60,
-    align: 'center'
+    title: 'ID',
+    dataIndex: 'id',
+    width: 80
+  },
+  {
+    title: '头像',
+    dataIndex: 'avatar'
   },
   {
     title: '用户名',
-    dataIndex: 'username',
-    key: 'username',
-    width: 120
+    dataIndex: 'username'
   },
   {
     title: '昵称',
-    dataIndex: 'nickname',
-    key: 'nickname',
-    width: 120
-  },
-  {
-    title: '邮箱',
-    dataIndex: 'email',
-    key: 'email',
-    width: 150
+    dataIndex: 'nickname'
   },
   {
     title: '手机号',
-    dataIndex: 'phone',
-    key: 'phone',
-    width: 120
-  },
-  {
-    title: '等级',
-    key: 'level',
-    width: 80,
-    align: 'center'
-  },
-  {
-    title: '积分',
-    dataIndex: 'points',
-    key: 'points',
-    width: 80,
-    align: 'center'
+    dataIndex: 'phone'
   },
   {
     title: '状态',
-    key: 'status',
-    width: 80,
-    align: 'center'
+    dataIndex: 'status'
+  },
+  {
+    title: '等级',
+    dataIndex: 'level'
   },
   {
     title: '注册时间',
-    dataIndex: 'created_at',
-    key: 'created_at',
-    width: 120
+    dataIndex: 'created_at'
   },
   {
     title: '操作',
-    key: 'actions',
-    width: 200,
-    align: 'center'
+    dataIndex: 'action',
+    fixed: 'right' as const,
+    width: 150
   }
 ]
 
-const modalTitle = computed(() => editingUser.value ? '编辑用户' : '新增用户')
-const isCreate = computed(() => !editingUser.value)
+// 模态框相关
+const modalVisible = ref(false)
+const detailVisible = ref(false)
+const modalLoading = ref(false)
+const modalTitle = ref('新增用户')
+const isEditing = ref(false)
+
+// 表单相关
+const userFormRef = ref()
+const currentUser = ref<Partial<User>>({})
+const detailUser = ref<Partial<User>>({})
+const avatarFileList = ref<UploadProps['fileList']>([])
+
+// 表单规则
+const formRules = {
+  username: [
+    { required: true, message: '请输入用户名' },
+    { min: 3, max: 20, message: '用户名长度为3-20个字符' }
+  ],
+  nickname: [
+    { required: true, message: '请输入昵称' },
+    { min: 2, max: 20, message: '昵称长度为2-20个字符' }
+  ],
+  phone: [
+    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号' }
+  ],
+  email: [
+    { type: 'email', message: '请输入正确的邮箱地址' }
+  ]
+}
 
 // 状态映射
-const getStatusColor = (status: string) => {
-  const colors = {
-    active: 'green',
-    inactive: 'orange',
-    banned: 'red'
-  }
-  return colors[status as keyof typeof colors] || 'default'
+const statusMap: Record<string, string> = {
+  active: '正常',
+  inactive: '禁用',
+  banned: '封禁'
 }
 
+const statusColorMap: Record<string, string> = {
+  active: 'green',
+  inactive: 'orange',
+  banned: 'red'
+}
+
+const levelMap: Record<number, string> = {
+  0: '普通用户',
+  1: '认证用户',
+  2: '管理员',
+  3: '超级管理员'
+}
+
+const levelColorMap: Record<number, string> = {
+  0: 'default',
+  1: 'blue',
+  2: 'orange',
+  3: 'red'
+}
+
+const genderMap: Record<number, string> = {
+  0: '未知',
+  1: '男',
+  2: '女'
+}
+
+// 获取状态文本
 const getStatusText = (status: string) => {
-  const texts = {
-    active: '正常',
-    inactive: '禁用',
-    banned: '封禁'
-  }
-  return texts[status as keyof typeof texts] || '未知'
+  return statusMap[status] || status
 }
 
-// 生命周期
-onMounted(() => {
-  loadUsers()
-})
+// 获取状态颜色
+const getStatusColor = (status: string) => {
+  return statusColorMap[status] || 'default'
+}
 
-// 方法
-const loadUsers = async () => {
-  loading.value = true
+// 获取等级文本
+const getLevelText = (level: number) => {
+  return levelMap[level] || `等级${level}`
+}
+
+// 获取等级颜色
+const getLevelColor = (level: number) => {
+  return levelColorMap[level] || 'default'
+}
+
+// 获取性别文本
+const getGenderText = (gender: number) => {
+  return genderMap[gender] || '未知'
+}
+
+// 格式化日期
+const formatDate = (date: string) => {
+  return date ? new Date(date).toLocaleString() : '-'
+}
+
+// 处理表格变化
+const handleTableChange = (pager: any) => {
+  pagination.current = pager?.current || 1
+  pagination.pageSize = pager?.pageSize || 10
+  fetchUsers()
+}
+
+// 搜索
+const handleSearch = () => {
+  pagination.current = 1
+  fetchUsers()
+}
+
+// 重置
+const handleReset = () => {
+  searchForm.keyword = ''
+  searchForm.status = undefined
+  searchForm.registerTime = []
+  pagination.current = 1
+  fetchUsers()
+}
+
+// 刷新
+const handleRefresh = () => {
+  fetchUsers()
+}
+
+// 获取用户列表
+const fetchUsers = async () => {
   try {
-    const response = await getUsers({
+    loading.value = true
+    const params = {
       page: pagination.current,
       pageSize: pagination.pageSize,
       keyword: searchForm.keyword,
-      status: searchForm.status
-    })
+      status: searchForm.status,
+      startTime: searchForm.registerTime[0],
+      endTime: searchForm.registerTime[1]
+    }
     
-    userList.value = response.data
-    pagination.total = response.pagination?.total || 0
+    const response = await getUsers(params)
+    dataSource.value = response.data.data.users
+    pagination.total = response.data.data.pagination.total
   } catch (error) {
-    message.error('加载用户列表失败')
+    console.error('获取用户列表失败:', error)
+    message.error('获取用户列表失败')
   } finally {
     loading.value = false
   }
 }
 
-const handleSearch = () => {
-  pagination.current = 1
-  loadUsers()
-}
-
-const handleReset = () => {
-  Object.assign(searchForm, {
-    keyword: '',
-    status: '',
-    registerTime: []
-  })
-  pagination.current = 1
-  loadUsers()
-}
-
-const handleRefresh = () => {
-  loadUsers()
-  message.success('数据已刷新')
-}
-
-const handleTableChange: TableProps['onChange'] = (pag) => {
-  pagination.current = pag.current!
-  pagination.pageSize = pag.pageSize!
-  loadUsers()
-}
-
+// 显示创建模态框
 const showCreateModal = () => {
-  editingUser.value = null
-  Object.assign(formState, {
-    username: '',
-    nickname: '',
-    password: '',
-    email: '',
-    phone: '',
-    status: 'active',
-    remark: ''
-  })
+  modalTitle.value = '新增用户'
+  isEditing.value = false
+  currentUser.value = {}
+  avatarFileList.value = []
   modalVisible.value = true
 }
 
-const handleView = async (record: User) => {
+// 显示编辑模态框
+const showEditModal = async (record: User) => {
   try {
-    const response = await getUser(record.id)
-    Modal.info({
-      title: '用户详情',
-      width: 600,
-      content: h('div', { class: 'user-detail-modal' }, [
-        h('a-descriptions', {
-          column: 1,
-          bordered: true
-        }, [
-          h('a-descriptions-item', { label: '用户ID' }, response.data.id),
-          h('a-descriptions-item', { label: '用户名' }, response.data.username),
-          h('a-descriptions-item', { label: '昵称' }, response.data.nickname),
-          h('a-descriptions-item', { label: '头像' }, [
-            h('a-avatar', {
-              src: response.data.avatar,
-              size: 64,
-              shape: 'square'
-            })
-          ]),
-          h('a-descriptions-item', { label: '性别' }, response.data.gender),
-          h('a-descriptions-item', { label: '生日' }, response.data.birthday),
-          h('a-descriptions-item', { label: '手机号' }, response.data.phone),
-          h('a-descriptions-item', { label: '邮箱' }, response.data.email),
-          h('a-descriptions-item', { label: '状态' }, [
-            h('a-tag', { color: getStatusColor(response.data.status) }, getStatusText(response.data.status))
-          ]),
-          h('a-descriptions-item', { label: '等级' }, `Lv.${response.data.level}`),
-          h('a-descriptions-item', { label: '积分' }, response.data.points),
-          h('a-descriptions-item', { label: '注册时间' }, response.data.created_at),
-          h('a-descriptions-item', { label: '更新时间' }, response.data.updated_at)
-        ])
-      ])
-    })
-  } catch (error) {
-    message.error('获取用户详情失败')
-  }
-}
-
-const handleEdit = (record: User) => {
-  editingUser.value = record
-  Object.assign(formState, {
-    username: record.username,
-    nickname: record.nickname,
-    password: '',
-    email: record.email,
-    phone: record.phone,
-    status: record.status,
-    remark: ''
-  })
-  modalVisible.value = true
-}
-
-const handleDisable = async (record: User) => {
-  Modal.confirm({
-    title: '确认禁用',
-    content: `确定要禁用用户 "${record.nickname}" 吗？`,
-    onOk: async () => {
-      try {
-        await updateUser(record.id, { status: 'inactive' })
-        message.success('用户已禁用')
-        loadUsers()
-      } catch (error) {
-        message.error('操作失败')
-      }
-    }
-  })
-}
-
-const handleEnable = async (record: User) => {
-  Modal.confirm({
-    title: '确认启用',
-    content: `确定要启用用户 "${record.nickname}" 吗？`,
-    onOk: async () => {
-      try {
-        await updateUser(record.id, { status: 'active' })
-        message.success('用户已启用')
-        loadUsers()
-      } catch (error) {
-        message.error('操作失败')
-      }
-    }
-  })
-}
-
-const handleBan = async (record: User) => {
-  Modal.confirm({
-    title: '确认封禁',
-    content: `确定要封禁用户 "${record.nickname}" 吗？`,
-    onOk: async () => {
-      try {
-        await updateUser(record.id, { status: 'banned' })
-        message.success('用户已封禁')
-        loadUsers()
-      } catch (error) {
-        message.error('操作失败')
-      }
-    }
-  })
-}
-
-const handleDelete = async (record: User) => {
-  Modal.confirm({
-    title: '确认删除',
-    content: `确定要删除用户 "${record.nickname}" 吗？此操作不可恢复。`,
-    okText: '确定',
-    okType: 'danger',
-    cancelText: '取消',
-    onOk: async () => {
-      try {
-        await deleteUser(record.id)
-        message.success('用户已删除')
-        loadUsers()
-      } catch (error) {
-        message.error('删除失败')
-      }
-    }
-  })
-}
-
-const handleModalOk = async () => {
-  try {
-    await formRef.value?.validate()
     modalLoading.value = true
+    modalTitle.value = '编辑用户'
+    isEditing.value = true
     
-    if (editingUser.value) {
-      // 编辑用户
-      await updateUser(editingUser.value.id, formState)
-      message.success('用户信息更新成功')
+    // 获取用户详情
+    const response = await getUser(record.id)
+    currentUser.value = response.data.data
+    
+    // 设置头像文件列表
+    if (response.data.data.avatar) {
+      avatarFileList.value = [
+        {
+          uid: '-1',
+          name: 'avatar.png',
+          status: 'done',
+          url: response.data.data.avatar
+        }
+      ]
     } else {
-      // 创建用户
-      await createUser(formState)
-      message.success('用户创建成功')
+      avatarFileList.value = []
     }
     
-    modalVisible.value = false
-    loadUsers()
+    modalVisible.value = true
   } catch (error) {
-    console.error('表单验证失败:', error)
+    console.error('获取用户详情失败:', error)
+    message.error('获取用户详情失败')
   } finally {
     modalLoading.value = false
   }
 }
 
+// 显示详情模态框
+const showDetailModal = async (record: User) => {
+  try {
+    const response = await getUser(record.id)
+    detailUser.value = response.data.data
+    detailVisible.value = true
+  } catch (error) {
+    console.error('获取用户详情失败:', error)
+    message.error('获取用户详情失败')
+  }
+}
+
+// 处理模态框确认
+const handleModalOk = () => {
+  userFormRef.value
+    ?.validate()
+    .then(() => {
+      if (isEditing.value) {
+        handleUpdateUser()
+      } else {
+        handleCreateUser()
+      }
+    })
+    .catch((error: any) => {
+      console.error('表单验证失败:', error)
+    })
+}
+
+// 处理模态框取消
 const handleModalCancel = () => {
   modalVisible.value = false
+  userFormRef.value?.resetFields()
 }
+
+// 创建用户
+const handleCreateUser = async () => {
+  try {
+    modalLoading.value = true
+    await createUser(currentUser.value)
+    message.success('创建用户成功')
+    modalVisible.value = false
+    fetchUsers()
+  } catch (error) {
+    console.error('创建用户失败:', error)
+    message.error('创建用户失败')
+  } finally {
+    modalLoading.value = false
+  }
+}
+
+// 更新用户
+const handleUpdateUser = async () => {
+  try {
+    modalLoading.value = true
+    await updateUser(currentUser.value.id!, currentUser.value)
+    message.success('更新用户成功')
+    modalVisible.value = false
+    fetchUsers()
+  } catch (error) {
+    console.error('更新用户失败:', error)
+    message.error('更新用户失败')
+  } finally {
+    modalLoading.value = false
+  }
+}
+
+// 删除用户
+const handleDelete = async (id: number) => {
+  try {
+    await deleteUser(id)
+    message.success('删除用户成功')
+    fetchUsers()
+  } catch (error) {
+    console.error('删除用户失败:', error)
+    message.error('删除用户失败')
+  }
+}
+
+// 头像上传前处理
+const beforeUpload: UploadProps['beforeUpload'] = (file) => {
+  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
+  if (!isJpgOrPng) {
+    message.error('只能上传 JPG/PNG 格式的图片!')
+  }
+  const isLt2M = file.size / 1024 / 1024 < 2
+  if (!isLt2M) {
+    message.error('图片大小不能超过 2MB!')
+  }
+  return isJpgOrPng && isLt2M
+}
+
+// 处理头像变化
+const handleAvatarChange: UploadProps['onChange'] = ({ file }) => {
+  if (file.status === 'done') {
+    // 这里应该从服务器获取上传后的图片URL
+    // 暂时使用本地预览URL
+    currentUser.value.avatar = file.response?.url || file.thumbUrl
+  } else if (file.status === 'error') {
+    message.error('上传失败')
+  }
+}
+
+// 组件挂载时获取数据
+onMounted(() => {
+  fetchUsers()
+})
 </script>
 
 <style scoped lang="less">
 .user-management {
-  .search-container {
-    margin-bottom: 16px;
-    padding: 16px;
-    background: #fafafa;
-    border-radius: 6px;
-    
-    :deep(.ant-form-item) {
-      margin-bottom: 16px;
-    }
-  }
+  padding: 24px;
+  background: #f5f5f5;
+  min-height: calc(100vh - 64px);
 }
 
-:deep(.ant-table-thead > tr > th) {
-  background: #fafafa;
-  font-weight: 600;
+.search-container {
+  margin-bottom: 24px;
+  padding: 24px;
+  background: white;
+  border-radius: 6px;
+}
+
+.table-container {
+  background: white;
+  padding: 24px;
+  border-radius: 6px;
+}
+
+.avatar-uploader :deep(.ant-upload) {
+  width: 128px;
+  height: 128px;
 }
 </style>
\ No newline at end of file
diff --git a/admin-system/src/router/index.ts b/admin-system/src/router/index.ts
index 3b7f274..b16bd83 100644
--- a/admin-system/src/router/index.ts
+++ b/admin-system/src/router/index.ts
@@ -21,7 +21,8 @@ const routes: RouteRecordRaw[] = [
     meta: { 
       requiresAuth: true,
       title: '仪表板',
-      icon: 'DashboardOutlined'
+      icon: 'DashboardOutlined',
+      layout: 'main'  // 添加布局信息
     }
   },
   {
@@ -32,7 +33,8 @@ const routes: RouteRecordRaw[] = [
       requiresAuth: true,
       title: '用户管理',
       icon: 'UserOutlined',
-      permissions: ['user:read']
+      permissions: ['user:read'],
+      layout: 'main'  // 添加布局信息
     }
   },
   {
@@ -43,7 +45,8 @@ const routes: RouteRecordRaw[] = [
       requiresAuth: true,
       title: '商家管理',
       icon: 'ShopOutlined',
-      permissions: ['merchant:read']
+      permissions: ['merchant:read'],
+      layout: 'main'  // 添加布局信息
     }
   },
   {
@@ -54,7 +57,8 @@ const routes: RouteRecordRaw[] = [
       requiresAuth: true,
       title: '旅行管理',
       icon: 'CompassOutlined',
-      permissions: ['travel:read']
+      permissions: ['travel:read'],
+      layout: 'main'  // 添加布局信息
     }
   },
   {
@@ -65,7 +69,8 @@ const routes: RouteRecordRaw[] = [
       requiresAuth: true,
       title: '动物管理',
       icon: 'HeartOutlined',
-      permissions: ['animal:read']
+      permissions: ['animal:read'],
+      layout: 'main'  // 添加布局信息
     }
   },
   {
@@ -76,7 +81,8 @@ const routes: RouteRecordRaw[] = [
       requiresAuth: true,
       title: '订单管理',
       icon: 'ShoppingCartOutlined',
-      permissions: ['order:read']
+      permissions: ['order:read'],
+      layout: 'main'  // 添加布局信息
     }
   },
   {
@@ -87,7 +93,8 @@ const routes: RouteRecordRaw[] = [
       requiresAuth: true,
       title: '推广管理',
       icon: 'GiftOutlined',
-      permissions: ['promotion:read']
+      permissions: ['promotion:read'],
+      layout: 'main'  // 添加布局信息
     }
   },
   {
@@ -98,7 +105,8 @@ const routes: RouteRecordRaw[] = [
       requiresAuth: true,
       title: '系统设置',
       icon: 'SettingOutlined',
-      permissions: ['system:read']
+      permissions: ['system:read'],
+      layout: 'main'  // 添加布局信息
     }
   },
   {
diff --git a/admin-system/vite.config.ts b/admin-system/vite.config.ts
index 00188de..67f5bfa 100644
--- a/admin-system/vite.config.ts
+++ b/admin-system/vite.config.ts
@@ -1,10 +1,23 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import { fileURLToPath, URL } from 'node:url'
+import { createHtmlPlugin } from 'vite-plugin-html'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [
+    vue(),
+    createHtmlPlugin({
+      minify: true,
+      inject: {
+        data: {
+          VITE_APP_NAME: process.env.VITE_APP_NAME || '结伴客后台管理系统',
+          VITE_APP_VERSION: process.env.VITE_APP_VERSION || '1.0.0',
+          VITE_API_BASE_URL: process.env.VITE_API_BASE_URL || '/api'
+        }
+      }
+    })
+  ],
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url)),
diff --git a/backend/src/routes/user.js b/backend/src/routes/user.js
index be30a48..ac8d2e8 100644
--- a/backend/src/routes/user.js
+++ b/backend/src/routes/user.js
@@ -178,7 +178,11 @@ router.put('/profile', authenticateUser, UserController.updateProfile);
  *       500:
  *         description: 服务器内部错误
  */
-// 已移除重复的GET /users 路由，避免冲突
+router.get('/', 
+  authenticateUser, 
+  requireAdmin(['admin', 'super_admin']), 
+  UserController.getUsers
+);
 
 /**
  * @swagger