433 lines
14 KiB
Vue
433 lines
14 KiB
Vue
<template>
|
||
<BasicModal destroyOnClose @register="registerModal" :canFullscreen="false" width="600px" wrapClassName="ai-model-modal">
|
||
<div class="modal">
|
||
<div class="header">
|
||
<span class="header-title">
|
||
<span v-if="dataIndex ==='list' || dataIndex ==='add'" :class="dataIndex === 'list' ? '' : 'add-header-title pointer'" @click="goToList">选择供应商</span>
|
||
<span v-if="dataIndex === 'add'" class="add-header-title"> > </span>
|
||
<span v-if="dataIndex === 'add'" style="color: #1f2329">添加 {{ providerName }}</span>
|
||
</span>
|
||
|
||
<a-select v-if="dataIndex === 'list'" :bordered="false" class="header-select" size="small" v-model:value="modelType" @change="handleChange">
|
||
<a-select-option v-for="item in modelTypeOption" :value="item.value">{{ item.text }}</a-select-option>
|
||
</a-select>
|
||
</div>
|
||
<div class="model-content" v-if="dataIndex === 'list'">
|
||
<a-row :span="24">
|
||
<a-col :xxl="12" :xl="12" :lg="12" :md="12" :sm="12" :xs="24" v-for="item in modelTypeList">
|
||
<a-card class="model-card" @click="handleClick(item)">
|
||
<div class="model-header">
|
||
<div class="flex">
|
||
<img :src="getImage(item.value)" class="header-img" />
|
||
<div class="header-text">{{ item.title }}</div>
|
||
</div>
|
||
</div>
|
||
</a-card>
|
||
</a-col>
|
||
</a-row>
|
||
</div>
|
||
<a-tabs v-model:activeKey="activeKey" v-if="dataIndex === 'add' || dataIndex === 'edit'">
|
||
<a-tab-pane :key="1" tab="基础信息">
|
||
<div class="model-content">
|
||
<BasicForm @register="registerForm">
|
||
<template #modelType="{ model, field }">
|
||
<a-select v-model:value="model[field]" @change="handleModelTypeChange" :disabled="modelTypeDisabled">
|
||
<a-select-option v-for="item in modelTypeAddOption" :value="item">
|
||
<span v-if="item === 'LLM'">语言模型</span>
|
||
<span v-else>向量模型</span>
|
||
</a-select-option>
|
||
</a-select>
|
||
</template>
|
||
|
||
<template #modelName="{ model, field }">
|
||
<AutoComplete v-model:value="model[field]" :options="modelNameAddOption" :filter-option="filterOption">
|
||
<template #option="{ value, label, descr, type }">
|
||
<a-tooltip placement="right" color="#ffffff" :overlayInnerStyle="{ color:'#646a73' }">
|
||
<template #title>
|
||
<div v-html="getTitle(descr)"></div>
|
||
</template>
|
||
<div style="display: flex;justify-content: space-between;">
|
||
<span>{{label}}</span>
|
||
<div>
|
||
<a-tag v-if="type && type.indexOf('text') != -1" color="#E8D7C3">文本</a-tag>
|
||
<a-tag v-if="type && type.indexOf('image') != -1" color="#C3D9DC">图像分析</a-tag>
|
||
<a-tag v-if="type && type.indexOf('vector') != -1" color="#D4E0D8">向量</a-tag>
|
||
<a-tag v-if="type && type.indexOf('embeddings') != -1" color="#FFEBD3">文本嵌入</a-tag>
|
||
</div>
|
||
</div>
|
||
</a-tooltip>
|
||
</template>
|
||
</AutoComplete>
|
||
</template>
|
||
</BasicForm>
|
||
</div>
|
||
</a-tab-pane>
|
||
<a-tab-pane :key="2" tab="高级配置" v-if="modelParamsShow">
|
||
<AiModelSeniorForm ref="modelParamsRef" :modelParams="modelParams"></AiModelSeniorForm>
|
||
</a-tab-pane>
|
||
</a-tabs>
|
||
|
||
</div>
|
||
<template v-if="dataIndex === 'add' || dataIndex === 'edit'" #footer>
|
||
<a-button @click="cancel">关闭</a-button>
|
||
<a-button @click="save" type="primary">保存</a-button>
|
||
</template>
|
||
<template v-else #footer> </template>
|
||
</BasicModal>
|
||
</template>
|
||
|
||
<script lang="ts">
|
||
import { ref, reactive } from 'vue';
|
||
import BasicModal from '@/components/Modal/src/BasicModal.vue';
|
||
import { useModal, useModalInner } from '@/components/Modal';
|
||
import { initDictOptions } from '@/utils/dict';
|
||
import model from './model.json';
|
||
import { AutoComplete } from 'ant-design-vue';
|
||
|
||
import BasicForm from '@/components/Form/src/BasicForm.vue';
|
||
import { useForm } from '@/components/Form';
|
||
import { formSchema, imageList } from '../model.data';
|
||
import { editModel, queryById, saveModel } from '../model.api';
|
||
import { useMessage } from '/@/hooks/web/useMessage';
|
||
import AiModelSeniorForm from './AiModelSeniorForm.vue';
|
||
export default {
|
||
name: 'AddModelModal',
|
||
components: {
|
||
BasicForm,
|
||
BasicModal,
|
||
AiModelSeniorForm,
|
||
AutoComplete,
|
||
},
|
||
emits: ['success', 'register'],
|
||
setup(props, { emit }) {
|
||
//ai类型数据
|
||
const modelTypeData = ref<any>([]);
|
||
//模型类型下拉框
|
||
const modelTypeOption = ref<any>([]);
|
||
//模型类型禁用状态
|
||
const modelTypeDisabled = ref<boolean>(false);
|
||
//模型类型
|
||
const modelType = ref<string>('all');
|
||
//模型供应商
|
||
const modelTypeList = ref<any>([]);
|
||
//list:供应商选择页面，add 添加编辑
|
||
const dataIndex = ref<string>('list');
|
||
//供应商名称
|
||
const providerName = ref<string>('');
|
||
//添加模型类型的option
|
||
const modelTypeAddOption = ref<any>([]);
|
||
//添加模型名称的option
|
||
const modelNameAddOption = ref<any>([]);
|
||
//模型数据
|
||
const modelData = ref<any>({});
|
||
//tab切换对应的key
|
||
const activeKey = ref<number>(1);
|
||
//模型参数
|
||
const modelParams = ref<any>({});
|
||
//是否显示模型参数
|
||
const modelParamsShow = ref<boolean>(false);
|
||
//模型参数ref
|
||
const modelParamsRef = ref();
|
||
|
||
const getImage = (name) => {
|
||
return imageList.value[name];
|
||
};
|
||
//自动填充文本搜索事件
|
||
const filterOption = (input: string, option: any)=>{
|
||
return option.value.toUpperCase().indexOf(input.toUpperCase()) >= 0;
|
||
}
|
||
|
||
//表单配置
|
||
const [registerForm, { resetFields, setFieldsValue, validate, clearValidate }] = useForm({
|
||
schemas: formSchema,
|
||
showActionButtonGroup: false,
|
||
layout: 'vertical',
|
||
wrapperCol: { span: 24 },
|
||
});
|
||
|
||
//注册modal
|
||
const [registerModal, { closeModal, setModalProps }] = useModalInner(async (data) => {
|
||
activeKey.value = 1;
|
||
modelParamsShow.value = false;
|
||
if(dataIndex.value !== 'list') {
|
||
//重置表单
|
||
await resetFields();
|
||
}
|
||
setModalProps({ minHeight: 500 });
|
||
if (data.id) {
|
||
dataIndex.value = 'edit';
|
||
let values = await queryById({ id: data.id });
|
||
if (values) {
|
||
if(values.result.credential){
|
||
let credential = JSON.parse(values.result.credential);
|
||
if(credential.secretKey){
|
||
values.result.secretKey = credential.secretKey;
|
||
}
|
||
if(credential.apiKey){
|
||
values.result.apiKey = credential.apiKey;
|
||
}
|
||
}
|
||
let provider = values.result.provider;
|
||
let data = model.data.filter((item) => {
|
||
return item.value.includes(provider);
|
||
});
|
||
if (data && data.length > 0) {
|
||
modelTypeAddOption.value = data[0].type;
|
||
modelNameAddOption.value = data[0][values.result.modelType];
|
||
}
|
||
if(values.result.modelType && values.result.modelType === 'LLM'){
|
||
modelParamsShow.value = true;
|
||
}
|
||
if(values.result.modelParams){
|
||
modelParams.value = JSON.parse(values.result.modelParams)
|
||
}
|
||
modelTypeDisabled.value = true;
|
||
//表单赋值
|
||
await setFieldsValue({
|
||
...values.result,
|
||
});
|
||
//初始化模型提供者
|
||
initModelProvider();
|
||
}
|
||
} else {
|
||
modelTypeDisabled.value = false;
|
||
//初始化模型提供者
|
||
initModelProvider();
|
||
dataIndex.value = 'list';
|
||
modelNameAddOption.value = [];
|
||
}
|
||
});
|
||
|
||
//初始化模型类型
|
||
initModelTypeOption();
|
||
|
||
/**
|
||
* 初始化 模型类型字典
|
||
*/
|
||
function initModelTypeOption() {
|
||
initDictOptions('model_type').then((data) => {
|
||
modelTypeOption.value = data;
|
||
//update-begin---author:wangshuai---date:2025-03-04---for: 解决页面tab刷新一次就多一个全部类型的选项---
|
||
if(data[0].value != 'all'){
|
||
modelTypeOption.value.unshift({
|
||
text: '全部类型',
|
||
value: 'all',
|
||
});
|
||
}
|
||
//update-end---author:wangshuai---date:2025-03-04---for: 解决页面tab刷新一次就多一个全部类型的选项---
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 下拉框值选中事件
|
||
* @param value
|
||
*/
|
||
function handleChange(value) {
|
||
if ('all' == value) {
|
||
modelTypeList.value = model.data;
|
||
return;
|
||
}
|
||
let data = model.data.filter((item) => {
|
||
return item.type.includes(value);
|
||
});
|
||
modelTypeList.value = data;
|
||
}
|
||
|
||
/**
|
||
* 初始化模型提供者
|
||
*/
|
||
function initModelProvider() {
|
||
modelTypeList.value = model.data;
|
||
}
|
||
|
||
/**
|
||
* 供应商点击事件
|
||
*
|
||
* @param item
|
||
*/
|
||
function handleClick(item) {
|
||
dataIndex.value = 'add';
|
||
modelData.value = item;
|
||
providerName.value = item.title;
|
||
modelTypeAddOption.value = item.type;
|
||
setTimeout(()=>{
|
||
setFieldsValue({ 'provider': item.value, 'baseUrl': item.baseUrl })
|
||
},100)
|
||
}
|
||
|
||
/**
|
||
* 保存
|
||
*/
|
||
async function save() {
|
||
try {
|
||
setModalProps({ confirmLoading: true });
|
||
let values = await validate();
|
||
let credential = {
|
||
apiKey: values.apiKey,
|
||
secretKey: values.secretKey
|
||
}
|
||
if(modelParamsRef.value){
|
||
let modelParams = modelParamsRef.value.emitChange();
|
||
if(modelParams){
|
||
values.modelParams = JSON.stringify(modelParams);
|
||
}
|
||
}
|
||
values.credential = JSON.stringify(credential);
|
||
//新增
|
||
if (!values.id) {
|
||
values.provider = modelData.value.value;
|
||
await saveModel(values);
|
||
closeModal();
|
||
emit('success');
|
||
} else {
|
||
await editModel(values);
|
||
closeModal();
|
||
emit('success');
|
||
}
|
||
}catch(e){
|
||
if(e.hasOwnProperty('errorFields')){
|
||
activeKey.value = 1;
|
||
}
|
||
} finally {
|
||
setModalProps({ confirmLoading: false });
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 取消
|
||
*/
|
||
function cancel() {
|
||
dataIndex.value = 'list';
|
||
closeModal();
|
||
}
|
||
|
||
/**
|
||
* 模型类型选择事件
|
||
* @param value
|
||
*/
|
||
async function handleModelTypeChange(value) {
|
||
await setFieldsValue({ modelName: '' });
|
||
await clearValidate('modelName');
|
||
await setFieldsValue({
|
||
modelName: modelData.value[value+'DefaultValue']
|
||
})
|
||
modelNameAddOption.value = modelData.value[value];
|
||
if(value === 'LLM'){
|
||
modelParamsShow.value = true;
|
||
}else{
|
||
modelParamsShow.value = false;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 选择供应商
|
||
*/
|
||
function goToList() {
|
||
if (dataIndex.value === 'add') {
|
||
dataIndex.value = 'list';
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 获取标题
|
||
* @param title
|
||
*/
|
||
function getTitle(title) {
|
||
if(!title){
|
||
return "暂无描述内容";
|
||
}
|
||
return title.replaceAll("\n","<br>")
|
||
}
|
||
|
||
return {
|
||
registerModal,
|
||
modelTypeData,
|
||
modelTypeOption,
|
||
modelType,
|
||
handleChange,
|
||
modelTypeList,
|
||
getImage,
|
||
handleClick,
|
||
dataIndex,
|
||
providerName,
|
||
save,
|
||
cancel,
|
||
registerForm,
|
||
handleModelTypeChange,
|
||
modelTypeAddOption,
|
||
modelNameAddOption,
|
||
goToList,
|
||
modelTypeDisabled,
|
||
activeKey,
|
||
modelParams,
|
||
modelParamsShow,
|
||
modelParamsRef,
|
||
filterOption,
|
||
getTitle,
|
||
};
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.modal {
|
||
padding: 12px 20px 20px 20px;
|
||
.header {
|
||
padding: 0 24px 24px 0;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.header-title {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
}
|
||
.header-select {
|
||
margin-right: 10px;
|
||
}
|
||
.add-header-title {
|
||
color: #646a73;
|
||
}
|
||
}
|
||
.model-content {
|
||
.model-header {
|
||
position: relative;
|
||
font-size: 14px;
|
||
.header-img {
|
||
width: 32px;
|
||
height: 32px;
|
||
margin-right: 12px;
|
||
}
|
||
.header-text {
|
||
width: calc(100% - 80px);
|
||
overflow: hidden;
|
||
align-content: center;
|
||
}
|
||
}
|
||
}
|
||
.model-card {
|
||
margin-right: 10px;
|
||
margin-bottom: 10px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
:deep(.ant-card .ant-card-body) {
|
||
padding: 12px;
|
||
}
|
||
|
||
.pointer {
|
||
cursor: pointer;
|
||
}
|
||
|
||
:deep(.jeecg-basic-modal-close){
|
||
span{
|
||
margin-left: 0 !important;
|
||
}
|
||
}
|
||
</style>
|
||
<style lang="less">
|
||
.ai-model-modal{
|
||
.jeecg-basic-modal-close > span{
|
||
margin-left: 0 !important;
|
||
}
|
||
}
|
||
</style>
|