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

Merge pull request #831 from xinnan-tech/web-pages-modify

Browse Source 
Web pages modify
This commit is contained in:
CGD
2025-04-16 11:23:42 +08:00
committed by GitHub
parent f2f66579cb 56959808a9
commit 0049d0e926
6 changed files with 303 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files
main/manager-web/src/components/AddDeviceDialog.vue
+5 -2
View File
@@ -1,5 +1,5 @@
<template>
<el-dialog :visible.sync="visible" width="400px" center>
<el-dialog :visible="visible" @close="handleClose" 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
@@ -79,7 +79,10 @@ export default {
cancel() {
this.$emit('update:visible', false)
this.deviceCode = ""
}
},
handleClose() {
this.$emit('update:visible', false);
},
}
}
</script>
main/manager-web/src/views/DeviceManagement.vue
+11 -6
View File
@@ -115,8 +115,8 @@ export default {
activeSearchKeyword: "",
currentAgentId: this.$route.query.agentId || '',
currentPage: 1,
pageSize: 5,
pageSizeOptions: [5, 10, 20, 50, 100],
pageSize: 10,
pageSizeOptions: [10, 20, 50, 100],
deviceList: [],
loading: false,
userApi: null,
@@ -283,13 +283,18 @@ export default {
this.deviceList = data.data.map(device => {
const bindDate = new Date(device.createDate);
const formattedBindTime = `${bindDate.getFullYear()}-${(bindDate.getMonth() + 1).toString().padStart(2, '0')}-${bindDate.getDate().toString().padStart(2, '0')} ${bindDate.getHours().toString().padStart(2, '0')}:${bindDate.getMinutes().toString().padStart(2, '0')}:${bindDate.getSeconds().toString().padStart(2, '0')}`;
let formattedLastConversation = '';
if (device.lastConnectedAt) {
const lastConvoDate = new Date(device.lastConnectedAt);
formattedLastConversation = `${lastConvoDate.getFullYear()}-${(lastConvoDate.getMonth() + 1).toString().padStart(2, '0')}-${lastConvoDate.getDate().toString().padStart(2, '0')} ${lastConvoDate.getHours().toString().padStart(2, '0')}:${lastConvoDate.getMinutes().toString().padStart(2, '0')}:${lastConvoDate.getSeconds().toString().padStart(2, '0')}`;
}
return {
device_id: device.id,
model: device.board,
firmwareVersion: device.appVersion,
macAddress: device.macAddress,
bindTime: formattedBindTime,
lastConversation: device.lastConnectedAt,
lastConversation: formattedLastConversation,
remark: device.alias,
isEdit: false,
otaSwitch: device.autoUpdate === 1,
@@ -331,7 +336,7 @@ export default {
.main-wrapper {
margin: 5px 22px;
border-radius: 15px;
min-height: calc(100vh - 200px);
min-height: calc(100vh - 24vh);
height: auto;
max-height: 80vh;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
@@ -628,12 +633,12 @@ export default {
flex: 1;
display: flex;
flex-direction: column;
max-height: calc(100vh - 330px);
max-height: calc(100vh - 40vh);
}
:deep(.el-table__body-wrapper) {
flex: 1;
overflow: auto;
overflow-y: auto;
max-height: none !important;
}
main/manager-web/src/views/ModelConfig.vue
+3 -4
View File
@@ -152,7 +152,7 @@ export default {
ttsDialogVisible: false,
selectedTtsModelId: '',
modelList: [],
pageSizeOptions: [5, 10, 20, 50, 100],
pageSizeOptions: [10, 20, 50, 100],
currentPage: 1,
pageSize: 10,
total: 0,
@@ -461,7 +461,7 @@ export default {
.main-wrapper {
margin: 5px 22px;
border-radius: 15px;
min-height: calc(100vh - 235px);
min-height: calc(100vh - 24vh);
height: auto;
max-height: 80vh;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
@@ -656,7 +656,6 @@ export default {
}
.table-footer {
margin-top: 24px;
display: flex;
justify-content: space-between;
align-items: center;
@@ -904,7 +903,7 @@ export default {
}
.data-table {
--table-max-height: calc(100vh - 450px);
--table-max-height: calc(100vh - 45vh);
max-height: var(--table-max-height);
}
main/manager-web/src/views/ParamsManagement.vue
+5 -5
View File
@@ -92,8 +92,8 @@ export default {
searchCode: "",
paramsList: [],
currentPage: 1,
pageSize: 5,
pageSizeOptions: [5, 10, 20, 50, 100],
pageSize: 10,
pageSizeOptions: [10, 20, 50, 100],
total: 0,
dialogVisible: false,
dialogTitle: "新增参数",
@@ -330,7 +330,7 @@ export default {
.main-wrapper {
margin: 5px 22px;
border-radius: 15px;
min-height: calc(100vh - 350px);
min-height: calc(100vh - 24vh);
height: auto;
max-height: 80vh;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
@@ -516,7 +516,7 @@ export default {
flex-direction: column;
.el-table__body-wrapper {
flex: 1;
overflow: auto;
overflow-y: auto;
max-height: none !important;
}
@@ -649,7 +649,7 @@ export default {
}
.el-table {
--table-max-height: calc(100vh - 400px);
--table-max-height: calc(100vh - 40vh);
max-height: var(--table-max-height);
.el-table__body-wrapper {
main/manager-web/src/views/UserManagement.vue
+5 -5
View File
@@ -99,9 +99,9 @@ export default {
currentPassword: "",
searchPhone: "",
userList: [],
pageSizeOptions: [5, 10, 20, 50, 100],
pageSizeOptions: [10, 20, 50, 100],
currentPage: 1,
pageSize: 5,
pageSize: 10,
total: 0,
isAllSelected: false
};
@@ -355,7 +355,7 @@ export default {
.main-wrapper {
margin: 5px 22px;
border-radius: 15px;
min-height: calc(100vh - 350px);
min-height: calc(100vh - 24vh);
height: auto;
max-height: 80vh;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
@@ -557,7 +557,7 @@ export default {
flex-direction: column;
.el-table__body-wrapper {
flex: 1;
overflow: auto;
overflow-y: auto;
max-height: none !important;
}
@@ -674,7 +674,7 @@ export default {
}
.el-table {
--table-max-height: calc(100vh - 400px);
--table-max-height: calc(100vh - 40vh);
max-height: var(--table-max-height);
.el-table__body-wrapper {
main/manager-web/src/views/roleConfig.vue
+274 -160
View File
@@ -1,88 +1,126 @@
<template>
<div class="welcome">
<HeaderBar />
<el-main style="padding: 16px;display: flex;flex-direction: column;">
<div style="border-radius: 16px;background: #fafcfe; border: 1px solid #e8f0ff;">
<div
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: 37px;height: 37px;background: #5778ff;border-radius: 50%;display: flex;align-items: center;justify-content: center;">
<img loading="lazy" src="@/assets/home/setting-user.png" alt="" style="width: 19px;height: 19px;" />
</div>
{{ form.agentName }}
</div>
<div style="height: 1px;background: #e8f0ff;" />
<el-form ref="form" :model="form" label-width="72px">
<div style="padding: 16px 24px;">
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 24px;">
<div>
<el-form-item label="助手昵称：">
<div class="input-46" style="width: 100%;">
<el-input v-model="form.agentName" />
</div>
</el-form-item>
<el-form-item label="角色模版：">
<div style="display: flex;gap: 8px;flex-wrap: wrap;">
<div v-for="(template, index) in templates" :key="`template-${index}`" class="template-item"
:class="{ 'template-loading': loadingTemplate }" @click="selectTemplate(template)">
{{ template.agentName }}
</div>
</div>
</el-form-item>
<el-form-item label="角色介绍：">
<div class="textarea-box">
<el-input type="textarea" rows="5" resize="none" placeholder="请输入内容" v-model="form.systemPrompt"
maxlength="2000" show-word-limit />
</div>
</el-form-item>
<el-form-item label="语言编码：">
<div class="input-46" style="width: 100%;">
<el-input v-model="form.langCode" placeholder="请输入语言编码，如：zh_CN" maxlength="10" show-word-limit />
</div>
</el-form-item>
<el-form-item label="交互语种：">
<div class="input-46" style="width: 100%;">
<el-input v-model="form.language" placeholder="请输入交互语种，如：中文" maxlength="10" show-word-limit />
</div>
</el-form-item>
<HeaderBar/>
<div class="operation-bar">
<h2 class="page-title">角色配置</h2>
</div>
<div class="main-wrapper">
<div class="content-panel">
<div class="content-area">
<el-card class="config-card" shadow="never">
<div class="config-header">
<div class="header-icon">
<img loading="lazy" src="@/assets/home/setting-user.png" alt="">
</div>
<div>
<el-form-item v-for="(model, index) in models" :key="`model-${index}`" :label="model.label"
class="model-item">
<el-select v-model="form.model[model.key]" filterable placeholder="请选择" class="select-field">
<el-option v-for="(item, optionIndex) in modelOptions[model.type]"
:key="`option-${index}-${optionIndex}`" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="角色音色：">
<div style="display: flex;gap: 8px;align-items: center;">
<div class="input-46" style="width: 100%;">
<el-select v-model="form.ttsVoiceId" placeholder="请选择" style="width: 100%;">
<el-option v-for="(item, index) in voiceOptions" :key="`voice-${index}`" :label="item.label"
:value="item.value" />
</el-select>
</div>
<span class="header-title">{{ form.agentName }}</span>
</div>
<div class="divider"></div>
<el-form ref="form" :model="form" label-width="72px">
<div class="form-content">
<div class="form-grid">
<div class="form-column">
<el-form-item label="助手昵称：">
<el-input v-model="form.agentName" class="form-input"/>
</el-form-item>
<el-form-item label="角色模版：">
<div class="template-container">
<div
v-for="(template, index) in templates"
:key="`template-${index}`"
class="template-item"
:class="{ 'template-loading': loadingTemplate }"
@click="selectTemplate(template)"
>
{{ template.agentName }}
</div>
</div>
</el-form-item>
<el-form-item label="角色介绍：">
<el-input
type="textarea"
rows="5"
resize="none"
placeholder="请输入内容"
v-model="form.systemPrompt"
maxlength="2000"
show-word-limit
class="form-textarea"
/>
</el-form-item>
<el-form-item label="语言编码：">
<el-input
v-model="form.langCode"
placeholder="请输入语言编码，如：zh_CN"
maxlength="10"
show-word-limit
class="form-input"
/>
</el-form-item>
<el-form-item label="交互语种：">
<el-input
v-model="form.language"
placeholder="请输入交互语种，如：中文"
maxlength="10"
show-word-limit
class="form-input"
/>
</el-form-item>
</div>
</el-form-item>
<div class="form-column">
<el-form-item
v-for="(model, index) in models"
:key="`model-${index}`"
:label="model.label"
class="model-item"
>
<el-select
v-model="form.model[model.key]"
filterable
placeholder="请选择"
class="form-select"
>
<el-option
v-for="(item, optionIndex) in modelOptions[model.type]"
:key="`option-${index}-${optionIndex}`"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="角色音色：">
<el-select
v-model="form.ttsVoiceId"
placeholder="请选择"
class="form-select"
>
<el-option
v-for="(item, index) in voiceOptions"
:key="`voice-${index}`"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</div>
</div>
</div>
</el-form>
<div class="action-bar">
<el-button type="primary" class="save-btn" @click="saveConfig">保存配置</el-button>
<el-button class="reset-btn" @click="resetConfig">重置</el-button>
<div class="hint-text">
<img loading="lazy" src="@/assets/home/red-info.png" alt="">
<span>保存配置后，需要重启设备，新的配置才会生效。</span>
</div>
</div>
</div>
</el-form>
<div style="display: flex;padding: 16px;gap: 8px;align-items: center;">
<div class="save-btn" @click="saveConfig">
保存配置
</div>
<div class="reset-btn" @click="resetConfig">
重制
</div>
<div class="clear-text">
<img loading="lazy" src="@/assets/home/red-info.png" alt="" style="width: 19px;height: 19px;" />
保存配置后，需要重启设备，新的配置才会生效。
</div>
</el-card>
</div>
</div>
</el-main>
</div>
</div>
</template>
@@ -90,10 +128,9 @@
import Api from '@/apis/api';
import HeaderBar from "@/components/HeaderBar.vue";
export default {
name: 'RoleConfigPage',
components: { HeaderBar },
components: {HeaderBar},
data() {
return {
form: {
@@ -114,12 +151,12 @@ export default {
}
},
models: [
{ label: '语音活动检测(VAD)', key: 'vadModelId', type: 'VAD' },
{ label: '语音识别(ASR)', key: 'asrModelId', type: 'ASR' },
{ label: '大语言模型(LLM)', key: 'llmModelId', type: 'LLM' },
{ label: '意图识别(Intent)', key: 'intentModelId', type: 'Intent' },
{ label: '记忆(Memory)', key: 'memModelId', type: 'Memory' },
{ label: '语音合成(TTS)', key: 'ttsModelId', type: 'TTS' },
{label: '语音活动检测(VAD)', key: 'vadModelId', type: 'VAD'},
{label: '语音识别(ASR)', key: 'asrModelId', type: 'ASR'},
{label: '大语言模型(LLM)', key: 'llmModelId', type: 'LLM'},
{label: '意图识别(Intent)', key: 'intentModelId', type: 'Intent'},
{label: '记忆(Memory)', key: 'memModelId', type: 'Memory'},
{label: '语音合成(TTS)', key: 'ttsModelId', type: 'TTS'},
],
modelOptions: {},
templates: [],
@@ -144,7 +181,7 @@ export default {
language: this.form.language,
sort: this.form.sort
};
Api.agent.updateAgentConfig(this.$route.query.agentId, configData, ({ data }) => {
Api.agent.updateAgentConfig(this.$route.query.agentId, configData, ({data}) => {
if (data.code === 0) {
this.$message.success({
message: '配置保存成功',
@@ -164,7 +201,6 @@ export default {
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// 重置表单
this.form = {
agentCode: "",
agentName: "",
@@ -187,10 +223,10 @@ export default {
showClose: true
})
}).catch(() => {
})
});
},
fetchTemplates() {
Api.agent.getAgentTemplate(({ data }) => {
Api.agent.getAgentTemplate(({data}) => {
if (data.code === 0) {
this.templates = data.data;
} else {
@@ -235,7 +271,7 @@ export default {
};
},
fetchAgentConfig(agentId) {
Api.agent.getDeviceConfig(agentId, ({ data }) => {
Api.agent.getDeviceConfig(agentId, ({data}) => {
if (data.code === 0) {
this.form = {
...this.form,
@@ -255,9 +291,8 @@ export default {
});
},
fetchModelOptions() {
// 为每个模型类型获取选项
this.models.forEach(model => {
Api.model.getModelNames(model.type, '', ({ data }) => {
Api.model.getModelNames(model.type, '', ({data}) => {
if (data.code === 0) {
this.$set(this.modelOptions, model.type, data.data.map(item => ({
value: item.id,
@@ -274,7 +309,7 @@ export default {
this.voiceOptions = [];
return;
}
Api.model.getModelVoices(modelId, '', ({ data }) => {
Api.model.getModelVoices(modelId, '', ({data}) => {
if (data.code === 0 && data.data) {
this.voiceOptions = data.data.map(voice => ({
value: voice.id,
@@ -289,7 +324,6 @@ export default {
watch: {
'form.model.ttsModelId': {
handler(newVal, oldVal) {
console.log('TTS模型变化:', newVal);
if (oldVal && newVal !== oldVal) {
this.form.ttsVoiceId = '';
this.fetchVoiceOptions(newVal);
@@ -325,60 +359,130 @@ export default {
min-height: 506px;
height: 100vh;
display: flex;
position: relative;
flex-direction: column;
background: linear-gradient(145deg, #e6eeff, #eff0ff);
background: linear-gradient(to bottom right, #dce8ff, #e4eeff, #e6cbfd);
background-size: cover;
/* 确保背景图像覆盖整个元素 */
background-position: center;
/* 从顶部中心对齐 */
-webkit-background-size: cover;
/* 兼容老版本WebKit浏览器 */
-o-background-size: cover;
/* 兼容老版本Opera浏览器 */
overflow: hidden;
}
.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;
.operation-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 24px;
}
.select-field {
width: 100%;
max-width: 720px;
border: 1px solid #e4e6ef;
background: #f6f8fb;
border-radius: 8px;
height: 36px !important;
.page-title {
font-size: 24px;
margin: 0;
color: #2c3e50;
}
.audio-box {
.main-wrapper {
margin: 5px 22px;
border-radius: 15px;
height: calc(100vh - 24vh);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
position: relative;
background: rgba(237, 242, 255, 0.5);
display: flex;
flex-direction: column;
}
.content-panel {
flex: 1;
height: 37px;
border-radius: 20px;
border: 1px solid #e4e6ef;
display: flex;
overflow: hidden;
height: 100%;
border-radius: 15px;
background: transparent;
border: 1px solid #fff;
}
.clear-btn {
width: 48px;
height: 19px;
background: #fd8383;
border-radius: 10px;
line-height: 19px;
font-size: 11px;
color: #fff;
cursor: pointer;
.content-area {
flex: 1;
height: 100%;
min-width: 600px;
overflow: auto;
background-color: white;
display: flex;
flex-direction: column;
}
.clear-text {
color: #979db1;
font-size: 11px;
.config-card {
background: white;
border: none;
box-shadow: none;
display: flex;
flex-direction: column;
flex: 1;
overflow-y: auto;
}
.config-header {
display: flex;
align-items: center;
gap: 13px;
padding: 5px 0;
font-weight: 700;
font-size: 19px;
color: #3d4566;
}
.header-icon {
width: 37px;
height: 37px;
background: #5778ff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.header-icon img {
width: 19px;
height: 19px;
}
.divider {
height: 1px;
background: #e8f0ff;
}
.form-content {
padding: 16px 0;
}
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.form-column {
display: flex;
flex-direction: column;
}
.form-input {
width: 100%;
}
.form-select {
width: 100%;
}
.form-textarea {
width: 100%;
}
.template-container {
display: flex;
gap: 8px;
margin-left: 16px;
flex-wrap: wrap;
}
.template-item {
@@ -399,47 +503,57 @@ export default {
background-color: #d0d8ff;
}
.prompt-bottom {
margin-bottom: 4px;
.action-bar {
display: flex;
justify-content: space-between;
padding: 0 16px;
align-items: center;
}
.input-46 {
border: 1px solid #e4e6ef;
background: #f6f8fb;
border-radius: 8px;
height: 36px !important;
}
.save-btn,
.reset-btn {
width: 112px;
height: 37px;
border-radius: 18px;
line-height: 37px;
box-sizing: border-box;
cursor: pointer;
font-size: 11px
gap: 8px;
}
.save-btn {
border-radius: 18px;
background: #5778ff;
color: #fff;
color: white;
border: none;
border-radius: 18px;
padding: 10px 20px;
}
.reset-btn {
border: 1px solid #adbdff;
background: #e6ebff;
color: #5778ff;
border: 1px solid #adbdff;
border-radius: 18px;
padding: 10px 20px;
}
.textarea-box {
border: 1px solid #e4e6ef;
border-radius: 8px;
background: #f6f8fb;
.hint-text {
display: flex;
align-items: center;
gap: 8px;
color: #979db1;
font-size: 11px;
margin-left: 16px;
}
</style>
.hint-text img {
width: 19px;
height: 19px;
}
::v-deep .el-form-item__label {
font-size: 10px !important;
color: #3d4566 !important;
font-weight: 400;
line-height: 22px;
padding-bottom: 2px;
}
::v-deep .el-textarea .el-input__count {
color: #909399;
background: none;
position: absolute;
font-size: 12px;
bottom: -10px;
right: 21px;
}
</style>