mirror of
https://github.com/1Panel-dev/MaxKB.git
synced 2025-12-26 10:12:51 +00:00
feat: add generate prompt button and improve code formatting in index.vue
This commit is contained in:
wxg0103
parent
e6b67274a3
commit
e9db3a598c
|
|
@ -26,7 +26,8 @@
|
|||
<div class="flex-between w-full">
|
||||
<div>
|
||||
<span
|
||||
>{{ t('views.applicationWorkflow.nodes.imageUnderstandNode.model.label')
|
||||
>{{
|
||||
t('views.applicationWorkflow.nodes.imageUnderstandNode.model.label')
|
||||
}}<span class="color-danger">*</span></span
|
||||
>
|
||||
</div>
|
||||
|
|
@ -68,6 +69,14 @@
|
|||
<AppIcon iconName="app-warning" class="app-warning-icon ml-4"></AppIcon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<el-button
|
||||
type="primary"
|
||||
link
|
||||
@click="openGeneratePromptDialog(form_data.model_id)"
|
||||
:disabled="!form_data.model_id"
|
||||
>
|
||||
<AppIcon iconName="app-generate-star"></AppIcon>
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<MdEditorMagnify
|
||||
|
|
@ -91,12 +100,13 @@
|
|||
<div class="flex align-center">
|
||||
<div class="mr-4">
|
||||
<span
|
||||
>{{ $t('views.application.form.prompt.label')
|
||||
>{{
|
||||
$t('views.application.form.prompt.label')
|
||||
}}<span class="color-danger">*</span></span
|
||||
>
|
||||
</div>
|
||||
<el-tooltip effect="dark" placement="right" popper-class="max-w-200">
|
||||
<template #content>{{ $t('views.application.form.prompt.tooltip') }} </template>
|
||||
<template #content>{{ $t('views.application.form.prompt.tooltip') }}</template>
|
||||
<AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
|
|
@ -115,8 +125,8 @@
|
|||
<div class="flex-between">
|
||||
<div>{{ $t('views.application.form.historyRecord.label') }}</div>
|
||||
<el-select v-model="form_data.dialogue_type" type="small" style="width: 100px">
|
||||
<el-option :label="$t('views.applicationWorkflow.node')" value="NODE" />
|
||||
<el-option :label="$t('views.applicationWorkflow.workflow')" value="WORKFLOW" />
|
||||
<el-option :label="$t('views.applicationWorkflow.node')" value="NODE"/>
|
||||
<el-option :label="$t('views.applicationWorkflow.workflow')" value="WORKFLOW"/>
|
||||
</el-select>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -142,7 +152,8 @@
|
|||
}"
|
||||
>
|
||||
<template #label
|
||||
>{{ $t('views.applicationWorkflow.nodes.imageUnderstandNode.image.label')
|
||||
>{{
|
||||
$t('views.applicationWorkflow.nodes.imageUnderstandNode.image.label')
|
||||
}}<span class="color-danger">*</span></template
|
||||
>
|
||||
<NodeCascader
|
||||
|
|
@ -163,8 +174,8 @@
|
|||
<div class="flex align-center">
|
||||
<div class="mr-4">
|
||||
<span>{{
|
||||
$t('views.applicationWorkflow.nodes.aiChatNode.returnContent.label')
|
||||
}}</span>
|
||||
$t('views.applicationWorkflow.nodes.aiChatNode.returnContent.label')
|
||||
}}</span>
|
||||
</div>
|
||||
<el-tooltip effect="dark" placement="right" popper-class="max-w-200">
|
||||
<template #content>
|
||||
|
|
@ -174,29 +185,32 @@
|
|||
</el-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
<el-switch size="small" v-model="form_data.is_result" />
|
||||
<el-switch size="small" v-model="form_data.is_result"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
<AIModeParamSettingDialog ref="AIModeParamSettingDialogRef" @refresh="refreshParam" />
|
||||
<AIModeParamSettingDialog ref="AIModeParamSettingDialogRef" @refresh="refreshParam"/>
|
||||
<GeneratePromptDialog @replace="replace" ref="GeneratePromptDialogRef"/>
|
||||
</NodeContainer>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import NodeContainer from '@/workflow/common/NodeContainer.vue'
|
||||
import { computed, onMounted, ref, inject } from 'vue'
|
||||
import { groupBy, set } from 'lodash'
|
||||
import {computed, onMounted, ref, inject} from 'vue'
|
||||
import {groupBy, set} from 'lodash'
|
||||
import NodeCascader from '@/workflow/common/NodeCascader.vue'
|
||||
import type { FormInstance } from 'element-plus'
|
||||
import type {FormInstance} from 'element-plus'
|
||||
import AIModeParamSettingDialog from '@/views/application/component/AIModeParamSettingDialog.vue'
|
||||
import { t } from '@/locales'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { loadSharedApi } from '@/utils/dynamics-api/shared-api'
|
||||
import {t} from '@/locales'
|
||||
import {useRoute} from 'vue-router'
|
||||
import {loadSharedApi} from '@/utils/dynamics-api/shared-api'
|
||||
import GeneratePromptDialog from "@/views/application/component/GeneratePromptDialog.vue";
|
||||
|
||||
const getApplicationDetail = inject('getApplicationDetail') as any
|
||||
const route = useRoute()
|
||||
|
||||
const {
|
||||
params: { id },
|
||||
params: {id},
|
||||
} = route as any
|
||||
|
||||
const apiType = computed(() => {
|
||||
|
|
@ -218,7 +232,7 @@ const validate = () => {
|
|||
nodeCascaderRef.value ? nodeCascaderRef.value.validate() : Promise.resolve(''),
|
||||
aiChatNodeFormRef.value?.validate(),
|
||||
]).catch((err: any) => {
|
||||
return Promise.reject({ node: props.nodeModel, errMessage: err })
|
||||
return Promise.reject({node: props.nodeModel, errMessage: err})
|
||||
})
|
||||
}
|
||||
|
||||
|
|
@ -261,17 +275,18 @@ const form_data = computed({
|
|||
})
|
||||
|
||||
const application = getApplicationDetail()
|
||||
|
||||
function getSelectModel() {
|
||||
const obj =
|
||||
apiType.value === 'systemManage'
|
||||
? {
|
||||
model_type: 'IMAGE',
|
||||
workspace_id: application.value?.workspace_id,
|
||||
}
|
||||
model_type: 'IMAGE',
|
||||
workspace_id: application.value?.workspace_id,
|
||||
}
|
||||
: {
|
||||
model_type: 'IMAGE',
|
||||
}
|
||||
loadSharedApi({ type: 'model', systemType: apiType.value })
|
||||
model_type: 'IMAGE',
|
||||
}
|
||||
loadSharedApi({type: 'model', systemType: apiType.value})
|
||||
.getSelectModelList(obj)
|
||||
.then((res: any) => {
|
||||
modelOptions.value = groupBy(res?.data, 'provider')
|
||||
|
|
@ -296,6 +311,16 @@ function refreshParam(data: any) {
|
|||
set(props.nodeModel.properties.node_data, 'model_params_setting', data)
|
||||
}
|
||||
|
||||
const GeneratePromptDialogRef = ref<InstanceType<typeof GeneratePromptDialog>>()
|
||||
const openGeneratePromptDialog = (modelId: string) => {
|
||||
if (modelId) {
|
||||
GeneratePromptDialogRef.value?.open(modelId, id)
|
||||
}
|
||||
}
|
||||
const replace = (v: any) => {
|
||||
set(props.nodeModel.properties.node_data, 'system', v)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getSelectModel()
|
||||
|
||||
|
|
|
|||
|
|
@ -26,7 +26,8 @@
|
|||
<div class="flex-between w-full">
|
||||
<div>
|
||||
<span
|
||||
>{{ t('views.applicationWorkflow.nodes.videoUnderstandNode.model.label')
|
||||
>{{
|
||||
t('views.applicationWorkflow.nodes.videoUnderstandNode.model.label')
|
||||
}}<span class="color-danger">*</span></span
|
||||
>
|
||||
</div>
|
||||
|
|
@ -68,6 +69,14 @@
|
|||
<AppIcon iconName="app-warning" class="app-warning-icon ml-4"></AppIcon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<el-button
|
||||
type="primary"
|
||||
link
|
||||
@click="openGeneratePromptDialog(form_data.model_id)"
|
||||
:disabled="!form_data.model_id"
|
||||
>
|
||||
<AppIcon iconName="app-generate-star"></AppIcon>
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<MdEditorMagnify
|
||||
|
|
@ -91,15 +100,17 @@
|
|||
<div class="flex align-center">
|
||||
<div class="mr-4">
|
||||
<span
|
||||
>{{ $t('views.application.form.prompt.label')
|
||||
>{{
|
||||
$t('views.application.form.prompt.label')
|
||||
}}<span class="color-danger">*</span></span
|
||||
>
|
||||
</div>
|
||||
<el-tooltip effect="dark" placement="right" popper-class="max-w-200">
|
||||
<template #content>{{ $t('views.application.form.prompt.tooltip') }} </template>
|
||||
<template #content>{{ $t('views.application.form.prompt.tooltip') }}</template>
|
||||
<AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<MdEditorMagnify
|
||||
@wheel="wheel"
|
||||
|
|
@ -115,8 +126,8 @@
|
|||
<div class="flex-between">
|
||||
<div>{{ $t('views.application.form.historyRecord.label') }}</div>
|
||||
<el-select v-model="form_data.dialogue_type" type="small" style="width: 100px">
|
||||
<el-option :label="$t('views.applicationWorkflow.node')" value="NODE" />
|
||||
<el-option :label="$t('views.applicationWorkflow.workflow')" value="WORKFLOW" />
|
||||
<el-option :label="$t('views.applicationWorkflow.node')" value="NODE"/>
|
||||
<el-option :label="$t('views.applicationWorkflow.workflow')" value="WORKFLOW"/>
|
||||
</el-select>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -142,7 +153,8 @@
|
|||
}"
|
||||
>
|
||||
<template #label
|
||||
>{{ $t('views.applicationWorkflow.nodes.videoUnderstandNode.image.label')
|
||||
>{{
|
||||
$t('views.applicationWorkflow.nodes.videoUnderstandNode.image.label')
|
||||
}}<span class="color-danger">*</span></template
|
||||
>
|
||||
<NodeCascader
|
||||
|
|
@ -163,8 +175,8 @@
|
|||
<div class="flex align-center">
|
||||
<div class="mr-4">
|
||||
<span>{{
|
||||
$t('views.applicationWorkflow.nodes.aiChatNode.returnContent.label')
|
||||
}}</span>
|
||||
$t('views.applicationWorkflow.nodes.aiChatNode.returnContent.label')
|
||||
}}</span>
|
||||
</div>
|
||||
<el-tooltip effect="dark" placement="right" popper-class="max-w-200">
|
||||
<template #content>
|
||||
|
|
@ -174,29 +186,32 @@
|
|||
</el-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
<el-switch size="small" v-model="form_data.is_result" />
|
||||
<el-switch size="small" v-model="form_data.is_result"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
<AIModeParamSettingDialog ref="AIModeParamSettingDialogRef" @refresh="refreshParam" />
|
||||
<AIModeParamSettingDialog ref="AIModeParamSettingDialogRef" @refresh="refreshParam"/>
|
||||
<GeneratePromptDialog @replace="replace" ref="GeneratePromptDialogRef"/>
|
||||
</NodeContainer>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import NodeContainer from '@/workflow/common/NodeContainer.vue'
|
||||
import { computed, onMounted, ref, inject } from 'vue'
|
||||
import { groupBy, set } from 'lodash'
|
||||
import {computed, onMounted, ref, inject} from 'vue'
|
||||
import {groupBy, set} from 'lodash'
|
||||
import NodeCascader from '@/workflow/common/NodeCascader.vue'
|
||||
import type { FormInstance } from 'element-plus'
|
||||
import type {FormInstance} from 'element-plus'
|
||||
import AIModeParamSettingDialog from '@/views/application/component/AIModeParamSettingDialog.vue'
|
||||
import { t } from '@/locales'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { loadSharedApi } from '@/utils/dynamics-api/shared-api'
|
||||
import {t} from '@/locales'
|
||||
import {useRoute} from 'vue-router'
|
||||
import {loadSharedApi} from '@/utils/dynamics-api/shared-api'
|
||||
import GeneratePromptDialog from "@/views/application/component/GeneratePromptDialog.vue";
|
||||
|
||||
const getApplicationDetail = inject('getApplicationDetail') as any
|
||||
const route = useRoute()
|
||||
|
||||
const {
|
||||
params: { id },
|
||||
params: {id},
|
||||
} = route as any
|
||||
|
||||
const apiType = computed(() => {
|
||||
|
|
@ -218,7 +233,7 @@ const validate = () => {
|
|||
nodeCascaderRef.value ? nodeCascaderRef.value.validate() : Promise.resolve(''),
|
||||
aiChatNodeFormRef.value?.validate(),
|
||||
]).catch((err: any) => {
|
||||
return Promise.reject({ node: props.nodeModel, errMessage: err })
|
||||
return Promise.reject({node: props.nodeModel, errMessage: err})
|
||||
})
|
||||
}
|
||||
|
||||
|
|
@ -261,17 +276,18 @@ const form_data = computed({
|
|||
})
|
||||
|
||||
const application = getApplicationDetail()
|
||||
|
||||
function getSelectModel() {
|
||||
const obj =
|
||||
apiType.value === 'systemManage'
|
||||
? {
|
||||
model_type: 'IMAGE',
|
||||
workspace_id: application.value?.workspace_id,
|
||||
}
|
||||
model_type: 'IMAGE',
|
||||
workspace_id: application.value?.workspace_id,
|
||||
}
|
||||
: {
|
||||
model_type: 'IMAGE',
|
||||
}
|
||||
loadSharedApi({ type: 'model', systemType: apiType.value })
|
||||
model_type: 'IMAGE',
|
||||
}
|
||||
loadSharedApi({type: 'model', systemType: apiType.value})
|
||||
.getSelectModelList(obj)
|
||||
.then((res: any) => {
|
||||
modelOptions.value = groupBy(res?.data, 'provider')
|
||||
|
|
@ -291,6 +307,15 @@ const openAIParamSettingDialog = (modelId: string) => {
|
|||
AIModeParamSettingDialogRef.value?.open(modelId, id, form_data.value.model_params_setting)
|
||||
}
|
||||
}
|
||||
const GeneratePromptDialogRef = ref<InstanceType<typeof GeneratePromptDialog>>()
|
||||
const openGeneratePromptDialog = (modelId: string) => {
|
||||
if (modelId) {
|
||||
GeneratePromptDialogRef.value?.open(modelId, id)
|
||||
}
|
||||
}
|
||||
const replace = (v: any) => {
|
||||
set(props.nodeModel.properties.node_data, 'system', v)
|
||||
}
|
||||
|
||||
function refreshParam(data: any) {
|
||||
set(props.nodeModel.properties.node_data, 'model_params_setting', data)
|
||||
|
|
|
|||
Loading…
Reference in New Issue