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

合并样式及功能

Browse Source
This commit is contained in:
Erlei Chen
2025-03-21 01:39:23 +08:00
parent 396de72c5d
commit 4409f37000
12 changed files with 756 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files
main/manager-web/src/views/roleConfig.vue
+49 -80
View File
@@ -2,34 +2,40 @@
<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 class="breadcrumbs" style="padding: 20px;">
<el-breadcrumb separator="/">
<el-breadcrumb-item>控制台</el-breadcrumb-item>
<el-breadcrumb-item><router-link to="/home">智能体</router-link></el-breadcrumb-item>
<el-breadcrumb-item>配置智能体</el-breadcrumb-item>
</el-breadcrumb>
</div>
<el-main style="padding: 16px;display: flex;flex-direction: column;align-items: center;">
<div style="border-radius: 16px;background: #fafcfe; border: 1px solid #e8f0ff;max-width: 800px;">
<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 src="@/assets/home/setting-user.png" alt="" style="width: 19px;height: 19px;"/>
</div>
{{ deviceMac }}
{{ agentName }} ({{ agentId }})
</div>
<div style="height: 1px;background: #e8f0ff;"/>
<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" style="width: 100%; max-width: 412px;">
<el-input v-model="form.name"/>
</div>
</el-form-item>
<div style="padding: 16px 24px;max-width: 792px;">
<el-form ref="form" :model="form" label-width="100px">
<el-form-item label="角色模版：">
<div style="display: flex;gap: 8px;">
<div style="display: flex;gap: 8px;flex-wrap: wrap;">
<div v-for="template in templates" :key="template" class="template-item" @click="selectTemplate(template)">
{{ template }}
</div>
</div>
</el-form-item>
<el-form-item label="助手昵称：">
<el-input v-model="form.name"/>
</el-form-item>
<el-form-item label="角色音色：">
<div style="display: flex;gap: 8px;align-items: center;">
<div class="input-46" style="flex:1.4;">
<div style="flex:1;">
<el-select v-model="form.timbre" placeholder="请选择" style="width: 100%;">
<el-option v-for="item in options" :key="item.value" :label="item.label"
:value="item.value">
@@ -43,29 +49,23 @@
</div>
</el-form-item>
<el-form-item label="角色介绍：">
<div class="textarea-box">
<el-input type="textarea" rows="5" resize="none" placeholder="请输入内容"
v-model="form.introduction" maxlength="2000" show-word-limit/>
</div>
<el-input type="textarea" rows="5" resize="none" placeholder="请输入内容" v-model="form.introduction" maxlength="2000" show-word-limit/>
</el-form-item>
<el-form-item label="记忆体：">
<div class="textarea-box">
<el-input type="textarea" rows="5" resize="none" placeholder="请输入内容"
v-model="form.prompt" maxlength="1000"/>
<div class="prompt-bottom">
<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: 11px;"/>
清除
</div>
<el-input type="textarea" rows="5" resize="none" placeholder="请输入内容" v-model="form.prompt" maxlength="1000" show-word-limit/>
<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: 11px;"/>
清除
</div>
<div style="color: #979db1;font-size:11px;">{{ form.prompt.length }}/1000</div>
</div>
</div>
</el-form-item>
<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-form-item v-for="model in models" :key="model.label" :label="model.label">
<template slot="label">
<div style="line-height: 20px;">{{model.label}}</div>
</template>
<el-select v-model="form.model[model.key]" filterable placeholder="请选择" style="width: 100%;">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
</el-select>
</el-form-item>
@@ -74,8 +74,8 @@
实时”，其他模型通常会增加约1秒的延迟。改变模型后，建议清空记忆体，以免影响体验。
</div>
</el-form-item>
</div>
</el-form>
</div>
<div style="display: flex;padding: 16px;gap: 8px;align-items: center;">
<div class="save-btn" @click="saveConfig">
保存配置
@@ -89,22 +89,22 @@
</div>
</div>
</div>
<div style="font-size: 12px;font-weight: 400;margin-top: auto;padding-top: 24px;color: #979db1;">
©2025 xiaozhi-esp32-server
</div>
</el-main>
<Footer :visible="true" />
</div>
</template>
<script>
import HeaderBar from "@/components/HeaderBar.vue";
import Footer from "@/components/Footer.vue";
export default {
name: 'RoleConfigPage',
components: {HeaderBar},
components: {HeaderBar,Footer},
data() {
return {
deviceMac: 'CC:ba:97:11:a6:ac',
agentId: this.$route.query.agentId,
agentName: this.$route.query.agentName,
form: {
name: "",
timbre: "",
@@ -136,6 +136,11 @@ export default {
}
},
methods: {
handleGetConfig(){
api.agent.getAgentConfig(this.agentId, ({data}) => {
this.form = data
})
},
saveConfig() {
// 此处写保存配置逻辑
this.$message.success('配置已保存')
@@ -168,6 +173,10 @@ export default {
</script>
<style scoped>
.breadcrumbs{
padding: 20px 0 0 5px;
}
.welcome {
min-width: 900px;
min-height: 506px;
@@ -185,23 +194,6 @@ export default {
/* 兼容老版本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: 37px;
@@ -230,13 +222,11 @@ export default {
}
.template-item {
height: 37px;
width: 76px;
border-radius: 8px;
padding: 0 20px;
border-radius: 6px;
background: #e6ebff;
line-height: 37px;
font-weight: 400;
font-size: 11px;
font-weight: 500;
font-size: 14px;
text-align: center;
color: #5778ff;
cursor: pointer;
@@ -247,21 +237,6 @@ export default {
background-color: #d0d8ff;
}
.prompt-bottom {
margin-bottom: 4px;
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;
@@ -284,11 +259,5 @@ export default {
background: #e6ebff;
color: #5778ff;
}
.textarea-box {
border: 1px solid #e4e6ef;
border-radius: 8px;
background: #f6f8fb;
}
</style>