diff --git a/package-lock.json b/package-lock.json
index 652e713..bb19ce5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,9 +8,9 @@
       "name": "deploy-helper-front",
       "version": "1.0.0",
       "dependencies": {
+        "@element-plus/icons-vue": "^2.3.1",
         "axios": "^1.7.9",
-        "tdesign-icons-vue-next": "^0.2.6",
-        "tdesign-vue-next": "^1.10.4",
+        "element-plus": "^2.6.1",
         "vue": "^3.5.12",
         "vue-router": "^4.5.0"
       },
@@ -53,15 +53,6 @@
         "node": ">=6.0.0"
       }
     },
-    "node_modules/@babel/runtime": {
-      "version": "7.28.2",
-      "resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.28.2.tgz",
-      "integrity": "sha512-KHp2IflsnGywDjBWDkR9iEqiWSpc8GIi0lgTT3mOElT0PP1tG26P4tmFI2YvAdzgq9RGyoHZQEIEdZy6Ec5xCA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
     "node_modules/@babel/types": {
       "version": "7.28.2",
       "resolved": "https://registry.npmmirror.com/@babel/types/-/types-7.28.2.tgz",
@@ -75,6 +66,24 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@ctrl/tinycolor": {
+      "version": "3.6.1",
+      "resolved": "https://registry.npmmirror.com/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz",
+      "integrity": "sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@element-plus/icons-vue": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmmirror.com/@element-plus/icons-vue/-/icons-vue-2.3.1.tgz",
+      "integrity": "sha512-XxVUZv48RZAd87ucGS48jPf6pKu0yV5UCg9f4FFwtrYxXOwWuVJo6wOvSLKEoMQKjv8GsX/mhP6UsC1lRwbUWg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.25.8",
       "resolved": "https://registry.npmmirror.com/@esbuild/aix-ppc64/-/aix-ppc64-0.25.8.tgz",
@@ -517,6 +526,31 @@
         "node": ">=18"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmmirror.com/@floating-ui/core/-/core-1.7.3.tgz",
+      "integrity": "sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.10"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmmirror.com/@floating-ui/dom/-/dom-1.7.3.tgz",
+      "integrity": "sha512-uZA413QEpNuhtb3/iIKoYMSK07keHPYeXF02Zhd6e213j+d1NamLix/mCLxBUDW/Gx52sPH2m+chlUsyaBs/Ag==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/core": "^1.7.3",
+        "@floating-ui/utils": "^0.2.10"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.10",
+      "resolved": "https://registry.npmmirror.com/@floating-ui/utils/-/utils-0.2.10.tgz",
+      "integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==",
+      "license": "MIT"
+    },
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.5.4",
       "resolved": "https://registry.npmmirror.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.4.tgz",
@@ -852,22 +886,10 @@
         "undici-types": "~6.21.0"
       }
     },
-    "node_modules/@types/sortablejs": {
-      "version": "1.15.8",
-      "resolved": "https://registry.npmmirror.com/@types/sortablejs/-/sortablejs-1.15.8.tgz",
-      "integrity": "sha512-b79830lW+RZfwaztgs1aVPgbasJ8e7AXtZYHTELNXZPsERt4ymJdjV4OccDbHQAvHrCcFpbF78jkm0R6h/pZVg==",
-      "license": "MIT"
-    },
-    "node_modules/@types/tinycolor2": {
-      "version": "1.4.6",
-      "resolved": "https://registry.npmmirror.com/@types/tinycolor2/-/tinycolor2-1.4.6.tgz",
-      "integrity": "sha512-iEN8J0BoMnsWBqjVbWH/c0G0Hh7O21lpR2/+PrvAVgWdzL7eexIFm4JN/Wn10PTcmNdtS6U67r499mlWMXOxNw==",
-      "license": "MIT"
-    },
-    "node_modules/@types/validator": {
-      "version": "13.15.2",
-      "resolved": "https://registry.npmmirror.com/@types/validator/-/validator-13.15.2.tgz",
-      "integrity": "sha512-y7pa/oEJJ4iGYBxOpfAKn5b9+xuihvzDVnC/OSvlVnGxVg0pOqmjiMafiJ1KVNQEaPZf9HsEp5icEwGg8uIe5Q==",
+    "node_modules/@types/web-bluetooth": {
+      "version": "0.0.16",
+      "resolved": "https://registry.npmmirror.com/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz",
+      "integrity": "sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==",
       "license": "MIT"
     },
     "node_modules/@vitejs/plugin-vue": {
@@ -993,6 +1015,100 @@
       "integrity": "sha512-cZy8Dq+uuIXbxCZpuLd2GJdeSO/lIzIspC2WtkqIpje5QyFbvLaI5wZtdUjLHjGZrlVX6GilejatWwVYYRc8tA==",
       "license": "MIT"
     },
+    "node_modules/@vueuse/core": {
+      "version": "9.13.0",
+      "resolved": "https://registry.npmmirror.com/@vueuse/core/-/core-9.13.0.tgz",
+      "integrity": "sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.16",
+        "@vueuse/metadata": "9.13.0",
+        "@vueuse/shared": "9.13.0",
+        "vue-demi": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/core/node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vueuse/metadata": {
+      "version": "9.13.0",
+      "resolved": "https://registry.npmmirror.com/@vueuse/metadata/-/metadata-9.13.0.tgz",
+      "integrity": "sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared": {
+      "version": "9.13.0",
+      "resolved": "https://registry.npmmirror.com/@vueuse/shared/-/shared-9.13.0.tgz",
+      "integrity": "sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==",
+      "license": "MIT",
+      "dependencies": {
+        "vue-demi": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared/node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/async-validator": {
+      "version": "4.2.5",
+      "resolved": "https://registry.npmmirror.com/async-validator/-/async-validator-4.2.5.tgz",
+      "integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==",
+      "license": "MIT"
+    },
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
@@ -1070,6 +1186,32 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/element-plus": {
+      "version": "2.10.5",
+      "resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-2.10.5.tgz",
+      "integrity": "sha512-O9wTDu3Tm51ACVByWrThtBhH4Ygefg1HGY5pyAaxnoIrj8uMN0GtZ4IREwR3Yw/6sM2HyxjrsGI/D46iUVP97A==",
+      "license": "MIT",
+      "dependencies": {
+        "@ctrl/tinycolor": "^3.4.1",
+        "@element-plus/icons-vue": "^2.3.1",
+        "@floating-ui/dom": "^1.0.1",
+        "@popperjs/core": "npm:@sxzz/popperjs-es@^2.11.7",
+        "@types/lodash": "^4.14.182",
+        "@types/lodash-es": "^4.17.6",
+        "@vueuse/core": "^9.1.0",
+        "async-validator": "^4.2.5",
+        "dayjs": "^1.11.13",
+        "escape-html": "^1.0.3",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21",
+        "lodash-unified": "^1.0.2",
+        "memoize-one": "^6.0.0",
+        "normalize-wheel-es": "^1.2.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/entities": {
       "version": "4.5.0",
       "resolved": "https://registry.npmmirror.com/entities/-/entities-4.5.0.tgz",
@@ -1169,6 +1311,12 @@
         "@esbuild/win32-x64": "0.25.8"
       }
     },
+    "node_modules/escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
+      "license": "MIT"
+    },
     "node_modules/estree-walker": {
       "version": "2.0.2",
       "resolved": "https://registry.npmmirror.com/estree-walker/-/estree-walker-2.0.2.tgz",
@@ -1338,12 +1486,29 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "license": "MIT"
+    },
     "node_modules/lodash-es": {
       "version": "4.17.21",
       "resolved": "https://registry.npmmirror.com/lodash-es/-/lodash-es-4.17.21.tgz",
       "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
       "license": "MIT"
     },
+    "node_modules/lodash-unified": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/lodash-unified/-/lodash-unified-1.0.3.tgz",
+      "integrity": "sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/lodash-es": "*",
+        "lodash": "*",
+        "lodash-es": "*"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.17",
       "resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.30.17.tgz",
@@ -1362,6 +1527,12 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/memoize-one": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmmirror.com/memoize-one/-/memoize-one-6.0.0.tgz",
+      "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==",
+      "license": "MIT"
+    },
     "node_modules/mime-db": {
       "version": "1.52.0",
       "resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
@@ -1383,12 +1554,6 @@
         "node": ">= 0.6"
       }
     },
-    "node_modules/mitt": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmmirror.com/mitt/-/mitt-3.0.1.tgz",
-      "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==",
-      "license": "MIT"
-    },
     "node_modules/nanoid": {
       "version": "3.3.11",
       "resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.11.tgz",
@@ -1407,6 +1572,12 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/normalize-wheel-es": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmmirror.com/normalize-wheel-es/-/normalize-wheel-es-1.2.0.tgz",
+      "integrity": "sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/picocolors/-/picocolors-1.1.1.tgz",
@@ -1500,12 +1671,6 @@
         "fsevents": "~2.3.2"
       }
     },
