Hass/xiaozhi-esp32-server
1
0
Fork 0
mirror of https://github.com/xinnan-tech/xiaozhi-esp32-server.git synced 2026-07-23 07:33:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

优化登录 token 校验 (#345)

Browse Source 
* 获得获取所有模型名称等功能 (#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>
This commit is contained in:
欣南科技
2025-03-14 23:48:59 +08:00
committed by GitHub
co-authored by CGD zhisheng hrz
parent b8e9aded6b
commit fc3f982309
21 changed files with 834 additions and 688 deletions
Download Patch File Download Diff File Expand all files Collapse all files
main/manager-api/src/main/java/xiaozhi/common/constant/Constant.java
+2
View File
@@ -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
+6
View File
@@ -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
+24 -1
View File
@@ -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
+13 -2
View File
@@ -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
+10
View File
@@ -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
+5 -1
View File
@@ -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
+23 -1
View File
@@ -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
+2
View File
@@ -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
+7
View File
@@ -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
+3
View File
@@ -26,4 +26,7 @@ nav {
}
}
}
</style>
<script setup lang="ts">
</script>
main/manager-web/src/apis/httpRequest.js
+7 -3
View File
@@ -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
+75 -6
View File
@@ -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
+75
View File
@@ -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
+83
View File
@@ -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
+122
View File
@@ -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
-58
View File
@@ -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
+13 -13
View File
@@ -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
+12
View File
@@ -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
+70 -593
View File
@@ -1,346 +1,88 @@
<template>
<div class="welcome">
<el-container style="height: 100%;">
<el-header class="header">
<div style="display: flex;justify-content: space-between;">
<div style="display: flex;align-items: center;gap: 8px;margin-top: 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 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">
<!-- 公共头部 -->
<HeaderBar />
<el-main style="padding: 20px;display: flex;flex-direction: column;">
<div>
<!-- 首页内容 -->
<div class="add-device">
<div class="add-device-bg">
<div class="hellow-text" style="margin-top: 23px;">
您好，小智</div>
<div class="hellow-text">让我们度过<div style="display: inline-block;color: #5778FF;">
<div class="hellow-text" style="margin-top: 30px;">
您好，小智
</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
style="display: flex;flex-wrap: wrap;margin-top: 15px;gap: 15px;justify-content: flex-start;box-sizing: border-box;">
<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 style="display: flex;flex-wrap: wrap;margin-top: 20px;gap: 20px;justify-content: space-between;box-sizing: border-box;">
<DeviceItem v-for="(item,index) in devices" :key="index" :device="item" @configure="goToRoleConfig" />
</div>
</div>
<div v-show="settingDevice" style="border-radius: 18px;background: #fafcfe;">
<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;">
<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 Api from '@/apis/api';
import DeviceItem from '@/components/DeviceItem.vue'
import AddDeviceDialog from '@/components/AddDeviceDialog.vue'
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: "", // 设备验证码
settingDevice: false,
form: {
name: "",
timbre: "",
introduction: "",
prompt: "",
model: ""
},
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}],
userInfo: {
mobile: '' // 初始化用户信息
}
};
// 此处模拟设备列表（10条数据）
devices: Array.from({ length: 10 }, (_, i) => ({
id: i,
mac: 'CC:ba:97:11:a6:ac',
model: 'esp32-s3-touch-amoled-1.8',
lastConversation: '6天前',
appVersion: '1.1.0'
}))
}
},
methods: {
showAddDialog() {
this.addDeviceDialogVisible = true;
this.addDeviceDialogVisible = true
},
clickSettingDevice() {
this.settingDevice = true
goToRoleConfig() {
// 点击配置角色后跳转到角色配置页
this.$router.push('/role-config')
},
// 获取用户信息
fetchUserInfo() {
Api.user.getUserInfo(({data}) => {
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 || '设备绑定失败');
}
});
handleDeviceAdded(deviceCode) {
// 根据需要处理添加设备后逻辑，比如刷新设备列表等
console.log('设备验证码：', deviceCode)
}
},
mounted() {
this.fetchUserInfo(); // 组件加载时获取用户信息
this.getList(); // 初始化设备列表
}
}
</script>
<style scoped lang="scss">
<style scoped>
.welcome {
min-width: 900px;
min-height: 506px;
min-width: 1200px;
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;
border-radius: 15px;
height: 260px;
border-radius: 20px;
position: relative;
overflow: hidden;
background: linear-gradient(
269.62deg,
#e0e6fd 0%,
#cce7ff 49.69%,
#d3d3fe 100%
269.62deg,
#e0e6fd 0%,
#cce7ff 49.69%,
#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-top: 5px;
margin-left: 100px;
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-top: 15px;
margin-left: 100px;
margin-top: 20px;
cursor: pointer;
.left-add {
width: 105px;
height: 34px;
border-radius: 17px;
width: 140px;
height: 46px;
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;
height: 34px;
width: 46px;
height: 46px;
border-radius: 50%;
background: #5778ff;
margin-left: -6px;
margin-left: -8px;
display: flex;
justify-content: center;
align-items: center;
}
}
.device-item {
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>
</style>
main/manager-web/src/views/login.vue
+18 -10
View File
@@ -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) => {
if (res.status === 200) {
const blob = new Blob([res.data], {type: res.data.type});
this.captchaUrl = URL.createObjectURL(blob);
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('验证码加载失败，点击刷新')
}
});
} else {
console.error('验证码加载异常:', error);
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
+264
View File
@@ -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>