diff --git a/main/manager-web/package-lock.json b/main/manager-web/package-lock.json
index f3044557..cbfc40df 100644
--- a/main/manager-web/package-lock.json
+++ b/main/manager-web/package-lock.json
@@ -8,7 +8,6 @@
       "name": "xiaozhi",
       "version": "0.1.0",
       "dependencies": {
-        "axios": "^1.8.1",
         "element-ui": "^2.15.14",
         "flyio": "^0.6.14",
         "normalize.css": "^8.0.1",
@@ -325,48 +324,6 @@
         "@parcel/watcher-win32-x64": "2.5.1"
       }
     },
-    "node_modules/@parcel/watcher-android-arm64": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmmirror.com/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.1.tgz",
-      "integrity": "sha512-KF8+j9nNbUN8vzOFDpRMsaKBHZ/mcjEjMToVMJOhTozkDonQFFrRcfdLWn6yWKCmJKmdVxSgHiYvTCef4/qcBA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-darwin-arm64": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmmirror.com/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.1.tgz",
-      "integrity": "sha512-eAzPv5osDmZyBhou8PoF4i6RQXAfeKL9tjb3QzYuccXFMQU0ruIc/POh30ePnaOyD1UXdlKguHBmsTs53tVoPw==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
     "node_modules/@parcel/watcher-darwin-x64": {
       "version": "2.5.1",
       "resolved": "https://registry.npmmirror.com/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.1.tgz",
@@ -388,216 +345,6 @@
         "url": "https://opencollective.com/parcel"
       }
     },
