532 lines
14 KiB
Vue
532 lines
14 KiB
Vue
<script setup lang="ts">
|
||
import type { ModelAbilityItem } from '#/views/ai/model/modelUtils/model-ability';
|
||
|
||
import { computed, reactive, ref, watch } from 'vue';
|
||
|
||
import { EasyFlowFormModal } from '@easyflow/common-ui';
|
||
import { IconifyIcon } from '@easyflow/icons';
|
||
|
||
import { ElForm, ElFormItem, ElInput, ElMessage } from 'element-plus';
|
||
|
||
import { api } from '#/api/request';
|
||
import { $t } from '#/locales';
|
||
import {
|
||
getDefaultModelAbility,
|
||
syncTagSelectedStatus as syncTagSelectedStatusUtil,
|
||
} from '#/views/ai/model/modelUtils/model-ability';
|
||
import {
|
||
generateFeaturesFromModelAbility,
|
||
resetModelAbility,
|
||
} from '#/views/ai/model/modelUtils/model-ability-utils';
|
||
|
||
interface FormData {
|
||
id?: string;
|
||
modelType: string;
|
||
title: string;
|
||
modelName: string;
|
||
groupName: string;
|
||
providerId: string;
|
||
invokeCode: string;
|
||
publishEnabled: boolean;
|
||
apiKey: string;
|
||
endpoint: string;
|
||
requestPath: string;
|
||
supportThinking: boolean;
|
||
supportTool: boolean;
|
||
supportImage: boolean;
|
||
supportAudio: boolean;
|
||
supportFree: boolean;
|
||
supportVideo: boolean;
|
||
supportImageB64Only: boolean;
|
||
supportToolMessage: boolean;
|
||
}
|
||
|
||
const props = defineProps({
|
||
providerId: {
|
||
type: String,
|
||
default: '',
|
||
},
|
||
});
|
||
|
||
const emit = defineEmits(['reload']);
|
||
const selectedProviderId = ref<string>(props.providerId ?? '');
|
||
|
||
watch(
|
||
() => props.providerId,
|
||
(newVal) => {
|
||
if (newVal) {
|
||
selectedProviderId.value = newVal;
|
||
}
|
||
},
|
||
{ immediate: true },
|
||
);
|
||
|
||
const formDataRef = ref();
|
||
const isAdd = ref(true);
|
||
const dialogVisible = ref(false);
|
||
const btnLoading = ref(false);
|
||
|
||
const formData = reactive<FormData>({
|
||
modelType: '',
|
||
title: '',
|
||
modelName: '',
|
||
groupName: '',
|
||
providerId: '',
|
||
invokeCode: '',
|
||
publishEnabled: false,
|
||
apiKey: '',
|
||
endpoint: '',
|
||
requestPath: '',
|
||
supportThinking: false,
|
||
supportTool: false,
|
||
supportImage: false,
|
||
supportAudio: false,
|
||
supportFree: false,
|
||
supportVideo: false,
|
||
supportImageB64Only: false,
|
||
supportToolMessage: true,
|
||
});
|
||
|
||
const modelAbility = ref<ModelAbilityItem[]>(getDefaultModelAbility());
|
||
const visibleModelAbility = computed(() =>
|
||
modelAbility.value.filter(
|
||
(item) => item.field !== 'supportImageB64Only' || formData.supportImage,
|
||
),
|
||
);
|
||
type SelectableModelType = '' | 'embeddingModel' | 'rerankModel';
|
||
|
||
const selectedModelType = ref<SelectableModelType>('');
|
||
const modelTypeAbilityOptions = [
|
||
{
|
||
label: $t('llmProvider.embeddingModel'),
|
||
value: 'embeddingModel',
|
||
},
|
||
{
|
||
label: $t('llmProvider.rerankModel'),
|
||
value: 'rerankModel',
|
||
},
|
||
] as const;
|
||
const hasSpecialModelType = computed(() => Boolean(selectedModelType.value));
|
||
const abilityIconMap: Record<string, string> = {
|
||
embeddingModel: 'svg:knowledge',
|
||
rerankModel: 'svg:data-center',
|
||
thinking: 'svg:llm',
|
||
tool: 'svg:wrench',
|
||
video: 'mdi:video-outline',
|
||
image: 'mdi:image-outline',
|
||
audio: 'mdi:microphone-outline',
|
||
imageB64: 'mdi:file-image-outline',
|
||
toolMessage: 'mdi:hammer',
|
||
};
|
||
|
||
const syncTagSelectedStatus = () => {
|
||
syncTagSelectedStatusUtil(modelAbility.value, formData);
|
||
};
|
||
|
||
const resetAbilitySelection = () => {
|
||
resetModelAbility(modelAbility.value);
|
||
syncTagSelectedStatus();
|
||
};
|
||
|
||
const handleTagClick = (item: ModelAbilityItem) => {
|
||
if (hasSpecialModelType.value) {
|
||
return;
|
||
}
|
||
item.selected = !item.selected;
|
||
formData[item.field] = item.selected;
|
||
if (item.field === 'supportImage' && !item.selected) {
|
||
formData.supportImageB64Only = false;
|
||
const base64Ability = modelAbility.value.find(
|
||
(ability) => ability.field === 'supportImageB64Only',
|
||
);
|
||
if (base64Ability) base64Ability.selected = false;
|
||
}
|
||
};
|
||
|
||
const handleModelTypeChipClick = (
|
||
modelType: Exclude<SelectableModelType, ''>,
|
||
) => {
|
||
const nextType = selectedModelType.value === modelType ? '' : modelType;
|
||
selectedModelType.value = nextType;
|
||
if (nextType) {
|
||
resetAbilitySelection();
|
||
}
|
||
};
|
||
|
||
const isAbilityChipDisabled = () => hasSpecialModelType.value;
|
||
const getAbilityIcon = (value: string) => abilityIconMap[value] || 'svg:llm';
|
||
|
||
const resolveModelType = (): FormData['modelType'] => {
|
||
return selectedModelType.value || 'chatModel';
|
||
};
|
||
|
||
const normalizeSelectableModelType = (
|
||
modelType?: string,
|
||
): SelectableModelType => {
|
||
return modelType === 'embeddingModel' || modelType === 'rerankModel'
|
||
? modelType
|
||
: '';
|
||
};
|
||
|
||
const resetFormData = () => {
|
||
Object.assign(formData, {
|
||
id: '',
|
||
modelType: '',
|
||
title: '',
|
||
modelName: '',
|
||
groupName: '',
|
||
providerId: '',
|
||
invokeCode: '',
|
||
publishEnabled: false,
|
||
apiKey: '',
|
||
endpoint: '',
|
||
requestPath: '',
|
||
supportThinking: false,
|
||
supportTool: false,
|
||
supportAudio: false,
|
||
supportVideo: false,
|
||
supportImage: false,
|
||
supportImageB64Only: false,
|
||
supportFree: false,
|
||
supportToolMessage: true,
|
||
});
|
||
};
|
||
|
||
defineExpose({
|
||
openAddDialog(modelType?: string) {
|
||
isAdd.value = true;
|
||
formDataRef.value?.resetFields();
|
||
resetFormData();
|
||
selectedModelType.value = normalizeSelectableModelType(modelType);
|
||
if (selectedModelType.value) {
|
||
resetAbilitySelection();
|
||
} else {
|
||
syncTagSelectedStatus();
|
||
}
|
||
dialogVisible.value = true;
|
||
},
|
||
|
||
openEditDialog(item: any) {
|
||
dialogVisible.value = true;
|
||
isAdd.value = false;
|
||
resetFormData();
|
||
Object.assign(formData, {
|
||
id: item.id,
|
||
modelType: item.modelType || '',
|
||
title: item.title || '',
|
||
modelName: item.modelName || '',
|
||
groupName: item.groupName || '',
|
||
providerId: item.providerId || '',
|
||
invokeCode: item.invokeCode || '',
|
||
publishEnabled: item.publishEnabled || false,
|
||
endpoint: item.endpoint || '',
|
||
requestPath: item.requestPath || '',
|
||
apiKey: item.apiKey || '',
|
||
supportThinking: item.supportThinking || false,
|
||
supportAudio: item.supportAudio || false,
|
||
supportImage: item.supportImage || false,
|
||
supportImageB64Only: item.supportImageB64Only || false,
|
||
supportVideo: item.supportVideo || false,
|
||
supportTool: item.supportTool || false,
|
||
supportFree: item.supportFree || false,
|
||
supportToolMessage:
|
||
item.supportToolMessage === undefined ? true : item.supportToolMessage,
|
||
});
|
||
selectedModelType.value = normalizeSelectableModelType(item.modelType);
|
||
if (selectedModelType.value) {
|
||
resetAbilitySelection();
|
||
} else {
|
||
syncTagSelectedStatus();
|
||
}
|
||
},
|
||
});
|
||
|
||
const closeDialog = () => {
|
||
dialogVisible.value = false;
|
||
};
|
||
|
||
const rules = {
|
||
title: [{ required: true, message: $t('message.required'), trigger: 'blur' }],
|
||
modelName: [
|
||
{ required: true, message: $t('message.required'), trigger: 'blur' },
|
||
],
|
||
groupName: [
|
||
{ required: true, message: $t('message.required'), trigger: 'blur' },
|
||
],
|
||
};
|
||
|
||
const save = async () => {
|
||
btnLoading.value = true;
|
||
const modelType = resolveModelType();
|
||
const features = generateFeaturesFromModelAbility(modelAbility.value);
|
||
|
||
if (modelType !== 'chatModel') {
|
||
for (const key of Object.keys(features) as Array<keyof typeof features>) {
|
||
features[key] = false;
|
||
}
|
||
}
|
||
|
||
try {
|
||
await formDataRef.value.validate();
|
||
const submitData = {
|
||
...formData,
|
||
...features,
|
||
modelType,
|
||
providerId: isAdd.value ? selectedProviderId.value : formData.providerId,
|
||
};
|
||
|
||
const url = isAdd.value ? '/api/v1/model/save' : '/api/v1/model/update';
|
||
const res = await api.post(url, submitData);
|
||
|
||
if (res.errorCode === 0) {
|
||
ElMessage.success(res.message);
|
||
emit('reload');
|
||
closeDialog();
|
||
} else {
|
||
ElMessage.error(res.message || $t('ui.actionMessage.operationFailed'));
|
||
}
|
||
} catch (error) {
|
||
if (!(error as any)?.fields) {
|
||
ElMessage.error($t('ui.actionMessage.operationFailed'));
|
||
}
|
||
} finally {
|
||
btnLoading.value = false;
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<template>
|
||
<EasyFlowFormModal
|
||
v-model:open="dialogVisible"
|
||
:centered="true"
|
||
:closable="!btnLoading"
|
||
:title="isAdd ? '添加模型' : '编辑模型'"
|
||
:before-close="closeDialog"
|
||
width="640"
|
||
:confirm-loading="btnLoading"
|
||
:confirm-text="$t('button.save')"
|
||
:submitting="btnLoading"
|
||
@confirm="save"
|
||
>
|
||
<div class="model-modal">
|
||
<ElForm
|
||
ref="formDataRef"
|
||
:model="formData"
|
||
status-icon
|
||
:rules="rules"
|
||
label-position="top"
|
||
class="model-modal__form"
|
||
>
|
||
<div class="model-modal__section">
|
||
<ElFormItem prop="title" :label="$t('llm.title')">
|
||
<ElInput
|
||
v-model.trim="formData.title"
|
||
placeholder="例如：生产主模型"
|
||
/>
|
||
</ElFormItem>
|
||
<ElFormItem prop="modelName" :label="$t('llm.llmModel')">
|
||
<ElInput
|
||
v-model.trim="formData.modelName"
|
||
placeholder="例如：gpt-4.1 / glm-4.5 / qwen3:8b"
|
||
/>
|
||
</ElFormItem>
|
||
<ElFormItem prop="groupName" :label="$t('llm.groupName')">
|
||
<ElInput
|
||
v-model.trim="formData.groupName"
|
||
placeholder="例如：默认组"
|
||
/>
|
||
</ElFormItem>
|
||
|
||
<ElFormItem
|
||
:label="$t('llm.ability')"
|
||
class="model-modal__ability-item"
|
||
>
|
||
<div class="model-modal__ability-panel">
|
||
<div class="model-modal__ability-toolbar">
|
||
<button
|
||
v-for="item in modelTypeAbilityOptions"
|
||
:key="item.value"
|
||
type="button"
|
||
class="model-modal__ability-chip"
|
||
:class="[
|
||
`is-tone-${item.value}`,
|
||
{ 'is-active': selectedModelType === item.value },
|
||
]"
|
||
@click="handleModelTypeChipClick(item.value)"
|
||
>
|
||
<IconifyIcon
|
||
:icon="getAbilityIcon(item.value)"
|
||
class="model-modal__ability-icon"
|
||
/>
|
||
{{ item.label }}
|
||
</button>
|
||
<span
|
||
class="model-modal__ability-separator"
|
||
aria-hidden="true"
|
||
></span>
|
||
<button
|
||
v-for="item in visibleModelAbility"
|
||
:key="item.value"
|
||
type="button"
|
||
class="model-modal__ability-chip"
|
||
:class="{
|
||
'is-active': item.selected,
|
||
'is-disabled': isAbilityChipDisabled(),
|
||
[`is-tone-${item.value}`]: true,
|
||
}"
|
||
:disabled="isAbilityChipDisabled()"
|
||
@click="handleTagClick(item)"
|
||
>
|
||
<IconifyIcon
|
||
:icon="getAbilityIcon(item.value)"
|
||
class="model-modal__ability-icon"
|
||
/>
|
||
{{ item.label }}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</ElFormItem>
|
||
</div>
|
||
</ElForm>
|
||
</div>
|
||
</EasyFlowFormModal>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.model-modal {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
}
|
||
|
||
.model-modal__section {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
padding: 16px 18px;
|
||
background: hsl(var(--surface-panel) / 96%);
|
||
border: 1px solid hsl(var(--divider-faint) / 42%);
|
||
border-radius: 20px;
|
||
}
|
||
|
||
.model-modal__form {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
}
|
||
|
||
.model-modal__ability-item {
|
||
margin-top: 4px;
|
||
}
|
||
|
||
.model-modal__ability-panel {
|
||
padding: 2px;
|
||
overflow: hidden;
|
||
border-radius: 18px;
|
||
}
|
||
|
||
.model-modal__ability-toolbar {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 10px;
|
||
align-items: center;
|
||
}
|
||
|
||
.model-modal__ability-separator {
|
||
align-self: stretch;
|
||
width: 1px;
|
||
min-height: 28px;
|
||
background: hsl(var(--divider-faint) / 62%);
|
||
border-radius: 999px;
|
||
}
|
||
|
||
.model-modal__ability-chip {
|
||
display: inline-flex;
|
||
gap: 8px;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-height: 40px;
|
||
padding: 9px 18px;
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
line-height: 1;
|
||
color: hsl(var(--text-muted));
|
||
cursor: pointer;
|
||
background: hsl(var(--surface-contrast-soft) / 86%);
|
||
border: 1px solid transparent;
|
||
border-radius: 999px;
|
||
transition:
|
||
transform 0.2s ease,
|
||
border-color 0.2s ease,
|
||
color 0.2s ease,
|
||
background 0.2s ease,
|
||
box-shadow 0.2s ease;
|
||
}
|
||
|
||
.model-modal__ability-chip:hover:not(:disabled),
|
||
.model-modal__ability-chip:focus-visible:not(:disabled) {
|
||
color: hsl(var(--text-strong));
|
||
box-shadow: 0 10px 18px -14px hsl(var(--foreground) / 28%);
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.model-modal__ability-chip.is-active {
|
||
color: hsl(var(--text-strong));
|
||
background: hsl(var(--primary) / 10%);
|
||
border-color: hsl(var(--primary) / 18%);
|
||
box-shadow: inset 0 0 0 1px hsl(var(--primary) / 14%);
|
||
}
|
||
|
||
.model-modal__ability-chip.is-disabled {
|
||
cursor: not-allowed;
|
||
box-shadow: none;
|
||
opacity: 0.56;
|
||
transform: none;
|
||
}
|
||
|
||
.model-modal__ability-icon {
|
||
font-size: 15px;
|
||
opacity: 0.88;
|
||
}
|
||
|
||
.model-modal__ability-chip.is-active.is-tone-embeddingModel,
|
||
.model-modal__ability-chip.is-active.is-tone-thinking,
|
||
.model-modal__ability-chip.is-active.is-tone-toolMessage {
|
||
color: hsl(var(--primary));
|
||
background: hsl(var(--primary) / 10%);
|
||
border-color: hsl(var(--primary) / 18%);
|
||
box-shadow: inset 0 0 0 1px hsl(var(--primary) / 14%);
|
||
}
|
||
|
||
.model-modal__ability-chip.is-active.is-tone-rerankModel,
|
||
.model-modal__ability-chip.is-active.is-tone-tool {
|
||
color: hsl(var(--warning));
|
||
background: hsl(var(--warning) / 12%);
|
||
border-color: hsl(var(--warning) / 18%);
|
||
box-shadow: inset 0 0 0 1px hsl(var(--warning) / 14%);
|
||
}
|
||
|
||
.model-modal__ability-chip.is-active.is-tone-image,
|
||
.model-modal__ability-chip.is-active.is-tone-imageB64 {
|
||
color: hsl(var(--success));
|
||
background: hsl(var(--success) / 12%);
|
||
border-color: hsl(var(--success) / 18%);
|
||
box-shadow: inset 0 0 0 1px hsl(var(--success) / 14%);
|
||
}
|
||
|
||
.model-modal__ability-chip.is-active.is-tone-audio,
|
||
.model-modal__ability-chip.is-active.is-tone-video,
|
||
.model-modal__ability-chip.is-active.is-tone-free {
|
||
color: hsl(var(--danger));
|
||
background: hsl(var(--danger) / 10%);
|
||
border-color: hsl(var(--danger) / 16%);
|
||
box-shadow: inset 0 0 0 1px hsl(var(--danger) / 12%);
|
||
}
|
||
|
||
@media (max-width: 640px) {
|
||
.model-modal__ability-separator {
|
||
display: none;
|
||
}
|
||
}
|
||
</style>
|