mirror of
https://github.com/xinnan-tech/xiaozhi-esp32-server.git
synced 2026-07-22 07:03:53 +08:00
hrz
@@ -0,0 +1,399 @@
|
||||
<template>
|
||||
<el-drawer :visible.sync="dialogVisible" direction="rtl" size="50%" :wrapperClosable="false" :withHeader="false">
|
||||
<!-- 自定义标题区域 -->
|
||||
<div class="custom-header">
|
||||
<div class="header-left">
|
||||
<h3 class="bold-title">功能管理</h3>
|
||||
</div>
|
||||
<button class="custom-close-btn" @click="closeDialog">×</button>
|
||||
</div>
|
||||
|
||||
<div class="function-manager">
|
||||
<!-- 左侧：未选功能 -->
|
||||
<div class="function-column">
|
||||
<div class="column-header">
|
||||
<h4 class="column-title">未选功能</h4>
|
||||
<el-button type="text" @click="selectAll" class="select-all-btn">全选</el-button>
|
||||
</div>
|
||||
<div class="function-list">
|
||||
<div v-for="func in unselected" :key="func.name" class="function-item" @click="handleFunctionClick(func)">
|
||||
<el-checkbox :label="func.name" v-model="selectedNames" @change="(val) => handleCheckboxChange(func, val)" @click.native.stop>
|
||||
<div class="func-tag">
|
||||
<div class="color-dot" :style="{backgroundColor: getFunctionColor(func.name)}"></div>
|
||||
<span>{{ func.name }}</span>
|
||||
</div>
|
||||
</el-checkbox>
|
||||
<el-tooltip class="item" effect="dark" :content="func.description || '暂无功能描述'" placement="top">
|
||||
<img src="@/assets/home/info.png" alt="" class="info-icon">
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 中间：已选功能 -->
|
||||
<div class="function-column">
|
||||
<div class="column-header">
|
||||
<h4 class="column-title">已选功能</h4>
|
||||
<el-button type="text" @click="deselectAll" class="select-all-btn">全选</el-button>
|
||||
</div>
|
||||
<div class="function-list">
|
||||
<div v-for="func in selectedList" :key="func.name" class="function-item" @click="handleFunctionClick(func)">
|
||||
<el-checkbox :label="func.name" v-model="selectedNames" @change="(val) => handleCheckboxChange(func, val)" @click.native.stop>
|
||||
<div class="func-tag">
|
||||
<div class="color-dot" :style="{backgroundColor: getFunctionColor(func.name)}"></div>
|
||||
<span>{{ func.name }}</span>
|
||||
</div>
|
||||
</el-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧：参数配置 -->
|
||||
<div class="params-column">
|
||||
<h4 v-if="currentFunction" class="column-title">参数配置 - {{ currentFunction.name }}</h4>
|
||||
<div v-if="currentFunction" class="params-container">
|
||||
<el-form :model="currentFunction" size="mini" class="param-form">
|
||||
<el-form-item v-for="(value, key) in currentFunction.params" :key="key" :label="key" class="param-item">
|
||||
<el-input v-model="currentFunction.params[key]" size="mini" class="param-input" @change="(val) => handleParamChange(currentFunction, key, val)"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div v-else class="empty-tip">请选择已配置的功能进行参数设置</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="drawer-footer">
|
||||
<el-button @click="closeDialog">取消</el-button>
|
||||
<el-button type="primary" @click="saveSelection">保存配置</el-button>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
value: Boolean,
|
||||
functions: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: this.value,
|
||||
selectedNames: [],
|
||||
currentFunction: null,
|
||||
modifiedFunctions: {},
|
||||
allFunctions: [
|
||||
{name: '天气', params: {city: '北京'}, description: '查看指定城市的天气情况'},
|
||||
{name: '新闻', params: {type: '科技'}, description: '获取最新科技类新闻资讯'},
|
||||
{name: '工具', params: {category: '常用'}, description: '提供常用工具集合'},
|
||||
{name: '退出', params: {}, description: '退出当前系统'},
|
||||
{name: '音乐', params: {genre: '流行'}, description: '播放流行音乐'},
|
||||
{name: '翻译', params: {from: '中文', to: '英文'}, description: '提供中英文互译功能'},
|
||||
{name: '计算', params: {precision: '2'}, description: '提供精确计算功能'},
|
||||
{name: '日历', params: {view: '月'}, description: '查看月历视图'}
|
||||
],
|
||||
functionColorMap: [
|
||||
'#FF6B6B', '#4ECDC4', '#45B7D1',
|
||||
'#96CEB4', '#FFEEAD', '#D4A5A5', '#A2836E'
|
||||
],
|
||||
tempFunctions: {},
|
||||
// 添加一个标志位来跟踪是否已经保存
|
||||
hasSaved: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
selectedList() {
|
||||
return this.allFunctions.filter(f => this.selectedNames.includes(f.name));
|
||||
},
|
||||
unselected() {
|
||||
return this.allFunctions.filter(f => !this.selectedNames.includes(f.name));
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value(newVal) {
|
||||
this.dialogVisible = newVal;
|
||||
if (newVal) {
|
||||
this.selectedNames = this.functions.map(f => f.name);
|
||||
this.currentFunction = this.selectedList[0] || null;
|
||||
}
|
||||
},
|
||||
dialogVisible(newVal) {
|
||||
this.$emit('input', newVal);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleFunctionClick(func) {
|
||||
if (this.selectedNames.includes(func.name)) {
|
||||
const tempFunc = this.tempFunctions[func.name];
|
||||
this.currentFunction = tempFunc ? tempFunc : JSON.parse(JSON.stringify(func));
|
||||
}
|
||||
},
|
||||
handleParamChange(func, key, value) {
|
||||
if (!this.tempFunctions[func.name]) {
|
||||
this.tempFunctions[func.name] = JSON.parse(JSON.stringify(func));
|
||||
}
|
||||
this.tempFunctions[func.name].params[key] = value;
|
||||
},
|
||||
handleCheckboxChange(func, checked) {
|
||||
if (checked) {
|
||||
if (!this.selectedNames.includes(func.name)) {
|
||||
this.selectedNames = [...this.selectedNames, func.name];
|
||||
}
|
||||
} else {
|
||||
this.selectedNames = this.selectedNames.filter(name => name !== func.name);
|
||||
}
|
||||
|
||||
if (this.currentFunction && this.currentFunction.name === func.name && !checked) {
|
||||
this.currentFunction = null;
|
||||
}
|
||||
},
|
||||
|
||||
selectAll() {
|
||||
this.selectedNames = [...this.allFunctions.map(f => f.name)];
|
||||
if (this.selectedList.length > 0) {
|
||||
this.currentFunction = JSON.parse(JSON.stringify(this.selectedList[0]));
|
||||
}
|
||||
},
|
||||
|
||||
deselectAll() {
|
||||
this.selectedNames = [];
|
||||
this.currentFunction = null;
|
||||
},
|
||||
|
||||
closeDialog() {
|
||||
this.tempFunctions = {};
|
||||
this.selectedNames = this.functions.map(f => f.name);
|
||||
this.currentFunction = null;
|
||||
this.dialogVisible = false;
|
||||
this.$emit('input', false);
|
||||
this.$emit('dialog-closed', false);
|
||||
},
|
||||
|
||||
saveSelection() {
|
||||
Object.keys(this.tempFunctions).forEach(name => {
|
||||
this.modifiedFunctions[name] = JSON.parse(JSON.stringify(this.tempFunctions[name]));
|
||||
});
|
||||
this.tempFunctions = {};
|
||||
this.hasSaved = true;
|
||||
|
||||
const selected = this.selectedList.map(f => {
|
||||
const modified = this.modifiedFunctions[f.name];
|
||||
return modified || f;
|
||||
}).map(f => ({
|
||||
...f,
|
||||
params: JSON.parse(JSON.stringify(f.params))
|
||||
}));
|
||||
|
||||
this.$emit('update-functions', selected);
|
||||
this.dialogVisible = false;
|
||||
this.$message.success('配置保存成功');
|
||||
// 通知父组件对话框已关闭且已保存
|
||||
this.$emit('dialog-closed', true);
|
||||
},
|
||||
|
||||
getFunctionColor(name) {
|
||||
const hash = [...name].reduce((acc, char) => acc + char.charCodeAt(0), 0);
|
||||
return this.functionColorMap[hash % 7];
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.function-manager {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(120px, 0.5fr) minmax(120px, 0.5fr) minmax(200px, 2fr);
|
||||
gap: 12px;
|
||||
height: calc(70vh - 60px);
|
||||
}
|
||||
|
||||
.custom-header {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20px 24px;
|
||||
border-bottom: 1px solid #EBEEF5;
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.bold-title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.select-all-btn {
|
||||
padding: 0;
|
||||
height: auto;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.function-column {
|
||||
position: relative;
|
||||
width: auto;
|
||||
padding: 10px;
|
||||
overflow-y: auto;
|
||||
border-right: 1px solid #EBEEF5;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.function-column::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.function-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.function-item {
|
||||
padding: 8px 12px;
|
||||
margin: 4px 0;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
&:hover {
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
}
|
||||
|
||||
.params-column {
|
||||
min-width: 280px;
|
||||
padding: 10px;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.params-column::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.column-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.column-title {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.func-tag {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.color-dot {
|
||||
flex-shrink: 0;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-right: 8px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.param-form {
|
||||
::v-deep .el-form-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
|
||||
.el-form-item__label {
|
||||
font-size: 14px !important;
|
||||
color: #606266;
|
||||
text-align: left;
|
||||
padding-right: 10px;
|
||||
flex-shrink: 0;
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
.el-form-item__content {
|
||||
margin-left: 0 !important;
|
||||
flex-grow: 1;
|
||||
|
||||
.el-input__inner {
|
||||
text-align: left;
|
||||
padding-left: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.params-container {
|
||||
padding: 16px;
|
||||
border-radius: 4px;
|
||||
min-width: 280px;
|
||||
}
|
||||
|
||||
.empty-tip {
|
||||
padding: 20px;
|
||||
color: #909399;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.param-input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.drawer-footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
border-top: 1px solid #e8e8e8;
|
||||
padding: 10px 16px;
|
||||
text-align: center;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.info-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 1vh;
|
||||
}
|
||||
|
||||
.custom-close-btn {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 10px;
|
||||
transform: translateY(-50%);
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #cfcfcf;
|
||||
background: none;
|
||||
font-size: 30px;
|
||||
font-weight: lighter;
|
||||
color: #cfcfcf;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1;
|
||||
padding: 0;
|
||||
outline: none;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.custom-close-btn:hover {
|
||||
color: #409EFF;
|
||||
border-color: #409EFF;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -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">
|
||||
@@ -81,21 +102,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: {
|
||||
@@ -128,6 +151,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: {} }
|
||||
],
|
||||
chatHistoryOptions: [
|
||||
{
|
||||
"value": 0,
|
||||
@@ -167,7 +202,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) {
|
||||
@@ -207,12 +243,12 @@ export default {
|
||||
intentModelId: "",
|
||||
}
|
||||
}
|
||||
this.currentFunctions = [];
|
||||
this.$message.success({
|
||||
message: '配置已重置',
|
||||
showClose: true
|
||||
})
|
||||
}).catch(() => {
|
||||
});
|
||||
}).catch(() => {});
|
||||
},
|
||||
fetchTemplates() {
|
||||
Api.agent.getAgentTemplate(({ data }) => {
|
||||
@@ -275,6 +311,7 @@ export default {
|
||||
intentModelId: data.data.intentModelId
|
||||
}
|
||||
};
|
||||
this.currentFunctions = data.data.functions || [];
|
||||
} else {
|
||||
this.$message.error(data.msg || '获取配置失败');
|
||||
}
|
||||
@@ -309,7 +346,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': {
|
||||
@@ -336,6 +409,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();
|
||||
@@ -537,6 +613,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;
|
||||
@@ -579,4 +682,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>
|
||||
Reference in New Issue
Block a user