-    "node_modules/@parcel/watcher-freebsd-x64": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmmirror.com/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.1.tgz",
-      "integrity": "sha512-SI4eljM7Flp9yPuKi8W0ird8TI/JK6CSxju3NojVI6BjHsTyK7zxA9urjVjEKJ5MBYC+bLmMcbAWlZ+rFkLpJQ==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-linux-arm-glibc": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmmirror.com/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.1.tgz",
-      "integrity": "sha512-RCdZlEyTs8geyBkkcnPWvtXLY44BCeZKmGYRtSgtwwnHR4dxfHRG3gR99XdMEdQ7KeiDdasJwwvNSF5jKtDwdA==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-linux-arm-musl": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmmirror.com/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.1.tgz",
-      "integrity": "sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-linux-arm64-glibc": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmmirror.com/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.1.tgz",
-      "integrity": "sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-linux-arm64-musl": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmmirror.com/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.1.tgz",
-      "integrity": "sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-linux-x64-glibc": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmmirror.com/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.1.tgz",
-      "integrity": "sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-linux-x64-musl": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmmirror.com/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.1.tgz",
-      "integrity": "sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-win32-arm64": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmmirror.com/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.1.tgz",
-      "integrity": "sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-win32-ia32": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmmirror.com/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.1.tgz",
-      "integrity": "sha512-c2KkcVN+NJmuA7CGlaGD1qJh1cLfDnQsHjE89E60vUEMlqduHGCdCLJCID5geFVM0dOtA3ZiIO8BoEQmzQVfpQ==",
-      "cpu": [
-        "ia32"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-win32-x64": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmmirror.com/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.1.tgz",
-      "integrity": "sha512-9lHBdJITeNR++EvSQVUcaZoWupyHfXe1jZvGZ06O/5MflPcuPLtEphScIBL+AiCWBO46tDSHzWyD0uDmmZqsgA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
     "node_modules/@polka/url": {
       "version": "1.0.0-next.28",
       "resolved": "https://registry.npmmirror.com/@polka/url/-/url-1.0.0-next.28.tgz",
@@ -1777,6 +1524,7 @@
       "resolved": "https://registry.npmmirror.com/axios/-/axios-1.8.2.tgz",
       "integrity": "sha512-ls4GYBm5aig9vWx8AWDSGLpnpDQRtWAfrjU+EuytuODrFBkqesN2RkOQCBzrA1RQNHw1SmRMSDDDSwzNAYQ6Rg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "follow-redirects": "^1.15.6",
         "form-data": "^4.0.0",
@@ -3488,6 +3236,7 @@
       "resolved": "https://registry.npmmirror.com/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
       "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "es-errors": "^1.3.0",
         "get-intrinsic": "^1.2.6",
@@ -3934,6 +3683,7 @@
       "resolved": "https://registry.npmmirror.com/form-data/-/form-data-4.0.2.tgz",
       "integrity": "sha512-hGfm/slu0ZabnNt4oaRZ6uREyfCj6P4fT/n6A1rGV+Z0VdGXjfOhVUpkn6qVQONHGIFwmveGXyDs75+nr6FM8w==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "asynckit": "^0.4.0",
         "combined-stream": "^1.0.8",
@@ -4256,6 +4006,7 @@
       "resolved": "https://registry.npmmirror.com/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
       "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "has-symbols": "^1.0.3"
       },
@@ -7031,7 +6782,8 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
       "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/pseudomap": {
       "version": "1.0.2",
diff --git a/main/manager-web/package.json b/main/manager-web/package.json
index 05c696ca..e1423d6a 100644
--- a/main/manager-web/package.json
+++ b/main/manager-web/package.json
@@ -7,7 +7,6 @@
     "build": "vue-cli-service build"
   },
   "dependencies": {
-    "axios": "^1.8.1",
     "element-ui": "^2.15.14",
     "flyio": "^0.6.14",
     "normalize.css": "^8.0.1",
diff --git a/main/manager-web/public/favicon.ico b/main/manager-web/public/favicon.ico
index df36fcfb..5f285a58 100644
Binary files a/main/manager-web/public/favicon.ico and b/main/manager-web/public/favicon.ico differ
diff --git a/main/manager-web/public/index.html b/main/manager-web/public/index.html
index 3e5a1396..40f0613c 100644
--- a/main/manager-web/public/index.html
+++ b/main/manager-web/public/index.html
@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title><%= htmlWebpackPlugin.options.title %></title>
+    <title>小智-智控台</title>
   </head>
   <body>
     <noscript>
diff --git a/main/manager-web/src/apis/api.js b/main/manager-web/src/apis/api.js
index 8f971d29..ebe36f49 100755
--- a/main/manager-web/src/apis/api.js
+++ b/main/manager-web/src/apis/api.js
@@ -3,10 +3,13 @@ import user from './module/user.js'
 
 /**
  * 接口地址
- * 在开发阶段，如果地址写的是相对路径，请与vue.config.js的devServer配置相结合，方便跨域请求
+ * 当前8002端口接口还没开发完成，暂时用 apifoxmock 接口代替
+ * 如果你想调用8002端口，就用'/xiaozhi-esp32-api/api/v1'，请与vue.config.js的devServer配置相结合，方便跨域请求
  *
  */
 const DEV_API_SERVICE = 'https://apifoxmock.com/m1/5931378-5618560-default'
+// 8002开发完成完成后使用这个
+// const DEV_API_SERVICE = '/xiaozhi-esp32-api/api/v1'
 
 /**
  * 根据开发环境返回接口url
diff --git a/main/manager-web/src/apis/httpRequest.js b/main/manager-web/src/apis/httpRequest.js
index aeddd188..76acd776 100755
--- a/main/manager-web/src/apis/httpRequest.js
+++ b/main/manager-web/src/apis/httpRequest.js
@@ -23,21 +23,27 @@ function sendRequest() {
         _data: {},
         _header: {'content-type': 'application/json; charset=utf-8'},
         _url: '',
+        _responseType: undefined, // 新增响应类型字段
         'send'() {
             this._header.token = localStorage.getItem(Constant.STORAGE_KEY.TOKEN)
+
+            // 打印请求信息
             fly.request(this._url, this._data, {
                 method: this._method,
-                headers: this._header
+                headers: this._header,
+                responseType: this._responseType
             }).then((res) => {
-                const error = httpHandlerError(res, this._failCallback)
+                const error = httpHandlerError(res, this._failCallback);
                 if (error) {
                     return
                 }
+                
                 if (this._sucCallback) {
                     this._sucCallback(res)
                 }
             }).catch((res) => {
-                console.log(1111, res)
+                // 打印失败响应
+                console.log(res)
                 httpHandlerError(res, this._failCallback)
             })
             return this
@@ -75,6 +81,11 @@ function sendRequest() {
         },
         'async'(flag) {
             this.async = flag
+        },
+        // 新增类型设置方法
+        'type'(responseType) {
+            this._responseType = responseType;
+            return this;
         }
     }
 }
@@ -84,13 +95,16 @@ function sendRequest() {
  * callBack 回调函数
  * errTip 自定义错误信息
  */
+// 在错误处理函数中添加日志
 function httpHandlerError(info, callBack) {
+    
     /** 请求成功，退出该函数 可以根据项目需求来判断是否请求成功。这里判断的是status为200的时候是成功 */
     let networkError = false
     if (info.status === 200) {
-        if (info.data.code === 'success' || info.data.code === 0) {
+
+        if (info.data.code === 'success' || info.data.code === 0 || info.data.code === undefined) {
             return networkError
-        } else if (info.data.code === 401) {
+        }else if (info.data.code === 401) {
             goToPage(Constant.PAGE.LOGIN, true)
             return true
         } else {
diff --git a/main/manager-web/src/apis/module/user.js b/main/manager-web/src/apis/module/user.js
index 3326d4d4..94de7b3f 100755
--- a/main/manager-web/src/apis/module/user.js
+++ b/main/manager-web/src/apis/module/user.js
@@ -73,5 +73,36 @@ export default {
                     this.bindDevice(deviceCode, callback);
                 });
             }).send();
-    }
+    },
+    // 获取验证码
+    getCaptcha(uuid, callback) {
+    
+        RequestService.sendRequest()
+            .url(`${getServiceUrl()}/api/v1/user/captcha?uuid=${uuid}`)
+            .method('GET')
+            .type('blob')
+            .header({
+                  'Content-Type': 'image/gif',
+                  'Pragma': 'No-cache', 
+                  'Cache-Control': 'no-cache'
+            })
+            .success((res) => {
+                RequestService.clearRequestTime();
+                callback(res);
+            })
+            .fail((err) => {  // 添加错误参数
+            
+            }).send()
+    },
+    // 注册账号
+    register(registerForm, callback) {
+        RequestService.sendRequest().url(`${getServiceUrl()}/api/v1/user/register`).method('POST')
+            .data(registerForm)
+            .success((res) => {
+                RequestService.clearRequestTime()
+                callback(res)
+            })
+            .fail(() => {
+            }).send()
+    },
 }
