Hass/xiaozhi-esp32-server
1
0
Fork 0
mirror of https://github.com/xinnan-tech/xiaozhi-esp32-server.git synced 2026-07-29 18:23:59 +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/views/DeviceManagement.vue
+169
View File
@@ -0,0 +1,169 @@
<template>
<div class="welcome">
<HeaderBar />
<el-main style="padding: 20px; display: flex; flex-direction: column;">
<div class="table-container">
<h3 class="device-list-title">设备列表</h3>
<el-button type="primary" class="add-device-btn" @click="handleAddDevice">
+ 添加设备
</el-button>
<el-table :data="deviceList" style="width: 100%; margin-top: 20px" border stripe>
<el-table-column label="设备型号" prop="model" flex></el-table-column>
<el-table-column label="固件版本" prop="firmwareVersion" width="140"></el-table-column>
<el-table-column label="Mac地址" prop="macAddress" width="220"></el-table-column>
<el-table-column label="绑定时间" prop="bindTime" width="260"></el-table-column>
<el-table-column label="最近对话" prop="lastConversation" width="100"></el-table-column>
<el-table-column label="备注" width="220">
<template slot-scope="scope">
<el-input v-if="scope.row.isEdit" v-model="scope.row.remark" size="mini" @blur="stopEditRemark(scope.$index)"></el-input>
<span v-else>
<i v-if="!scope.row.remark" class="el-icon-edit" @click="startEditRemark(scope.$index, scope.row)"></i>
<span v-else @click="startEditRemark(scope.$index, scope.row)">
{{ scope.row.remark }}
</span>
</span>
</template>
</el-table-column>
<el-table-column label="OTA升级" width="120">
<template slot-scope="scope">
<el-switch v-model="scope.row.otaSwitch" size="mini" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
</template>
</el-table-column>
<el-table-column label="操作" width="80">
<template slot-scope="scope">
<el-button size="mini" type="text" @click="handleUnbind(scope.row)" style="color: #ff4949">
解绑
</el-button>
</template>
</el-table-column>
</el-table>
</div>
<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>
</div>
</template>
<script>
import HeaderBar from "@/components/HeaderBar.vue";
import AddDeviceDialog from "@/components/AddDeviceDialog.vue";
export default {
components: {HeaderBar, AddDeviceDialog },
data() {
return {
addDeviceDialogVisible: false,
deviceList: [
{
model: 'xingzhi-cube-0.96oled-wifi',
firmwareVersion: '1.4.6',
macAddress: 'fc:01:2c:c5:d5:7c',
bindTime: '2025-03-10 18:16:21',
lastConversation: '6 天前',
remark: '',
isEdit: false,
otaSwitch: false
},
{
model: 'xingzhi-board-1.3tft-ble',
firmwareVersion: '2.1.0',
macAddress: 'ac:12:3d:e7:f8:9a',
bindTime: '2025-03-12 09:30:15',
lastConversation: '4 天前',
remark: '测试设备',
isEdit: false,
otaSwitch: true
},
{
model: 'xingzhi-kit-0.91oled-4g',
firmwareVersion: '1.8.3',
macAddress: 'bc:45:6f:1e:2d:3c',
bindTime: '2025-03-15 14:22:08',
lastConversation: '2 天前',
remark: '生产环境设备',
isEdit: false,
otaSwitch: false
}
]
};
},
methods: {
handleAddDevice() {
// 添加设备逻辑
this.addDeviceDialogVisible = true;
},
startEditRemark(index, row) {
this.deviceList[index].isEdit = true;
},
stopEditRemark(index) {
this.deviceList[index].isEdit = false;
},
handleUnbind(device) {
// 解绑逻辑
console.log('解绑设备', device);
},
handleDeviceAdded(deviceCode) {
console.log('添加的智慧体名称：', deviceCode);
},
}
};
</script>
<style scoped>
.welcome {
min-width: 900px;
min-height: 506px;
height: 100vh;
display: flex;
flex-direction: column;
background-image: url("@/assets/home/background.png");
background-size: cover;
background-position: center;
-webkit-background-size: cover;
-o-background-size: cover;
}
.table-container {
background: #f9fafc;
padding: 20px;
border-radius: 20px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
margin-top: 15px;
}
.add-device-btn {
float: right;
background: #409eff;
border: none;
border-radius: 10px;
width: 105px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
gap: 8px;
margin-bottom: 15px;
&:hover {
background: #3a8ee6;
}
}
.device-list-title {
float: left;
font-size: 18px;
font-weight: 700;
margin: 5px;
color: #2c3e50;
}
.el-icon-edit {
color: #409eff;
cursor: pointer;
font-size: 14px;
vertical-align: middle;
}
</style>
main/manager-web/src/views/home.vue
+35 -30
View File
@@ -21,23 +21,23 @@
</div>
<div class="add-device-btn" @click="showAddDialog">
<div class="left-add">
添加设备
添加智能体
</div>
<div style="width: 23px;height: 13px;background: #5778ff;margin-left: -10px;" />
<div class="right-add">
<i class="el-icon-right" style="font-size: 30px;color: #fff;" />
<i class="el-icon-right" style="font-size: 20px;color: #fff;" />
</div>
</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" />
<DeviceItem v-for="(item,index) in devices" :key="index" :device="item" @configure="goToRoleConfig" @deviceManage="handleDeviceManage" />
</div>
</div>
<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" />
<AddWisdomBodyDialog :visible.sync="addDeviceDialogVisible" @confirm="handleWisdomBodyAdded" />
</el-main>
</div>
@@ -45,11 +45,11 @@
<script>
import DeviceItem from '@/components/DeviceItem.vue'
import AddDeviceDialog from '@/components/AddDeviceDialog.vue'
import AddWisdomBodyDialog from '@/components/AddWisdomBodyDialog.vue'
import HeaderBar from '@/components/HeaderBar.vue'
export default {
name: 'HomePage',
components: { DeviceItem, AddDeviceDialog, HeaderBar },
components: { DeviceItem, AddWisdomBodyDialog, HeaderBar },
data() {
return {
addDeviceDialogVisible: false,
@@ -58,8 +58,8 @@ export default {
id: i,
mac: 'CC:ba:97:11:a6:ac',
model: 'esp32-s3-touch-amoled-1.8',
voiceModel: 'esp32-s3-touch-amoled-1.8',
lastConversation: '6天前',
appVersion: '1.1.0'
}))
}
},
@@ -71,19 +71,24 @@ export default {
// 点击配置角色后跳转到角色配置页
this.$router.push('/role-config')
},
handleDeviceAdded(deviceCode) {
// 根据需要处理添加设备后逻辑，比如刷新设备列表等
console.log('设备验证码：', deviceCode)
}
handleWisdomBodyAdded(name) {
console.log('新增智慧体名称：', name)
this.addDeviceDialogVisible = false
},
handleDeviceManage() {
this.$router.push('/device-management');
},
}
}
</script>
<style scoped>
.welcome {
min-width: 1200px;
min-height: 675px;
min-width: 900px;
min-height: 506px;
height: 100vh;
display: flex;
flex-direction: column;
background-image: url("@/assets/home/background.png");
background-size: cover;
/* 确保背景图像覆盖整个元素 */
@@ -95,8 +100,8 @@ export default {
/* 兼容老版本Opera浏览器 */
}
.add-device {
height: 260px;
border-radius: 20px;
height: 195px;
border-radius: 15px;
position: relative;
overflow: hidden;
background: linear-gradient(
@@ -122,48 +127,48 @@ export default {
box-sizing: border-box;
/* 兼容老版本Opera浏览器 */
.hellow-text {
margin-left: 100px;
margin-left: 75px;
color: #3d4566;
font-size: 44px;
font-size: 33px;
font-weight: 700;
letter-spacing: 0;
}
.hi-hint {
font-weight: 400;
font-size: 12px;
font-size: 10px;
text-align: left;
color: #818cae;
margin-left: 100px;
margin-top: 7px;
margin-left: 75px;
margin-top: 5px;
}
}
.add-device-btn {
display: flex;
align-items: center;
margin-left: 100px;
margin-top: 20px;
margin-left: 75px;
margin-top: 15px;
cursor: pointer;
.left-add {
width: 140px;
height: 46px;
border-radius: 23px;
width: 105px;
height: 34px;
border-radius: 17px;
background: #5778ff;
color: #fff;
font-size: 14px;
font-size: 10px;
font-weight: 500;
text-align: center;
line-height: 46px;
line-height: 34px;
}
.right-add {
width: 46px;
height: 46px;
width: 34px;
height: 34px;
border-radius: 50%;
background: #5778ff;
margin-left: -8px;
margin-left: -6px;
display: flex;
justify-content: center;
align-items: center;
main/manager-web/src/views/roleConfig.vue
+128 -52
View File
@@ -2,26 +2,26 @@
<div class="welcome">
<!-- 公共头部 -->
<HeaderBar/>
<el-main style="padding: 20px;display: flex;flex-direction: column;">
<div style="border-radius: 20px;background: #fafcfe;">
<el-main style="padding: 16px;display: flex;flex-direction: column;">
<div style="border-radius: 16px;background: #fafcfe; border: 1px solid #e8f0ff;">
<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: 15px 24px;font-weight: 700;font-size: 19px;text-align: left;color: #3d4566;display: flex;gap: 13px;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: 37px;height: 37px;background: #5778ff;border-radius: 50%;display: flex;align-items: center;justify-content: center;">
<img src="@/assets/home/setting-user.png" alt="" style="width: 19px;height: 19px;"/>
</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 ref="form" :model="form" label-width="72px">
<div style="padding: 16px 24px;max-width: 792px;">
<el-form-item label="助手昵称：">
<div class="input-46">
<div class="input-46" style="width: 100%; max-width: 412px;">
<el-input v-model="form.name"/>
</div>
</el-form-item>
<el-form-item label="角色模版：">
<div style="display: flex;gap: 10px;">
<div style="display: flex;gap: 8px;">
<div class="template-item">
台湾女友
</div>
@@ -40,7 +40,7 @@
</div>
</el-form-item>
<el-form-item label="角色音色：">
<div style="display: flex;gap: 10px;align-items: center;">
<div style="display: flex;gap: 8px;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"
@@ -56,45 +56,99 @@
</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" 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" 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="display: flex;gap: 8px;align-items: center;">
<div style="color: #979db1;font-size: 11px;">当前记忆（每次对话后重新生成）</div>
<div class="clear-btn">
<i class="el-icon-delete-solid" style="font-size: 14px;"/>
<i class="el-icon-delete-solid" style="font-size: 11px;"/>
清除
</div>
</div>
<div style="color: #979db1;font-size:14px;">{{ form.prompt.length }}/1000</div>
<div style="color: #979db1;font-size:11px;">{{ form.prompt.length }}/1000</div>
</div>
</div>
</el-form-item>
<el-form-item label="语言模型（内测）：" class="lh-form-item">
<div style="display: flex;gap: 10px;">
<el-form-item label="大语言模型(LLM)：" class="lh-form-item">
<div style="display: flex;gap: 8px;">
<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 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">
<el-form-item label="语音转文本模型(ASR)：" class="lh-form-item">
<div style="display: flex;gap: 8px;">
<div class="input-46" style="width: 100%;">
<el-select v-model="form.asr" 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="语音活动检测模型(VAD)：" class="lh-form-item">
<div style="display: flex;gap: 8px;">
<div class="input-46" style="width: 100%;">
<el-select v-model="form.vad" 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="语音生成模型(TTS)：" class="lh-form-item">
<div style="display: flex;gap: 8px;">
<div class="input-46" style="width: 100%;">
<el-select v-model="form.tts" 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="意图分类模型(Intent)：" class="lh-form-item">
<div style="display: flex;gap: 8px;">
<div class="input-46" style="width: 100%;">
<el-select v-model="form.intent" 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="记忆增强模型(Memory)：" class="lh-form-item">
<div style="display: flex;gap: 8px;">
<div class="input-46" style="width: 100%;">
<el-select v-model="form.memory" 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" style="margin-top: -25px;">
<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 style="display: flex;padding: 16px;gap: 8px;align-items: center;">
<div class="save-btn" @click="saveConfig">
保存配置
</div>
@@ -102,12 +156,12 @@
重制
</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: 19px;height: 19px;"/>
保存配置后，需要重启设备，新的配置才会生效。
</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: 24px;color: #979db1;">
©2025 xiaozhi-esp32-server
</div>
</el-main>
@@ -128,7 +182,14 @@ export default {
timbre: "",
introduction: "",
prompt: "",
model: ""
model: {
tts: "",
vad: "",
asr: "",
llm: "",
memory:"",
intent:""
}
},
options: [{
value: '选项1',
@@ -168,9 +229,11 @@ export default {
<style scoped>
.welcome {
min-width: 1200px;
min-height: 675px;
min-width: 900px;
min-height: 506px;
height: 100vh;
display: flex;
flex-direction: column;
background-image: url("@/assets/home/background.png");
background-size: cover;
/* 确保背景图像覆盖整个元素 */
@@ -181,71 +244,83 @@ export default {
-o-background-size: cover;
/* 兼容老版本Opera浏览器 */
}
.el-form-item ::v-deep .el-form-item__label {
font-size: 10px !important;
color: #3d4566 !important;
font-weight: 400;
line-height: 22px;
padding-bottom: 2px;
}
.audio-box {
flex: 1;
height: 46px;
border-radius: 10px;
height: 37px;
border-radius: 20px;
border: 1px solid #e4e6ef;
}
.clear-btn {
width: 60px;
height: 24px;
width: 48px;
height: 19px;
background: #fd8383;
border-radius: 12px;
line-height: 24px;
font-size: 14px;
border-radius: 10px;
line-height: 19px;
font-size: 11px;
color: #fff;
cursor: pointer;
}
.clear-text {
color: #979db1;
font-size: 14px;
font-size: 11px;
display: flex;
align-items: center;
gap: 10px;
margin-left: 20px;
gap: 8px;
margin-left: 16px;
}
.template-item {
height: 46px;
width: 100px;
border-radius: 10px;
height: 37px;
width: 80px;
border-radius: 8px;
background: #e6ebff;
line-height: 46px;
line-height: 37px;
font-weight: 400;
font-size: 14px;
font-size: 11px;
text-align: center;
color: #5778ff;
}
.prompt-bottom {
margin-bottom: 5px;
margin-bottom: 4px;
display: flex;
justify-content: space-between;
padding: 0 20px;
padding: 0 16px;
align-items: center;
}
.input-46 {
border: 1px solid #e4e6ef;
background: #f6f8fb;
border-radius: 10px;
border-radius: 8px;
height: 36px !important;
}
.save-btn,
.reset-btn {
width: 140px;
height: 46px;
border-radius: 23px;
line-height: 46px;
width: 112px;
height: 37px;
border-radius: 18px;
line-height: 37px;
box-sizing: border-box;
cursor: pointer;
font-size: 11px
}
.save-btn {
border-radius: 23px;
border-radius: 18px;
background: #5778ff;
color: #fff;
}
@@ -258,7 +333,8 @@ export default {
.textarea-box {
border: 1px solid #e4e6ef;
border-radius: 10px;
border-radius: 8px;
background: #f6f8fb;
}
</style>
</style>