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