diff --git a/main/manager-web/src/router/index.js b/main/manager-web/src/router/index.js
index ac895971..41f69a21 100644
--- a/main/manager-web/src/router/index.js
+++ b/main/manager-web/src/router/index.js
@@ -2,6 +2,7 @@ import Vue from 'vue'
 import VueRouter from 'vue-router'
 import Welcome from '../views/welcome.vue'
 import Login from '../views/login.vue'
+import Register from '@/views/register.vue' 
 
 Vue.use(VueRouter)
 
@@ -9,7 +10,7 @@ const routes = [
   {
     path: '/',
     name: 'welcome',
-    component: Welcome
+    component: Login
   },
   {
     path: '/login',
@@ -27,7 +28,17 @@ const routes = [
     component: function () {
       return import(/* webpackChunkName: "about" */ '../views/home.vue')
     }
-  }
+  },
+  {
+    path: '/register',
+    name: 'Register',
+    // route level code-splitting
+    // this generates a separate chunk (about.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: function () {
+      return import(/* webpackChunkName: "about" */ '../views/register.vue')
+    }
+  },
 ]
 
 const router = new VueRouter({
diff --git a/main/manager-web/src/views/auth.scss b/main/manager-web/src/views/auth.scss
new file mode 100644
index 00000000..2c282ac5
--- /dev/null
+++ b/main/manager-web/src/views/auth.scss
@@ -0,0 +1,132 @@
+
+.welcome {
+  min-width: 1200px;
+  min-height: 675px;
+  height: 100vh;
+  background-image: url("@/assets/login/background.png");
+  background-size: cover;
+  /* 确保背景图像覆盖整个元素 */
+  background-position: center;
+  /* 从顶部中心对齐 */
+  -webkit-background-size: cover;
+  /* 兼容老版本WebKit浏览器 */
+  -o-background-size: cover;
+  /* 兼容老版本Opera浏览器 */
+}
+
+.login-text {
+  font-weight: 700;
+  font-size: 32px;
+  text-align: left;
+  color: #3d4566;
+}
+
+.login-welcome {
+  font-weight: 400;
+  font-size: 9px;
+  text-align: left;
+  color: #818cae;
+  align-self: flex-end;
+  margin-bottom: 7px;
+}
+
+.login-box {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  right: 18%;
+  background-color: #fff;
+  border-radius: 20px;
+  padding: 35px 0;
+  width: 450px;
+  box-sizing: border-box;
+}
+
+.el-dropdown-link {
+  font-weight: 400;
+  font-size: 14px;
+  text-align: left;
+  color: #979db1;
+}
+
+.input-icon {
+  width: 19px;
+  height: 22px;
+  flex-shrink: 0;
+}
+
+.login-btn {
+  height: 35px;
+  background: #5778ff;
+  border-radius: 10px;
+  font-weight: 400;
+  font-size: 14px;
+  cursor: pointer;
+  color: #fff;
+  line-height: 35px;
+  margin: 35px 15px 15px;
+}
+
+.code-send {
+  width: 70px;
+  height: 32px;
+  border-radius: 10px;
+  background: #e6ebff;
+  line-height: 32px;
+  font-weight: 400;
+  font-size: 14px;
+  color: #5778ff;
+  flex-shrink: 0;
+  cursor: pointer;
+}
+
+.input-box {
+  display: flex;
+  margin-top: 20px;
+  align-items: center;
+  border-radius: 10px;
+  background: #f6f8fb;
+  border: 1px solid #e4e6ef;
+  height: 40px;
+  padding: 0 15px;
+  gap: 20px;
+}
+
+::v-deep {
+  .el-tabs__nav-wrap::after {
+    height: 1px;
+  }
+
+  .el-tabs__nav-wrap::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 1px;
+    background-color: #e4e7ed;
+    z-index: 1;
+  }
+
+  .el-tabs__item {
+    height: 65px;
+    line-height: 65px;
+    font-weight: 700;
+    color: #3d4566;
+  }
+
+  .el-tabs__item.is-active {
+    color: #5778ff;
+  }
+
+  .el-tabs__nav-scroll {
+    padding: 0 30px;
+  }
+
+  .el-input__inner {
+    border: none;
+    background-color: transparent;
+    height: 56px;
+    padding: 0;
+  }
+}
diff --git a/main/manager-web/src/views/login.vue b/main/manager-web/src/views/login.vue
index 6f6759e7..12c74ca4 100644
--- a/main/manager-web/src/views/login.vue
+++ b/main/manager-web/src/views/login.vue
@@ -27,13 +27,21 @@
               <img src="@/assets/login/password.png" alt="" class="input-icon"/>
               <el-input v-model="form.password" placeholder="请输入密码"/>
             </div>
-            <div class="input-box">
-              <img src="@/assets/login/shield.png" alt="" class="input-icon"/>
-              <el-input v-model="form.captcha" placeholder="请输入验证码"/>
+            <div style="display: flex; align-items: center; margin-top: 20px; width: 100%; gap: 10px;">
+              <div class="input-box" style="width: calc(100% - 130px); margin-top: 0;">
+                <img src="@/assets/login/shield.png" alt="" class="input-icon"/>
+                <el-input v-model="form.captcha" placeholder="请输入验证码" style="flex: 1;"/>
+              </div>
+              <img v-if="captchaUrl"
+                   :src="captchaUrl"
+                   alt="验证码"
+                   style="width: 150px; height: 40px; cursor: pointer;"
+                   @click="fetchCaptcha"
+              />
             </div>
             <div
                 style="font-weight: 400;font-size: 14px;text-align: left;color: #5778ff;display: flex;justify-content: space-between;margin-top: 20px;">
-              <div style="cursor: pointer;">新用户注册</div>
+              <div style="cursor: pointer;" @click="goToRegister">新用户注册</div>
             </div>
           </div>
           <div class="login-btn" @click="login">登陆</div>
@@ -55,8 +63,9 @@
 </template>
 
 <script>
-import Api from '@/apis/api'
-import {isNull, showDanger, showSuccess, goToPage} from '@/utils'
+import {goToPage, showDanger, showSuccess} from '@/utils'
+import Api from '@/apis/api';
+
 
 export default {
   name: 'login',
@@ -67,161 +76,56 @@ export default {
         username: '',
         password: '',
         captcha: ''
-      }
+      },
+      captchaUuid: '',
+      captchaUrl: ''
     }
   },
