<template>
|
<div class="flex flex-col h100">
|
<div class="mb-[10px] flex flex-shrink-0 items-center">
|
<el-button style="margin-left: 8px; width: 40px" text @click="handleExitFlow">
|
<el-icon style="font-size: 24px !important">
|
<ArrowLeft />
|
</el-icon>
|
</el-button>
|
<span class="text-[24px] text-[#26244c] font-[700]">{{ state.detailTitle }}</span>
|
</div>
|
<div class="set-form-height" v-show="!state.showKnowledgeForm">
|
<el-form
|
:model="state.knowledgeForm"
|
label-width="120px"
|
label-position="left"
|
ref="knowledgeFormRef"
|
:rules="knowledgeFormRules"
|
>
|
<el-divider content-position="left"><span class="text-[18px] font-[500]">知识库基础信息</span></el-divider>
|
<el-form-item label="知识库名称:" prop="title">
|
<el-input
|
v-model="state.knowledgeForm.title"
|
style="width: 532px"
|
maxlength="20"
|
placeholder="请输入知识库名称"
|
show-word-limit
|
type="text"
|
/>
|
</el-form-item>
|
<el-form-item label="知识库描述:" prop="prompt">
|
<el-input
|
v-model="state.knowledgeForm.prompt"
|
maxlength="1000"
|
style="width: 532px"
|
placeholder="请输入知识库描述。对知识库包含的内容和数据的用途进行描述。"
|
show-word-limit
|
:rows="5"
|
type="textarea"
|
/>
|
</el-form-item>
|
<el-form-item label="数据类型:">
|
<div v-for="(item, index) in state.dataTypeList" :key="index">
|
<div
|
class="bg-[#fff] border-[1px] border-solid border-[#d8d9e6] py-[12px] w-[215px] mr-[10px] px-[16px] rounded-lg cursor-pointer"
|
:class="{ activeColor: state.knowledgeForm.dataType === item.ID }"
|
@click="activeDataType(item.ID)"
|
>
|
<div class="flex items-center">
|
<div class="data_left">
|
<img :src="item.ImageURL" class="w-[40px] h-[40px] mr-[10px]" />
|
</div>
|
<div class="data_right">
|
<el-radio v-model="state.knowledgeForm.dataType" size="large" :label="item.ID">
|
<span class="font-[500] text[16px]">{{ item.Name }}</span>
|
</el-radio>
|
|
<el-tooltip :content="item.DemoDesc" placement="top" effect="light" popper-class="set_tooltip_demo">
|
<div class="text-[#878aab] text-[12px] mx-0 mt-[2px] mb-0 set-desc">
|
{{ item.DemoDesc }}
|
</div>
|
</el-tooltip>
|
</div>
|
</div>
|
</div>
|
</div>
|
</el-form-item>
|
<el-divider content-position="left"><span class="text-[18px]">知识库配置</span></el-divider>
|
<el-form-item label="配置模式:">
|
<div class="flex-auto flex flex-col">
|
<div class="flex">
|
<div v-for="(item, index) in state.configurationList" :key="index">
|
<div
|
class="bg-[#fff] border-[1px] border-solid border-[#d8d9e6] py-[12px] w-[215px] mr-[10px] px-[16px] rounded-lg cursor-pointer"
|
:class="{ activeColor: state.knowledgeForm.configurationMode === item.ID }"
|
@click="activeConfigurationType(item.ID)"
|
>
|
<div class="flex items-center">
|
<div class="data_left">
|
<img :src="item.ImageURL" class="w-[40px] h-[40px] mr-[10px]" />
|
</div>
|
<div class="data_right">
|
<el-radio v-model="state.knowledgeForm.configurationMode" size="large" :label="item.ID">
|
<span class="font-[500] text[16px]">{{ item.Name }}</span>
|
</el-radio>
|
|
<el-tooltip :content="item.DemoDesc" placement="top" effect="light" popper-class="set_tooltip_demo">
|
<div class="text-[#878aab] text-[12px] mx-0 mt-[2px] mb-0 set-desc">
|
{{ item.DemoDesc }}
|
</div>
|
</el-tooltip>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="set_model_desc">
|
<div v-for="(item, index) in state.modeList" :key="index">
|
<div class="flex items-center mb-[16px]">
|
<div class="relative w-[148px] text-[14px] text-[#26244c]">{{ item.Name }}</div>
|
<div class="text-[14px] text-[#26244c]" :class="`min-w-[${item.NameFnWidthStyle}]`">{{ item.NameFn }}</div>
|
<div v-show="item.ID == 3">
|
<div class="min-w-[148px] text-[14px] text-[#26244c]">{{ item.NameOrder }}</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</el-form-item>
|
</el-form>
|
</div>
|
<div class="set-form-height" v-show="state.showKnowledgeForm">
|
<el-form
|
:model="state.knowledgeFile"
|
label-width="120px"
|
label-position="left"
|
ref="knowledgeFileRef"
|
:rules="knowledgeFormRules"
|
>
|
<el-divider content-position="left"><span class="text-[18px] font-[500]">选择文件</span></el-divider>
|
|
<el-divider content-position="left"><span class="text-[18px]">数据处理</span></el-divider>
|
<el-form-item label="配置模式:">
|
<div class="flex-auto flex flex-col">
|
<div class="flex">
|
<div v-for="(item, index) in state.configurationList" :key="index">
|
<div
|
class="bg-[#fff] border-[1px] border-solid border-[#d8d9e6] py-[12px] w-[215px] mr-[10px] px-[16px] rounded-lg cursor-pointer"
|
:class="{ activeColor: state.knowledgeForm.configurationMode === item.ID }"
|
@click="activeConfigurationType(item.ID)"
|
>
|
<div class="flex items-center">
|
<div class="data_left">
|
<img :src="item.ImageURL" class="w-[40px] h-[40px] mr-[10px]" />
|
</div>
|
<div class="data_right">
|
<el-radio v-model="state.knowledgeForm.configurationMode" size="large" :label="item.ID">
|
<span class="font-[500] text[16px]">{{ item.Name }}</span>
|
</el-radio>
|
|
<el-tooltip :content="item.DemoDesc" placement="top" effect="light" popper-class="set_tooltip_demo">
|
<div class="text-[#878aab] text-[12px] mx-0 mt-[2px] mb-0 set-desc">
|
{{ item.DemoDesc }}
|
</div>
|
</el-tooltip>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="set_model_desc">
|
<div v-for="(item, index) in state.modeList" :key="index">
|
<div class="flex items-center mb-[16px]">
|
<div class="relative w-[148px] text-[14px] text-[#26244c]">{{ item.Name }}</div>
|
<div class="text-[14px] text-[#26244c]" :class="`min-w-[${item.NameFnWidthStyle}]`">{{ item.NameFn }}</div>
|
<div v-show="item.ID == 3">
|
<div class="min-w-[148px] text-[14px] text-[#26244c]">{{ item.NameOrder }}</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</el-form-item>
|
</el-form>
|
</div>
|
<div class="set-form-footer">
|
<div v-show="!state.showKnowledgeForm">
|
<el-button type="primary" @click="nextKnowledge">下一步</el-button>
|
<el-button @click="emptyKnowledgeBase">创建空知识库</el-button>
|
</div>
|
<div v-show="state.showKnowledgeForm">
|
<el-button @click="importCompleted" type="primary">导入完成</el-button>
|
<el-button @click="backKnowledge" v-show="state.showKnowledgeForm">上一步</el-button>
|
</div>
|
<el-button @click="handleExitFlow">取消</el-button>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { ElMessage, type FormRules } from 'element-plus';
|
import moment from 'moment';
|
import { reactive, ref } from 'vue';
|
import { useRouter } from 'vue-router';
|
import { add_docvector_name } from '/@/api/knowledge/docvector';
|
import mittBus from '/@/utils/mitt';
|
// 定义变量内容
|
const state = reactive({
|
soliderValue: 0,
|
detailTitle: '创建知识库',
|
knowledgeForm: {
|
title: '',
|
prompt: '',
|
dataType: 1,
|
configurationMode: 1,
|
},
|
knowledgeFile: {},
|
dataTypeList: [
|
{
|
ID: 1,
|
Name: '非结构化数据',
|
ImageURL: 'static/images/knowledge/data_type_1.png',
|
DemoDesc: '选择数据管理功能中已上传的doc、pdf、md、txt等文件',
|
},
|
{
|
ID: 2,
|
Name: '结构化数据',
|
ImageURL: 'static/images/knowledge/data_type_2.png',
|
DemoDesc: '选择数据管理功能中已创建的数据表',
|
},
|
],
|
configurationList: [
|
{
|
ID: 1,
|
Name: '推荐配置',
|
ImageURL: 'static/images/knowledge/data_type_3.png',
|
DemoDesc: '百炼推荐配置，在效果、推理成本、检索时延等方面的最佳实践',
|
},
|
{
|
ID: 3,
|
Name: '自定义',
|
ImageURL: 'static/images/knowledge/data_type_4.png',
|
DemoDesc: '完全开放的离线知识库配置，按照检索需求自由配置，获得推理效果和时延方面的不同体验',
|
},
|
],
|
modeList: [
|
{
|
ID: 1,
|
Name: '多轮对话改写',
|
NameFn: '开启',
|
NameOrder: null,
|
NameFnWidthStyle: '380px',
|
},
|
{
|
ID: 2,
|
Name: 'Embedding模型',
|
NameFn: '官方向量',
|
NameOrder: null,
|
NameFnWidthStyle: '380px',
|
},
|
{
|
ID: 3,
|
Name: '排序配置',
|
NameFn: 'Rank模型',
|
NameOrder: '官方排序',
|
NameFnWidthStyle: '148px',
|
},
|
{
|
ID: 4,
|
Name: '',
|
NameFn: '相似度阈值',
|
NameOrder: null,
|
NameFnWidthStyle: '148px',
|
},
|
],
|
showKnowledgeForm: false,
|
});
|
const knowledgeFormRules = reactive<FormRules>({
|
title: [
|
{
|
required: true,
|
message: '必填项',
|
trigger: 'blur',
|
},
|
],
|
prompt: [
|
{
|
required: true,
|
message: '必填项',
|
trigger: 'blur',
|
},
|
],
|
});
|
const knowledgeFormRef = ref();
|
const router = useRouter();
|
//返回
|
const handleExitFlow = () => {
|
//是否显示返回
|
router.back();
|
//清空表单
|
knowledgeFormRef.value.resetFields();
|
state.showKnowledgeForm = false;
|
};
|
//选择数据类型
|
const activeDataType = (id: number) => {
|
state.knowledgeForm.dataType = id;
|
};
|
//选择配置模式
|
const activeConfigurationType = (id: number) => {
|
state.knowledgeForm.configurationMode = id;
|
};
|
//下一步
|
const nextKnowledge = async () => {
|
const valid = await knowledgeFormRef.value.validate().catch(() => {});
|
if (!valid) return;
|
state.showKnowledgeForm = true;
|
};
|
const backKnowledge = () => {
|
state.showKnowledgeForm = false;
|
};
|
//创建一个空知识库
|
const emptyKnowledgeBase = async () => {
|
var currentTime = moment().format('YYYY-MM-DD HH:mm:ss');
|
const valid = await knowledgeFormRef.value.validate().catch(() => {});
|
if (!valid) return;
|
const res = await add_docvector_name({ title: state.knowledgeForm.title, prompt: state.knowledgeForm.prompt });
|
if (res.json_ok) {
|
ElMessage.success('创建成功');
|
let obj = {
|
id: res.knowlg_id,
|
title: state.knowledgeForm.title,
|
prompt: state.knowledgeForm.prompt,
|
publish: '',
|
create_time: currentTime,
|
user_name: '',
|
};
|
mittBus.emit('addKnowledgeBaseObj', obj);
|
router.push({ name: 'Knowledge' });
|
}
|
};
|
const importCompleted = () => {
|
return;
|
ElMessage.success('导入完成');
|
router.push({ name: 'Knowledge' });
|
};
|
</script>
|
<style scoped lang="scss">
|
.set-form-height {
|
background: #fff;
|
border-radius: 12px 12px 0 0;
|
flex: 1;
|
margin: 0 24px;
|
overflow-y: auto;
|
padding: 20px 16px;
|
height: 100%;
|
}
|
.set-desc {
|
-webkit-line-clamp: 2;
|
display: -webkit-box;
|
-webkit-box-orient: vertical;
|
overflow: hidden;
|
word-break: break-word;
|
line-height: 1.5714285714285714;
|
font-family: PingFangSC;
|
box-sizing: border-box;
|
}
|
.set-form-footer {
|
align-items: center;
|
background: #fff;
|
bottom: 0;
|
box-shadow: 4px 0 5px 1px rgba(16, 9, 65, 0.06);
|
display: flex;
|
flex-shrink: 0;
|
gap: 8px;
|
height: 64px;
|
padding-left: 24px;
|
// position: fixed;
|
width: 100%;
|
left: 220px;
|
}
|
|
.activeColor {
|
border-color: #0062be;
|
background-color: #f6f5ff;
|
}
|
.set_model_desc {
|
background: #f7f8fe;
|
border-radius: 8px;
|
margin-top: 12px;
|
padding: 16px 24px;
|
}
|
.slider-demo-block {
|
max-width: 600px;
|
display: flex;
|
align-items: center;
|
}
|
</style>
|
<style>
|
.set_tooltip_demo {
|
max-width: 326px;
|
max-height: 150px;
|
min-width: 32px;
|
min-height: 32px;
|
padding: 6px 8px;
|
color: #26244c;
|
text-align: start;
|
text-decoration: none;
|
word-wrap: break-word;
|
background-color: #fff;
|
border-radius: 6px;
|
box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
|
box-sizing: border-box;
|
}
|
</style>
|
