|
|
|
<template>
|
|
|
|
<a-card title="智能助手配置" class="config-card">
|
|
|
|
<a-form :model="formState" layout="vertical">
|
|
|
|
<!-- 向量模型 -->
|
|
|
|
<a-form-item label="向量模型" class="form-item">
|
|
|
|
<a-select
|
|
|
|
v-model:value="formState.embeddingId"
|
|
|
|
placeholder="请选择向量模型"
|
|
|
|
:options="options.embeddingOptions"
|
|
|
|
show-search
|
|
|
|
option-filter-prop="label"
|
|
|
|
/>
|
|
|
|
</a-form-item>
|
|
|
|
|
|
|
|
<!-- 大语言模型 -->
|
|
|
|
<a-form-item label="大语言模型" class="form-item">
|
|
|
|
<a-select
|
|
|
|
v-model:value="formState.llmId"
|
|
|
|
placeholder="请选择大语言模型"
|
|
|
|
:options="options.llmOptions"
|
|
|
|
show-search
|
|
|
|
option-filter-prop="label"
|
|
|
|
/>
|
|
|
|
</a-form-item>
|
|
|
|
|
|
|
|
<!-- 知识库 -->
|
|
|
|
<a-form-item label="知识库" class="form-item">
|
|
|
|
<a-select
|
|
|
|
v-model:value="formState.knowledgeId"
|
|
|
|
placeholder="请选择知识库"
|
|
|
|
:options="options.knowledgeOptions"
|
|
|
|
show-search
|
|
|
|
option-filter-prop="label"
|
|
|
|
/>
|
|
|
|
</a-form-item>
|
|
|
|
|
|
|
|
<!-- 按钮（多选） -->
|
|
|
|
<a-form-item label="功能按钮" class="form-item">
|
|
|
|
<a-select
|
|
|
|
v-model:value="formState.buttonIds"
|
|
|
|
mode="multiple"
|
|
|
|
placeholder="请选择按钮"
|
|
|
|
:options="options.buttonOptions"
|
|
|
|
show-search
|
|
|
|
option-filter-prop="label"
|
|
|
|
:max-tag-count="6"
|
|
|
|
:max="5"
|
|
|
|
/>
|
|
|
|
<div class="hint">最多可选择5个按钮</div>
|
|
|
|
</a-form-item>
|
|
|
|
|
|
|
|
<!-- 提示词 -->
|
|
|
|
<a-form-item label="提示词" class="form-item">
|
|
|
|
<a-textarea
|
|
|
|
v-model:value="formState.prompt"
|
|
|
|
placeholder="请输入提示词，例如：你是一个专业的AI助手..."
|
|
|
|
:rows="4"
|
|
|
|
:maxlength="500"
|
|
|
|
show-count
|
|
|
|
/>
|
|
|
|
</a-form-item>
|
|
|
|
|
|
|
|
<!-- 操作按钮 -->
|
|
|
|
<a-form-item class="action-buttons">
|
|
|
|
<a-space>
|
|
|
|
<a-button @click="resetForm">
|
|
|
|
<template #icon><UndoOutlined /></template>
|
|
|
|
重置
|
|
|
|
</a-button>
|
|
|
|
<a-button type="primary" @click="saveConfigData" :loading="saving">
|
|
|
|
<template #icon><SaveOutlined /></template>
|
|
|
|
保存配置
|
|
|
|
</a-button>
|
|
|
|
</a-space>
|
|
|
|
</a-form-item>
|
|
|
|
</a-form>
|
|
|
|
</a-card>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
|
import { reactive, ref, onMounted } from 'vue';
|
|
|
|
import { getConfigData, saveConfig } from './Chatsetting.api';
|
|
|
|
import { message } from 'ant-design-vue';
|
|
|
|
import { SaveOutlined, UndoOutlined } from '@ant-design/icons-vue';
|
|
|
|
|
|
|
|
// 表单数据结构
|
|
|
|
const formState = reactive({
|
|
|
|
id: '',
|
|
|
|
embeddingId: undefined,
|
|
|
|
llmId: undefined,
|
|
|
|
knowledgeId: undefined,
|
|
|
|
buttonIds: [],
|
|
|
|
prompt: '',
|
|
|
|
});
|
|
|
|
|
|
|
|
// 选项数据
|
|
|
|
const options = reactive({
|
|
|
|
embeddingOptions: [],
|
|
|
|
llmOptions: [],
|
|
|
|
knowledgeOptions: [],
|
|
|
|
buttonOptions: [],
|
|
|
|
});
|
|
|
|
|
|
|
|
const saving = ref(false);
|
|
|
|
|
|
|
|
// 加载配置数据
|
|
|
|
const loadConfig = async () => {
|
|
|
|
try {
|
|
|
|
const res = await getConfigData();
|
|
|
|
|
|
|
|
if (res.success) {
|
|
|
|
const data = res.result;
|
|
|
|
|
|
|
|
// 填充表单
|
|
|
|
Object.keys(formState).forEach((key) => {
|
|
|
|
if (data.airagChatsettingConfig[key] !== undefined) {
|
|
|
|
formState[key] = data.airagChatsettingConfig[key];
|
|
|
|
console.log('shuju' + formState[key]);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
// 填充选项
|
|
|
|
options.embeddingOptions = data.embeddingOptions || [];
|
|
|
|
console.log('向量' + options.embeddingOptions);
|
|
|
|
options.llmOptions = data.llmOptions || [];
|
|
|
|
options.knowledgeOptions = data.knowledgeOptions || [];
|
|
|
|
options.buttonOptions = data.buttonOptions || [];
|
|
|
|
}
|
|
|
|
} catch (error) {
|
|
|
|
console.error('配置加载失败', error);
|
|
|
|
message.error('配置加载失败');
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
// 保存配置
|
|
|
|
const saveConfigData = async () => {
|
|
|
|
const params = {
|
|
|
|
...formState,
|
|
|
|
id: formState.id || '',
|
|
|
|
buttonIds: formState.buttonIds.filter((id) => id && id !== 'undefined'),
|
|
|
|
};
|
|
|
|
if (formState.buttonIds.length > 5) {
|
|
|
|
message.error('最多只能选择五个按钮');
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
saving.value = true;
|
|
|
|
try {
|
|
|
|
const res = await saveConfig(params);
|
|
|
|
console.log(res.success);
|
|
|
|
if (res.success) {
|
|
|
|
message.success('配置保存成功');
|
|
|
|
loadConfig(); // 重新加载最新数据
|
|
|
|
} else {
|
|
|
|
message.error('保存失败: ' + res.message);
|
|
|
|
}
|
|
|
|
} catch (error) {
|
|
|
|
console.error('保存失败', error);
|
|
|
|
message.error('保存失败');
|
|
|
|
} finally {
|
|
|
|
saving.value = false;
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
// 重置表单
|
|
|
|
const resetForm = () => {
|
|
|
|
loadConfig();
|
|
|
|
};
|
|
|
|
|
|
|
|
// 初始化加载
|
|
|
|
onMounted(() => {
|
|
|
|
loadConfig();
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
|
.config-card {
|
|
|
|
max-width: 800px;
|
|
|
|
margin: 20px auto;
|
|
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
|
|
|
|
|
|
:deep(.ant-card-head) {
|
|
|
|
background-color: #f0f5ff;
|
|
|
|
border-bottom: 1px solid #e8e8e8;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.form-item {
|
|
|
|
margin-bottom: 24px;
|
|
|
|
|
|
|
|
:deep(.ant-form-item-label) {
|
|
|
|
font-weight: 500;
|
|
|
|
margin-bottom: 8px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.hint {
|
|
|
|
font-size: 12px;
|
|
|
|
color: #999;
|
|
|
|
margin-top: 4px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.action-buttons {
|
|
|
|
margin-top: 24px;
|
|
|
|
text-align: center;
|
|
|
|
|
|
|
|
.ant-space {
|
|
|
|
justify-content: center;
|
|
|
|
}
|
|
|
|
|
|
|
|
.ant-btn {
|
|
|
|
min-width: 120px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style> |
...
|
...
|
|
