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

Manager web (#227)

Browse Source 
* update：增加前端设计图

* 前端代码优化

* update:底部信息纠正

* 增加：flyio

* update:去除org.quartz

* update:登陆功能

---------

Co-authored-by: hrz <1710360675@qq.com>
Co-authored-by: CGD <3030332422@qq.com>
This commit is contained in:
欣南科技
2025-03-07 10:01:20 +08:00
committed by GitHub
co-authored by hrz CGD
parent 0b7abfae3a
commit 6464c81e72
11 changed files with 892 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files
main/manager-web/src/views/home.vue
+39 -25
View File
@@ -21,7 +21,7 @@
</div>
<div style="display: flex;align-items: center;gap: 8px;">
<div class="serach-box">
<el-input placeholder="输入名称搜索.." v-model="serach" />
<el-input placeholder="输入名称搜索.." v-model="serach" style="border: none; background: transparent;" />
<img src="@/assets/home/search.png" alt=""
style="width: 12px;height: 12px;margin-right: 11px;cursor: pointer;" />
</div>
@@ -87,20 +87,20 @@
</div>
</div>
</div>
<div v-show="settingDevice" style="border-radius: 20px;background: #fafcfe;">
<div v-show="settingDevice" style="border-radius: 18px;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;">
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: 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;" />
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="90px">
<div style="padding: 20px 30px;max-width: 990px;">
<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">
<div class="input-46" style="width: 57.5%;">
<el-input v-model="form.name" />
</div>
</el-form-item>
@@ -119,7 +119,7 @@
</div>
</el-form-item>
<el-form-item label="角色音色：">
<div style="display: flex;gap: 10px;align-items: center;">
<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"
@@ -135,28 +135,28 @@
</el-form-item>
<el-form-item label="角色介绍：">
<div class="textarea-box">
<el-input type="textarea" rows="6" resize="none" placeholder="请输入内容"
<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="6" resize="none" placeholder="请输入内容"
<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: 14px;">当前记忆（每次对话后重新生成）</div>
<div style="color: #979db1;font-size: 12px;">当前记忆（每次对话后重新生成）</div>
<div class="clear-btn">
<i class="el-icon-delete-solid" style="font-size: 14px;" />
<i class="el-icon-delete-solid" style="font-size: 12px;" />
清除
</div>
</div>
<div style="color: #979db1;font-size:14px;">{{form.prompt.length}}/1000</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: 10px;">
<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"
@@ -172,13 +172,13 @@
</el-form-item>
</div>
</el-form>
<div style="display: flex;padding: 20px;gap: 10px;align-items: center;">
<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: 24px;height: 24px;" />
<img src="@/assets/home/red-info.png" alt="" style="width: 21px;height: 21px;" />
保存配置后，需要重启设备，新的配置才会生效。
</div>
</div>
@@ -188,7 +188,7 @@
©2025 xiaozhi-esp32-server</div>
</el-main>
</el-container>
<el-dialog :visible.sync="addDeviceDialogVisible" width="480px" center>
<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
@@ -356,11 +356,14 @@ export default {
}
.serach-box {
display: flex;
width: 230px;
width: 250px;
height: 30px;
border-radius: 15px;
background-color: #e2f5f7;
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;
@@ -389,7 +392,7 @@ export default {
}
.template-item {
height: 35px;
width: 75px;
width: 85px;
border-radius: 8px;
background: #e6ebff;
line-height: 35px;
@@ -461,7 +464,7 @@ export default {
}
}
.device-item {
width: 341px;
width: 350px;
border-radius: 15px;
background: #fafcfe;
padding: 22px;
@@ -526,6 +529,14 @@ audio::-webkit-media-controls-panel {
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;
@@ -533,13 +544,14 @@ audio::-webkit-media-controls-panel {
background-color: transparent;
}
.el-input__inner {
border: none;
background-color: transparent;
//border: none;
//background-color: transparent;
padding: 0 5px 0 15px;
border-radius: 8px;
}
.input-46 .el-input__inner {
padding: 0 15px;
height: 46px;
height: 38px;
}
.lh-form-item {
.el-form-item__label {
@@ -596,3 +608,5 @@ audio::-webkit-media-controls-panel {
}
}
</style>
main/manager-web/src/views/login.vue
+69 -61
View File
@@ -3,97 +3,91 @@
<el-container style="height: 100%;">
<el-header>
<div
style="display: flex;align-items: center;margin-top: 15px;margin-left: 10px;gap: 10px;">
<img src="@/assets/xiaozhi-logo.png" alt="" style="width: 45px;height: 45px;" />
<img src="@/assets/xiaozhi-ai.png" alt="" style="width: 70px;height: 13px;" />
style="display: flex;align-items: center;margin-top: 15px;margin-left: 10px;gap: 10px;">
<img src="@/assets/xiaozhi-logo.png" alt="" style="width: 45px;height: 45px;"/>
<img src="@/assets/xiaozhi-ai.png" alt="" style="width: 70px;height: 13px;"/>
</div>
</el-header>
<el-main style="position: relative;">
<div class="login-box">
<div
style="display: flex;align-items: center;gap: 20px;margin-bottom: 39px;padding: 0 30px;">
<img src="@/assets/login/hi.png" alt="" style="width: 34px;height: 34px;" />
style="display: flex;align-items: center;gap: 20px;margin-bottom: 39px;padding: 0 30px;">
<img src="@/assets/login/hi.png" alt="" style="width: 34px;height: 34px;"/>
<div class="login-text">登录</div>
<div class="login-welcome">
WELCOME TO LOG IN</div>
WELCOME TO LOGIN
</div>
</div>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="用户名" name="username">
<div style="padding: 0 30px;">
<div class="input-box">
<img src="@/assets/login/username.png" alt="" class="input-icon" />
<el-input v-model="form.username" placeholder="请输入用户名" />
</div>
<div class="input-box">
<img src="@/assets/login/password.png" alt="" class="input-icon" />
<el-input v-model="form.password" placeholder="请输入密码" />
</div>
<div style="font-weight: 400;font-size: 14px;text-align: left;color: #5778ff;display: flex;justify-content: space-between;margin-top: 20px;">
<div style="cursor: pointer;">新用户注册</div>
<div style="cursor: pointer;">忘记密码？</div>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="手机号" name="phone">
<div style="padding: 0 30px;">
<div class="input-box">
<img src="@/assets/login/phone.png" alt="" class="input-icon" />
<el-input v-model="form.phoneNumber" placeholder="请输入手机号" />
<div style="width: 120px;flex-shrink: 0;">
<el-dropdown>
<span class="el-dropdown-link">
+86 中国大陆<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>黄金糕</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
<div style="padding: 0 12px 0 30px;margin-top: 20px;" class="input-box">
<img src="@/assets/login/shield.png" alt="" class="input-icon" />
<el-input v-model="form.phoneCode" placeholder="请输入验证码" />
<div class="code-send">
发送
</div>
</div>
</div>
</el-tab-pane>
</el-tabs>
<div class="login-btn">登陆</div>
<div style="padding: 0 30px;">
<div class="input-box">
<img src="@/assets/login/username.png" alt="" class="input-icon"/>
<el-input v-model="form.username" placeholder="请输入用户名"/>
</div>
<div class="input-box">
<img src="@/assets/login/password.png" alt="" class="input-icon"/>
<el-input v-model="form.password" placeholder="请输入密码"/>
</div>
<div class="input-box">
<img src="@/assets/login/shield.png" alt="" class="input-icon"/>
<el-input v-model="form.captcha" placeholder="请输入验证码"/>
</div>
<div
style="font-weight: 400;font-size: 14px;text-align: left;color: #5778ff;display: flex;justify-content: space-between;margin-top: 20px;">
<div style="cursor: pointer;">新用户注册</div>
</div>
</div>
<div class="login-btn" @click="login">登陆</div>
<div style="font-size: 14px;color: #979db1;">
登录即同意<div style="display: inline-block;color: #5778FF;cursor: pointer;">《用户协议》</div>和
登录即同意
<div style="display: inline-block;color: #5778FF;cursor: pointer;">《用户协议》</div>
和
<div style="display: inline-block;color: #5778FF;cursor: pointer;">《隐私政策》</div>
</div>
</div>
</el-main>
<el-footer>
<div style="font-size: 12px;font-weight: 400;color: #979db1;">
©2024 小智Al控制面板2.0粤ICP备2022121736号-2</div>
©2025 xiaozhi-esp32-server
</div>
</el-footer>
</el-container>
</div>
</template>
<script>
// @ is an alias to /src
import Api from '@/apis/api'
import {isNull, showDanger, showSuccess, goToPage} from '@/utils'
export default {
name: 'login',
data() {
return {
activeName: "username",
form:{
phoneNumber:'',
phoneCode:'',
username:'',
password:''
form: {
username: '',
password: '',
captcha: ''
}
}
},
methods:{
handleClick(){
methods: {
login() {
if (isNull(this.form.username)) {
showDanger('用户名不能为空')
return
}
if (isNull(this.form.password)) {
showDanger('密码不能为空')
return
}
if (isNull(this.form.captcha)) {
showDanger('验证码不能为空')
return
}
Api.user.login(this.form, ({data}) => {
showSuccess('登陆成功！')
goToPage('/home')
})
}
}
}
@@ -113,12 +107,14 @@ export default {
-o-background-size: cover;
/* 兼容老版本Opera浏览器 */
}
.login-text {
font-weight: 700;
font-size: 32px;
text-align: left;
color: #3d4566;
}
.login-welcome {
font-weight: 400;
font-size: 9px;
@@ -127,6 +123,7 @@ export default {
align-self: flex-end;
margin-bottom: 7px;
}
.login-box {
position: absolute;
top: 50%;
@@ -138,17 +135,20 @@ export default {
width: 450px;
box-sizing: border-box;
}
.el-dropdown-link {
font-weight: 400;
font-size: 14px;
text-align: left;
color: #979db1;
}
.input-icon {
width: 19px;
height: 22px;
flex-shrink: 0;
}
.login-btn {
height: 35px;
background: #5778ff;
@@ -160,6 +160,7 @@ export default {
line-height: 35px;
margin: 35px 15px 15px;
}
.code-send {
width: 70px;
height: 32px;
@@ -172,6 +173,7 @@ export default {
flex-shrink: 0;
cursor: pointer;
}
.input-box {
display: flex;
margin-top: 20px;
@@ -183,10 +185,12 @@ export default {
padding: 0 15px;
gap: 20px;
}
::v-deep {
.el-tabs__nav-wrap::after {
height: 1px;
}
.el-tabs__nav-wrap::before {
content: "";
position: absolute;
@@ -197,18 +201,22 @@ export default {
background-color: #e4e7ed;
z-index: 1;
}
.el-tabs__item {
height: 65px;
line-height: 65px;
font-weight: 700;
color: #3d4566;
}
.el-tabs__item.is-active {
color: #5778ff;
}
.el-tabs__nav-scroll {
padding: 0 30px;
}
.el-input__inner {
border: none;
background-color: transparent;