mirror of
https://github.com/xinnan-tech/xiaozhi-esp32-server.git
synced 2026-07-22 07:03:53 +08:00
Huang
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -39,6 +39,15 @@ const routes = [
|
||||
return import('../views/register.vue')
|
||||
}
|
||||
},
|
||||
// 新增设备管理页面路由
|
||||
{
|
||||
path: '/device-management',
|
||||
name: 'DeviceManagement',
|
||||
component: function () {
|
||||
return import('../views/DeviceManagement.vue')
|
||||
}
|
||||
|
||||
}
|
||||
]
|
||||
|
||||
const router = new VueRouter({
|
||||
|
||||
@@ -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>
|
||||
@@ -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;
|
||||
|
||||
@@ -2,45 +2,33 @@
|
||||
<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 class="template-item">
|
||||
台湾女友
|
||||
</div>
|
||||
<div class="template-item">
|
||||
土豆子
|
||||
</div>
|
||||
<div class="template-item">
|
||||
英语老师
|
||||
</div>
|
||||
<div class="template-item">
|
||||
好奇小男孩
|
||||
</div>
|
||||
<div class="template-item">
|
||||
汪汪队队长
|
||||
<div style="display: flex;gap: 8px;">
|
||||
<div v-for="template in templates" :key="template" class="template-item" @click="selectTemplate(template)">
|
||||
{{ template }}
|
||||
</div>
|
||||
</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 +44,39 @@
|
||||
</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;">
|
||||
<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>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<el-form-item v-for="model in models" :key="model.label" :label="model.label" class="model-item">
|
||||
<el-select v-model="form.model[model.key]" filterable placeholder="请选择" class="select-field">
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="" class="lh-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 +84,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,15 +110,29 @@ export default {
|
||||
timbre: "",
|
||||
introduction: "",
|
||||
prompt: "",
|
||||
model: ""
|
||||
model: {
|
||||
tts: "",
|
||||
vad: "",
|
||||
asr: "",
|
||||
llm: "",
|
||||
memory:"",
|
||||
intent:""
|
||||
}
|
||||
},
|
||||
options: [{
|
||||
value: '选项1',
|
||||
label: '黄金糕'
|
||||
}, {
|
||||
value: '选项2',
|
||||
label: '双皮奶'
|
||||
}]
|
||||
options: [
|
||||
{ value: '选项1', label: '黄金糕' },
|
||||
{ value: '选项2', label: '双皮奶' }
|
||||
],
|
||||
models: [
|
||||
{ label: '大语言模型(LLM)', key: 'llm' },
|
||||
{ label: '语音转文本模型(ASR)', key: 'asr' },
|
||||
{ label: '语音活动检测模型(VAD)', key: 'vad' },
|
||||
{ label: '语音生成模型(TTS)', key: 'tts' },
|
||||
{ label: '意图分类模型(Intent)', key: 'intent' },
|
||||
{ label: '记忆增强模型(Memory)', key: 'memory' }
|
||||
],
|
||||
templates: ['台湾女友', '土豆子', '英语老师', '好奇小男孩', '汪汪队队长']
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@@ -161,6 +157,11 @@ export default {
|
||||
this.$message.success('配置已重置')
|
||||
}).catch(() => {
|
||||
})
|
||||
},
|
||||
// 处理选择模板的逻辑
|
||||
selectTemplate(template) {
|
||||
this.form.name = template;
|
||||
this.$message.success(`已选择模板：${template}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -168,9 +169,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 +184,97 @@ 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;
|
||||
}
|
||||
|
||||
.select-field{
|
||||
width: 100%;
|
||||
max-width: 720px;
|
||||
border: 1px solid #e4e6ef;
|
||||
background: #f6f8fb;
|
||||
border-radius: 8px;
|
||||
height: 36px !important;
|
||||
}
|
||||
|
||||
.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: 76px;
|
||||
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;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.template-item:hover {
|
||||
background-color: #d0d8ff;
|
||||
}
|
||||
|
||||
.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 +287,8 @@ export default {
|
||||
|
||||
.textarea-box {
|
||||
border: 1px solid #e4e6ef;
|
||||
border-radius: 10px;
|
||||
border-radius: 8px;
|
||||
background: #f6f8fb;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user