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

修改了前端页面

Browse Source
This commit is contained in:
CGD
2025-03-18 21:49:57 +08:00
parent bd556c33a0
commit f3738a1630
8 changed files with 522 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files
main/manager-web/src/components/AddDeviceDialog.vue
+27 -12
View File
@@ -1,21 +1,22 @@
<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;" />
<el-dialog :visible.sync="visible" width="400px" center >
<div style="margin: 0 10px 10px;display: flex;align-items: center;gap: 10px;font-weight: 700;font-size: 20px;text-align: left;color: #3d4566;">
<div style="width: 40px;height: 40px;border-radius: 50%;background: #5778ff;display: flex;align-items: center;justify-content: center;">
<img src="@/assets/home/equipment.png" alt="" style="width: 18px;height: 15px;" />
</div>
添加设备
</div>
<div style="height: 1px;background: #e8f0ff;" />
<div style="margin: 30px 20px;">
<div style="margin: 22px 15px;">
<div style="font-weight: 400;font-size: 14px;text-align: left;color: #3d4566;">
<div style="color: red;display: inline-block;">*</div>验证码：
<div style="color: red;display: inline-block;">*</div>
<span style="font-size: 11px"> 验证码：</span>
</div>
<div class="input-46" style="margin-top: 10px;">
<div class="input-46" style="margin-top: 12px;">
<el-input placeholder="请输入设备播报的6位数验证码.." v-model="deviceCode" />
</div>
</div>
<div style="display: flex;margin: 0 20px;gap: 10px;">
<div style="display: flex;margin: 15px 15px;gap: 7px;">
<div class="dialog-btn" @click="confirm">
确定
</div>
@@ -53,7 +54,6 @@ export default {
<style scoped>
.input-46 {
border: 1px solid #e4e6ef;
background: #f6f8fb;
@@ -65,11 +65,26 @@ export default {
flex: 1;
border-radius: 23px;
background: #5778ff;
height: 46px;
height: 40px;
font-weight: 500;
font-size: 14px;
font-size: 12px;
color: #fff;
line-height: 46px;
line-height: 40px;
text-align: center;
}
::v-deep .el-dialog {
border-radius: 15px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
::v-deep .el-dialog__headerbtn {
display: none;
}
::v-deep .el-dialog__body {
padding: 4px 6px;
}
::v-deep .el-dialog__header{
padding: 10px;
}
</style>
main/manager-web/src/components/AddWisdomBodyDialog.vue
+87
View File
@@ -0,0 +1,87 @@
<template>
<el-dialog :visible.sync="visible" width="400px" center>
<div style="margin: 0 10px 10px;display: flex;align-items: center;gap: 10px;font-weight: 700;font-size: 20px;text-align: left;color: #3d4566;">
<div style="width: 40px;height: 40px;border-radius: 50%;background: #5778ff;display: flex;align-items: center;justify-content: center;">
<img src="@/assets/home/equipment.png" alt="" style="width: 18px;height: 15px;" />
</div>
添加智慧体
</div>
<div style="height: 1px;background: #e8f0ff;" />
<div style="margin: 22px 15px;">
<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: 12px;">
<el-input placeholder="请输入智慧体名称.." v-model="wisdomBodyName" />
</div>
</div>
<div style="display: flex;margin: 15px 15px;gap: 7px;">
<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: 'AddWisdomBodyDialog',
props: {
visible: { type: Boolean, required: true }
},
data() {
return { wisdomBodyName: "" }
},
methods: {
confirm() {
this.$emit('update:visible', false)
this.$emit('confirmed', this.wisdomBodyName)
this.wisdomBodyName = ""
},
cancel() {
this.$emit('update:visible', false)
this.wisdomBodyName = ""
}
}
}
</script>
<style scoped>
.input-46 {
border: 1px solid #e4e6ef;
background: #f6f8fb;
border-radius: 15px;
}
.dialog-btn {
cursor: pointer;
flex: 1;
border-radius: 23px;
background: #5778ff;
height: 40px;
font-weight: 500;
font-size: 12px;
color: #fff;
line-height: 40px;
text-align: center;
}
::v-deep .el-dialog {
border-radius: 15px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
::v-deep .el-dialog__headerbtn {
display: none;
}
::v-deep .el-dialog__body {
padding: 4px 6px;
}
::v-deep .el-dialog__header{
padding: 10px;
}
</style>
main/manager-web/src/components/DeviceItem.vue
+19 -15
View File
@@ -6,13 +6,16 @@
</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;" />
style="width: 18px;height: 18px;margin-right: 10px;" />
<img src="@/assets/home/info.png" alt="" style="width: 18px;height: 18px;" />
</div>
</div>
<div class="device-name">
设备型号：{{ device.model }}
</div>
<div class="device-name">
音色模型：{{ device.voiceModel }}
</div>
<div style="display: flex;gap: 10px;align-items: center;">
<div class="settings-btn" @click="$emit('configure')">
配置角色
@@ -23,12 +26,12 @@
<div class="settings-btn">
历史对话
</div>
<el-switch v-model="switchValue" inactive-text="OTA升级:" :width="42"
style="margin-left: auto;" />
<div class="settings-btn" @click="$emit('deviceManage')">
设备管理
</div>
</div>
<div class="version-info">
<div>最近对话：{{ device.lastConversation }}</div>
<div>APP版本：{{ device.appVersion }}</div>
</div>
</div>
</template>
@@ -46,28 +49,28 @@ export default {
</script>
<style scoped>
.device-item {
width: 455px;
width: 342px;
border-radius: 20px;
background: #fafcfe;
padding: 30px;
padding: 22px;
box-sizing: border-box;
}
.device-name {
margin: 10px 0 14px;
margin: 7px 0 10px;
font-weight: 400;
font-size: 14px;
font-size: 10px;
color: #3d4566;
text-align: left;
}
.settings-btn {
font-weight: 500;
font-size: 14px;
font-size: 10px;
color: #5778ff;
background: #e6ebff;
width: 76px;
height: 28px;
line-height: 28px;
width: 57px;
height: 21px;
line-height: 21px;
cursor: pointer;
border-radius: 14px;
}
@@ -75,9 +78,10 @@ export default {
.version-info {
display: flex;
justify-content: space-between;
margin-top: 20px;
font-size: 14px;
margin-top: 15px;
font-size: 10px;
color: #979db1;
font-weight: 400;
}
</style>
main/manager-web/src/components/HeaderBar.vue
+48 -35
View File
@@ -1,29 +1,29 @@
<template>
<el-header class="header">
<div style="display: flex;justify-content: space-between;">
<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: 56px;height: 56px;" />
<img src="@/assets/xiaozhi-ai.png" alt="" style="width: 78px;height: 16px;" />
<img src="@/assets/xiaozhi-logo.png" alt="" style="width: 42px;height: 42px;" />
<img src="@/assets/xiaozhi-ai.png" alt="" style="width: 58px;height: 12px;" />
<div class="equipment-management" @click="goHome">
<img src="@/assets/home/equipment.png" alt="" style="width: 16px;height: 14px;" />
设备管理
<img src="@/assets/home/equipment.png" alt="" style="width: 12px;height: 10px;" />
智能体管理
</div>
<div class="console">
<i class="el-icon-s-grid" style="font-size: 14px;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: 8px;height: 8px;" />
<img src="@/assets/home/close.png" alt="" style="width: 6px;height: 6px;" />
</div>
</div>
<div style="display: flex;align-items: center;gap: 10px;">
<div style="display: flex;align-items: center;gap: 7px; margin-top: 2px;">
<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: 16px;height: 16px;margin-right: 15px;cursor: pointer;" />
style="width: 14px;height: 14px;margin-right: 11px;cursor: pointer;" />
</div>
<img src="@/assets/home/avatar.png" alt="" style="width: 28px;height: 28px;" />
<img src="@/assets/home/avatar.png" alt="" style="width: 21px;height: 21px;" />
<div class="user-info">
158 3632 4642
</div>
@@ -54,69 +54,82 @@ export default {
}
.equipment-management {
width: 110px;
height: 32px;
border-radius: 16px;
width: 82px;
height: 24px;
border-radius: 12px;
background: #5778ff;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
gap: 7px;
font-weight: 500;
color: #fff;
font-size: 14px;
font-size: 10px;
}
.equipment-management2 {
width: 116px;
height: 30px;
border-radius: 15px;
width: 87px;
height: 22px;
border-radius: 11px;
background: #fff;
display: flex;
justify-content: center;
font-size: 12px;
color: #979db1;
font-size: 9px;
font-weight: 400;
gap: 10px;
gap: 7px;
color: #3d4566;
margin-left: 20px;
margin-left: 2px;
align-items: center;
}
.header {
background: #f6fcfe66;
border: 1px solid #fff;
height: 53px !important;
}
.serach-box {
display: flex;
width: 306px;
height: 40px;
border-radius: 20px;
background-color: #e2f5f7;
width: 220px;
height: 30px;
border-radius: 15px;
background-color: #f6fcfe66;
border: 1px solid #e4e6ef;
align-items: center;
padding: 0 7px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
margin-right: 15px;
}
.serach-box /deep/ .el-input__inner {
border-radius: 15px;
height: 100%;
width: 100%;
border: 0;
background: transparent;
padding-left: 12px;
}
.user-info {
font-weight: 600;
font-size: 16px;
font-size: 12px;
letter-spacing: -0.02px;
text-align: left;
color: #3d4566;
}
.console {
width: 120px;
height: 30px;
border-radius: 15px;
width: 90px;
height: 22px;
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: 12px;
font-size: 9px;
color: #979db1;
font-weight: 400;
gap: 10px;
color: #979db1;
margin-left: 20px;
gap: 7px;
margin-left: 15px;
}
</style>