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

增加插件管理的页面

Browse Source
This commit is contained in:
Sakura-RanChen
2025-05-12 14:10:05 +08:00
parent 98bfe863fe
commit c0ec4338f8
2 changed files with 527 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
main/manager-web/src/views/roleConfig.vue
+128 -10
View File
@@ -60,10 +60,31 @@
<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>
<div class="model-select-wrapper">
<el-select v-model="form.model[model.key]" filterable placeholder="请选择" class="form-select" @change="handleModelChange(model.type, $event)">
<el-option v-for="(item, optionIndex) in modelOptions[model.type]" :key="`option-${index}-${optionIndex}`" :label="item.label" :value="item.value"/>
</el-select>
<div v-if="showFunctionIcons(model.type)" class="function-icons">
<el-tooltip v-for="func in currentFunctions" :key="func.name" effect="dark" placement="top" popper-class="custom-tooltip">
<div slot="content">
<div><strong>功能名称:</strong> {{ func.name }}</div>
<div v-if="Object.keys(func.params).length > 0">
<strong>参数配置:</strong>
<div v-for="(value, key) in func.params" :key="key">
{{ key }}: {{ value }}
</div>
</div>
<div v-else>无参数配置</div>
</div>
<div class="icon-dot" :style="{backgroundColor: getFunctionColor(func.name)}">
{{ func.name.charAt(0) }}
</div>
</el-tooltip>
<el-button class="edit-function-btn" @click="showFunctionDialog = true" :class="{'active-btn': showFunctionDialog}">
编辑功能
</el-button>
</div>
</div>
</el-form-item>
<el-form-item label="角色音色：">
<el-select v-model="form.ttsVoiceId" placeholder="请选择" class="form-select">
@@ -75,21 +96,23 @@
</div>
</div>
</el-form>
</el-card>
</div>
</div>
</div>
<function-dialog v-model="showFunctionDialog" :functions="currentFunctions" @update-functions="handleUpdateFunctions" @dialog-closed="handleDialogClosed"/>
</div>
</template>
<script>
import Api from '@/apis/api';
import HeaderBar from "@/components/HeaderBar.vue";
import FunctionDialog from "@/components/FunctionDialog.vue";
export default {
name: 'RoleConfigPage',
components: { HeaderBar },
components: { HeaderBar, FunctionDialog },
data() {
return {
form: {
@@ -121,6 +144,18 @@ export default {
templates: [],
loadingTemplate: false,
voiceOptions: [],
showFunctionDialog: false,
currentFunctions: [],
functionColorMap: [
'#FF6B6B', '#4ECDC4', '#45B7D1',
'#96CEB4', '#FFEEAD', '#D4A5A5', '#A2836E'
],
allFunctions: [
{ name: '天气', params: {} },
{ name: '新闻', params: {} },
{ name: '工具', params: {} },
{ name: '退出', params: {} }
]
}
},
methods: {
@@ -141,7 +176,8 @@ export default {
systemPrompt: this.form.systemPrompt,
langCode: this.form.langCode,
language: this.form.language,
sort: this.form.sort
sort: this.form.sort,
functions: this.currentFunctions
};
Api.agent.updateAgentConfig(this.$route.query.agentId, configData, ({ data }) => {
if (data.code === 0) {
@@ -180,12 +216,12 @@ export default {
intentModelId: "",
}
}
this.currentFunctions = [];
this.$message.success({
message: '配置已重置',
showClose: true
})
}).catch(() => {
});
}).catch(() => {});
},
fetchTemplates() {
Api.agent.getAgentTemplate(({ data }) => {
@@ -247,6 +283,7 @@ export default {
intentModelId: data.data.intentModelId
}
};
this.currentFunctions = data.data.functions || [];
} else {
this.$message.error(data.msg || '获取配置失败');
}
@@ -281,7 +318,43 @@ export default {
this.voiceOptions = [];
}
});
}
},
getFunctionColor(name) {
const hash = [...name].reduce((acc, char) => acc + char.charCodeAt(0), 0);
return this.functionColorMap[hash % 7];
},
showFunctionIcons(type) {
return type === 'Intent' &&
this.form.model.intentModelId === 'Intent_function_call';
},
handleModelChange(type, value) {
if (type === 'Intent' && value === 'Intent_function_call') {
this.fetchFunctionList();
}
},
fetchFunctionList() {
// 使用假数据代替API调用
return new Promise(resolve => {
setTimeout(() => {
this.currentFunctions = [
{ name: '天气', params: { city: '北京' } },
{ name: '新闻', params: { type: '科技' } }
];
resolve();
}, 500);
});
},
handleUpdateFunctions(selected) {
this.currentFunctions = selected;
console.log('保存的功能列表:', selected);
this.$message.success('功能配置已保存');
},
handleDialogClosed(saved) {
if (!saved) {
// 如果未保存，恢复原始功能列表
this.currentFunctions = JSON.parse(JSON.stringify(this.originalFunctions));
}
},
},
watch: {
'form.model.ttsModelId': {
@@ -308,6 +381,9 @@ export default {
const agentId = this.$route.query.agentId;
if (agentId) {
this.fetchAgentConfig(agentId);
this.fetchFunctionList().then(() => {
this.originalFunctions = JSON.parse(JSON.stringify(this.currentFunctions));
});
}
this.fetchModelOptions();
this.fetchTemplates();
@@ -510,6 +586,33 @@ export default {
height: 19px;
}
.model-select-wrapper {
display: flex;
align-items: center;
width: 100%;
}
.function-icons {
display: flex;
align-items: center;
margin-left: auto;
padding-left: 10px;
}
.icon-dot {
width: 25px;
height: 25px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
font-size: 12px;
margin-right: 8px;
position: relative;
}
::v-deep .el-form-item__label {
font-size: 10px !important;
color: #3d4566 !important;
@@ -552,4 +655,19 @@ export default {
color: #409EFF;
border-color: #409EFF;
}
.edit-function-btn {
background: #e6ebff;
color: #5778ff;
border: 1px solid #adbdff;
border-radius: 18px;
padding: 10px 20px;
transition: all 0.3s;
}
.edit-function-btn.active-btn {
background: #5778ff;
color: white;
}
</style>