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

Merge pull request #449 from BoBoloverrrr/bobo-xiaozhi

Browse Source 
代码复用：将输入验证逻辑封装成一个独立的函数validateInput ，提高代码的复用性。
This commit is contained in:
Huang
2025-03-20 21:46:36 +08:00
committed by GitHub
parent cb1d6ddeec 1ad93ce1fd
commit 6c7ac25388
3 changed files with 97 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
main/manager-web/src/components/HeaderBar.vue
+34 -14
View File
@@ -2,31 +2,39 @@
<el-header class="header">
<div style="display: flex;justify-content: space-between;margin-top: 6px; ">
<div style="display: flex;align-items: center;gap: 10px;">
<img src="@/assets/xiaozhi-logo.png" alt="" style="width: 42px;height: 42px;" />
<img src="@/assets/xiaozhi-ai.png" alt="" style="width: 58px;height: 12px;" />
<img alt="" src="@/assets/xiaozhi-logo.png" style="width: 42px;height: 42px;"/>
<img alt="" src="@/assets/xiaozhi-ai.png" style="width: 58px;height: 12px;"/>
<div class="equipment-management" @click="goHome">
<img src="@/assets/home/equipment.png" alt="" style="width: 12px;height: 10px;" />
<img alt="" src="@/assets/home/equipment.png" style="width: 12px;height: 10px;"/>
智能体管理
</div>
<div class="console">
<i class="el-icon-s-grid" style="font-size: 10px;color: #979db1;" />
<i class="el-icon-s-grid" style="font-size: 10px;color: #979db1;"/>
控制台
</div>
<div class="equipment-management2">
设备管理
<img src="@/assets/home/close.png" alt="" style="width: 6px;height: 6px;" />
<img alt="" src="@/assets/home/close.png" style="width: 6px;height: 6px;"/>
</div>
</div>
<div style="display: flex;align-items: center;gap: 7px; margin-top: 2px;">
<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: 14px;height: 14px;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 || '加载中...' }}
<el-input v-model="serach" placeholder="输入名称搜索.." style="border: none; background: transparent;"
@keyup.enter.native="handleSearch"/>
<img alt="" src="@/assets/home/search.png"
style="width: 14px;height: 14px;margin-right: 11px;cursor: pointer;" @click="handleSearch"/>
</div>
<img alt="" src="@/assets/home/avatar.png" style="width: 21px;height: 21px;"/>
<el-dropdown trigger="click">
<span class="el-dropdown-link">
{{ userInfo.username || '加载中...' }}<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item icon="el-icon-plus" @click.native="">个人中心</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-plus" @click.native="">修改密码</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-plus-outline" @click.native="">退出登录</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
</el-header>
@@ -43,6 +51,7 @@ export default {
return {
serach: '',
userInfo: {
username: '',
mobile: ''
}
}
@@ -71,7 +80,7 @@ export default {
// 当搜索内容为空时，显示原始完整列表
filteredDevices = this.$parent.originalDevices;
} else {
// 过滤逻辑
// 过滤逻辑
filteredDevices = this.devices.filter(device => {
return device.agentName.includes(searchValue) ||
device.ttsModelName.includes(searchValue) ||
@@ -158,6 +167,7 @@ export default {
text-align: left;
color: #3d4566;
}
.console {
width: 90px;
height: 22px;
@@ -172,4 +182,14 @@ export default {
gap: 7px;
margin-left: 15px;
}
</style>
.el-dropdown-link {
cursor: pointer;
color: #5778ff;
}
.el-icon-arrow-down {
font-size: 12px;
}
</style>
main/manager-web/src/views/login.vue
+30 -20
View File
@@ -4,15 +4,15 @@
<el-header>
<div
style="display: flex;align-items: center;margin-top: 15px;margin-left: 10px;gap: 10px;">
<img src="@/assets/xiaozhi-logo.png" alt="" style="width: 45px;height: 45px;"/>
<img src="@/assets/xiaozhi-ai.png" alt="" style="width: 70px;height: 13px;"/>
<img alt="" src="@/assets/xiaozhi-logo.png" style="width: 45px;height: 45px;"/>
<img alt="" src="@/assets/xiaozhi-ai.png" style="width: 70px;height: 13px;"/>
</div>
</el-header>
<el-main style="position: relative;">
<div class="login-box">
<div
style="display: flex;align-items: center;gap: 20px;margin-bottom: 39px;padding: 0 30px;">
<img src="@/assets/login/hi.png" alt="" style="width: 34px;height: 34px;"/>
<img alt="" src="@/assets/login/hi.png" style="width: 34px;height: 34px;"/>
<div class="login-text">登录</div>
<div class="login-welcome">
WELCOME TO LOGIN
@@ -20,16 +20,16 @@
</div>
<div style="padding: 0 30px;">
<div class="input-box">
<img src="@/assets/login/username.png" alt="" class="input-icon"/>
<img alt="" class="input-icon" src="@/assets/login/username.png"/>
<el-input v-model="form.username" placeholder="请输入用户名"/>
</div>
<div class="input-box">
<img src="@/assets/login/password.png" alt="" class="input-icon"/>
<el-input v-model="form.password" type="password" placeholder="请输入密码"/>
<img alt="" class="input-icon" src="@/assets/login/password.png"/>
<el-input v-model="form.password" placeholder="请输入密码" type="password"/>
</div>
<div style="display: flex; align-items: center; margin-top: 20px; width: 100%; gap: 10px;">
<div class="input-box" style="width: calc(100% - 130px); margin-top: 0;">
<img src="@/assets/login/shield.png" alt="" class="input-icon"/>
<img alt="" class="input-icon" src="@/assets/login/shield.png"/>
<el-input v-model="form.captcha" placeholder="请输入验证码" style="flex: 1;"/>
</div>
<img v-if="captchaUrl"
@@ -105,33 +105,43 @@ export default {
}
},
// 封装输入验证逻辑
validateInput(input, message) {
if (!input.trim()) {
showDanger(message);
return false;
}
return true;
},
async login() {
if (!this.form.username.trim()) { // 替换isNull校验
showDanger('用户名不能为空')
return
// 验证用户名
if (!this.validateInput(this.form.username, '用户名不能为空')) {
return;
}
if (!this.form.password.trim()) { // 替换isNull校验
showDanger('密码不能为空')
return
// 验证密码
if (!this.validateInput(this.form.password, '密码不能为空')) {
return;
}
if (!this.form.captcha.trim()) { // 替换isNull校验
showDanger('验证码不能为空')
return
// 验证验证码
if (!this.validateInput(this.form.captcha, '验证码不能为空')) {
return;
}
this.form.captchaId = this.captchaUuid
Api.user.login(this.form, ({data}) => {
console.log(data)
showSuccess('登陆成功！')
// 将令牌存储到 Vuex 中
this.$store.commit('setToken', JSON.stringify(data.data))
goToPage('/home')
})
// 重新获取验证码
setTimeout(() => {
this.fetchCaptcha()
}, 1000)
this.fetchCaptcha();
}, 1000);
},
goToRegister() {
@@ -140,6 +150,6 @@ export default {
}
}
</script>
<style scoped lang="scss">
<style lang="scss" scoped>
@import './auth.scss'; // 添加这行引用
</style>
main/manager-web/src/views/register.vue
+33 -24
View File
@@ -4,8 +4,8 @@
<!-- 保持相同的头部 -->
<el-header>
<div style="display: flex;align-items: center;margin-top: 15px;margin-left: 10px;gap: 10px;">
<img src="@/assets/xiaozhi-logo.png" alt="" style="width: 45px;height: 45px;"/>
<img src="@/assets/xiaozhi-ai.png" alt="" style="width: 70px;height: 13px;"/>
<img alt="" src="@/assets/xiaozhi-logo.png" style="width: 45px;height: 45px;"/>
<img alt="" src="@/assets/xiaozhi-ai.png" style="width: 70px;height: 13px;"/>
</div>
</el-header>
@@ -13,7 +13,7 @@
<div class="login-box">
<!-- 修改标题部分 -->
<div style="display: flex;align-items: center;gap: 20px;margin-bottom: 39px;padding: 0 30px;">
<img src="@/assets/login/hi.png" alt="" style="width: 34px;height: 34px;"/>
<img alt="" src="@/assets/login/hi.png" style="width: 34px;height: 34px;"/>
<div class="login-text">注册</div>
<div class="login-welcome">
WELCOME TO REGISTER
@@ -23,33 +23,33 @@
<div style="padding: 0 30px;">
<!-- 用户名输入框 -->
<div class="input-box">
<img src="@/assets/login/username.png" alt="" class="input-icon"/>
<img alt="" class="input-icon" src="@/assets/login/username.png"/>
<el-input v-model="form.username" placeholder="请输入用户名"/>
</div>
<!-- 密码输入框 -->
<div class="input-box">
<img src="@/assets/login/password.png" alt="" class="input-icon"/>
<el-input v-model="form.password" type="password" placeholder="请输入密码"/>
<img alt="" class="input-icon" src="@/assets/login/password.png"/>
<el-input v-model="form.password" placeholder="请输入密码" type="password"/>
</div>
<!-- 新增确认密码 -->
<div class="input-box">
<img src="@/assets/login/password.png" alt="" class="input-icon"/>
<el-input v-model="form.confirmPassword" type="password" placeholder="请确认密码"/>
<img alt="" class="input-icon" src="@/assets/login/password.png"/>
<el-input v-model="form.confirmPassword" placeholder="请确认密码" type="password"/>
</div>
<!-- 验证码部分保持相同 -->
<div style="display: flex; align-items: center; margin-top: 20px; width: 100%; gap: 10px;">
<div class="input-box" style="width: calc(100% - 130px); margin-top: 0;">
<img src="@/assets/login/shield.png" alt="" class="input-icon"/>
<img alt="" class="input-icon" src="@/assets/login/shield.png"/>
<el-input v-model="form.captcha" placeholder="请输入验证码" style="flex: 1;"/>
</div>
<img v-if="captchaUrl"
:src="captchaUrl"
alt="验证码"
style="width: 150px; height: 40px; cursor: pointer;"
@click="fetchCaptcha"
:src="captchaUrl"
alt="验证码"
style="width: 150px; height: 40px; cursor: pointer;"
@click="fetchCaptcha"
/>
</div>
@@ -119,24 +119,33 @@ export default {
});
},
// 封装输入验证逻辑
validateInput(input, message) {
if (!input.trim()) {
showDanger(message);
return false;
}
return true;
},
// 注册逻辑
register() {
if (!this.form.username.trim()) {
showDanger('用户名不能为空')
return
// 验证用户名
if (!this.validateInput(this.form.username, '用户名不能为空')) {
return;
}
if (!this.form.password.trim()) {
showDanger('密码不能为空')
return
// 验证密码
if (!this.validateInput(this.form.password, '密码不能为空')) {
return;
}
if (this.form.password !== this.form.confirmPassword) {
showDanger('两次输入的密码不一致')
return
}
if (!this.form.captcha.trim()) {
showDanger('验证码不能为空')
return
// 验证验证码
if (!this.validateInput(this.form.captcha, '验证码不能为空')) {
return;
}
Api.user.register(this.form, ({data}) => {
console.log(data)
if (data.code === 0) {
@@ -159,6 +168,6 @@ export default {
}
</script>
<style scoped lang="scss">
<style lang="scss" scoped>
@import './auth.scss'; // 修改为导入新建的SCSS文件
</style>
</style>