Manager code login (#276)

* update：增加前端设计图

* 前端代码优化

* update:底部信息纠正

* 增加：flyio

* update:去除org.quartz

* update:登陆功能

* aliyunTTS常联token

* 新增aliyunTTS长期Token方式

* 超时错误处理

* 本地编译文件

* 验证码获取

* 验证码获取测试

* 验证码展示

* 登录成功

* delete 测试代码

* 注册页面

* Register 风格统一

* web验证码登录注册

* 登录注册功能

* update:登陆注册api结果优化

* delete:删除未用到的代码

---------

Co-authored-by: hrz <1710360675@qq.com>
Co-authored-by: CGD <3030332422@qq.com>
Co-authored-by: 欣南科技 <huangrongzhuang@xin-nan.com>

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

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 {

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()
+    },
 }

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({

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;
+  }
+}

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>

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>