-    "node_modules/sortablejs": {
-      "version": "1.15.6",
-      "resolved": "https://registry.npmmirror.com/sortablejs/-/sortablejs-1.15.6.tgz",
-      "integrity": "sha512-aNfiuwMEpfBM/CN6LY0ibyhxPfPbyFeBTYJKCvzkJ2GkUpazIt3H+QIPAMHwqQ7tMKaHz1Qj+rJJCqljnf4p3A==",
-      "license": "MIT"
-    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -1515,61 +1680,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/tdesign-icons-vue-next": {
-      "version": "0.2.6",
-      "resolved": "https://registry.npmmirror.com/tdesign-icons-vue-next/-/tdesign-icons-vue-next-0.2.6.tgz",
-      "integrity": "sha512-Se/3N6AAfbpEyJfuBUCMcBl26FCfwUYCf9OwEFp1dw0HhMeCd6LENoZx0o43/V69NpcUGp+0Ya+xVuNKiP8M+Q==",
-      "dependencies": {
-        "@babel/runtime": "^7.16.3"
-      },
-      "peerDependencies": {
-        "vue": "^3.0.0"
-      }
-    },
-    "node_modules/tdesign-vue-next": {
-      "version": "1.15.2",
-      "resolved": "https://registry.npmmirror.com/tdesign-vue-next/-/tdesign-vue-next-1.15.2.tgz",
-      "integrity": "sha512-EGuI3zJZD5JA6BB+s/+PeFZ08lqcTJtFCdI4O+1QJ/ru4Rie6fTgkrCL+IR9R3NQNyG4Di5T2SziAbSH1v9j7Q==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.22.6",
-        "@popperjs/core": "^2.11.8",
-        "@types/lodash-es": "^4.17.12",
-        "@types/sortablejs": "^1.15.1",
-        "@types/tinycolor2": "^1.4.3",
-        "@types/validator": "^13.7.17",
-        "dayjs": "^1.11.10",
-        "lodash-es": "^4.17.21",
-        "mitt": "^3.0.1",
-        "sortablejs": "^1.15.0",
-        "tdesign-icons-vue-next": "^0.3.6",
-        "tinycolor2": "^1.6.0",
-        "validator": "^13.9.0"
-      },
-      "engines": {
-        "node": ">= 18"
-      },
-      "peerDependencies": {
-        "vue": ">=3.1.0"
-      }
-    },
-    "node_modules/tdesign-vue-next/node_modules/tdesign-icons-vue-next": {
-      "version": "0.3.6",
-      "resolved": "https://registry.npmmirror.com/tdesign-icons-vue-next/-/tdesign-icons-vue-next-0.3.6.tgz",
-      "integrity": "sha512-X9u90dBv8tPhfpguUyx+BzF8CU2ef2L4RXOO7MYOj1ufHCHwBXTF8L3GPfq6KZd/2u4vMLYAA8lGURn4PZZICw==",
-      "dependencies": {
-        "@babel/runtime": "^7.16.3"
-      },
-      "peerDependencies": {
-        "vue": "^3.0.0"
-      }
-    },
-    "node_modules/tinycolor2": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmmirror.com/tinycolor2/-/tinycolor2-1.6.0.tgz",
-      "integrity": "sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==",
-      "license": "MIT"
-    },
     "node_modules/tinyglobby": {
       "version": "0.2.14",
       "resolved": "https://registry.npmmirror.com/tinyglobby/-/tinyglobby-0.2.14.tgz",
@@ -1594,15 +1704,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/validator": {
-      "version": "13.15.15",
-      "resolved": "https://registry.npmmirror.com/validator/-/validator-13.15.15.tgz",
-      "integrity": "sha512-BgWVbCI72aIQy937xbawcs+hrVaN/CZ2UwutgaJ36hGqRrLNM+f5LUT/YPRbo8IV/ASeFzXszezV+y2+rq3l8A==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.10"
-      }
-    },
     "node_modules/vite": {
       "version": "7.0.6",
       "resolved": "https://registry.npmmirror.com/vite/-/vite-7.0.6.tgz",
diff --git a/package.json b/package.json
index 7205ff2..0c8bb57 100644
--- a/package.json
+++ b/package.json
@@ -11,8 +11,8 @@
   "dependencies": {
     "vue": "^3.5.12",
     "vue-router": "^4.5.0",
-    "tdesign-vue-next": "^1.10.4",
-    "tdesign-icons-vue-next": "^0.2.6",
+    "element-plus": "^2.6.1",
+    "@element-plus/icons-vue": "^2.3.1",
     "axios": "^1.7.9"
   },
   "devDependencies": {
diff --git a/src/api/index.js b/src/api/index.js
index 38d130d..e033324 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -1,5 +1,5 @@
 import axios from 'axios'
-import { MessagePlugin } from 'tdesign-vue-next'
+import { ElMessage } from 'element-plus'
 import auth from '@/utils/auth'
 
 // 创建axios实例
@@ -41,23 +41,23 @@ api.interceptors.response.use(
         case 401:
           // 未授权，清除token并跳转到登录页
           auth.logout()
-          MessagePlugin.error('登录已过期，请重新登录')
+          ElMessage.error('登录已过期，请重新登录')
           window.location.href = '/login'
           break
         case 403:
-          MessagePlugin.error('没有权限访问该资源')
+          ElMessage.error('没有权限访问该资源')
           break
         case 404:
-          MessagePlugin.error('请求的资源不存在')
+          ElMessage.error('请求的资源不存在')
           break
         case 500:
-          MessagePlugin.error('服务器内部错误')
+          ElMessage.error('服务器内部错误')
           break
         default:
-          MessagePlugin.error(data?.message || '请求失败')
+          ElMessage.error(data?.message || '请求失败')
       }
     } else {
-      MessagePlugin.error('网络连接失败，请检查网络设置')
+      ElMessage.error('网络连接失败，请检查网络设置')
     }
     
     return Promise.reject(error)
diff --git a/src/components/AppLayout.vue b/src/components/AppLayout.vue
index 032b855..e253a7c 100644
--- a/src/components/AppLayout.vue
+++ b/src/components/AppLayout.vue
@@ -1,69 +1,84 @@
 <template>
-  <t-layout style="height: 100vh;">
-    <t-header class="header">
+  <el-container style="height: 100vh;">
+    <el-header class="header">
       <div class="header-container">
-        <t-head-menu 
-          :value="activeMenu" 
-          theme="light"
-          @change="handleMenuChange"
+        <el-menu 
+          :default-active="activeMenu" 
+          mode="horizontal"
+          @select="handleMenuChange"
+          class="header-menu"
         >
-          <template #logo>
-            <div class="logo">
-              <span class="logo-text">DeployHelper</span>
-            </div>
-          </template>
+          <div class="logo">
+            <span class="logo-text">DeployHelper</span>
+          </div>
           
           <!-- 首页菜单项 - 未登录也能看到 -->
-          <t-menu-item value="home">首页</t-menu-item>
+          <el-menu-item index="home">首页</el-menu-item>
           
           <!-- 其他菜单项 - 只有登录后才显示 -->
           <template v-if="isLoggedIn">
-            <t-menu-item value="deploy">部署管理</t-menu-item>
-            <t-menu-item value="files">文件管理</t-menu-item>
-            <t-menu-item value="logs">日志管理</t-menu-item>
-            <t-menu-item value="users">用户管理</t-menu-item>
+            <el-menu-item index="deploy">部署管理</el-menu-item>
+            <el-menu-item index="files">文件管理</el-menu-item>
+            <el-menu-item index="logs">日志管理</el-menu-item>
+            <el-menu-item index="users">用户管理</el-menu-item>
           </template>
-        </t-head-menu>
+        </el-menu>
         
         <!-- 右侧操作区域 -->
         <div class="header-actions">
           <!-- 已登录：显示用户信息下拉菜单 -->
-          <t-dropdown 
+          <el-dropdown 
             v-if="isLoggedIn" 
-            :options="userMenuOptions" 
-            @click="handleUserMenuClick"
+            @command="handleUserMenuClick"
           >
-            <t-button variant="text" class="user-button">
-              <t-icon name="user" />
+            <el-button type="text" class="user-button">
+              <el-icon><User /></el-icon>
               <span class="username">{{ userInfo?.username || '用户' }}</span>
-              <t-icon name="chevron-down" />
-            </t-button>
-          </t-dropdown>
+              <el-icon><ArrowDown /></el-icon>
+            </el-button>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item command="profile">
+                  <el-icon><User /></el-icon>
+                  个人信息
+                </el-dropdown-item>
+                <el-dropdown-item command="change-password">
+                  <el-icon><Lock /></el-icon>
+                  修改密码
+                </el-dropdown-item>
+                <el-dropdown-item command="logout" divided>
+                  <el-icon><SwitchButton /></el-icon>
+                  退出登录
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
           
           <!-- 未登录：显示登录按钮 -->
-          <t-button 
+          <el-button 
             v-else 
-            theme="primary" 
-            size="medium"
+            type="primary" 
+            size="default"
             @click="goToLogin"
           >
-            <t-icon name="user" />
+            <el-icon><User /></el-icon>
             登录
-          </t-button>
+          </el-button>
         </div>
       </div>
-    </t-header>
+    </el-header>
     
-    <t-content class="content">
+    <el-main class="content">
       <slot />
-    </t-content>
-  </t-layout>
+    </el-main>
+  </el-container>
 </template>
 
 <script setup>
 import { ref, computed, onMounted } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
-import { MessagePlugin } from 'tdesign-vue-next'
+import { ElMessage } from 'element-plus'
+import { User, ArrowDown, Lock, SwitchButton } from '@element-plus/icons-vue'
 import { userApi } from '@/api/user'
 import auth from '@/utils/auth'
 
@@ -75,25 +90,6 @@ const activeMenu = ref('home')
 const isLoggedIn = computed(() => auth.isLoggedIn())
 const userInfo = computed(() => auth.getUserInfo())
 
-// 用户菜单选项
-const userMenuOptions = [
-  {
-    content: '个人信息',
-    value: 'profile',
-    icon: 'user'
-  },
-  {
-    content: '修改密码',
-    value: 'change-password',
-    icon: 'lock-on'
-  },
-  {
-    content: '退出登录',
-    value: 'logout',
-    icon: 'logout'
-  }
-]
-
 // 处理菜单切换
 const handleMenuChange = (value) => {
   activeMenu.value = value
@@ -113,18 +109,18 @@ const goToLogin = () => {
 }
 
 // 处理用户菜单点击
-const handleUserMenuClick = async (data) => {
-  switch (data.value) {
+const handleUserMenuClick = async (command) => {
+  switch (command) {
     case 'logout':
       await handleLogout()
       break
     case 'profile':
       // TODO: 跳转到个人信息页面
-      MessagePlugin.info('功能开发中')
+      ElMessage.info('功能开发中')
       break
     case 'change-password':
       // TODO: 跳转到修改密码页面
-      MessagePlugin.info('功能开发中')
+      ElMessage.info('功能开发中')
       break
   }
 }
@@ -138,7 +134,7 @@ const handleLogout = async () => {
   } finally {
     // 清除本地认证信息
     auth.logout()
-    MessagePlugin.success('已退出登录')
+    ElMessage.success('已退出登录')
     
     // 跳转到首页
     router.push('/home')
@@ -159,6 +155,7 @@ onMounted(() => {
 .header {
   background-color: #fff;
   border-bottom: 1px solid #e7e7e7;
+  padding: 0;
 }
 
 .header-container {
@@ -169,16 +166,22 @@ onMounted(() => {
   padding: 0 24px;
 }
 
+.header-menu {
+  flex: 1;
+  border-bottom: none;
+}
+
 .logo {
   display: flex;
   align-items: center;
   padding: 0 24px;
+  margin-right: 20px;
 }
 
 .logo-text {
   font-size: 20px;
   font-weight: bold;
-  color: #0052d9;
+  color: #409eff;
 }
 
 .content {
diff --git a/src/components/EmptyState.vue b/src/components/EmptyState.vue
index 6674b68..4081285 100644
--- a/src/components/EmptyState.vue
+++ b/src/components/EmptyState.vue
@@ -1,7 +1,9 @@
 <template>
   <div class="empty-state">
     <div class="empty-icon">
-      <t-icon :name="icon" size="64px" />
+      <el-icon :size="64" :color="'#d9d9d9'">
+        <component :is="iconComponent" />
+      </el-icon>
     </div>
     <div class="empty-content">
       <h3 class="empty-title">{{ title }}</h3>
@@ -14,10 +16,21 @@
 </template>
 
 <script setup>
-defineProps({
+import { computed } from 'vue'
+import { 
+  Inbox, 
+  Document, 
+  Folder, 
+  User, 
+  Setting,
+  Warning,
+  InfoFilled
+} from '@element-plus/icons-vue'
+
+const props = defineProps({
   icon: {
     type: String,
-    default: 'inbox'
+    default: 'Inbox'
   },
   title: {
     type: String,
@@ -28,6 +41,21 @@ defineProps({
     default: ''
   }
 })
+
+// 图标映射
+const iconMap = {
+  'Inbox': Inbox,
+  'Document': Document,
+  'Folder': Folder,
+  'User': User,
+  'Setting': Setting,
+  'Warning': Warning,
+  'InfoFilled': InfoFilled
+}
+
+const iconComponent = computed(() => {
+  return iconMap[props.icon] || Inbox
+})
 </script>
 
 <style scoped>
diff --git a/src/components/LoadingSpinner.vue b/src/components/LoadingSpinner.vue
index 4169e74..c5d572e 100644
--- a/src/components/LoadingSpinner.vue
+++ b/src/components/LoadingSpinner.vue
@@ -1,8 +1,11 @@
 <template>
   <div class="loading-spinner" :class="{ 'full-screen': fullScreen }">
     <div class="spinner-content">
-      <t-loading :size="size" />
-      <p v-if="text" class="loading-text">{{ text }}</p>
+      <el-loading 
+        :size="size" 
+        :text="text"
+        :background="fullScreen ? 'rgba(255, 255, 255, 0.8)' : 'transparent'"
+      />
     </div>
   </div>
 </template>
@@ -15,7 +18,7 @@ defineProps({
   },
   size: {
     type: String,
-    default: 'medium'
+    default: 'default'
   },
   text: {
     type: String,
@@ -38,7 +41,6 @@ defineProps({
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(255, 255, 255, 0.8);
   z-index: 9999;
 }
 
@@ -48,10 +50,4 @@ defineProps({
   align-items: center;
   gap: 16px;
 }
-
-.loading-text {
-  margin: 0;
-  color: #8c8c8c;
-  font-size: 14px;
-}
 </style>
\ No newline at end of file
diff --git a/src/components/PageHeader.vue b/src/components/PageHeader.vue
index c9f1222..3970102 100644
--- a/src/components/PageHeader.vue
+++ b/src/components/PageHeader.vue
@@ -10,12 +10,12 @@
       </div>
     </div>
     <div v-if="showBreadcrumb" class="page-breadcrumb">
-      <t-breadcrumb>
-        <t-breadcrumb-item v-for="item in breadcrumbItems" :key="item.path">
+      <el-breadcrumb separator="/">
+        <el-breadcrumb-item v-for="item in breadcrumbItems" :key="item.path">
           <router-link v-if="item.path" :to="item.path">{{ item.title }}</router-link>
           <span v-else>{{ item.title }}</span>
-        </t-breadcrumb-item>
-      </t-breadcrumb>
+        </el-breadcrumb-item>
+      </el-breadcrumb>
     </div>
   </div>
 </template>
diff --git a/src/components/ProjectCard.vue b/src/components/ProjectCard.vue
index 370fe15..3c73e40 100644
--- a/src/components/ProjectCard.vue
+++ b/src/components/ProjectCard.vue
@@ -1,53 +1,54 @@
 <template>
-  <t-card class="project-card" hover shadow>
+  <el-card class="project-card" shadow="hover">
     <div class="project-header">
       <div class="project-info">
         <h3 class="project-name">{{ project.name || '未命名项目' }}</h3>
         <p class="project-description">{{ project.description || '暂无描述' }}</p>
       </div>
       <div class="project-status">
-        <t-tag 
-          :theme="getStatusTheme(project.status)" 
-          :variant="project.status === 'success' ? 'light' : 'outline'"
+        <el-tag 
+          :type="getStatusType(project.status)" 
+          :effect="project.status === 'success' ? 'light' : 'plain'"
         >
           {{ getStatusText(project.status) }}
-        </t-tag>
+        </el-tag>
       </div>
     </div>
     
     <div class="project-details">
       <div class="detail-item">
-        <t-icon name="folder" size="16px" />
+        <el-icon><Folder /></el-icon>
         <span>{{ project.path || '/' }}</span>
       </div>
       <div class="detail-item">
-        <t-icon name="time" size="16px" />
+        <el-icon><Clock /></el-icon>
         <span>{{ formatTime(project.updatedAt || project.createdAt) }}</span>
       </div>
       <div class="detail-item" v-if="project.version">
-        <t-icon name="tag" size="16px" />
+        <el-icon><PriceTag /></el-icon>
         <span>v{{ project.version }}</span>
       </div>
     </div>
     
     <div class="project-actions">
-      <t-button size="small" variant="outline" @click="$emit('view', project)">
+      <el-button size="small" @click="$emit('view', project)">
         查看详情
-      </t-button>
-      <t-button 
+      </el-button>
+      <el-button 
         size="small" 
-        theme="primary" 
+        type="primary" 
         @click="$emit('deploy', project)"
         :loading="deploying"
       >
         {{ deploying ? '部署中...' : '部署' }}
-      </t-button>
+      </el-button>
     </div>
-  </t-card>
+  </el-card>
 </template>
 
 <script setup>
 import { ref } from 'vue'
+import { Folder, Clock, PriceTag } from '@element-plus/icons-vue'
 import { formatDistanceToNow } from '@/utils/format'
 
 const props = defineProps({
@@ -61,15 +62,15 @@ const emit = defineEmits(['view', 'deploy'])
 
 const deploying = ref(false)
 
-// 获取状态主题色
-const getStatusTheme = (status) => {
-  const themes = {
+// 获取状态类型
+const getStatusType = (status) => {
+  const types = {
     success: 'success',
     running: 'warning', 
     failed: 'danger',
-    pending: 'default'
+    pending: 'info'
   }
-  return themes[status] || 'default'
+  return types[status] || 'info'
 }
 
 // 获取状态文本
@@ -171,8 +172,4 @@ const formatTime = (time) => {
   gap: 8px;
   justify-content: flex-end;
 }
-
-:deep(.t-card__body) {
-  padding: 16px;
-}
 </style>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index a69d93c..ddbc387 100644
--- a/src/main.js
+++ b/src/main.js
@@ -2,13 +2,19 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
 
-// 引入 TDesign 样式和组件
-import TDesign from 'tdesign-vue-next'
-import 'tdesign-vue-next/es/style/index.css'
+// 引入 Element Plus 样式和组件
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 
 const app = createApp(App)
 
-app.use(TDesign)
+// 注册所有图标
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+  app.component(key, component)
+}
+
+app.use(ElementPlus)
 app.use(router)
 
 app.mount('#app')
\ No newline at end of file
diff --git a/src/views/Deploy.vue b/src/views/Deploy.vue
index 273b2bf..bbda26e 100644
--- a/src/views/Deploy.vue
+++ b/src/views/Deploy.vue
@@ -1,63 +1,111 @@
 <template>
   <div class="deploy">
-    <t-card title="部署管理">
-      <template #actions>
-        <t-button theme="primary" @click="handleCreate">
-          <t-icon name="add" />
-          创建部署
-        </t-button>
+    <el-card>
+      <template #header>
+        <div class="card-header">
+          <span>部署管理</span>
+          <el-button type="primary" @click="handleCreate">
+            <el-icon><Plus /></el-icon>
+            创建部署
+          </el-button>
+        </div>
       </template>
       
-      <t-table
+      <el-table
         :data="deployList"
-        :columns="columns"
         :loading="loading"
-        row-key="id"
-        :pagination="pagination"
-        @page-change="handlePageChange"
-      />
-    </t-card>
+        style="width: 100%"
+      >
+        <el-table-column prop="id" label="ID" width="80" />
+        <el-table-column prop="name" label="部署名称" />
+        <el-table-column prop="environment" label="环境" />
+        <el-table-column prop="status" label="状态">
+          <template #default="{ row }">
+            <el-tag :type="getStatusType(row.status)">
+              {{ row.status }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="user" label="操作用户" />
+        <el-table-column prop="createTime" label="创建时间" />
+        <el-table-column label="操作" width="150">
+          <template #default="{ row }">
+            <el-button type="primary" size="small" text>查看</el-button>
+            <el-button type="danger" size="small" text>删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      
+      <div class="pagination-container">
+        <el-pagination
+          v-model:current-page="pagination.current"
+          v-model:page-size="pagination.pageSize"
+          :total="pagination.total"
+          :page-sizes="[10, 20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </div>
+    </el-card>
     
     <!-- 创建部署对话框 -->
-    <t-dialog
-      v-model:visible="createVisible"
+    <el-dialog
+      v-model="createVisible"
       title="创建部署"
       width="600px"
-      @confirm="handleSubmit"
     >
-      <t-form ref="formRef" :data="formData" :rules="rules" label-width="100px">
-        <t-form-item label="部署名称" name="name">
-          <t-input v-model="formData.name" placeholder="请输入部署名称" />
-        </t-form-item>
-        <t-form-item label="部署环境" name="environment">
-          <t-select v-model="formData.environment" placeholder="请选择部署环境">
-            <t-option value="dev" label="开发环境" />
-            <t-option value="test" label="测试环境" />
-            <t-option value="prod" label="生产环境" />
-          </t-select>
-        </t-form-item>
-        <t-form-item label="部署文件" name="file">
-          <t-upload
-            v-model="formData.file"
-            theme="file-input"
-            placeholder="请选择部署文件"
-          />
-        </t-form-item>
-        <t-form-item label="描述" name="description">
-          <t-textarea
+      <el-form ref="formRef" :model="formData" :rules="rules" label-width="100px">
+        <el-form-item label="部署名称" prop="name">
+          <el-input v-model="formData.name" placeholder="请输入部署名称" />
+        </el-form-item>
+        <el-form-item label="部署环境" prop="environment">
+          <el-select v-model="formData.environment" placeholder="请选择部署环境" style="width: 100%">
+            <el-option value="dev" label="开发环境" />
+            <el-option value="test" label="测试环境" />
+            <el-option value="prod" label="生产环境" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="部署文件" prop="file">
+          <el-upload
+            v-model:file-list="formData.file"
+            action="#"
+            :auto-upload="false"
+            :limit="1"
+          >
+            <el-button type="primary">选择文件</el-button>
+            <template #tip>
+              <div class="el-upload__tip">
+                请选择要部署的文件
+              </div>
+            </template>
+          </el-upload>
+        </el-form-item>
+        <el-form-item label="描述" prop="description">
+          <el-input
             v-model="formData.description"
+            type="textarea"
             placeholder="请输入部署描述"
             :maxlength="200"
+            :rows="3"
+            show-word-limit
           />
-        </t-form-item>
-      </t-form>
-    </t-dialog>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="createVisible = false">取消</el-button>
+          <el-button type="primary" @click="handleSubmit">确定</el-button>
+        </span>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <script setup>
 import { ref, reactive, onMounted } from 'vue'
-import { MessagePlugin } from 'tdesign-vue-next'
+import { ElMessage } from 'element-plus'
+import { Plus } from '@element-plus/icons-vue'
 
 const loading = ref(false)
 const createVisible = ref(false)
@@ -82,61 +130,10 @@ const deployList = ref([
   }
 ])
 
-const columns = [
-  {
-    colKey: 'id',
-    title: 'ID',
-    width: 80
-  },
-  {
-    colKey: 'name',
-    title: '部署名称'
-  },
-  {
-    colKey: 'environment',
-    title: '环境'
-  },
-  {
-    colKey: 'status',
-    title: '状态',
-    cell: ({ row }) => {
-      if (!row || !row.status) return '-'
-      
-      const statusMap = {
-        '成功': 'success',
-        '失败': 'danger',
-        '进行中': 'warning'
-      }
-      return `<t-tag theme="${statusMap[row.status] || 'default'}">${row.status}</t-tag>`
-    }
-  },
-  {
-    colKey: 'user',
-    title: '操作用户'
-  },
-  {
-    colKey: 'createTime',
-    title: '创建时间'
-  },
-  {
-    colKey: 'action',
-    title: '操作',
-    cell: ({ row }) => {
-      if (!row || !row.id) return '-'
-      return `
-        <t-button theme="primary" variant="text" size="small">查看</t-button>
-        <t-button theme="danger" variant="text" size="small">删除</t-button>
-      `
-    }
-  }
-]
-
 const pagination = reactive({
   current: 1,
   pageSize: 10,
-  total: 2,
-  showJumper: true,
-  showSizer: true
+  total: 2
 })
 
 const formData = reactive({
@@ -147,9 +144,19 @@ const formData = reactive({
 })
 
 const rules = {
-  name: [{ required: true, message: '请输入部署名称' }],
-  environment: [{ required: true, message: '请选择部署环境' }],
-  file: [{ required: true, message: '请选择部署文件' }]
+  name: [{ required: true, message: '请输入部署名称', trigger: 'blur' }],
+  environment: [{ required: true, message: '请选择部署环境', trigger: 'change' }],
+  file: [{ required: true, message: '请选择部署文件', trigger: 'change' }]
+}
+
+// 获取状态类型
+const getStatusType = (status) => {
+  const types = {
+    '成功': 'success',
+    '失败': 'danger',
+    '进行中': 'warning'
+  }
+  return types[status] || 'info'
 }
 
 const handleCreate = () => {
@@ -157,9 +164,11 @@ const handleCreate = () => {
 }
 
 const handleSubmit = async () => {
-  const result = await formRef.value.validate()
-  if (result === true) {
-    MessagePlugin.success('部署创建成功')
+  if (!formRef.value) return
+  
+  try {
+    await formRef.value.validate()
+    ElMessage.success('部署创建成功')
     createVisible.value = false
     // 重置表单
     Object.keys(formData).forEach(key => {
@@ -169,12 +178,19 @@ const handleSubmit = async () => {
         formData[key] = ''
       }
     })
+  } catch (error) {
+    console.error('表单验证失败:', error)
   }
 }
 
-const handlePageChange = (pageInfo) => {
-  pagination.current = pageInfo.current
-  pagination.pageSize = pageInfo.pageSize
+const handleSizeChange = (size) => {
+  pagination.pageSize = size
+  // 重新加载数据
+}
+
+const handleCurrentChange = (page) => {
+  pagination.current = page
+  // 重新加载数据
 }
 
 onMounted(() => {
@@ -187,4 +203,22 @@ onMounted(() => {
   max-width: 1200px;
   margin: 0 auto;
 }
-</style>
\ No newline at end of file
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.pagination-container {
+  margin-top: 20px;
+  display: flex;
+  justify-content: center;
+}
+
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+}
+</style> 
\ No newline at end of file
diff --git a/src/views/Files.vue b/src/views/Files.vue
index 337601c..47e548c 100644
--- a/src/views/Files.vue
+++ b/src/views/Files.vue
@@ -1,61 +1,111 @@
 <template>
   <div class="files">
-    <t-card title="文件管理">
-      <template #actions>
-        <t-space>
-          <t-button theme="primary" @click="handleUpload">
-            <t-icon name="upload" />
-            上传文件
-          </t-button>
-          <t-button variant="outline" @click="handleRefresh">
-            <t-icon name="refresh" />
-            刷新
-          </t-button>
-        </t-space>
+    <el-card>
+      <template #header>
+        <div class="card-header">
+          <span>文件管理</span>
+          <div class="header-actions">
+            <el-button type="primary" @click="handleUpload">
+              <el-icon><Upload /></el-icon>
+              上传文件
+            </el-button>
+            <el-button @click="handleRefresh">
+              <el-icon><Refresh /></el-icon>
+              刷新
+            </el-button>
+          </div>
+        </div>
       </template>
       
-      <t-table
+      <el-table
         :data="fileList"
-        :columns="columns"
         :loading="loading"
-        row-key="id"
-        :pagination="pagination"
-        @page-change="handlePageChange"
-      />
-    </t-card>
+        style="width: 100%"
+      >
+        <el-table-column prop="id" label="ID" width="80" />
+        <el-table-column prop="filename" label="文件名">
+          <template #default="{ row }">
+            <div class="file-cell">
+              <el-icon><Document /></el-icon>
+              <span>{{ row.filename }}</span>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="size" label="文件大小" />
+        <el-table-column prop="type" label="文件类型">
+          <template #default="{ row }">
+            <el-tag :type="getFileType(row.type)">
+              {{ row.type }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="uploader" label="上传者" />
+        <el-table-column prop="uploadTime" label="上传时间" />
+        <el-table-column prop="status" label="状态">
+          <template #default="{ row }">
+            <el-tag type="success">{{ row.status }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="150">
+          <template #default="{ row }">
+            <el-button type="primary" size="small" text>下载</el-button>
+            <el-button type="danger" size="small" text>删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      
+      <div class="pagination-container">
+        <el-pagination
+          v-model:current-page="pagination.current"
+          v-model:page-size="pagination.pageSize"
+          :total="pagination.total"
+          :page-sizes="[10, 20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </div>
+    </el-card>
     
     <!-- 上传文件对话框 -->
-    <t-dialog
-      v-model:visible="uploadVisible"
+    <el-dialog
+      v-model="uploadVisible"
       title="上传文件"
       width="600px"
-      @confirm="handleUploadSubmit"
     >
-      <t-upload
-        v-model="uploadFiles"
-        theme="file-flow"
+      <el-upload
+        v-model:file-list="uploadFiles"
+        action="#"
         :auto-upload="false"
         multiple
-        :max="5"
+        :limit="5"
         accept=".zip,.tar,.gz,.jar,.war"
+        drag
       >
-        <t-upload-dragger>
-          <div class="upload-dragger-content">
-            <t-icon name="cloud-upload" size="48px" />
-            <div class="upload-text">
-              <div class="upload-tip">点击上传或将文件拖拽到此区域</div>
-              <div class="upload-sub-tip">支持 .zip、.tar、.gz、.jar、.war 格式</div>
-            </div>
+        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
+        <div class="el-upload__text">
+          将文件拖到此处，或<em>点击上传</em>
+        </div>
+        <template #tip>
+          <div class="el-upload__tip">
+            支持 .zip、.tar、.gz、.jar、.war 格式，最多上传5个文件
           </div>
-        </t-upload-dragger>
-      </t-upload>
-    </t-dialog>
+        </template>
+      </el-upload>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="uploadVisible = false">取消</el-button>
+          <el-button type="primary" @click="handleUploadSubmit">确定</el-button>
+        </span>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <script setup>
 import { ref, reactive, onMounted } from 'vue'
-import { MessagePlugin } from 'tdesign-vue-next'
+import { ElMessage } from 'element-plus'
+import { Upload, Refresh, Document } from '@element-plus/icons-vue'
 
 const loading = ref(false)
 const uploadVisible = ref(false)
@@ -91,80 +141,23 @@ const fileList = ref([
   }
 ])
 
-const columns = [
-  {
-    colKey: 'id',
-    title: 'ID',
-    width: 80
-  },
-  {
-    colKey: 'filename',
-    title: '文件名',
-    cell: ({ row }) => {
-      if (!row || !row.filename) return '-'
-      
-      return `<div class="file-cell">
-        <t-icon name="file" style="margin-right: 8px;" />
-        ${row.filename}
-      </div>`
-    }
-  },
-  {
-    colKey: 'size',
-    title: '文件大小'
-  },
-  {
-    colKey: 'type',
-    title: '文件类型',
-    cell: ({ row }) => {
-      if (!row || !row.type) return '-'
-      
-      const typeMap = {
-        'ZIP': 'primary',
-        'JAR': 'success',
-        'TAR.GZ': 'warning',
-        'WAR': 'danger'
-      }
-      return `<t-tag theme="${typeMap[row.type] || 'default'}">${row.type}</t-tag>`
-    }
-  },
-  {
-    colKey: 'uploader',
-    title: '上传者'
-  },
-  {
-    colKey: 'uploadTime',
-    title: '上传时间'
-  },
-  {
-    colKey: 'status',
-    title: '状态',
-    cell: ({ row }) => {
-      if (!row || !row.status) return '-'
-      return `<t-tag theme="success">${row.status}</t-tag>`
-    }
-  },
-  {
-    colKey: 'action',
-    title: '操作',
-    cell: ({ row }) => {
-      if (!row || !row.id) return '-'
-      return `
-        <t-button theme="primary" variant="text" size="small">下载</t-button>
-        <t-button theme="danger" variant="text" size="small">删除</t-button>
-      `
-    }
-  }
-]
-
 const pagination = reactive({
   current: 1,
   pageSize: 10,
-  total: 3,
-  showJumper: true,
-  showSizer: true
+  total: 3
 })
 
+// 获取文件类型标签样式
+const getFileType = (type) => {
+  const typeMap = {
+    'ZIP': 'primary',
+    'JAR': 'success',
+    'TAR.GZ': 'warning',
+    'WAR': 'danger'
+  }
+  return typeMap[type] || 'info'
+}
+
 const handleUpload = () => {
   uploadVisible.value = true
 }
@@ -173,24 +166,29 @@ const handleRefresh = () => {
   loading.value = true
   setTimeout(() => {
     loading.value = false
-    MessagePlugin.success('刷新成功')
+    ElMessage.success('刷新成功')
   }, 1000)
 }
 
 const handleUploadSubmit = () => {
   if (uploadFiles.value.length === 0) {
-    MessagePlugin.warning('请选择要上传的文件')
+    ElMessage.warning('请选择要上传的文件')
     return
   }
   
-  MessagePlugin.success('文件上传成功')
+  ElMessage.success('文件上传成功')
   uploadVisible.value = false
   uploadFiles.value = []
 }
 
-const handlePageChange = (pageInfo) => {
-  pagination.current = pageInfo.current
-  pagination.pageSize = pageInfo.pageSize
+const handleSizeChange = (size) => {
+  pagination.pageSize = size
+  // 重新加载数据
+}
+
+const handleCurrentChange = (page) => {
+  pagination.current = page
+  // 重新加载数据
 }
 
 onMounted(() => {
@@ -204,28 +202,32 @@ onMounted(() => {
   margin: 0 auto;
 }
 
-.file-cell {
+.card-header {
   display: flex;
+  justify-content: space-between;
   align-items: center;
 }
 
-.upload-dragger-content {
-  text-align: center;
-  padding: 40px 20px;
+.header-actions {
+  display: flex;
+  gap: 12px;
 }
 
-.upload-text {
-  margin-top: 16px;
+.file-cell {
+  display: flex;
+  align-items: center;
+  gap: 8px;
 }
 
-.upload-tip {
-  font-size: 16px;
-  color: #262626;
-  margin-bottom: 8px;
+.pagination-container {
+  margin-top: 20px;
+  display: flex;
+  justify-content: center;
 }
 
-.upload-sub-tip {
-  font-size: 14px;
-  color: #8c8c8c;
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
 }
 </style>
\ No newline at end of file
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 4a1fa58..41ee536 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -8,61 +8,65 @@
           <p class="page-subtitle">管理和部署您的项目</p>
         </div>
         <div class="header-actions" v-if="isLoggedIn">
-          <t-button theme="primary" @click="goToDeploy">
-            <t-icon name="add" />
+          <el-button type="primary" @click="goToDeploy">
+            <el-icon><Plus /></el-icon>
             新建项目
-          </t-button>
+          </el-button>
         </div>
       </div>
     </div>
 
     <!-- 未登录状态 -->
     <div v-if="!isLoggedIn" class="welcome-section">
-      <t-card class="welcome-card">
+      <el-card class="welcome-card">
         <div class="welcome-content">
           <h2 class="welcome-title">欢迎使用 DeployHelper</h2>
           <p class="welcome-subtitle">一个简单高效的部署管理系统</p>
           <div class="welcome-features">
             <div class="feature-item">
-              <t-icon name="rocket" size="24px" color="#0052d9" />
+              <el-icon size="24" color="#409eff"><Promotion /></el-icon>
               <span>快速部署</span>
             </div>
             <div class="feature-item">
-              <t-icon name="folder" size="24px" color="#00a870" />
+              <el-icon size="24" color="#67c23a"><Folder /></el-icon>
               <span>文件管理</span>
             </div>
             <div class="feature-item">
-              <t-icon name="chart" size="24px" color="#ed7b2f" />
+              <el-icon size="24" color="#e6a23c"><DataAnalysis /></el-icon>
               <span>日志监控</span>
             </div>
             <div class="feature-item">
-              <t-icon name="user" size="24px" color="#d54941" />
+              <el-icon size="24" color="#f56c6c"><User /></el-icon>
               <span>用户管理</span>
             </div>
           </div>
           <p class="login-hint">登录后查看您的项目</p>
         </div>
-      </t-card>
+      </el-card>
     </div>
 
     <!-- 已登录状态 - 项目列表 -->
     <div v-else class="projects-section">
       <!-- 加载状态 -->
       <div v-if="loading" class="loading-container">
-        <t-loading size="large" text="加载项目中..." />
+        <el-loading size="large" text="加载项目中..." />
       </div>
 
       <!-- 空状态 -->
       <div v-else-if="projects.length === 0" class="empty-state">
-        <t-empty 
-          icon="rocket"
-          title="还没有项目"
-          description="创建您的第一个项目开始部署之旅"
+        <el-empty 
+          description="还没有项目"
         >
-          <t-button theme="primary" @click="goToDeploy">
+          <template #image>
+            <el-icon size="64" color="#d9d9d9"><Promotion /></el-icon>
+          </template>
+          <template #description>
+            <p>创建您的第一个项目开始部署之旅</p>
+          </template>
+          <el-button type="primary" @click="goToDeploy">
             创建项目
-          </t-button>
-        </t-empty>
+          </el-button>
+        </el-empty>
       </div>
 
       <!-- 项目网格 -->
@@ -82,7 +86,8 @@
 <script setup>
 import { ref, computed, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
-import { MessagePlugin } from 'tdesign-vue-next'
+import { ElMessage } from 'element-plus'
+import { Plus, Promotion, Folder, DataAnalysis, User } from '@element-plus/icons-vue'
 import ProjectCard from '@/components/ProjectCard.vue'
 import { deployApi } from '@/api/deploy'
 import auth from '@/utils/auth'
@@ -110,11 +115,11 @@ const fetchProjects = async () => {
     if (response.data.code === 0) {
       projects.value = response.data.data?.list || []
     } else {
-      MessagePlugin.error(response.data.message || '获取项目列表失败')
+      ElMessage.error(response.data.message || '获取项目列表失败')
     }
   } catch (error) {
     console.error('获取项目列表错误:', error)
-    MessagePlugin.error('获取项目列表失败，请检查网络连接')
+    ElMessage.error('获取项目列表失败，请检查网络连接')
   } finally {
     loading.value = false
   }
@@ -128,13 +133,13 @@ const handleViewProject = (project) => {
 // 部署项目
 const handleDeployProject = async (project) => {
   try {
-    MessagePlugin.info('部署功能开发中...')
+    ElMessage.info('部署功能开发中...')
     // TODO: 实现部署逻辑
     // await deployApi.executeDeploy(project.id)
-    // MessagePlugin.success('部署成功')
+    // ElMessage.success('部署成功')
   } catch (error) {
     console.error('部署错误:', error)
-    MessagePlugin.error('部署失败')
+    ElMessage.error('部署失败')
   }
 }
 
@@ -207,7 +212,7 @@ onMounted(() => {
 .welcome-title {
   font-size: 28px;
   font-weight: bold;
-  color: #0052d9;
+  color: #409eff;
   margin: 0 0 16px 0;
 }
 
diff --git a/src/views/Login.vue b/src/views/Login.vue
index c54f1eb..7d91fb7 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -5,44 +5,48 @@
         <h1 class="login-title">DeployHelper</h1>
         <p class="login-subtitle">部署管理系统</p>
       </div>
-      
+
       <div class="login-form">
-                 <div class="form-item">
-           <t-input
-             v-model="formData.account"
-             placeholder="请输入用户名"
-             size="large"
-           >
-             <template #prefix-icon>
-               <t-icon name="user" />
-             </template>
-           </t-input>
-         </div>
-         
-         <div class="form-item">
-           <t-input
-             v-model="formData.password"
-             type="password"
-             placeholder="请输入密码"
-             size="large"
-             @keyup.enter="handleSubmit"
-           >
-             <template #prefix-icon>
-               <t-icon name="lock-on" />
-             </template>
-           </t-input>
-         </div>
-        
         <div class="form-item">
-          <t-button
-            theme="primary"
-            size="large"
-            block
-            :loading="loading"
-            @click="handleSubmit"
+          <el-input
+              v-model="formData.account"
+              placeholder="请输入用户名"
+              size="large"
+          >
+            <template #prefix>
+              <el-icon>
+                <User/>
+              </el-icon>
+            </template>
+          </el-input>
+        </div>
+
+        <div class="form-item">
+          <el-input
+              v-model="formData.password"
+              type="password"
+              placeholder="请输入密码"
+              size="large"
+              @keyup.enter="handleSubmit"
+          >
+            <template #prefix>
+              <el-icon>
+                <Lock/>
+              </el-icon>
+            </template>
+          </el-input>
+        </div>
+
+        <div class="form-item">
+          <el-button
+              type="primary"
+              size="large"
+              style="width: 100%"
+              :loading="loading"
+              @click="handleSubmit"
           >
             登录
-          </t-button>
+          </el-button>
         </div>
       </div>
     </div>
@@ -50,11 +54,12 @@
 </template>
 
 <script setup>
-import { ref, reactive } from 'vue'
-import { useRouter } from 'vue-router'
-import { MessagePlugin } from 'tdesign-vue-next'
+import {ref, reactive} from 'vue'
+import {useRouter} from 'vue-router'
+import {ElMessage} from 'element-plus'
+import {User, Lock} from '@element-plus/icons-vue'
 
-import { userApi } from '@/api/user'
+import {userApi} from '@/api/user'
 import auth from '@/utils/auth'
 
 const router = useRouter()
@@ -69,36 +74,36 @@ const formData = reactive({
 const handleSubmit = async () => {
   // 简单的表单验证
   if (!formData.account.trim()) {
-    MessagePlugin.error('请输入用户名')
+    ElMessage.error('请输入用户名')
     return
   }
   if (!formData.password.trim()) {
-    MessagePlugin.error('请输入密码')
+    ElMessage.error('请输入密码')
     return
   }
-  
+
   loading.value = true
-  
+
   try {
     const response = await userApi.login(formData)
-    
+
     if (response.data.code === 0) {
-      const { token, userInfo } = response.data.data
-      
+      const {token, userInfo} = response.data.data
+
       // 保存认证信息
       auth.setToken(token)
       auth.setUserInfo(userInfo)
-      
-      MessagePlugin.success('登录成功')
-      
+
+      ElMessage.success('登录成功')
+
       // 跳转到首页
       router.push('/home')
     } else {
-      MessagePlugin.error(response.data.message || '登录失败')
+      ElMessage.error(response.data.message || '登录失败')
     }
   } catch (error) {
     console.error('登录错误:', error)
-    MessagePlugin.error('登录失败，请检查网络连接')
+    ElMessage.error('登录失败，请检查网络连接')
   } finally {
     loading.value = false
   }
@@ -131,7 +136,7 @@ const handleSubmit = async () => {
 .login-title {
   font-size: 28px;
   font-weight: bold;
-  color: #0052d9;
+  color: #409eff;
   margin: 0 0 8px 0;
 }
 
@@ -153,11 +158,11 @@ const handleSubmit = async () => {
   margin-bottom: 0;
 }
 
-:deep(.t-input) {
+:deep(.el-input) {
   border-radius: 8px;
 }
 
-:deep(.t-button) {
+:deep(.el-button) {
   border-radius: 8px;
   height: 48px;
   font-size: 16px;
diff --git a/src/views/Logs.vue b/src/views/Logs.vue
index ad0dbd9..70aef73 100644
--- a/src/views/Logs.vue
+++ b/src/views/Logs.vue
@@ -1,69 +1,110 @@
 <template>
   <div class="logs">
-    <t-card title="日志管理">
-      <template #actions>
-        <t-space>
-          <t-input
-            v-model="searchKeyword"
-            placeholder="搜索日志内容"
-            style="width: 200px;"
-            @enter="handleSearch"
-          >
-            <template #suffix-icon>
-              <t-icon name="search" />
-            </template>
-          </t-input>
-          <t-select
-            v-model="logLevel"
-            placeholder="日志级别"
-            style="width: 120px;"
-            @change="handleFilter"
-          >
-            <t-option value="" label="全部" />
-            <t-option value="INFO" label="INFO" />
-            <t-option value="WARN" label="WARN" />
-            <t-option value="ERROR" label="ERROR" />
-            <t-option value="DEBUG" label="DEBUG" />
-          </t-select>
-          <t-button variant="outline" @click="handleRefresh">
-            <t-icon name="refresh" />
-            刷新
-          </t-button>
-        </t-space>
+    <el-card>
+      <template #header>
+        <div class="card-header">
+          <span>日志管理</span>
+          <div class="header-actions">
+            <el-input
+              v-model="searchKeyword"
+              placeholder="搜索日志内容"
+              style="width: 200px;"
+              @keyup.enter="handleSearch"
+            >
+              <template #suffix>
+                <el-icon><Search /></el-icon>
+              </template>
+            </el-input>
+            <el-select
+              v-model="logLevel"
+              placeholder="日志级别"
+              style="width: 120px;"
+              @change="handleFilter"
+            >
+              <el-option value="" label="全部" />
+              <el-option value="INFO" label="INFO" />
+              <el-option value="WARN" label="WARN" />
+              <el-option value="ERROR" label="ERROR" />
+              <el-option value="DEBUG" label="DEBUG" />
+            </el-select>
+            <el-button @click="handleRefresh">
+              <el-icon><Refresh /></el-icon>
+              刷新
+            </el-button>
+          </div>
+        </div>
       </template>
       
-      <t-table
+      <el-table
         :data="logList"
-        :columns="columns"
         :loading="loading"
-        row-key="id"
-        :pagination="pagination"
-        @page-change="handlePageChange"
-      />
-    </t-card>
+        style="width: 100%"
+      >
+        <el-table-column prop="id" label="ID" width="80" />
+        <el-table-column prop="level" label="级别" width="100">
+          <template #default="{ row }">
+            <el-tag :type="getLevelType(row.level)">
+              {{ row.level }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="module" label="模块" />
+        <el-table-column prop="message" label="消息" show-overflow-tooltip />
+        <el-table-column prop="user" label="用户" />
+        <el-table-column prop="timestamp" label="时间" />
+        <el-table-column label="操作" width="120">
+          <template #default="{ row }">
+            <el-button type="primary" size="small" text @click="showDetail(row)">
+              查看详情
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      
+      <div class="pagination-container">
+        <el-pagination
+          v-model:current-page="pagination.current"
+          v-model:page-size="pagination.pageSize"
+          :total="pagination.total"
+          :page-sizes="[10, 20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </div>
+    </el-card>
     
     <!-- 日志详情对话框 -->
-    <t-dialog
-      v-model:visible="detailVisible"
+    <el-dialog
+      v-model="detailVisible"
       title="日志详情"
       width="800px"
-      :footer="false"
     >
       <div class="log-detail" v-if="currentLog">
-        <t-descriptions :data="logDetailData" />
-        <t-divider />
+        <el-descriptions :column="2" border>
+          <el-descriptions-item label="日志ID">{{ currentLog.id }}</el-descriptions-item>
+          <el-descriptions-item label="级别">
+            <el-tag :type="getLevelType(currentLog.level)">{{ currentLog.level }}</el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="模块">{{ currentLog.module }}</el-descriptions-item>
+          <el-descriptions-item label="用户">{{ currentLog.user }}</el-descriptions-item>
+          <el-descriptions-item label="时间" :span="2">{{ currentLog.timestamp }}</el-descriptions-item>
+          <el-descriptions-item label="消息" :span="2">{{ currentLog.message }}</el-descriptions-item>
+        </el-descriptions>
+        <el-divider />
         <div class="log-content">
           <h4>日志内容</h4>
           <pre class="log-text">{{ currentLog.content }}</pre>
         </div>
       </div>
-    </t-dialog>
+    </el-dialog>
   </div>
 </template>
 
 <script setup>
-import { ref, reactive, computed, onMounted } from 'vue'
-import { MessagePlugin } from 'tdesign-vue-next'
+import { ref, reactive, onMounted } from 'vue'
+import { ElMessage } from 'element-plus'
+import { Search, Refresh } from '@element-plus/icons-vue'
 
 const loading = ref(false)
 const detailVisible = ref(false)
@@ -110,90 +151,35 @@ const logList = ref([
   }
 ])
 
-const columns = [
-  {
-    colKey: 'id',
-    title: 'ID',
-    width: 80
-  },
-  {
-    colKey: 'level',
-    title: '级别',
-    width: 100,
-    cell: ({ row }) => {
-      if (!row || !row.level) return '-'
-      
-      const levelMap = {
-        'INFO': { theme: 'primary', color: '#0052d9' },
-        'WARN': { theme: 'warning', color: '#ed7b2f' },
-        'ERROR': { theme: 'danger', color: '#e34d59' },
-        'DEBUG': { theme: 'default', color: '#8c8c8c' }
-      }
-      const config = levelMap[row.level] || levelMap['DEBUG']
-      return `<t-tag theme="${config.theme}">${row.level}</t-tag>`
-    }
-  },
-  {
-    colKey: 'module',
-    title: '模块'
-  },
-  {
-    colKey: 'message',
-    title: '消息',
-    ellipsis: true
-  },
-  {
-    colKey: 'user',
-    title: '用户'
-  },
-  {
-    colKey: 'timestamp',
-    title: '时间'
-  },
-  {
-    colKey: 'action',
-    title: '操作',
-    cell: ({ row }) => {
-      if (!row || !row.id) return '-'
-      return `<t-button theme="primary" variant="text" size="small" onclick="showDetail(${row.id})">查看详情</t-button>`
-    }
-  }
-]
-
 const pagination = reactive({
   current: 1,
   pageSize: 10,
-  total: 4,
-  showJumper: true,
-  showSizer: true
+  total: 4
 })
 
-const logDetailData = computed(() => {
-  if (!currentLog.value) return []
-  
-  return [
-    { label: '日志ID', value: currentLog.value.id },
-    { label: '级别', value: currentLog.value.level },
-    { label: '模块', value: currentLog.value.module },
-    { label: '用户', value: currentLog.value.user },
-    { label: '时间', value: currentLog.value.timestamp },
-    { label: '消息', value: currentLog.value.message }
-  ]
-})
+// 获取日志级别类型
+const getLevelType = (level) => {
+  const levelMap = {
+    'INFO': 'primary',
+    'WARN': 'warning',
+    'ERROR': 'danger',
+    'DEBUG': 'info'
+  }
+  return levelMap[level] || 'info'
+}
 
-// 全局函数，供表格调用
-window.showDetail = (id) => {
-  currentLog.value = logList.value.find(log => log.id === id)
+const showDetail = (log) => {
+  currentLog.value = log
   detailVisible.value = true
 }
 
 const handleSearch = () => {
-  MessagePlugin.info(`搜索关键词：${searchKeyword.value}`)
+  ElMessage.info(`搜索关键词：${searchKeyword.value}`)
   // 实际项目中这里会调用 API 进行搜索
 }
 
 const handleFilter = () => {
-  MessagePlugin.info(`筛选日志级别：${logLevel.value || '全部'}`)
+  ElMessage.info(`筛选日志级别：${logLevel.value || '全部'}`)
   // 实际项目中这里会调用 API 进行筛选
 }
 
@@ -201,13 +187,18 @@ const handleRefresh = () => {
   loading.value = true
   setTimeout(() => {
     loading.value = false
-    MessagePlugin.success('刷新成功')
+    ElMessage.success('刷新成功')
   }, 1000)
 }
 
-const handlePageChange = (pageInfo) => {
-  pagination.current = pageInfo.current
-  pagination.pageSize = pageInfo.pageSize
+const handleSizeChange = (size) => {
+  pagination.pageSize = size
+  // 重新加载数据
+}
+
+const handleCurrentChange = (page) => {
+  pagination.current = page
+  // 重新加载数据
 }
 
 onMounted(() => {
@@ -221,6 +212,24 @@ onMounted(() => {
   margin: 0 auto;
 }
 
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.header-actions {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+
+.pagination-container {
+  margin-top: 20px;
+  display: flex;
+  justify-content: center;
+}
+
 .log-detail {
   max-height: 600px;
   overflow-y: auto;
diff --git a/src/views/Users.vue b/src/views/Users.vue
index 8e24c8c..a90fb32 100644
--- a/src/views/Users.vue
+++ b/src/views/Users.vue
@@ -1,107 +1,163 @@
 <template>
   <div class="users">
-    <t-card title="用户管理">
-      <template #actions>
-        <t-space>
-          <t-button theme="primary" @click="handleCreate">
-            <t-icon name="user-add" />
-            添加用户
-          </t-button>
-          <t-button variant="outline" @click="handleRefresh">
-            <t-icon name="refresh" />
-            刷新
-          </t-button>
-        </t-space>
+    <el-card>
+      <template #header>
+        <div class="card-header">
+          <span>用户管理</span>
+          <div class="header-actions">
+            <el-button type="primary" @click="handleCreate">
+              <el-icon><User /></el-icon>
+              添加用户
+            </el-button>
+            <el-button @click="handleRefresh">
+              <el-icon><Refresh /></el-icon>
+              刷新
+            </el-button>
+          </div>
+        </div>
       </template>
       
-      <t-table
+      <el-table
         :data="userList"
-        :columns="columns"
         :loading="loading"
-        row-key="id"
-        :pagination="pagination"
-        @page-change="handlePageChange"
-      />
-    </t-card>
+        style="width: 100%"
+      >
+        <el-table-column prop="id" label="ID" width="80" />
+        <el-table-column prop="username" label="用户名" />
+        <el-table-column prop="realName" label="真实姓名" />
+        <el-table-column prop="email" label="邮箱" />
+        <el-table-column prop="phone" label="手机号" />
+        <el-table-column prop="role" label="角色">
+          <template #default="{ row }">
+            <el-tag :type="getRoleType(row.role)">
+              {{ getRoleLabel(row.role) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="status" label="状态">
+          <template #default="{ row }">
+            <el-tag :type="row.status === 'active' ? 'success' : 'info'">
+              {{ row.status === 'active' ? '启用' : '禁用' }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="lastLoginTime" label="最后登录" />
+        <el-table-column label="操作" width="200">
+          <template #default="{ row }">
+            <el-button type="primary" size="small" text @click="editUser(row)">
+              编辑
+            </el-button>
+            <el-button type="warning" size="small" text @click="resetUserPassword(row)">
+              重置密码
+            </el-button>
+            <el-button type="danger" size="small" text @click="deleteUser(row)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      
+      <div class="pagination-container">
+        <el-pagination
+          v-model:current-page="pagination.current"
+          v-model:page-size="pagination.pageSize"
+          :total="pagination.total"
+          :page-sizes="[10, 20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </div>
+    </el-card>
     
     <!-- 添加/编辑用户对话框 -->
-    <t-dialog
-      v-model:visible="formVisible"
+    <el-dialog
+      v-model="formVisible"
       :title="isEdit ? '编辑用户' : '添加用户'"
       width="600px"
-      @confirm="handleSubmit"
-      @cancel="handleCancel"
     >
-      <t-form ref="formRef" :data="formData" :rules="rules" label-width="100px">
-        <t-form-item label="用户名" name="username">
-          <t-input 
+      <el-form ref="formRef" :model="formData" :rules="rules" label-width="100px">
+        <el-form-item label="用户名" prop="username">
+          <el-input 
             v-model="formData.username" 
             placeholder="请输入用户名"
             :disabled="isEdit"
           />
-        </t-form-item>
-        <t-form-item label="真实姓名" name="realName">
-          <t-input v-model="formData.realName" placeholder="请输入真实姓名" />
-        </t-form-item>
-        <t-form-item label="邮箱" name="email">
-          <t-input v-model="formData.email" placeholder="请输入邮箱地址" />
-        </t-form-item>
-        <t-form-item label="手机号" name="phone">
-          <t-input v-model="formData.phone" placeholder="请输入手机号" />
-        </t-form-item>
-        <t-form-item label="角色" name="role">
-          <t-select v-model="formData.role" placeholder="请选择用户角色">
-            <t-option value="admin" label="管理员" />
-            <t-option value="user" label="普通用户" />
-            <t-option value="viewer" label="只读用户" />
-          </t-select>
-        </t-form-item>
-        <t-form-item label="状态" name="status">
-          <t-radio-group v-model="formData.status">
-            <t-radio value="active">启用</t-radio>
-            <t-radio value="inactive">禁用</t-radio>
-          </t-radio-group>
-        </t-form-item>
-        <t-form-item v-if="!isEdit" label="密码" name="password">
-          <t-input 
+        </el-form-item>
+        <el-form-item label="真实姓名" prop="realName">
+          <el-input v-model="formData.realName" placeholder="请输入真实姓名" />
+        </el-form-item>
+        <el-form-item label="邮箱" prop="email">
+          <el-input v-model="formData.email" placeholder="请输入邮箱地址" />
+        </el-form-item>
+        <el-form-item label="手机号" prop="phone">
+          <el-input v-model="formData.phone" placeholder="请输入手机号" />
+        </el-form-item>
+        <el-form-item label="角色" prop="role">
+          <el-select v-model="formData.role" placeholder="请选择用户角色" style="width: 100%">
+            <el-option value="admin" label="管理员" />
+            <el-option value="user" label="普通用户" />
+            <el-option value="viewer" label="只读用户" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-radio-group v-model="formData.status">
+            <el-radio value="active">启用</el-radio>
+            <el-radio value="inactive">禁用</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item v-if="!isEdit" label="密码" prop="password">
+          <el-input 
             v-model="formData.password" 
             type="password"
             placeholder="请输入初始密码"
           />
-        </t-form-item>
-      </t-form>
-    </t-dialog>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="formVisible = false">取消</el-button>
+          <el-button type="primary" @click="handleSubmit">确定</el-button>
+        </span>
+      </template>
+    </el-dialog>
     
     <!-- 重置密码对话框 -->
-    <t-dialog
-      v-model:visible="resetPasswordVisible"
+    <el-dialog
+      v-model="resetPasswordVisible"
       title="重置密码"
       width="400px"
-      @confirm="handleResetPassword"
     >
-      <t-form ref="passwordFormRef" :data="passwordData" :rules="passwordRules" label-width="100px">
-        <t-form-item label="新密码" name="newPassword">
-          <t-input 
+      <el-form ref="passwordFormRef" :model="passwordData" :rules="passwordRules" label-width="100px">
+        <el-form-item label="新密码" prop="newPassword">
+          <el-input 
             v-model="passwordData.newPassword" 
             type="password"
             placeholder="请输入新密码"
           />
-        </t-form-item>
-        <t-form-item label="确认密码" name="confirmPassword">
-          <t-input 
+        </el-form-item>
+        <el-form-item label="确认密码" prop="confirmPassword">
+          <el-input 
             v-model="passwordData.confirmPassword" 
             type="password"
             placeholder="请再次输入新密码"
           />
-        </t-form-item>
-      </t-form>
-    </t-dialog>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="resetPasswordVisible = false">取消</el-button>
+          <el-button type="primary" @click="handleResetPassword">确定</el-button>
+        </span>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <script setup>
 import { ref, reactive, onMounted } from 'vue'
-import { MessagePlugin, DialogPlugin } from 'tdesign-vue-next'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { User, Refresh } from '@element-plus/icons-vue'
 
 const loading = ref(false)
 const formVisible = ref(false)
@@ -147,79 +203,10 @@ const userList = ref([
   }
 ])
 
-const columns = [
-  {
-    colKey: 'id',
-    title: 'ID',
-    width: 80
-  },
-  {
-    colKey: 'username',
-    title: '用户名'
-  },
-  {
-    colKey: 'realName',
-    title: '真实姓名'
-  },
-  {
-    colKey: 'email',
-    title: '邮箱'
-  },
-  {
-    colKey: 'phone',
-    title: '手机号'
-  },
-  {
-    colKey: 'role',
-    title: '角色',
-    cell: ({ row }) => {
-      if (!row || !row.role) return '-'
-      
-      const roleMap = {
-        'admin': { label: '管理员', theme: 'danger' },
-        'user': { label: '普通用户', theme: 'primary' },
-        'viewer': { label: '只读用户', theme: 'default' }
-      }
-      const config = roleMap[row.role] || roleMap['viewer']
-      return `<t-tag theme="${config.theme}">${config.label}</t-tag>`
-    }
-  },
-  {
-    colKey: 'status',
-    title: '状态',
-    cell: ({ row }) => {
-      if (!row || !row.status) return '-'
-      
-      return row.status === 'active' 
-        ? '<t-tag theme="success">启用</t-tag>'
-        : '<t-tag theme="default">禁用</t-tag>'
-    }
-  },
-  {
-    colKey: 'lastLoginTime',
-    title: '最后登录'
-  },
-  {
-    colKey: 'action',
-    title: '操作',
-    cell: ({ row }) => {
-      if (!row || !row.id) return '-'
-      
-      return `
-        <t-button theme="primary" variant="text" size="small" onclick="editUser(${row.id})">编辑</t-button>
-        <t-button theme="warning" variant="text" size="small" onclick="resetUserPassword(${row.id})">重置密码</t-button>
-        <t-button theme="danger" variant="text" size="small" onclick="deleteUser(${row.id})">删除</t-button>
-      `
-    }
-  }
-]
-
 const pagination = reactive({
   current: 1,
   pageSize: 10,
-  total: 3,
-  showJumper: true,
-  showSizer: true
+  total: 3
 })
 
 const formData = reactive({
@@ -238,78 +225,104 @@ const passwordData = reactive({
 })
 
 const rules = {
-  username: [{ required: true, message: '请输入用户名' }],
-  realName: [{ required: true, message: '请输入真实姓名' }],
+  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
+  realName: [{ required: true, message: '请输入真实姓名', trigger: 'blur' }],
   email: [
-    { required: true, message: '请输入邮箱地址' },
-    { email: true, message: '请输入正确的邮箱格式' }
+    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
+    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
   ],
   phone: [
-    { required: true, message: '请输入手机号' },
-    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号格式' }
+    { required: true, message: '请输入手机号', trigger: 'blur' },
+    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号格式', trigger: 'blur' }
   ],
-  role: [{ required: true, message: '请选择用户角色' }],
-  password: [{ required: true, message: '请输入初始密码' }]
+  role: [{ required: true, message: '请选择用户角色', trigger: 'change' }],
+  password: [{ required: true, message: '请输入初始密码', trigger: 'blur' }]
 }
 
 const passwordRules = {
   newPassword: [
-    { required: true, message: '请输入新密码' },
-    { min: 6, message: '密码长度不能少于6位' }
+    { required: true, message: '请输入新密码', trigger: 'blur' },
+    { min: 6, message: '密码长度不能少于6位', trigger: 'blur' }
   ],
   confirmPassword: [
-    { required: true, message: '请再次输入新密码' },
+    { required: true, message: '请再次输入新密码', trigger: 'blur' },
     { 
-      validator: (val) => val === passwordData.newPassword,
-      message: '两次输入的密码不一致'
+      validator: (rule, value, callback) => {
+        if (value !== passwordData.newPassword) {
+          callback(new Error('两次输入的密码不一致'))
+        } else {
+          callback()
+        }
+      },
+      trigger: 'blur'
     }
   ]
 }
 
-// 全局函数，供表格调用
-window.editUser = (id) => {
-  currentUser.value = userList.value.find(user => user.id === id)
-  if (currentUser.value) {
-    Object.keys(formData).forEach(key => {
-      if (key !== 'password' && currentUser.value[key] !== undefined) {
-        formData[key] = currentUser.value[key]
-      }
-    })
-    isEdit.value = true
-    formVisible.value = true
+// 获取角色类型
+const getRoleType = (role) => {
+  const roleMap = {
+    'admin': 'danger',
+    'user': 'primary',
+    'viewer': 'info'
   }
+  return roleMap[role] || 'info'
 }
 
-window.resetUserPassword = (id) => {
-  currentUser.value = userList.value.find(user => user.id === id)
-  if (currentUser.value) {
-    passwordData.newPassword = ''
-    passwordData.confirmPassword = ''
-    resetPasswordVisible.value = true
+// 获取角色标签
+const getRoleLabel = (role) => {
+  const roleMap = {
+    'admin': '管理员',
+    'user': '普通用户',
+    'viewer': '只读用户'
   }
+  return roleMap[role] || '未知'
 }
 
-window.deleteUser = (id) => {
-  const user = userList.value.find(u => u.id === id)
-  if (!user) return
-  
+const editUser = (user) => {
+  currentUser.value = user
+  Object.keys(formData).forEach(key => {
+    if (key !== 'password' && user[key] !== undefined) {
+      formData[key] = user[key]
+    }
+  })
+  isEdit.value = true
+  formVisible.value = true
+}
+
+const resetUserPassword = (user) => {
+  currentUser.value = user
+  passwordData.newPassword = ''
+  passwordData.confirmPassword = ''
+  resetPasswordVisible.value = true
+}
+
+const deleteUser = async (user) => {
   if (user.username === 'admin') {
-    MessagePlugin.warning('不能删除管理员账户')
+    ElMessage.warning('不能删除管理员账户')
     return
   }
   
-  DialogPlugin.confirm({
-    header: '确认删除',
-    body: `确定要删除用户 "${user.realName}" 吗？此操作不可恢复。`,
-    onConfirm: () => {
-      const index = userList.value.findIndex(u => u.id === id)
-      if (index > -1) {
-        userList.value.splice(index, 1)
-        pagination.total--
-        MessagePlugin.success('用户删除成功')
+  try {
+    await ElMessageBox.confirm(
+      `确定要删除用户 "${user.realName}" 吗？此操作不可恢复。`,
+      '确认删除',
+      {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
       }
+    )
+    
+    const index = userList.value.findIndex(u => u.id === user.id)
+    if (index > -1) {
+      userList.value.splice(index, 1)
+      pagination.total--
+      ElMessage.success('用户删除成功')
     }
-  })
+  } catch (error) {
+    // 用户取消删除
+  }
 }
 
 const handleCreate = () => {
@@ -324,19 +337,22 @@ const handleRefresh = () => {
   loading.value = true
   setTimeout(() => {
     loading.value = false
-    MessagePlugin.success('刷新成功')
+    ElMessage.success('刷新成功')
   }, 1000)
 }
 
 const handleSubmit = async () => {
-  const result = await formRef.value.validate()
-  if (result === true) {
+  if (!formRef.value) return
+  
+  try {
+    await formRef.value.validate()
+    
     if (isEdit.value) {
       // 更新用户
       const index = userList.value.findIndex(u => u.id === currentUser.value.id)
       if (index > -1) {
         Object.assign(userList.value[index], formData)
-        MessagePlugin.success('用户更新成功')
+        ElMessage.success('用户更新成功')
       }
     } else {
       // 添加用户
@@ -348,27 +364,34 @@ const handleSubmit = async () => {
       }
       userList.value.push(newUser)
       pagination.total++
-      MessagePlugin.success('用户添加成功')
+      ElMessage.success('用户添加成功')
     }
     formVisible.value = false
+  } catch (error) {
+    console.error('表单验证失败:', error)
   }
 }
 
-const handleCancel = () => {
-  formVisible.value = false
-}
-
 const handleResetPassword = async () => {
-  const result = await passwordFormRef.value.validate()
-  if (result === true) {
-    MessagePlugin.success(`用户 "${currentUser.value.realName}" 密码重置成功`)
+  if (!passwordFormRef.value) return
+  
+  try {
+    await passwordFormRef.value.validate()
+    ElMessage.success(`用户 "${currentUser.value.realName}" 密码重置成功`)
     resetPasswordVisible.value = false
+  } catch (error) {
+    console.error('密码表单验证失败:', error)
   }
 }
 
-const handlePageChange = (pageInfo) => {
-  pagination.current = pageInfo.current
-  pagination.pageSize = pageInfo.pageSize
+const handleSizeChange = (size) => {
+  pagination.pageSize = size
+  // 重新加载数据
+}
+
+const handleCurrentChange = (page) => {
+  pagination.current = page
+  // 重新加载数据
 }
 
 onMounted(() => {
@@ -381,4 +404,27 @@ onMounted(() => {
   max-width: 1200px;
   margin: 0 auto;
 }
-</style>
\ No newline at end of file
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.header-actions {
+  display: flex;
+  gap: 12px;
+}
+
+.pagination-container {
+  margin-top: 20px;
+  display: flex;
+  justify-content: center;
+}
+
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+}
+</style> 
\ No newline at end of file