panyy
/
UnisKB
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add generate prompt button and improve code formatting in index.vue

v3.2
wxg0103 2025-10-28 15:11:04 +08:00
parent e6b67274a3
commit e9db3a598c
2 changed files with 98 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
ui/src/workflow/nodes/image-understand/index.vue
View File

@ -26,7 +26,8 @@
<div class="flex-between w-full"> <div class="flex-between w-full">
<div> <div>
<span <span
>{{ t('views.applicationWorkflow.nodes.imageUnderstandNode.model.label') >{{
t('views.applicationWorkflow.nodes.imageUnderstandNode.model.label')
}}<span class="color-danger">*</span></span }}<span class="color-danger">*</span></span
> >
</div> </div>
@ -68,6 +69,14 @@
<AppIcon iconName="app-warning" class="app-warning-icon ml-4"></AppIcon> <AppIcon iconName="app-warning" class="app-warning-icon ml-4"></AppIcon>
</el-tooltip> </el-tooltip>
</div> </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> </div>
</template> </template>
<MdEditorMagnify <MdEditorMagnify
@ -91,12 +100,13 @@
<div class="flex align-center"> <div class="flex align-center">
<div class="mr-4"> <div class="mr-4">
<span <span
>{{ $t('views.application.form.prompt.label') >{{
$t('views.application.form.prompt.label')
}}<span class="color-danger">*</span></span }}<span class="color-danger">*</span></span
> >
</div> </div>
<el-tooltip effect="dark" placement="right" popper-class="max-w-200"> <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> <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
</el-tooltip> </el-tooltip>
</div> </div>
@ -115,8 +125,8 @@
<div class="flex-between"> <div class="flex-between">
<div>{{ $t('views.application.form.historyRecord.label') }}</div> <div>{{ $t('views.application.form.historyRecord.label') }}</div>
<el-select v-model="form_data.dialogue_type" type="small" style="width: 100px"> <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.node')" value="NODE"/>
<el-option :label="$t('views.applicationWorkflow.workflow')" value="WORKFLOW" /> <el-option :label="$t('views.applicationWorkflow.workflow')" value="WORKFLOW"/>
</el-select> </el-select>
</div> </div>
</template> </template>
@ -142,7 +152,8 @@
}" }"
> >
<template #label <template #label
>{{ $t('views.applicationWorkflow.nodes.imageUnderstandNode.image.label') >{{
$t('views.applicationWorkflow.nodes.imageUnderstandNode.image.label')
}}<span class="color-danger">*</span></template }}<span class="color-danger">*</span></template
> >
<NodeCascader <NodeCascader
@ -163,8 +174,8 @@
<div class="flex align-center"> <div class="flex align-center">
<div class="mr-4"> <div class="mr-4">
<span>{{ <span>{{
$t('views.applicationWorkflow.nodes.aiChatNode.returnContent.label') $t('views.applicationWorkflow.nodes.aiChatNode.returnContent.label')
}}</span> }}</span>
</div> </div>
<el-tooltip effect="dark" placement="right" popper-class="max-w-200"> <el-tooltip effect="dark" placement="right" popper-class="max-w-200">
<template #content> <template #content>
@ -174,29 +185,32 @@
</el-tooltip> </el-tooltip>
</div> </div>
</template> </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-item>
</el-form> </el-form>
</el-card> </el-card>
<AIModeParamSettingDialog ref="AIModeParamSettingDialogRef" @refresh="refreshParam" /> <AIModeParamSettingDialog ref="AIModeParamSettingDialogRef" @refresh="refreshParam"/>
<GeneratePromptDialog @replace="replace" ref="GeneratePromptDialogRef"/>
</NodeContainer> </NodeContainer>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import NodeContainer from '@/workflow/common/NodeContainer.vue' import NodeContainer from '@/workflow/common/NodeContainer.vue'
import { computed, onMounted, ref, inject } from 'vue' import {computed, onMounted, ref, inject} from 'vue'
import { groupBy, set } from 'lodash' import {groupBy, set} from 'lodash'
import NodeCascader from '@/workflow/common/NodeCascader.vue' 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 AIModeParamSettingDialog from '@/views/application/component/AIModeParamSettingDialog.vue'
import { t } from '@/locales' import {t} from '@/locales'
import { useRoute } from 'vue-router' import {useRoute} from 'vue-router'
import { loadSharedApi } from '@/utils/dynamics-api/shared-api' import {loadSharedApi} from '@/utils/dynamics-api/shared-api'
import GeneratePromptDialog from "@/views/application/component/GeneratePromptDialog.vue";
const getApplicationDetail = inject('getApplicationDetail') as any const getApplicationDetail = inject('getApplicationDetail') as any
const route = useRoute() const route = useRoute()
const { const {
params: { id }, params: {id},
} = route as any } = route as any
const apiType = computed(() => { const apiType = computed(() => {
@ -218,7 +232,7 @@ const validate = () => {
nodeCascaderRef.value ? nodeCascaderRef.value.validate() : Promise.resolve(''), nodeCascaderRef.value ? nodeCascaderRef.value.validate() : Promise.resolve(''),
aiChatNodeFormRef.value?.validate(), aiChatNodeFormRef.value?.validate(),
]).catch((err: any) => { ]).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() const application = getApplicationDetail()
function getSelectModel() { function getSelectModel() {
const obj = const obj =
apiType.value === 'systemManage' apiType.value === 'systemManage'
? { ? {
model_type: 'IMAGE', model_type: 'IMAGE',
workspace_id: application.value?.workspace_id, workspace_id: application.value?.workspace_id,
} }
: { : {
model_type: 'IMAGE', model_type: 'IMAGE',
} }
loadSharedApi({ type: 'model', systemType: apiType.value }) loadSharedApi({type: 'model', systemType: apiType.value})
.getSelectModelList(obj) .getSelectModelList(obj)
.then((res: any) => { .then((res: any) => {
modelOptions.value = groupBy(res?.data, 'provider') modelOptions.value = groupBy(res?.data, 'provider')
@ -296,6 +311,16 @@ function refreshParam(data: any) {
set(props.nodeModel.properties.node_data, 'model_params_setting', data) 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(() => { onMounted(() => {
getSelectModel() getSelectModel()

73
ui/src/workflow/nodes/video-understand/index.vue
View File

@ -26,7 +26,8 @@
<div class="flex-between w-full"> <div class="flex-between w-full">
<div> <div>
<span <span
>{{ t('views.applicationWorkflow.nodes.videoUnderstandNode.model.label') >{{
t('views.applicationWorkflow.nodes.videoUnderstandNode.model.label')
}}<span class="color-danger">*</span></span }}<span class="color-danger">*</span></span
> >
</div> </div>
@ -68,6 +69,14 @@
<AppIcon iconName="app-warning" class="app-warning-icon ml-4"></AppIcon> <AppIcon iconName="app-warning" class="app-warning-icon ml-4"></AppIcon>
</el-tooltip> </el-tooltip>
</div> </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> </div>
</template> </template>
<MdEditorMagnify <MdEditorMagnify
@ -91,15 +100,17 @@
<div class="flex align-center"> <div class="flex align-center">
<div class="mr-4"> <div class="mr-4">
<span <span
>{{ $t('views.application.form.prompt.label') >{{
$t('views.application.form.prompt.label')
}}<span class="color-danger">*</span></span }}<span class="color-danger">*</span></span
> >
</div> </div>
<el-tooltip effect="dark" placement="right" popper-class="max-w-200"> <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> <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
</el-tooltip> </el-tooltip>
</div> </div>
</template> </template>
<MdEditorMagnify <MdEditorMagnify
@wheel="wheel" @wheel="wheel"
@ -115,8 +126,8 @@
<div class="flex-between"> <div class="flex-between">
<div>{{ $t('views.application.form.historyRecord.label') }}</div> <div>{{ $t('views.application.form.historyRecord.label') }}</div>
<el-select v-model="form_data.dialogue_type" type="small" style="width: 100px"> <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.node')" value="NODE"/>
<el-option :label="$t('views.applicationWorkflow.workflow')" value="WORKFLOW" /> <el-option :label="$t('views.applicationWorkflow.workflow')" value="WORKFLOW"/>
</el-select> </el-select>
</div> </div>
</template> </template>
@ -142,7 +153,8 @@
}" }"
> >
<template #label <template #label
>{{ $t('views.applicationWorkflow.nodes.videoUnderstandNode.image.label') >{{
$t('views.applicationWorkflow.nodes.videoUnderstandNode.image.label')
}}<span class="color-danger">*</span></template }}<span class="color-danger">*</span></template
> >
<NodeCascader <NodeCascader
@ -163,8 +175,8 @@
<div class="flex align-center"> <div class="flex align-center">
<div class="mr-4"> <div class="mr-4">
<span>{{ <span>{{
$t('views.applicationWorkflow.nodes.aiChatNode.returnContent.label') $t('views.applicationWorkflow.nodes.aiChatNode.returnContent.label')
}}</span> }}</span>
</div> </div>
<el-tooltip effect="dark" placement="right" popper-class="max-w-200"> <el-tooltip effect="dark" placement="right" popper-class="max-w-200">
<template #content> <template #content>
@ -174,29 +186,32 @@
</el-tooltip> </el-tooltip>
</div> </div>
</template> </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-item>
</el-form> </el-form>
</el-card> </el-card>
<AIModeParamSettingDialog ref="AIModeParamSettingDialogRef" @refresh="refreshParam" /> <AIModeParamSettingDialog ref="AIModeParamSettingDialogRef" @refresh="refreshParam"/>
<GeneratePromptDialog @replace="replace" ref="GeneratePromptDialogRef"/>
</NodeContainer> </NodeContainer>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import NodeContainer from '@/workflow/common/NodeContainer.vue' import NodeContainer from '@/workflow/common/NodeContainer.vue'
import { computed, onMounted, ref, inject } from 'vue' import {computed, onMounted, ref, inject} from 'vue'
import { groupBy, set } from 'lodash' import {groupBy, set} from 'lodash'
import NodeCascader from '@/workflow/common/NodeCascader.vue' 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 AIModeParamSettingDialog from '@/views/application/component/AIModeParamSettingDialog.vue'
import { t } from '@/locales' import {t} from '@/locales'
import { useRoute } from 'vue-router' import {useRoute} from 'vue-router'
import { loadSharedApi } from '@/utils/dynamics-api/shared-api' import {loadSharedApi} from '@/utils/dynamics-api/shared-api'
import GeneratePromptDialog from "@/views/application/component/GeneratePromptDialog.vue";
const getApplicationDetail = inject('getApplicationDetail') as any const getApplicationDetail = inject('getApplicationDetail') as any
const route = useRoute() const route = useRoute()
const { const {
params: { id }, params: {id},
} = route as any } = route as any
const apiType = computed(() => { const apiType = computed(() => {
@ -218,7 +233,7 @@ const validate = () => {
nodeCascaderRef.value ? nodeCascaderRef.value.validate() : Promise.resolve(''), nodeCascaderRef.value ? nodeCascaderRef.value.validate() : Promise.resolve(''),
aiChatNodeFormRef.value?.validate(), aiChatNodeFormRef.value?.validate(),
]).catch((err: any) => { ]).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() const application = getApplicationDetail()
function getSelectModel() { function getSelectModel() {
const obj = const obj =
apiType.value === 'systemManage' apiType.value === 'systemManage'
? { ? {
model_type: 'IMAGE', model_type: 'IMAGE',
workspace_id: application.value?.workspace_id, workspace_id: application.value?.workspace_id,
} }
: { : {
model_type: 'IMAGE', model_type: 'IMAGE',
} }
loadSharedApi({ type: 'model', systemType: apiType.value }) loadSharedApi({type: 'model', systemType: apiType.value})
.getSelectModelList(obj) .getSelectModelList(obj)
.then((res: any) => { .then((res: any) => {
modelOptions.value = groupBy(res?.data, 'provider') 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) 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) { function refreshParam(data: any) {
set(props.nodeModel.properties.node_data, 'model_params_setting', data) set(props.nodeModel.properties.node_data, 'model_params_setting', data)