Hass/xiaozhi-esp32-server
1
0
Fork 0
mirror of https://github.com/xinnan-tech/xiaozhi-esp32-server.git synced 2026-07-28 22:03:52 +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/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;