优化登录 token 校验 (#345)

* 获得获取所有模型名称等功能 (#343)

* 优化登录 token 校验 (#330)

* fix manager-api bug

* 优化登录注册流程，跑通注册登录、接口

* update package

* 优化登录 token 校验：

1、后端新增 /api/v1/user/info 接口，优化 Oauth2Filter.getRequestToken 逻辑；
2、前端 /api/v1/user/login 登录成功后，保存 token 至浏览器本地；
3、前端请求添加本地 token。

---------

Co-authored-by: 欣南科技 <huangrongzhuang@xin-nan.com>

* update:分离home页面的组件

---------

Co-authored-by: CGD <3030332422@qq.com>
Co-authored-by: zhisheng <pzs034@gmail.com>
Co-authored-by: hrz <1710360675@qq.com>

main/manager-api/src/main/java/xiaozhi/common/constant/Constant.java

@@ -78,6 +78,8 @@ public interface Constant {
      */
     String TOKEN_HEADER = "token";
 
+    String AUTHORIZATION = "Authorization";
+
     /**
      * 路径分割符
      */

main/manager-api/src/main/java/xiaozhi/modules/security/config/ShiroConfig.java

@@ -58,6 +58,12 @@ public class ShiroConfig {
         filters.put("oauth2", new Oauth2Filter());
         shiroFilter.setFilters(filters);
 
+        //添加Shiro的内置过滤器
+        /*anon：无需认证就可以访问
+        authc：必须认证了才能让问
+        user：必须拥有，记住我功能，才能访问
+        perms：拥有对某个资源的权限才能访问
+        role：拥有某个角色权限才能访问*/
         Map<String, String> filterMap = new LinkedHashMap<>();
         filterMap.put("/webjars/**", "anon");
         filterMap.put("/druid/**", "anon");

main/manager-api/src/main/java/xiaozhi/modules/security/controller/LoginController.java

@@ -4,11 +4,16 @@ import io.swagger.v3.oas.annotations.Operation;
 import io.swagger.v3.oas.annotations.tags.Tag;
 import jakarta.servlet.http.HttpServletResponse;
 import lombok.AllArgsConstructor;
+import org.apache.commons.lang3.StringUtils;
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
 import org.springframework.web.bind.annotation.*;
 import xiaozhi.common.exception.ErrorCode;
 import xiaozhi.common.exception.RenException;
+import xiaozhi.common.page.TokenDTO;
 import xiaozhi.common.utils.Result;
 import xiaozhi.common.validator.AssertUtils;
+import xiaozhi.modules.security.dao.SysUserTokenDao;
 import xiaozhi.modules.security.dto.LoginDTO;
 import xiaozhi.modules.security.password.PasswordUtils;
 import xiaozhi.modules.security.service.CaptchaService;
@@ -31,6 +36,7 @@ public class LoginController {
     private final SysUserTokenService sysUserTokenService;
     private final CaptchaService captchaService;
 
+    private static final Logger logger = LoggerFactory.getLogger(LoginController.class);
 
     @GetMapping("/captcha")
     @Operation(summary = "验证码")
@@ -44,7 +50,7 @@ public class LoginController {
 
     @PostMapping("/login")
     @Operation(summary = "登录")
-    public Result login( @RequestBody LoginDTO login) {
+    public Result<TokenDTO> login(@RequestBody LoginDTO login) {
         // 验证是否正确输入验证码
         boolean validate = captchaService.validate(login.getCaptchaId(), login.getCaptcha());
         if (!validate) {
@@ -84,4 +90,21 @@ public class LoginController {
 
     }
 
+    @GetMapping("/info")
+    @Operation(summary = "用户信息获取")
+    public Result<SysUserDTO> info(@RequestHeader("Authorization")String authorization) {
+        logger.info("the authorization:{}", authorization);
+
+        String token;
+        if (StringUtils.isBlank(authorization) && authorization.contains("Bearer ")) {
+            throw new RenException(ErrorCode.UNAUTHORIZED);
+        }
+        token = authorization.replace("Bearer ", "");
+        if (StringUtils.isBlank(token)) {
+            throw new RenException(ErrorCode.UNAUTHORIZED);
+        }
+        SysUserDTO sysUserDTO = sysUserTokenService.getUserByToken(token);
+        Result result = new Result<SysUserDTO>();
+        return result.ok(sysUserDTO);
+    }
 }

main/manager-api/src/main/java/xiaozhi/modules/security/oauth2/Oauth2Filter.java

@@ -11,6 +11,7 @@ import org.apache.shiro.web.filter.authc.AuthenticatingFilter;
 import org.springframework.web.bind.annotation.RequestMethod;
 import xiaozhi.common.constant.Constant;
 import xiaozhi.common.exception.ErrorCode;
+import xiaozhi.common.exception.RenException;
 import xiaozhi.common.utils.HttpContextUtils;
 import xiaozhi.common.utils.JsonUtils;
 import xiaozhi.common.utils.Result;
@@ -89,12 +90,22 @@ public class Oauth2Filter extends AuthenticatingFilter {
      * 获取请求的token
      */
     private String getRequestToken(HttpServletRequest httpRequest) {
+        String token;
         //从header中获取token
-        String token = httpRequest.getHeader(Constant.TOKEN_HEADER);
+        String authorization = httpRequest.getHeader(Constant.AUTHORIZATION);
+        if (StringUtils.isBlank(authorization) && authorization.contains("Bearer ")) {
+            throw new RenException(ErrorCode.UNAUTHORIZED);
+        }
+        token = authorization.replace("Bearer ", "");
 
         //如果header中不存在token，则从参数中获取token
         if (StringUtils.isBlank(token)) {
-            token = httpRequest.getParameter(Constant.TOKEN_HEADER);
+            authorization = httpRequest.getParameter(Constant.AUTHORIZATION);
+
+            if (StringUtils.isBlank(authorization) && authorization.contains("Bearer ")) {
+                throw new RenException(ErrorCode.UNAUTHORIZED);
+            }
+            token = authorization.replace("Bearer ", "");
         }
         return token;
     }

main/manager-api/src/main/java/xiaozhi/modules/security/oauth2/Oauth2Realm.java

@@ -6,12 +6,15 @@ import org.apache.shiro.authz.AuthorizationInfo;
 import org.apache.shiro.authz.SimpleAuthorizationInfo;
 import org.apache.shiro.realm.AuthorizingRealm;
 import org.apache.shiro.subject.PrincipalCollection;
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
 import org.springframework.context.annotation.Lazy;
 import org.springframework.stereotype.Component;
 import xiaozhi.common.exception.ErrorCode;
 import xiaozhi.common.user.UserDetail;
 import xiaozhi.common.utils.ConvertUtils;
 import xiaozhi.common.utils.MessageUtils;
+import xiaozhi.modules.security.controller.LoginController;
 import xiaozhi.modules.security.entity.SysUserTokenEntity;
 import xiaozhi.modules.security.service.ShiroService;
 import xiaozhi.modules.sys.entity.SysUserEntity;
@@ -30,6 +33,8 @@ public class Oauth2Realm extends AuthorizingRealm {
     @Resource
     private ShiroService shiroService;
 
+    private static final Logger logger = LoggerFactory.getLogger(Oauth2Realm.class);
+
     @Override
     public boolean supports(AuthenticationToken token) {
         return token instanceof Oauth2Token;
@@ -82,6 +87,11 @@ public class Oauth2Realm extends AuthorizingRealm {
         userDetail.setToken(accessToken);
 
         //账号锁定
+        if (userDetail.getStatus() == null) {
+            logger.error("账号状态异常，status 不能为空");
+            throw new DisabledAccountException(MessageUtils.getMessage(ErrorCode.ACCOUNT_DISABLE));
+        }
+
         if (userDetail.getStatus() == 0) {
             throw new LockedAccountException(MessageUtils.getMessage(ErrorCode.ACCOUNT_LOCK));
         }

main/manager-api/src/main/java/xiaozhi/modules/security/service/SysUserTokenService.java

@@ -1,9 +1,11 @@
 package xiaozhi.modules.security.service;
 
 import xiaozhi.common.page.PageData;
+import xiaozhi.common.page.TokenDTO;
 import xiaozhi.common.service.BaseService;
 import xiaozhi.common.utils.Result;
 import xiaozhi.modules.security.entity.SysUserTokenEntity;
+import xiaozhi.modules.sys.dto.SysUserDTO;
 
 import java.util.Map;
 
@@ -19,7 +21,9 @@ public interface SysUserTokenService extends BaseService<SysUserTokenEntity> {
      *
      * @param userId 用户ID
      */
-    Result createToken(Long userId);
+    Result<TokenDTO> createToken(Long userId);
+
+    SysUserDTO getUserByToken(String token);
 
     /**
      * 退出

main/manager-api/src/main/java/xiaozhi/modules/security/service/impl/SysUserTokenServiceImpl.java

@@ -1,6 +1,9 @@
 package xiaozhi.modules.security.service.impl;
 
 import cn.hutool.core.date.DateUtil;
+import lombok.AllArgsConstructor;
+import xiaozhi.common.exception.ErrorCode;
+import xiaozhi.common.exception.RenException;
 import xiaozhi.common.page.TokenDTO;
 import xiaozhi.common.service.impl.BaseServiceImpl;
 import xiaozhi.common.utils.HttpContextUtils;
@@ -10,18 +13,23 @@ import xiaozhi.modules.security.entity.SysUserTokenEntity;
 import xiaozhi.modules.security.oauth2.TokenGenerator;
 import xiaozhi.modules.security.service.SysUserTokenService;
 import org.springframework.stereotype.Service;
+import xiaozhi.modules.sys.dto.SysUserDTO;
+import xiaozhi.modules.sys.service.SysUserService;
 
 import java.util.Date;
 
+@AllArgsConstructor
 @Service
 public class SysUserTokenServiceImpl extends BaseServiceImpl<SysUserTokenDao, SysUserTokenEntity> implements SysUserTokenService {
+
+    private final SysUserService sysUserService;
     /**
      * 12小时后过期
      */
     private final static int EXPIRE = 3600 * 12;
 
     @Override
-    public Result createToken(Long userId) {
+    public Result<TokenDTO> createToken(Long userId) {
         //用户token
         String token;
 
@@ -70,6 +78,20 @@ public class SysUserTokenServiceImpl extends BaseServiceImpl<SysUserTokenDao, Sy
         return new Result().ok(tokenDTO);
     }
 
+    @Override
+    public SysUserDTO getUserByToken(String token) {
+        SysUserTokenEntity userToken = baseDao.getByToken(token);
+
+        Date now = new Date();
+        if (userToken.getExpireDate().before(now)) {
+            throw new RenException(ErrorCode.UNAUTHORIZED);
+        }
+
+        SysUserDTO userDTO = sysUserService.getByUserId(userToken.getUserId());
+        userDTO.setPassword("");
+        return userDTO;
+    }
+
     @Override
     public void logout(Long userId) {
         Date expireDate = DateUtil.offsetMinute(new Date(), -1);

main/manager-api/src/main/java/xiaozhi/modules/sys/service/SysUserService.java

@@ -12,6 +12,8 @@ public interface SysUserService extends BaseService<SysUserEntity> {
 
     SysUserDTO getByUsername(String username);
 
+    SysUserDTO getByUserId(Long userId);
+
     void save(SysUserDTO dto);
 
     void delete(Long[] ids);

main/manager-api/src/main/java/xiaozhi/modules/sys/service/impl/SysUserServiceImpl.java

@@ -41,6 +41,13 @@ public class SysUserServiceImpl extends BaseServiceImpl<SysUserDao, SysUserEntit
         return ConvertUtils.sourceToTarget(entity, SysUserDTO.class);
     }
 
+    @Override
+    public SysUserDTO getByUserId(Long userId) {
+        SysUserEntity sysUserEntity = sysUserDao.selectById(userId);
+
+        return ConvertUtils.sourceToTarget(sysUserEntity, SysUserDTO.class);
+    }
+
     @Override
     @Transactional(rollbackFor = Exception.class)
     public void save(SysUserDTO dto) {

main/manager-web/src/App.vue

@@ -26,4 +26,7 @@ nav {
     }
   }
 }
+
 </style>
+<script setup lang="ts">
+</script>

main/manager-web/src/apis/httpRequest.js

@@ -1,6 +1,7 @@
-import {goToPage, showDanger, showWarning} from '../utils/index'
+import {goToPage, showDanger, showWarning, isNotNull} from '../utils/index'
 import Constant from '../utils/constant'
 import Fly from 'flyio/dist/npm/fly';
+import store from '../store/index'
 
 const fly = new Fly()
 // 设置超时
@@ -25,7 +26,9 @@ function sendRequest() {
         _url: '',
         _responseType: undefined, // 新增响应类型字段
         'send'() {
-            this._header.token = localStorage.getItem(Constant.STORAGE_KEY.TOKEN)
+            if(isNotNull(store.getters.getToken)){
+                this._header.Authorization = 'Bearer ' + (JSON.parse(store.getters.getToken)).token
+            }
 
             // 打印请求信息
             fly.request(this._url, this._data, {
@@ -43,7 +46,7 @@ function sendRequest() {
                 }
             }).catch((res) => {
                 // 打印失败响应
-                console.log(res)
+                console.log('catch', res)
                 httpHandlerError(res, this._failCallback)
             })
             return this
@@ -97,6 +100,7 @@ function sendRequest() {
  */
 // 在错误处理函数中添加日志
 function httpHandlerError(info, callBack) {
+    console.log('httpHandlerError', info)
     
     /** 请求成功，退出该函数 可以根据项目需求来判断是否请求成功。这里判断的是status为200的时候是成功 */
     let networkError = false

main/manager-web/src/apis/module/user.js

@@ -5,7 +5,8 @@ import {getServiceUrl} from '../api'
 export default {
     // 登录
     login(loginForm, callback) {
-        RequestService.sendRequest().url(`${getServiceUrl()}/api/v1/user/login`).method('POST')
+        RequestService.sendRequest().url(`${getServiceUrl()}/api/v1/user/login`)
+            .method('POST')
             .data(loginForm)
             .success((res) => {
                 RequestService.clearRequestTime()
@@ -19,7 +20,8 @@ export default {
     },
     // 获取用户信息
     getUserInfo(callback) {
-        RequestService.sendRequest().url(`${getServiceUrl()}/api/v1/user/info`).method('GET')
+        RequestService.sendRequest().url(`${getServiceUrl()}/api/v1/user/info`)
+            .method('GET')
             .success((res) => {
                 RequestService.clearRequestTime()
                 callback(res)
@@ -32,7 +34,8 @@ export default {
     },
     // 获取设备信息
     getHomeList(callback) {
-        RequestService.sendRequest().url(`${getServiceUrl()}/api/v1/user/device/bind`).method('GET')
+        RequestService.sendRequest().url(`${getServiceUrl()}/api/v1/user/device/bind`)
+            .method('GET')
             .success((res) => {
                 RequestService.clearRequestTime()
                 callback(res)
@@ -76,14 +79,14 @@ export default {
     },
     // 获取验证码
     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', 
+                  'Pragma': 'No-cache',
                   'Cache-Control': 'no-cache'
             })
             .success((res) => {
@@ -91,7 +94,7 @@ export default {
                 callback(res);
             })
             .fail((err) => {  // 添加错误参数
-            
+
             }).send()
     },
     // 注册账号
@@ -105,4 +108,70 @@ export default {
             .fail(() => {
             }).send()
     },
+
+    // 保存设备配置
+    saveDeviceConfig(device_id, configData, callback) {
+        RequestService.sendRequest()
+            .url(`${getServiceUrl()}/api/v1/user/configDevice/${device_id}`)
+            .method('PUT')
+            .data(configData)
+            .success((res) => {
+                RequestService.clearRequestTime();
+                callback(res);
+            })
+            .fail((err) => {
+                console.error('保存配置失败:', err);
+                RequestService.reAjaxFun(() => {
+                    this.saveDeviceConfig(device_id, configData, callback);
+                });
+            }).send();
+    },
+    // 获取设备配置
+    getDeviceConfig(device_id, callback) {
+        RequestService.sendRequest()
+            .url(`${getServiceUrl()}/api/v1/user/configDevice/${device_id}`)
+            .method('GET')
+            .success((res) => {
+                RequestService.clearRequestTime();
+                callback(res);
+            })
+            .fail((err) => {
+                console.error('获取配置失败:', err);
+                RequestService.reAjaxFun(() => {
+                    this.getDeviceConfig(device_id, callback);
+                });
+            }).send();
+    },
+    // 获取所有模型名称
+    getModelNames(callback) {
+        RequestService.sendRequest()
+            .url(`${getServiceUrl()}/api/v1/models/names`)
+            .method('GET')
+            .success((res) => {
+                RequestService.clearRequestTime();
+                callback(res);
+            })
+            .fail(() => {
+                RequestService.reAjaxFun(() => {
+                    this.getModelNames(callback);
+                });
+            }).send();
+    },
+
+    // 获取模型音色
+    getModelVoices(modelName, callback) {
+        RequestService.sendRequest()
+            .url(`${getServiceUrl()}/api/v1/models/${modelName}/voices`)
+            .method('GET')
+            .success((res) => {
+                RequestService.clearRequestTime();
+                callback(res);
+            })
+            .fail(() => {
+                RequestService.reAjaxFun(() => {
+                    this.getModelVoices(modelName, callback);
+                });
+            }).send();
+    },
+
 }

main/manager-web/src/components/AddDeviceDialog.vue

@@ -0,0 +1,75 @@
+<template>
+  <el-dialog :visible.sync="visible" width="480px" center>
+    <div style="margin: 0 20px 20px;display: flex;align-items: center;gap: 10px;font-weight: 700;font-size: 20px;text-align: left;color: #3d4566;">
+      <div style="width: 36px;height: 36px;border-radius: 50%;background: #5778ff;display: flex;align-items: center;justify-content: center;">
+        <img src="@/assets/home/equipment.png" alt="" style="width: 16px;height: 14px;" />
+      </div>
+      添加设备
+    </div>
+    <div style="height: 1px;background: #e8f0ff;" />
+    <div style="margin: 30px 20px;">
+      <div style="font-weight: 400;font-size: 14px;text-align: left;color: #3d4566;">
+        <div style="color: red;display: inline-block;">*</div>验证码：
+      </div>
+      <div class="input-46" style="margin-top: 10px;">
+        <el-input placeholder="请输入设备播报的6位数验证码.." v-model="deviceCode" />
+      </div>
+    </div>
+    <div style="display: flex;margin: 0 20px;gap: 10px;">
+      <div class="dialog-btn" @click="confirm">
+        确定
+      </div>
+      <div class="dialog-btn"
+           style="background: #e6ebff;border: 1px solid #adbdff;color: #5778ff;"
+           @click="cancel">
+        取消
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: 'AddDeviceDialog',
+  props: {
+    visible: { type: Boolean, required: true }
+  },
+  data() {
+    return { deviceCode: "" }
+  },
+  methods: {
+    confirm() {
+      this.$emit('update:visible', false)
+      this.$emit('added', this.deviceCode)
+      this.deviceCode = ""
+    },
+    cancel() {
+      this.$emit('update:visible', false)
+      this.deviceCode = ""
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+
+.input-46 {
+  border: 1px solid #e4e6ef;
+  background: #f6f8fb;
+  border-radius: 10px;
+}
+
+.dialog-btn {
+  cursor: pointer;
+  flex: 1;
+  border-radius: 23px;
+  background: #5778ff;
+  height: 46px;
+  font-weight: 500;
+  font-size: 14px;
+  color: #fff;
+  line-height: 46px;
+  text-align: center;
+}
+</style>

main/manager-web/src/components/DeviceItem.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="device-item">
+    <div style="display: flex;justify-content: space-between;">
+      <div style="font-weight: 700;font-size: 24px;text-align: left;color: #3d4566;">
+        {{ device.mac }}
+      </div>
+      <div>
+        <img src="@/assets/home/delete.png" alt=""
+             style="width: 24px;height: 24px;margin-right: 10px;" />
+        <img src="@/assets/home/info.png" alt="" style="width: 24px;height: 24px;" />
+      </div>
+    </div>
+    <div class="device-name">
+      设备型号：{{ device.model }}
+    </div>
+    <div style="display: flex;gap: 10px;align-items: center;">
+      <div class="settings-btn" @click="$emit('configure')">
+        配置角色
+      </div>
+      <div class="settings-btn">
+        声纹识别
+      </div>
+      <div class="settings-btn">
+        历史对话
+      </div>
+      <el-switch v-model="switchValue" inactive-text="OTA升级:" :width="42"
+                 style="margin-left: auto;" />
+    </div>
+    <div class="version-info">
+      <div>最近对话：{{ device.lastConversation }}</div>
+      <div>APP版本：{{ device.appVersion }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DeviceItem',
+  props: {
+    device: { type: Object, required: true }
+  },
+  data() {
+    return { switchValue: false }
+  }
+}
+</script>
+<style scoped>
+.device-item {
+  width: 455px;
+  border-radius: 20px;
+  background: #fafcfe;
+  padding: 30px;
+  box-sizing: border-box;
+}
+.device-name {
+  margin: 10px 0 14px;
+  font-weight: 400;
+  font-size: 14px;
+  color: #3d4566;
+  text-align: left;
+}
+
+.settings-btn {
+  font-weight: 500;
+  font-size: 14px;
+  color: #5778ff;
+  background: #e6ebff;
+  width: 76px;
+  height: 28px;
+  line-height: 28px;
+  cursor: pointer;
+  border-radius: 14px;
+}
+
+.version-info {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 20px;
+  font-size: 14px;
+  color: #979db1;
+  font-weight: 400;
+}
+</style>

main/manager-web/src/components/HeaderBar.vue

@@ -0,0 +1,122 @@
+<template>
+  <el-header class="header">
+    <div style="display: flex;justify-content: space-between;">
+      <div style="display: flex;align-items: center;gap: 10px;">
+        <img src="@/assets/xiaozhi-logo.png" alt="" style="width: 56px;height: 56px;" />
+        <img src="@/assets/xiaozhi-ai.png" alt="" style="width: 78px;height: 16px;" />
+        <div class="equipment-management" @click="goHome">
+          <img src="@/assets/home/equipment.png" alt="" style="width: 16px;height: 14px;" />
+          设备管理
+        </div>
+        <div class="console">
+          <i class="el-icon-s-grid" style="font-size: 14px;color: #979db1;" />
+          控制台
+        </div>
+        <div class="equipment-management2">
+          设备管理
+          <img src="@/assets/home/close.png" alt="" style="width: 8px;height: 8px;" />
+        </div>
+      </div>
+      <div style="display: flex;align-items: center;gap: 10px;">
+        <div class="serach-box">
+          <el-input placeholder="输入名称搜索.." v-model="serach" />
+          <img src="@/assets/home/search.png" alt=""
+               style="width: 16px;height: 16px;margin-right: 15px;cursor: pointer;" />
+        </div>
+        <img src="@/assets/home/avatar.png" alt="" style="width: 28px;height: 28px;" />
+        <div class="user-info">
+          158 3632 4642
+        </div>
+      </div>
+    </div>
+  </el-header>
+</template>
+
+<script>
+export default {
+  name: 'HeaderBar',
+  data() {
+    return { serach: '' }
+  },
+  methods: {
+    goHome() {
+      // 跳转到首页
+      this.$router.push('/')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.equipment-management,
+.equipment-management2 {
+  cursor: pointer;
+}
+
+.equipment-management {
+  width: 110px;
+  height: 32px;
+  border-radius: 16px;
+  background: #5778ff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  font-weight: 500;
+  color: #fff;
+  font-size: 14px;
+}
+
+.equipment-management2 {
+  width: 116px;
+  height: 30px;
+  border-radius: 15px;
+  background: #fff;
+  display: flex;
+  justify-content: center;
+  font-size: 12px;
+  color: #979db1;
+  font-weight: 400;
+  gap: 10px;
+  color: #3d4566;
+  margin-left: 20px;
+  align-items: center;
+}
+
+.header {
+  background: #f6fcfe66;
+  border: 1px solid #fff;
+}
+
+.serach-box {
+  display: flex;
+  width: 306px;
+  height: 40px;
+  border-radius: 20px;
+  background-color: #e2f5f7;
+  align-items: center;
+}
+
+.user-info {
+  font-weight: 600;
+  font-size: 16px;
+  letter-spacing: -0.02px;
+  text-align: left;
+  color: #3d4566;
+}
+.console {
+  width: 120px;
+  height: 30px;
+  border-radius: 15px;
+  background: radial-gradient(50% 50% at 50% 50%, #fff 0%, #e8f0ff 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  color: #979db1;
+  font-weight: 400;
+  gap: 10px;
+  color: #979db1;
+  margin-left: 20px;
+}
+</style>

main/manager-web/src/components/HelloWorld.vue

@@ -1,58 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

main/manager-web/src/router/index.js

@@ -1,8 +1,5 @@
 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)
 
@@ -10,33 +7,36 @@ const routes = [
   {
     path: '/',
     name: 'welcome',
-    component: Login
+    component: function () {
+      return import('../views/login.vue')
+    }
+  },
+  {
+    path: '/role-config',
+    name: 'RoleConfig',
+    component: function () {
+      return import('../views/roleConfig.vue')
+    }
   },
   {
     path: '/login',
     name: 'login',
-    // 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/login.vue')
+      return import('../views/login.vue')
     }
   },
   {
     path: '/home',
     name: 'home',
     component: function () {
-      return import(/* webpackChunkName: "about" */ '../views/home.vue')
+      return import('../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')
+      return import('../views/register.vue')
     }
   },
 ]

main/manager-web/src/store/index.js

@@ -1,14 +1,26 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
+import Constant from '../utils/constant'
 
 Vue.use(Vuex)
 
 export default new Vuex.Store({
   state: {
+    token: ''
   },
   getters: {
+    getToken(state) {
+      if (!state.token) {
+        state.token = localStorage.getItem('token')
+      }
+      return state.token
+    }
   },
   mutations: {
+    setToken(state, token) {
+      state.token = token
+      localStorage.token = token
+    }
   },
   actions: {
   },

main/manager-web/src/views/home.vue

@@ -1,346 +1,88 @@
 <template>
   <div class="welcome">
-    <el-container style="height: 100%;">
+      <!-- 公共头部 -->
-      <el-header class="header">
+      <HeaderBar />
-        <div style="display: flex;justify-content: space-between;">
+      <el-main style="padding: 20px;display: flex;flex-direction: column;">
-          <div style="display: flex;align-items: center;gap: 8px;margin-top: 10px;">
+        <div>
-            <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 class="equipment-management" @click="settingDevice=false">
-              <img src="@/assets/home/equipment.png" alt="" style="width: 12px;height: 11px;" />
-              设备管理
-            </div>
-            <div class="console">
-              <i class="el-icon-s-grid" style="font-size: 11px;color: #979db1;" />
-              控制台
-            </div>
-            <div class="equipment-management2">
-              设备管理
-              <img src="@/assets/home/close.png" alt="" style="width: 6px;height: 6px;" />
-            </div>
-          </div>
-          <div style="display: flex;align-items: center;gap: 8px;margin-top: 10px">
-            <div class="serach-box">
-              <el-input placeholder="输入名称搜索.." v-model="serach" style="border: none; background: transparent;" @keyup.enter.native="handleSearch"  />
-              <img src="@/assets/home/search.png" alt=""
-                style="width: 12px;height: 12px;margin-right: 11px;cursor: pointer;" @click="handleSearch" />
-            </div>
-            <img src="@/assets/home/avatar.png" alt="" style="width: 21px;height: 21px;" />
-            <div class="user-info">
-              {{ userInfo.mobile }}
-            </div>
-          </div>
-        </div>
-      </el-header>
-      <el-main style="padding: 15px;display: flex;flex-direction: column;">
-        <div v-show="!settingDevice">
           <div class="add-device">
             <div class="add-device-bg">
-              <div class="hellow-text" style="margin-top: 23px;">
+              <div class="hellow-text" style="margin-top: 30px;">
-                您好，小智</div>
+                您好，小智
-              <div class="hellow-text">让我们度过<div style="display: inline-block;color: #5778FF;">
+              </div>
+              <div class="hellow-text">
+                让我们度过
+                <div style="display: inline-block;color: #5778FF;">
                   美好的一天！
                 </div>
               </div>
               <div class="hi-hint">
-                Hello, Let's have a wonderful day!</div>
+                Hello, Let's have a wonderful day!
+              </div>
               <div class="add-device-btn" @click="showAddDialog">
                 <div class="left-add">
                   添加设备
                 </div>
-                <div style="width: 17px;height: 10px;background: #5778ff;margin-left: -8px;" />
+                <div style="width: 23px;height: 13px;background: #5778ff;margin-left: -10px;" />
                 <div class="right-add">
-                  <i class="el-icon-right" style="font-size: 23px;color: #fff;" />
+                  <i class="el-icon-right" style="font-size: 30px;color: #fff;" />
                 </div>
               </div>
             </div>
           </div>
-          <div
+          <div style="display: flex;flex-wrap: wrap;margin-top: 20px;gap: 20px;justify-content: space-between;box-sizing: border-box;">
-            style="display: flex;flex-wrap: wrap;margin-top: 15px;gap: 15px;justify-content: flex-start;box-sizing: border-box;">
+            <DeviceItem v-for="(item,index) in devices" :key="index" :device="item" @configure="goToRoleConfig" />
-            <div class="device-item" v-for="(item,index) in filteredDeviceList" :key="index">
-              <div style="display: flex;justify-content: space-between; align-items: center; ">
-                <div style="font-weight: 700;font-size: 18px;text-align: left;color: #3d4566;">
-<!--                  CC:ba:97:11:a6:ac-->
-                  {{item.list[0]?.mac_address}}
-                </div>
-                <div style="display: flex;align-items: center;">
-                  <img src="@/assets/home/delete.png" alt=""
-                    style="width: 18px;height: 18px;margin-right: 8px;" @click="unbindDevice(item.list[0]?.id)" />
-                  <img src="@/assets/home/info.png" alt="" style="width: 18px;height: 18px;" />
-                </div>
-              </div>
-              <div class="device-name">
-                设备型号：{{item.list[0]?.device_type}}
-              </div>
-              <div style="display: flex;gap: 8px;align-items: center;">
-                <div class="settings-btn" @click="clickSettingDevice">
-                  配置角色</div>
-                <div class="settings-btn">
-                  声纹识别</div>
-                <div class="settings-btn">
-                  历史对话</div>
-                <el-switch :value="item.list[0]?.ota_upgrade && true || false" inactive-text="OTA升级:" :width="32"
-                  style="margin-left: auto;" />
-              </div>
-              <div class="version-info">
-                <div>最近对话：{{item.list[0]?.recent_chat_time}}</div>
-                <div>APP版本：{{item.list[0]?.app_version}}</div>
-              </div>
-            </div>
           </div>
         </div>
-<div v-show="settingDevice" style="border-radius: 18px;background: #fafcfe;">
+        <div style="font-size: 12px;font-weight: 400;margin-top: auto;padding-top: 30px;color: #979db1;">
-          <div
-            style="padding: 17px 27px;font-weight: 700;font-size: 21px;text-align: left;color: #3d4566;display: flex;gap: 14px;align-items: center;">
-            <div
-              style="width: 41px;height: 41px;background: #5778ff;border-radius: 50%;display: flex;align-items: center;justify-content: center;">
-              <img src="@/assets/home/setting-user.png" alt="" style="width: 21px;height: 21px;" />
-            </div>
-            CC:ba:97:11:a6:ac
-          </div>
-          <div style="height: 1px;background: #e8f0ff;" />
-          <el-form ref="form" :model="form" label-width="81px">
-            <div style="padding: 18px 28px;max-width: 890px;">
-              <el-form-item label="助手昵称：">
-                <div class="input-46" style="width: 57.5%;">
-                  <el-input v-model="form.name" />
-                </div>
-              </el-form-item>
-              <el-form-item label="角色模版：">
-                <div style="display: flex;gap: 10px;">
-                  <div class="template-item">
-                    台湾女友</div>
-                  <div class="template-item">
-                    土豆子</div>
-                  <div class="template-item">
-                    英语老师</div>
-                  <div class="template-item">
-                    好奇小男孩</div>
-                  <div class="template-item">
-                    汪汪队队长</div>
-                </div>
-              </el-form-item>
-              <el-form-item label="角色音色：">
-                <div style="display: flex;gap: 9px;align-items: center;">
-                  <div class="input-46" style="flex:1.4;">
-                    <el-select v-model="form.timbre" placeholder="请选择" style="width: 100%;">
-                      <el-option v-for="item in options" :key="item.value" :label="item.label"
-                        :value="item.value">
-                      </el-option>
-                    </el-select>
-                  </div>
-                  <div class="audio-box">
-                    <audio src="http://music.163.com/song/media/outer/url?id=447925558.mp3" controls
-                      style="height: 100%;width: 100%;" />
-                  </div>
-                </div>
-              </el-form-item>
-              <el-form-item label="角色介绍：">
-                <div class="textarea-box">
-                  <el-input type="textarea" rows="5.4" resize="none" placeholder="请输入内容"
-                    v-model="form.introduction" maxlength="2000" show-word-limit />
-                </div>
-              </el-form-item>
-              <el-form-item label="记忆体：">
-                <div class="textarea-box">
-                  <el-input type="textarea" rows="5.4" resize="none" placeholder="请输入内容"
-                    v-model="form.prompt" maxlength="1000" />
-                  <div class="prompt-bottom">
-                    <div style="display: flex;gap: 10px;align-items: center;">
-                      <div style="color: #979db1;font-size: 12px;">当前记忆（每次对话后重新生成）</div>
-                      <div class="clear-btn">
-                        <i class="el-icon-delete-solid" style="font-size: 12px;" />
-                        清除
-                      </div>
-                    </div>
-                    <div style="color: #979db1;font-size:12px;">{{form.prompt.length}}/1000</div>
-                  </div>
-                </div>
-              </el-form-item>
-              <el-form-item label="语言模型（内测）：" class="lh-form-item">
-                <div style="display: flex;gap: 9px;">
-                  <div class="input-46" style="width: 100%;">
-                    <el-select v-model="form.model" placeholder="请选择" style="width: 100%;">
-                      <el-option v-for="item in options" :key="item.value" :label="item.label"
-                        :value="item.value">
-                      </el-option>
-                    </el-select>
-                  </div>
-                </div>
-              </el-form-item>
-              <el-form-item label="" class="lh-form-item">
-                <div style="color: #979db1;text-align: left;">除了“Qwen
-                  实时”，其他模型通常会增加约1秒的延迟。改变模型后，建议清空记忆体，以免影响体验。</div>
-              </el-form-item>
-            </div>
-          </el-form>
-          <div style="display: flex;padding: 18px;gap: 9px;align-items: center;">
-            <div class="save-btn">
-              保存配置</div>
-            <div class="reset-btn">
-              重制</div>
-            <div class="clear-text">
-              <img src="@/assets/home/red-info.png" alt="" style="width: 21px;height: 21px;" />
-              保存配置后，需要重启设备，新的配置才会生效。
-            </div>
-          </div>
-        </div>
-        <div
-          style="font-size: 12px;font-weight: 400;margin-top: auto;padding-top: 30px;color: #979db1;">
           ©2025 xiaozhi-esp32-server
         </div>
+        <AddDeviceDialog :visible.sync="addDeviceDialogVisible" @added="handleDeviceAdded" />
       </el-main>
-    </el-container>
-    <el-dialog :visible.sync="addDeviceDialogVisible" width="400px" center>
-      <div
-        style="margin: 0 20px 20px;display: flex;align-items: center;gap: 10px;font-weight: 700;font-size: 20px;text-align: left;color: #3d4566;;">
-        <div
-          style="width: 36px;height: 36px;border-radius: 50%;background: #5778ff;display: flex;align-items: center;justify-content: center;">
-          <img src="@/assets/home/equipment.png" alt="" style="width: 16px;height: 14px;" />
-        </div>
-        添加设备
-      </div>
-      <div style="height: 1px;background: #e8f0ff;" />
-      <div style="margin: 30px 20px;">
-        <div style="font-weight: 400;font-size: 14px;text-align: left;color: #3d4566;">
-          <div style="color: red;display: inline-block;">*</div>验证码：
-        </div>
-        <div class="input-46" style="margin-top: 10px;">
-          <el-input placeholder="请输入设备播报的6位数验证码.." v-model="deviceCode" />
-        </div>
-      </div>
-      <div style="display: flex;margin: 0 20px;gap: 10px;">
-        <div class="dialog-btn" @click="addDevice">确定</div>
-        <div class="dialog-btn"
-          style="background: #e6ebff;border: 1px solid #adbdff;color: #5778ff;"
-          @click="addDeviceDialogVisible=false">
-          取消</div>
-      </div>
-    </el-dialog>
   </div>
+
 </template>
 
 <script>
-// @ is an alias to /src
+import DeviceItem from '@/components/DeviceItem.vue'
-
+import AddDeviceDialog from '@/components/AddDeviceDialog.vue'
-import Api from '@/apis/api';
+import HeaderBar from '@/components/HeaderBar.vue'
-
 export default {
-  name: 'home',
+  name: 'HomePage',
+  components: { DeviceItem, AddDeviceDialog, HeaderBar },
   data() {
     return {
-      serach: '', // 搜索框输入内容
-      deviceList: [], // 原始设备列表
-      filteredDeviceList: [], // 过滤后的设备列表
-      switchValue: false,
       addDeviceDialogVisible: false,
-      deviceCode: "", // 设备验证码
+      // 此处模拟设备列表（10条数据）
-      settingDevice: false,
+      devices: Array.from({ length: 10 }, (_, i) => ({
-      form: {
+        id: i,
-        name: "",
+        mac: 'CC:ba:97:11:a6:ac',
-        timbre: "",
+        model: 'esp32-s3-touch-amoled-1.8',
-        introduction: "",
+        lastConversation: '6天前',
-        prompt: "",
+        appVersion: '1.1.0'
-        model: ""
+      }))
-      },
+    }
-      options: [{
-        value: '选项1',
-        label: '黄金糕'
-      }, {
-        value: '选项2',
-        label: '双皮奶'
-      }],
-      userInfo: {
-        mobile: '' // 初始化用户信息
-      }
-    };
   },
   methods: {
     showAddDialog() {
-        this.addDeviceDialogVisible = true;
+      this.addDeviceDialogVisible = true
     },
-    clickSettingDevice() {
+    goToRoleConfig() {
-      this.settingDevice = true
+      // 点击配置角色后跳转到角色配置页
+      this.$router.push('/role-config')
     },
-    // 获取用户信息
+    handleDeviceAdded(deviceCode) {
-    fetchUserInfo() {
+      // 根据需要处理添加设备后逻辑，比如刷新设备列表等
-      Api.user.getUserInfo(({data}) => {
+      console.log('设备验证码：', deviceCode)
-        this.userInfo = data.data
-      });
-    },
-    // 获取已绑设备
-    getList(){
-      Api.user.getHomeList(({data})=>{
-        this.deviceList = data.data; // 保存原始设备列表
-        this.filteredDeviceList = data.data; // 初始化过滤后的设备列表
-      })
-    },
-    // 处理搜索
-    handleSearch() {
-      if (this.serach.trim() === '') {
-        // 如果搜索框为空，显示全部设备
-        this.filteredDeviceList = this.deviceList;
-      } else {
-        // 过滤设备列表
-        this.filteredDeviceList = this.deviceList.filter(device => {
-          return (
-            device.list[0]?.mac_address?.includes(this.serach) ||  // 匹配MAC地址
-            device.list[0]?.device_type?.includes(this.serach) ||  // 匹配设备型号
-            device.list[0]?.app_version?.includes(this.serach)     // 匹配APP版本
-          );
-        });
-      }
-    },
-    // 解绑设备
-    unbindDevice(device_id) {
-      this.$confirm('确定要解绑该设备吗？', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        // 调用解绑设备的接口
-        Api.user.unbindDevice(device_id, ({ data }) => {
-          if (data.code === 0) {
-            this.$message.success('解绑成功');
-            this.getList();
-          } else {
-            this.$message.error(data.msg || '解绑失败');
-          }
-        });
-      }).catch(() => {
-        // 用户取消操作
-        this.$message.info('已取消解绑');
-      });
-    },
-    // 添加设备
-    addDevice() {
-        if (!this.deviceCode) {
-            this.$message.warning('请输入设备验证码');
-            return;
-        }
-
-        Api.user.bindDevice(this.deviceCode, ({ data }) => {
-            if (data.code === 0) {
-                this.$message.success('设备绑定成功');
-                this.addDeviceDialogVisible = false;
-                this.getList(); // 刷新设备列表
-            } else {
-                this.$message.error(data.msg || '设备绑定失败');
-            }
-        });
     }
-  },
-  mounted() {
-    this.fetchUserInfo(); // 组件加载时获取用户信息
-    this.getList(); // 初始化设备列表
   }
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped>
 .welcome {
-  min-width: 900px;
+  min-width: 1200px;
-  min-height: 506px;
+  min-height: 675px;
   height: 100vh;
   background-image: url("@/assets/home/background.png");
   background-size: cover;
@@ -352,59 +94,18 @@ export default {
   -o-background-size: cover;
   /* 兼容老版本Opera浏览器 */
 }
-.equipment-management,
-.equipment-management2 {
-  cursor: pointer;
-}
-.equipment-management {
-  width: 83px;
-  height: 24px;
-  border-radius: 12px;
-  background: #5778ff;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  font-weight: 500;
-  color: #fff;
-  font-size: 11px;
-}
-.equipment-management2 {
-  width: 87px;
-  height: 23px;
-  border-radius: 11px;
-  background: #fff;
-  display: flex;
-  justify-content: center;
-  font-size: 9px;
-  font-weight: 400;
-  gap: 8px;
-  color: #3d4566;
-  margin-left: 5px;
-  align-items: center;
-}
-.header {
-  background: #f6fcfe66;
-  border: 1px solid #fff;
-}
 .add-device {
-  height: 195px;
+  height: 260px;
-  border-radius: 15px;
+  border-radius: 20px;
   position: relative;
   overflow: hidden;
   background: linear-gradient(
-    269.62deg,
+      269.62deg,
-    #e0e6fd 0%,
+      #e0e6fd 0%,
-    #cce7ff 49.69%,
+      #cce7ff 49.69%,
-    #d3d3fe 100%
+      #d3d3fe 100%
   );
 }
-.audio-box {
-  flex: 1;
-  height: 35px;
-  border-radius: 8px;
-  border: 1px solid #e4e6ef;
-}
 .add-device-bg {
   width: 100%;
   height: 100%;
@@ -421,275 +122,51 @@ export default {
   box-sizing: border-box;
   /* 兼容老版本Opera浏览器 */
   .hellow-text {
-    margin-left: 75px;
+    margin-left: 100px;
     color: #3d4566;
-    font-size: 33px;
+    font-size: 44px;
     font-weight: 700;
     letter-spacing: 0;
   }
+
   .hi-hint {
     font-weight: 400;
-    font-size: 9px;
+    font-size: 12px;
     text-align: left;
     color: #818cae;
-    margin-left: 75px;
+    margin-left: 100px;
-    margin-top: 5px;
+    margin-top: 7px;
   }
 }
-.serach-box {
+
-  display: flex;
-  width: 250px;
-  height: 30px;
-  border-radius: 15px;
-  background-color: #f6fcfe66;
-  border: 1px solid #e4e6ef;
-  align-items: center;
-  padding: 0 10px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-.user-info {
-  font-weight: 600;
-  font-size: 12px;
-  letter-spacing: -0.02px;
-  text-align: left;
-  color: #3d4566;
-}
-.clear-btn {
-  width: 45px;
-  height: 18px;
-  background: #fd8383;
-  border-radius: 9px;
-  line-height: 18px;
-  font-size: 11px;
-  color: #fff;
-  cursor: pointer;
-}
-.clear-text {
-  color: #979db1;
-  font-size: 11px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-left: 15px;
-}
-.template-item {
-  height: 35px;
-  width: 85px;
-  border-radius: 8px;
-  background: #e6ebff;
-  line-height: 35px;
-  font-weight: 400;
-  font-size: 11px;
-  text-align: center;
-  color: #5778ff;
-}
-.prompt-bottom {
-  margin-bottom: 4px;display: flex;justify-content: space-between;padding: 0 15px;align-items: center;
-}
-.input-35 {
-  border: 1px solid #e4e6ef;
-  background: #f6f8fb;
-  border-radius: 8px;
-}
-.console {
-  width: 90px;
-  height: 23px;
-  border-radius: 11px;
-  background: radial-gradient(50% 50% at 50% 50%, #fff 0%, #e8f0ff 100%);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 9px;
-  color: #979db1;
-  font-weight: 400;
-  gap: 8px;
-  margin-left: 15px;
-}
-.dialog-btn {
-  cursor: pointer;
-  flex: 1;
-  border-radius: 17px;
-  background: #5778ff;
-  height: 34px;
-  font-weight: 500;
-  font-size: 11px;
-  color: #fff;
-  line-height: 34px;
-  text-align: center;
-}
 .add-device-btn {
   display: flex;
   align-items: center;
-  margin-left: 75px;
+  margin-left: 100px;
-  margin-top: 15px;
+  margin-top: 20px;
   cursor: pointer;
+
   .left-add {
-    width: 105px;
+    width: 140px;
-    height: 34px;
+    height: 46px;
-    border-radius: 17px;
+    border-radius: 23px;
     background: #5778ff;
     color: #fff;
-    font-size: 11px;
+    font-size: 14px;
     font-weight: 500;
     text-align: center;
-    line-height: 34px;
+    line-height: 46px;
   }
+
   .right-add {
-    width: 34px;
+    width: 46px;
-    height: 34px;
+    height: 46px;
     border-radius: 50%;
     background: #5778ff;
-    margin-left: -6px;
+    margin-left: -8px;
     display: flex;
     justify-content: center;
     align-items: center;
   }
 }
-.device-item {
+</style>
-  width: 345px;
-  border-radius: 15px;
-  background: #fafcfe;
-  padding: 22px;
-  box-sizing: border-box;
-}
-.device-name {
-  margin: 8px 0 10px;
-  font-weight: 400;
-  font-size: 11px;
-  color: #3d4566;
-  text-align: left;
-}
-audio::-webkit-media-controls-panel {
-  background-color: #fafcfe; /* 设置音频面板的控制按钮背景颜色为透明 */
-}
-.settings-btn {
-  font-weight: 500;
-  font-size: 11px;
-  color: #5778ff;
-  background: #e6ebff;
-  width: 57px;
-  height: 21px;
-  line-height: 21px;
-  cursor: pointer;
-  border-radius: 10px;
-}
-.version-info {
-  display: flex;
-  justify-content: space-between;
-  margin-top: 15px;
-  font-size: 11px;
-  color: #979db1;
-  font-weight: 400;
-}
-.save-btn,
-.reset-btn {
-  width: 105px;
-  height: 34px;
-  border-radius: 17px;
-  line-height: 34px;
-  box-sizing: border-box;
-  cursor: pointer;
-  font-size: 12px;
-}
-.save-btn {
-  border-radius: 23px;
-  background: #5778ff;
-  color: #fff;
-}
-.reset-btn {
-  border: 1px solid #adbdff;
-  background: #e6ebff;
-  color: #5778ff;
-}
-.textarea-box {
-  border: 1px solid #e4e6ef;
-  border-radius: 8px;
-  background: #f6f8fb;
-}
-::v-deep {
-  .textarea-box .el-textarea__inner {
-    background-color: transparent !important;
-    border: none !important;
-    padding: 15px;
-  }
-  // 搜索输入框的样式调整
-  .serach-box .el-input__inner {
-    border: none;
-    background-color: transparent;
-    padding: 0 5px 0 15px;
-    font-size: 12px;
-    color: #3d4566;
-  }
-  .el-textarea .el-input__count {
-    color: #979db1;
-    font-size: 11px;
-    right: 15px;
-    background-color: transparent;
-  }
-  .el-input__inner {
-    //border: none;
-    //background-color: transparent;
-    padding: 0 5px 0 15px;
-    border-radius: 8px;
-  }
-  .input-46 .el-input__inner {
-    padding: 0 15px;
-    height: 38px;
-  }
-  .lh-form-item {
-    .el-form-item__label {
-      line-height: 17px;
-    }
-  }
-  .el-form-item__label {
-    line-height: 34px;
-    font-weight: 400;
-    font-size: 11px;
-    text-align: left;
-    color: #3d4566;
-  }
-  .el-switch__core {
-    height: 21px;
-    border-radius: 10px;
-  }
-  .el-switch {
-    line-height: 28px;
-  }
-  .el-switch.is-checked .el-switch__core::after {
-    left: calc(100% - 4px);
-  }
-  .el-switch__label {
-    color: #3d4566;
-  }
-  .el-switch__core:after {
-    left: 4px;
-    width: 15px;
-    height: 15px;
-    top: 2px;
-  }
-  .el-dialog__headerbtn .el-dialog__close {
-    display: none;
-  }
-  .el-dialog__header,
-  .el-dialog__footer {
-    padding: 0;
-  }
-  .el-dialog--center .el-dialog__body {
-    padding: 24px 0;
-  }
-  .el-dialog {
-    display: flex !important;
-    flex-direction: column !important;
-    margin: 0 !important;
-    position: absolute !important;
-    top: 50% !important;
-    left: 50% !important;
-    transform: translate(-50%, -50%) !important;
-    overflow-y: scroll !important;
-    max-height: 100vh !important;
-    border-radius: 15px;
-  }
-}
-</style>
-
-

main/manager-web/src/views/login.vue

@@ -87,18 +87,22 @@ export default {
   },
   methods: {
     fetchCaptcha() {
-      this.captchaUuid = getUUID();
+      if (this.$store.getters.getToken) {
+        goToPage('/home')
+      } else {
+        this.captchaUuid = getUUID();
 
-      Api.user.getCaptcha(this.captchaUuid, (res) => {
+        Api.user.getCaptcha(this.captchaUuid, (res) => {
-        if (res.status === 200) {
+          if (res.status === 200) {
-          const blob = new Blob([res.data], {type: res.data.type});
+            const blob = new Blob([res.data], {type: res.data.type});
-          this.captchaUrl = URL.createObjectURL(blob);
+            this.captchaUrl = URL.createObjectURL(blob);
 
-        } else {
+          } else {
-          console.error('验证码加载异常:', error);
+            console.error('验证码加载异常:', error);
-          showDanger('验证码加载失败，点击刷新')
+            showDanger('验证码加载失败，点击刷新')
-        }
+          }
-      });
+        });
+      }
     },
 
     async login() {
@@ -119,8 +123,12 @@ export default {
       Api.user.login(this.form, ({data}) => {
         console.log(data)
         showSuccess('登陆成功！')
+        
+        this.$store.commit('setToken', JSON.stringify(data.data))
+
         goToPage('/home')
       })
+
       setTimeout(() => {
         this.fetchCaptcha()
       }, 1000)

main/manager-web/src/views/roleConfig.vue

@@ -0,0 +1,264 @@
+<template>
+  <div class="welcome">
+    <!-- 公共头部 -->
+    <HeaderBar/>
+    <el-main style="padding: 20px;display: flex;flex-direction: column;">
+      <div style="border-radius: 20px;background: #fafcfe;">
+        <div
+            style="padding: 19px 30px;font-weight: 700;font-size: 24px;text-align: left;color: #3d4566;display: flex;gap: 16px;align-items: center;">
+          <div
+              style="width: 46px;height: 46px;background: #5778ff;border-radius: 50%;display: flex;align-items: center;justify-content: center;">
+            <img src="@/assets/home/setting-user.png" alt="" style="width: 24px;height: 24px;"/>
+          </div>
+          {{ deviceMac }}
+        </div>
+        <div style="height: 1px;background: #e8f0ff;"/>
+        <el-form ref="form" :model="form" label-width="90px">
+          <div style="padding: 20px 30px;max-width: 990px;">
+            <el-form-item label="助手昵称：">
+              <div class="input-46">
+                <el-input v-model="form.name"/>
+              </div>
+            </el-form-item>
+            <el-form-item label="角色模版：">
+              <div style="display: flex;gap: 10px;">
+                <div class="template-item">
+                  台湾女友
+                </div>
+                <div class="template-item">
+                  土豆子
+                </div>
+                <div class="template-item">
+                  英语老师
+                </div>
+                <div class="template-item">
+                  好奇小男孩
+                </div>
+                <div class="template-item">
+                  汪汪队队长
+                </div>
+              </div>
+            </el-form-item>
+            <el-form-item label="角色音色：">
+              <div style="display: flex;gap: 10px;align-items: center;">
+                <div class="input-46" style="flex:1.4;">
+                  <el-select v-model="form.timbre" placeholder="请选择" style="width: 100%;">
+                    <el-option v-for="item in options" :key="item.value" :label="item.label"
+                               :value="item.value">
+                    </el-option>
+                  </el-select>
+                </div>
+                <div class="audio-box">
+                  <audio src="http://music.163.com/song/media/outer/url?id=447925558.mp3" controls
+                         style="height: 100%;width: 100%;"/>
+                </div>
+              </div>
+            </el-form-item>
+            <el-form-item label="角色介绍：">
+              <div class="textarea-box">
+                <el-input type="textarea" rows="6" resize="none" placeholder="请输入内容"
+                          v-model="form.introduction" maxlength="2000" show-word-limit/>
+              </div>
+            </el-form-item>
+            <el-form-item label="记忆体：">
+              <div class="textarea-box">
+                <el-input type="textarea" rows="6" resize="none" placeholder="请输入内容"
+                          v-model="form.prompt" maxlength="1000"/>
+                <div class="prompt-bottom">
+                  <div style="display: flex;gap: 10px;align-items: center;">
+                    <div style="color: #979db1;font-size: 14px;">当前记忆（每次对话后重新生成）</div>
+                    <div class="clear-btn">
+                      <i class="el-icon-delete-solid" style="font-size: 14px;"/>
+                      清除
+                    </div>
+                  </div>
+                  <div style="color: #979db1;font-size:14px;">{{ form.prompt.length }}/1000</div>
+                </div>
+              </div>
+            </el-form-item>
+            <el-form-item label="语言模型（内测）：" class="lh-form-item">
+              <div style="display: flex;gap: 10px;">
+                <div class="input-46" style="width: 100%;">
+                  <el-select v-model="form.model" placeholder="请选择" style="width: 100%;">
+                    <el-option v-for="item in options" :key="item.value" :label="item.label"
+                               :value="item.value">
+                    </el-option>
+                  </el-select>
+                </div>
+              </div>
+            </el-form-item>
+            <el-form-item label="" class="lh-form-item">
+              <div style="color: #979db1;text-align: left;">除了“Qwen
+                实时”，其他模型通常会增加约1秒的延迟。改变模型后，建议清空记忆体，以免影响体验。
+              </div>
+            </el-form-item>
+          </div>
+        </el-form>
+        <div style="display: flex;padding: 20px;gap: 10px;align-items: center;">
+          <div class="save-btn" @click="saveConfig">
+            保存配置
+          </div>
+          <div class="reset-btn" @click="resetConfig">
+            重制
+          </div>
+          <div class="clear-text">
+            <img src="@/assets/home/red-info.png" alt="" style="width: 24px;height: 24px;"/>
+            保存配置后，需要重启设备，新的配置才会生效。
+          </div>
+        </div>
+      </div>
+      <div style="font-size: 12px;font-weight: 400;margin-top: auto;padding-top: 30px;color: #979db1;">
+        ©2025 xiaozhi-esp32-server
+      </div>
+    </el-main>
+  </div>
+</template>
+
+<script>
+import HeaderBar from "@/components/HeaderBar.vue";
+
+export default {
+  name: 'RoleConfigPage',
+  components: {HeaderBar},
+  data() {
+    return {
+      deviceMac: 'CC:ba:97:11:a6:ac',
+      form: {
+        name: "",
+        timbre: "",
+        introduction: "",
+        prompt: "",
+        model: ""
+      },
+      options: [{
+        value: '选项1',
+        label: '黄金糕'
+      }, {
+        value: '选项2',
+        label: '双皮奶'
+      }]
+    }
+  },
+  methods: {
+    saveConfig() {
+      // 此处写保存配置逻辑
+      this.$message.success('配置已保存')
+    },
+    resetConfig() {
+      this.$confirm('确定要重置配置吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        // 重置表单
+        this.form = {
+          name: "",
+          timbre: "",
+          introduction: "",
+          prompt: "",
+          model: ""
+        }
+        this.$message.success('配置已重置')
+      }).catch(() => {
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.welcome {
+  min-width: 1200px;
+  min-height: 675px;
+  height: 100vh;
+  background-image: url("@/assets/home/background.png");
+  background-size: cover;
+  /* 确保背景图像覆盖整个元素 */
+  background-position: center;
+  /* 从顶部中心对齐 */
+  -webkit-background-size: cover;
+  /* 兼容老版本WebKit浏览器 */
+  -o-background-size: cover;
+  /* 兼容老版本Opera浏览器 */
+}
+.audio-box {
+  flex: 1;
+  height: 46px;
+  border-radius: 10px;
+  border: 1px solid #e4e6ef;
+}
+
+.clear-btn {
+  width: 60px;
+  height: 24px;
+  background: #fd8383;
+  border-radius: 12px;
+  line-height: 24px;
+  font-size: 14px;
+  color: #fff;
+  cursor: pointer;
+}
+
+.clear-text {
+  color: #979db1;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-left: 20px;
+}
+
+.template-item {
+  height: 46px;
+  width: 100px;
+  border-radius: 10px;
+  background: #e6ebff;
+  line-height: 46px;
+  font-weight: 400;
+  font-size: 14px;
+  text-align: center;
+  color: #5778ff;
+}
+
+.prompt-bottom {
+  margin-bottom: 5px;
+  display: flex;
+  justify-content: space-between;
+  padding: 0 20px;
+  align-items: center;
+}
+
+.input-46 {
+  border: 1px solid #e4e6ef;
+  background: #f6f8fb;
+  border-radius: 10px;
+}
+
+.save-btn,
+.reset-btn {
+  width: 140px;
+  height: 46px;
+  border-radius: 23px;
+  line-height: 46px;
+  box-sizing: border-box;
+  cursor: pointer;
+}
+
+.save-btn {
+  border-radius: 23px;
+  background: #5778ff;
+  color: #fff;
+}
+
+.reset-btn {
+  border: 1px solid #adbdff;
+  background: #e6ebff;
+  color: #5778ff;
+}
+
+.textarea-box {
+  border: 1px solid #e4e6ef;
+  border-radius: 10px;
+  background: #f6f8fb;
+}
+</style>