Skip to content

Commit fd8148b

Browse files
wangdan-fit2cloudwangdan-fit2cloud
committed
feat: model components
1 parent a49433e commit fd8148b

File tree

9 files changed

+124
-82
lines changed

9 files changed

+124
-82
lines changed

‎ui/src/components/dynamics-form/constructor/items/KnowledgeConstructor.vue‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@
5757
<div class="w-full" v-if="formValue.knowledge_list?.length > 0">
5858
<Knowledge
5959
v-model="formValue.default_value"
60-
:form-field="{ attrs: { knowledge_list: formValue.knowledge_list } } as any"
60+
:form-field="formField"
6161
/>
6262
</div>
6363
</el-form-item>
@@ -71,8 +71,8 @@
7171
<script setup lang="ts">
7272
import { computed, reactive, ref } from 'vue'
7373
import AddKnowledgeDialog from '@/views/application/component/AddKnowledgeDialog.vue'
74-
import Knowledge from '../../items/Knowledge/Knowledge.vue'
75-
74+
import Knowledge from '../../items/knowledge/Knowledge.vue'
75+
import type { FormField } from '../../type'
7676
const props = defineProps<{
7777
modelValue: any
7878
}>()
@@ -93,6 +93,10 @@ const formValue = computed({
9393
},
9494
})
9595
96+
const formField = computed<FormField>(() => {
97+
return { attrs: { knowledge_list: formValue.value.knowledge_list } } as any
98+
})
99+
96100
const getData = () => {
97101
const knowledgeItemList = (formValue.value.knowledge_list || []).map((k: any) => {
98102
return {

‎ui/src/components/dynamics-form/constructor/items/ModelConstructor.vue‎

Lines changed: 32 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -20,13 +20,13 @@
2020
</el-form-item>
2121

2222
<el-form-item
23-
:label="$t('views.model.modelForm.model_type.kexuan', '可选模型')"
23+
:label="$t('dynamicsForm.ModelConstructor.optionalModel.label')"
2424
required
2525
prop="provider_list"
2626
:rules="[
2727
{
2828
required: true,
29-
message: $t('views.model.modelForm.model_type.requiredMessage'),
29+
message: $t('dynamicsForm.ModelConstructor.optionalModel.required'),
3030
type: 'array',
3131
},
3232
]"
@@ -35,53 +35,21 @@
3535
<ModelSelect
3636
multiple
3737
v-model="selectedIds"
38-
:placeholder="$t('views.application.form.voicePlay.placeholder')"
38+
:placeholder="$t('dynamicsForm.ModelConstructor.optionalModel.required')"
3939
:options="groupedModelOptions"
4040
@change="handleProviderListChange"
4141
:model-type="formValue.model_type"
4242
>
43-
<template #tag>
44-
<el-tag
45-
v-for="provider in formValue.provider_list"
46-
:key="provider.model_id"
47-
closable
48-
type="info"
49-
@close="removeSelectedModel(provider.model_id)"
50-
style="margin-right: 4px"
51-
>
52-
<div class="flex align-center">
53-
<span
54-
v-html="
55-
relatedObject(
56-
providerOptions,
57-
getModelInfo(provider.model_id)?.provider,
58-
'provider',
59-
)?.icon
60-
"
61-
class="model-icon mr-4"
62-
></span>
63-
<span class="mr-4">{{
64-
relatedObject(
65-
providerOptions,
66-
getModelInfo(provider.model_id)?.provider,
67-
'provider',
68-
)?.name
69-
}}</span>
70-
<span class="mr-4"> > </span>
71-
<span>{{ getModelInfo(provider.model_id)?.name }}</span>
72-
</div>
73-
</el-tag>
74-
</template>
7543
</ModelSelect>
7644
</div>
7745
</el-form-item>
7846
<el-form-item
79-
:label="$t('views.model.modelForm.model_type.moren', '默认模型')"
47+
:label="$t('dynamicsForm.ModelConstructor.defaultModel.label')"
8048
required
8149
:rules="[
8250
{
8351
required: true,
84-
message: $t('views.model.modelForm.model_type.requiredMessage'),
52+
message: $t('dynamicsForm.ModelConstructor.defaultModel.required'),
8553
},
8654
]"
8755
v-if="formValue.provider_list && formValue.provider_list.length > 0"
@@ -90,7 +58,7 @@
9058
<el-select
9159
v-model="formValue.default_value"
9260
value-key="model_id"
93-
placeholder="请选择默认模型"
61+
:placeholder="$t('dynamicsForm.ModelConstructor.defaultModel.required')"
9462
>
9563
<el-option-group
9664
v-for="(modelList, providerName) in selectedModelsOptions"
@@ -103,15 +71,36 @@
10371
:label="item.name"
10472
:value="getProviderItem(item.id)"
10573
>
106-
<div class="flex">
74+
<el-space :size="8">
10775
<span
108-
v-html="relatedObject(providerOptions, providerName, 'provider')?.icon"
109-
class="model-icon mr-8"
76+
:innerHTML="relatedObject(providerOptions, providerName, 'provider')?.icon"
77+
class="select-model-icon"
78+
style="margin-top: -7px"
11079
></span>
11180
<span>{{ item.name }}</span>
112-
</div>
81+
</el-space>
11382
</el-option>
11483
</el-option-group>
84+
<template #label="{ label, value }">
85+
<el-space :size="8">
86+
<span
87+
class="select-model-icon"
88+
:innerHTML="
89+
relatedObject(providerOptions, getModelInfo(value.model_id)?.provider, 'provider')
90+
?.icon
91+
"
92+
>
93+
</span>
94+
<span>
95+
<span>{{
96+
relatedObject(providerOptions, getModelInfo(value.model_id)?.provider, 'provider')
97+
?.name
98+
}}</span>
99+
<span>/</span>
100+
<span>{{ label }}</span>
101+
</span>
102+
</el-space>
103+
</template>
115104
</el-select>
116105
<div class="ml-8">
117106
<el-button @click="openParamSetting" @refreshForm="handleParamRefresh">
@@ -302,10 +291,4 @@ const rander = (form_data: any) => {
302291
303292
defineExpose({ getData, rander })
304293
</script>
305-
<style lang="scss" scoped>
306-
// AI模型选择：添加模型hover样式
307-
308-
.model-icon {
309-
width: 18px;
310-
}
311-
</style>
294+
<style lang="scss" scoped></style>

‎ui/src/components/dynamics-form/items/model/Model.vue‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -17,14 +17,15 @@
1717
:label="item.model_name"
1818
:value="item.model_id"
1919
>
20-
<div class="flex">
20+
<el-space :size="8">
2121
<span
22-
v-html="relatedObject(providerList, providerName, 'provider')?.icon"
23-
class="model-icon mr-8"
22+
:innerHTML="relatedObject(providerList, providerName, 'provider')?.icon"
23+
class="select-model-icon"
24+
style="margin-top: -7px"
2425
>
2526
</span>
2627
<span>{{ item.model_name }}</span>
27-
</div>
28+
</el-space>
2829
</el-option>
2930
</el-option-group>
3031
</el-select>
@@ -116,10 +117,6 @@ const handleModelChange = (selectedId: string) => {
116117
}
117118
}
118119
119-
.model-icon {
120-
width: 18px;
121-
}
122-
123120
.check-icon {
124121
position: absolute;
125122
right: 10px;

‎ui/src/components/model-select/index.vue‎

Lines changed: 34 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -19,22 +19,18 @@
1919
:value="item.id"
2020
class="flex-between"
2121
>
22-
<div class="flex">
22+
<el-space :size="8">
2323
<span
24-
v-html="relatedObject(providerOptions, label, 'provider')?.icon"
25-
class="model-icon mr-8"
24+
:innerHTML="relatedObject(providerOptions, label, 'provider')?.icon"
25+
class="select-model-icon"
26+
style="margin-top: -7px"
2627
></span>
2728
<span>{{ item.name }}</span>
28-
29-
<el-tag
30-
v-if="item.type === 'share'"
31-
type="info"
32-
class="info-tag ml-8"
33-
style="margin-top: 7px"
34-
>
29+
<el-tag v-if="item.type === 'share'" type="info" class="info-tag">
3530
{{ t('views.shared.title') }}
3631
</el-tag>
37-
</div>
32+
</el-space>
33+
3834
<el-icon class="check-icon" v-if="item.id === modelValue">
3935
<Check />
4036
</el-icon>
@@ -48,22 +44,36 @@
4844
class="flex-between"
4945
disabled
5046
>
51-
<div class="flex">
47+
<el-space :size="8">
5248
<span
53-
v-html="relatedObject(providerOptions, label, 'provider')?.icon"
54-
class="model-icon mr-8"
49+
:innerHTML="relatedObject(providerOptions, label, 'provider')?.icon"
50+
class="select-model-icon"
51+
style="margin-top: -7px"
5552
></span>
5653
<span>{{ item.name }}</span>
5754
<span class="color-danger">{{ $t('common.unavailable') }}</span>
58-
</div>
55+
</el-space>
5956
<el-icon class="check-icon" v-if="item.id === modelValue">
6057
<Check />
6158
</el-icon>
6259
</el-option>
6360
</el-option-group>
6461

65-
<template #tag v-if="$slots.tag">
66-
<slot name="tag"></slot>
62+
<template #label="{ label, value }">
63+
<el-space :size="8">
64+
<span
65+
class="select-model-icon"
66+
:innerHTML="relatedObject(providerOptions, getModelProvider(value), 'provider')?.icon"
67+
>
68+
</span>
69+
<span>
70+
<span>{{
71+
relatedObject(providerOptions, getModelProvider(value), 'provider')?.name
72+
}}</span>
73+
<span>/</span>
74+
<span>{{ label }}</span>
75+
</span>
76+
</el-space>
6777
</template>
6878

6979
<template #footer v-if="showFooter">
@@ -97,7 +107,7 @@ import type { Provider } from '@/api/type/model'
97107
import { relatedObject } from '@/utils/array'
98108
import CreateModelDialog from '@/views/model/component/CreateModelDialog.vue'
99109
import SelectProviderDialog from '@/views/model/component/SelectProviderDialog.vue'
100-
110+
import { flatMap } from 'lodash'
101111
import { t } from '@/locales'
102112
import useStore from '@/stores'
103113
import permissionMap from '@/permission'
@@ -151,6 +161,12 @@ const openCreateModel = (provider?: Provider, model_type?: string) => {
151161
selectProviderRef.value?.open(model_type)
152162
}
153163
}
164+
const getModelProvider = computed(() => {
165+
return (id: string) => {
166+
const item = flatMap(props.options)?.find((item: any) => item.id === id)
167+
return (item as any)?.provider || ''
168+
}
169+
})
154170
155171
function submitModel() {
156172
emit('submitModel')
@@ -169,10 +185,6 @@ onMounted(() => {
169185
}
170186
}
171187
172-
.model-icon {
173-
width: 18px;
174-
}
175-
176188
.check-icon {
177189
position: absolute;
178190
right: 10px;

‎ui/src/locales/lang/en-US/dynamics-form.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -130,4 +130,14 @@ export default {
130130
popover_default: 'Is Default',
131131
},
132132
},
133+
ModelConstructor: {
134+
optionalModel: {
135+
label: 'Optional Model',
136+
required: 'Please select optional models',
137+
},
138+
defaultModel: {
139+
label: 'Default Model',
140+
required: 'Please select a default model',
141+
},
142+
},
133143
}

‎ui/src/locales/lang/zh-CN/dynamics-form.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -129,4 +129,14 @@ export default {
129129
popover_default: '是否为默认值',
130130
},
131131
},
132+
ModelConstructor: {
133+
optionalModel: {
134+
label: '可选模型',
135+
required: '请选择可选模型',
136+
},
137+
defaultModel: {
138+
label: '默认模型',
139+
required: '请选择默认模型',
140+
},
141+
},
132142
}

‎ui/src/locales/lang/zh-Hant/dynamics-form.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -130,4 +130,14 @@ export default {
130130
popover_default: '是否為預設值',
131131
},
132132
},
133+
ModelConstructor: {
134+
optionalModel: {
135+
label: '可選模型',
136+
required: '請選擇可選模型',
137+
},
138+
defaultModel: {
139+
label: '默認模型',
140+
required: '請選擇默認模型',
141+
},
142+
},
133143
}

‎ui/src/styles/app.scss‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -594,3 +594,18 @@ h5 {
594594
transform: rotate(45deg);
595595
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.08);
596596
}
597+
598+
// select-model
599+
.select-model-icon {
600+
width: 18px;
601+
height: 18px;
602+
display: inline-block;
603+
object-fit: contain;
604+
}
605+
.el-select__tags-text {
606+
.select-model-icon {
607+
width: 14px;
608+
height: 14px;
609+
display: inline-block;
610+
}
611+
}

‎ui/src/workflow/nodes/base-node/component/UserFieldFormDialog.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
:destroy-on-close="true"
88
:before-close="close"
99
append-to-body
10+
align-center
1011
>
1112
<DynamicsFormConstructor
1213
v-model="currentRow"

0 commit comments

Comments
 (0)