+  mounted() {
+    this.fetchCaptcha();
+  },
   methods: {
-    login() {
-      if (isNull(this.form.username)) {
+    fetchCaptcha() {
+      this.captchaUuid = Date.now().toString()
+
+      Api.user.getCaptcha(this.captchaUuid, (res) => {
+        if (res.status === 200) {
+          const blob = new Blob([res.data], {type: res.data.type});
+          this.captchaUrl = URL.createObjectURL(blob);
+
+        } else {
+          console.error('验证码加载异常:', error);
+          showDanger('验证码加载失败，点击刷新');
+        }
+      });
+    },
+
+    async login() {
+      if (!this.form.username.trim()) {  // 替换isNull校验
         showDanger('用户名不能为空')
         return
       }
-      if (isNull(this.form.password)) {
+      if (!this.form.password.trim()) {  // 替换isNull校验
         showDanger('密码不能为空')
         return
       }
-      if (isNull(this.form.captcha)) {
+      if (!this.form.captcha.trim()) {  // 替换isNull校验
         showDanger('验证码不能为空')
         return
       }
+
       Api.user.login(this.form, ({data}) => {
         showSuccess('登陆成功！')
         goToPage('/home')
       })
+    },
+
+    goToRegister() {
+      goToPage('/register')
     }
   }
 }
 </script>
 <style scoped lang="scss">
-.welcome {
-  min-width: 1200px;
-  min-height: 675px;
-  height: 100vh;
-  background-image: url("@/assets/login/background.png");
-  background-size: cover;
-  /* 确保背景图像覆盖整个元素 */
-  background-position: center;
-  /* 从顶部中心对齐 */
-  -webkit-background-size: cover;
-  /* 兼容老版本WebKit浏览器 */
-  -o-background-size: cover;
-  /* 兼容老版本Opera浏览器 */
-}
-
-.login-text {
-  font-weight: 700;
-  font-size: 32px;
-  text-align: left;
-  color: #3d4566;
-}
-
-.login-welcome {
-  font-weight: 400;
-  font-size: 9px;
-  text-align: left;
-  color: #818cae;
-  align-self: flex-end;
-  margin-bottom: 7px;
-}
-
-.login-box {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  right: 18%;
-  background-color: #fff;
-  border-radius: 20px;
-  padding: 35px 0;
-  width: 450px;
-  box-sizing: border-box;
-}
-
-.el-dropdown-link {
-  font-weight: 400;
-  font-size: 14px;
-  text-align: left;
-  color: #979db1;
-}
-
-.input-icon {
-  width: 19px;
-  height: 22px;
-  flex-shrink: 0;
-}
-
-.login-btn {
-  height: 35px;
-  background: #5778ff;
-  border-radius: 10px;
-  font-weight: 400;
-  font-size: 14px;
-  cursor: pointer;
-  color: #fff;
-  line-height: 35px;
-  margin: 35px 15px 15px;
-}
-
-.code-send {
-  width: 70px;
-  height: 32px;
-  border-radius: 10px;
-  background: #e6ebff;
-  line-height: 32px;
-  font-weight: 400;
-  font-size: 14px;
-  color: #5778ff;
-  flex-shrink: 0;
-  cursor: pointer;
-}
-
-.input-box {
-  display: flex;
-  margin-top: 20px;
-  align-items: center;
-  border-radius: 10px;
-  background: #f6f8fb;
-  border: 1px solid #e4e6ef;
-  height: 40px;
-  padding: 0 15px;
-  gap: 20px;
-}
-
-::v-deep {
-  .el-tabs__nav-wrap::after {
-    height: 1px;
-  }
-
-  .el-tabs__nav-wrap::before {
-    content: "";
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 1px;
-    background-color: #e4e7ed;
-    z-index: 1;
-  }
-
-  .el-tabs__item {
-    height: 65px;
-    line-height: 65px;
-    font-weight: 700;
-    color: #3d4566;
-  }
-
-  .el-tabs__item.is-active {
-    color: #5778ff;
-  }
-
-  .el-tabs__nav-scroll {
-    padding: 0 30px;
-  }
-
-  .el-input__inner {
-    border: none;
-    background-color: transparent;
-    height: 56px;
-    padding: 0;
-  }
-}
+@import './auth.scss'; // 添加这行引用
 </style>
diff --git a/main/manager-web/src/views/register.vue b/main/manager-web/src/views/register.vue
new file mode 100644
index 00000000..43de61e4
--- /dev/null
+++ b/main/manager-web/src/views/register.vue
@@ -0,0 +1,162 @@
+<template>
+  <div class="welcome">
+    <el-container style="height: 100%;">
+      <!-- 保持相同的头部 -->
+      <el-header>
+        <div style="display: flex;align-items: center;margin-top: 15px;margin-left: 10px;gap: 10px;">
+          <img src="@/assets/xiaozhi-logo.png" alt="" style="width: 45px;height: 45px;"/>
+          <img src="@/assets/xiaozhi-ai.png" alt="" style="width: 70px;height: 13px;"/>
+        </div>
+      </el-header>
+
+      <el-main style="position: relative;">
+        <div class="login-box">
+          <!-- 修改标题部分 -->
+          <div style="display: flex;align-items: center;gap: 20px;margin-bottom: 39px;padding: 0 30px;">
+            <img src="@/assets/login/hi.png" alt="" style="width: 34px;height: 34px;"/>
+            <div class="login-text">注册</div>
+            <div class="login-welcome">
+              WELCOME TO REGISTER
+            </div>
+          </div>
+
+          <div style="padding: 0 30px;">
+            <!-- 用户名输入框 -->
+            <div class="input-box">
+              <img src="@/assets/login/username.png" alt="" class="input-icon"/>
+              <el-input v-model="form.username" placeholder="请输入用户名"/>
+            </div>
+
+            <!-- 密码输入框 -->
+            <div class="input-box">
+              <img src="@/assets/login/password.png" alt="" class="input-icon"/>
+              <el-input v-model="form.password" type="password" placeholder="请输入密码"/>
+            </div>
+
+            <!-- 新增确认密码 -->
+            <div class="input-box">
+              <img src="@/assets/login/password.png" alt="" class="input-icon"/>
+              <el-input v-model="form.confirmPassword" type="password" placeholder="请确认密码"/>
+            </div>
+
+            <!-- 验证码部分保持相同 -->
+            <div style="display: flex; align-items: center; margin-top: 20px; width: 100%; gap: 10px;">
+              <div class="input-box" style="width: calc(100% - 130px); margin-top: 0;">
+                <img src="@/assets/login/shield.png" alt="" class="input-icon"/>
+                <el-input v-model="form.captcha" placeholder="请输入验证码" style="flex: 1;"/>
+              </div>
+              <img v-if="captchaUrl"
+                  :src="captchaUrl"
+                  alt="验证码"
+                  style="width: 150px; height: 40px; cursor: pointer;"
+                  @click="fetchCaptcha"
+              />
+            </div>
+
+            <!-- 修改底部链接 -->
+            <div style="font-weight: 400;font-size: 14px;text-align: left;color: #5778ff;margin-top: 20px;">
+              <div style="cursor: pointer;" @click="goToLogin">已有账号？立即登录</div>
+            </div>
+          </div>
+
+          <!-- 修改按钮文本 -->
+          <div class="login-btn" @click="register">立即注册</div>
+
+          <!-- 保持相同的协议声明 -->
+          <div style="font-size: 14px;color: #979db1;">
+            注册即同意
+            <div style="display: inline-block;color: #5778FF;cursor: pointer;">《用户协议》</div>
+            和
+            <div style="display: inline-block;color: #5778FF;cursor: pointer;">《隐私政策》</div>
+          </div>
+        </div>
+      </el-main>
+
+      <!-- 保持相同的页脚 -->
+      <el-footer>
+        <div style="font-size: 12px;font-weight: 400;color: #979db1;">
+          ©2025 xiaozhi-esp32-server
+        </div>
+      </el-footer>
+    </el-container>
+  </div>
+</template>
+
+<script>
+import {goToPage, showDanger, showSuccess} from '@/utils'
+import Api from '@/apis/api';
+
+export default {
+  name: 'register',
+  data() {
+    return {
+      form: {
+        username: '',
+        password: '',
+        confirmPassword: '',
+        captcha: '',
+        uuid: ''
+      },
+      captchaUrl: ''
+    }
+  },
+  mounted() {
+    this.fetchCaptcha();
+  },
+  methods: {
+    // 复用验证码获取方法
+    fetchCaptcha() {
+      this.form.uuid = Date.now().toString()
+      Api.user.getCaptcha(this.form.uuid, (res) => {
+        if (res.status === 200) {
+          const blob = new Blob([res.data], {type: res.data.type});
+          this.captchaUrl = URL.createObjectURL(blob);
+
+        } else {
+          console.error('验证码加载异常:', error);
+          showDanger('验证码加载失败，点击刷新');
+        }
+      });
+    },
+
+    // 注册逻辑
+    register() {
+      if (!this.form.username.trim()) {
+        showDanger('用户名不能为空')
+        return
+      }
+      if (!this.form.password.trim()) {
+        showDanger('密码不能为空')
+        return
+      }
+      if (this.form.password !== this.form.confirmPassword) {
+        showDanger('两次输入的密码不一致')
+        return
+      }
+      if (!this.form.captcha.trim()) {
+        showDanger('验证码不能为空')
+        return
+      }
+      Api.user.register(this.form, ({data}) => {
+        console.log(data)
+        if (data.code === 0) {
+          showSuccess('注册成功！')
+          goToPage('/login')
+        } else {
+          showDanger(data.msg || '注册失败')
+          this.fetchCaptcha()
+        }
+      })
+
+    },
+
+    goToLogin() {
+      goToPage('/login')
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import './auth.scss'; // 修改为导入新建的SCSS文件
+</style>
\ No newline at end of file
diff --git a/main/manager-web/vue.config.js b/main/manager-web/vue.config.js
new file mode 100644
index 00000000..01e210fa
--- /dev/null
+++ b/main/manager-web/vue.config.js
@@ -0,0 +1,14 @@
+const { defineConfig } = require('@vue/cli-service');
+const dotenv = require('dotenv');
+
+dotenv.config();
+
+module.exports = defineConfig({
+    devServer: {
+      // Bug 修复：将代理配置为环境变量中定义的 API 基础 URL
+      proxy: process.env.VUE_APP_API_BASE_URL,
+      client: {
+        overlay: false,
+      },
+    }
+})