diff --git a/ui/src/locales/lang/en-US/common.ts b/ui/src/locales/lang/en-US/common.ts
index 7c2996d3561..e8fbb87e9b4 100644
--- a/ui/src/locales/lang/en-US/common.ts
+++ b/ui/src/locales/lang/en-US/common.ts
@@ -57,5 +57,6 @@ export default {
inputPlaceholder: 'Please input',
title: 'Title',
- content: 'Content'
+ content: 'Content',
+ rename: 'Rename'
}
diff --git a/ui/src/locales/lang/en-US/views/application-workflow.ts b/ui/src/locales/lang/en-US/views/application-workflow.ts
index 3ac6c265c83..6e1aa8c673c 100644
--- a/ui/src/locales/lang/en-US/views/application-workflow.ts
+++ b/ui/src/locales/lang/en-US/views/application-workflow.ts
@@ -1,5 +1,6 @@
export default {
node: 'Node',
+ nodeName: 'Node Name',
baseComponent: 'Basic',
nodeSetting: 'Node Settings',
workflow: 'Workflow',
diff --git a/ui/src/locales/lang/zh-CN/common.ts b/ui/src/locales/lang/zh-CN/common.ts
index 1bd88784f5c..cdcde3d6072 100644
--- a/ui/src/locales/lang/zh-CN/common.ts
+++ b/ui/src/locales/lang/zh-CN/common.ts
@@ -56,5 +56,6 @@ export default {
param: {
outputParam: '输出参数',
inputParam:'输入参数'
- }
+ },
+ rename:'重命名'
}
diff --git a/ui/src/locales/lang/zh-CN/views/application-workflow.ts b/ui/src/locales/lang/zh-CN/views/application-workflow.ts
index 95d73605fd7..010964bb004 100644
--- a/ui/src/locales/lang/zh-CN/views/application-workflow.ts
+++ b/ui/src/locales/lang/zh-CN/views/application-workflow.ts
@@ -1,5 +1,6 @@
export default {
node: '节点',
+ nodeName: '节点名称',
baseComponent: '基础组件',
nodeSetting: '节点设置',
workflow: '工作流',
diff --git a/ui/src/locales/lang/zh-Hant/common.ts b/ui/src/locales/lang/zh-Hant/common.ts
index 9adcf372b25..3281456de96 100644
--- a/ui/src/locales/lang/zh-Hant/common.ts
+++ b/ui/src/locales/lang/zh-Hant/common.ts
@@ -55,6 +55,7 @@ export default {
content: '内容',
param: {
outputParam: '輸出參數',
- inputParam:'輸入參數'
- }
+ inputParam: '輸入參數'
+ },
+ rename: '重命名'
}
diff --git a/ui/src/locales/lang/zh-Hant/views/application-workflow.ts b/ui/src/locales/lang/zh-Hant/views/application-workflow.ts
index e3491eb77f7..b8cf464693a 100644
--- a/ui/src/locales/lang/zh-Hant/views/application-workflow.ts
+++ b/ui/src/locales/lang/zh-Hant/views/application-workflow.ts
@@ -1,5 +1,6 @@
export default {
node: '節點',
+ nodeName: '節點名稱',
baseComponent: '基礎組件',
nodeSetting: '節點設置',
workflow: '工作流',
diff --git a/ui/src/workflow/common/NodeContainer.vue b/ui/src/workflow/common/NodeContainer.vue
index 82665934595..265634ad016 100644
--- a/ui/src/workflow/common/NodeContainer.vue
+++ b/ui/src/workflow/common/NodeContainer.vue
@@ -7,28 +7,14 @@
>
<div v-resize="resizeStepContainer">
<div class="flex-between">
- <div
- class="flex align-center"
- :style="{ maxWidth: node_status == 200 ? 'calc(100% - 85px)' : 'calc(100% - 85px)' }"
- >
+ <div class="flex align-center" style="width: 70%;">
<component
:is="iconComponent(`${nodeModel.type}-icon`)"
class="mr-8"
:size="24"
:item="nodeModel?.properties.node_data"
/>
- <h4 v-if="showOperate(nodeModel.type)" style="max-width: 90%">
- <ReadWrite
- @mousemove.stop
- @mousedown.stop
- @keydown.stop
- @click.stop
- @change="editName"
- :data="nodeModel.properties.stepName"
- trigger="dblclick"
- />
- </h4>
- <h4 v-else>{{ nodeModel.properties.stepName }}</h4>
+ <h4 class="ellipsis-1 break-all">{{ nodeModel.properties.stepName }}</h4>
</div>
<div @mousemove.stop @mousedown.stop @keydown.stop @click.stop>
@@ -70,6 +56,9 @@
</el-button>
<template #dropdown>
<el-dropdown-menu style="min-width: 80px">
+ <el-dropdown-item @click="renameNode" class="p-8">{{
+ $t('common.rename')
+ }}</el-dropdown-item>
<el-dropdown-item @click="copyNode" class="p-8">{{
$t('common.copy')
}}</el-dropdown-item>
@@ -138,6 +127,40 @@
@clickNodes="clickNodes"
/>
</el-collapse-transition>
+
+ <el-dialog
+ :title="$t('views.applicationWorkflow.nodeName')"
+ v-model="nodeNameDialogVisible"
+ :close-on-click-modal="false"
+ :close-on-press-escape="false"
+ :destroy-on-close="true"
+ append-to-body
+ >
+ <el-form label-position="top" ref="titleFormRef" :model="form">
+ <el-form-item
+ prop="title"
+ :rules="[
+ {
+ required: true,
+ message: $t('common.inputPlaceholder'),
+ trigger: 'blur'
+ }
+ ]"
+ >
+ <el-input v-model="form.title" @blur="form.title = form.title.trim()" />
+ </el-form-item>
+ </el-form>
+ <template #footer>
+ <span class="dialog-footer">
+ <el-button @click.prevent="nodeNameDialogVisible = false">
+ {{ $t('common.cancel') }}
+ </el-button>
+ <el-button type="primary" @click="editName(titleFormRef)">
+ {{ $t('common.save') }}
+ </el-button>
+ </span>
+ </template>
+ </el-dialog>
</div>
</template>
<script setup lang="ts">
@@ -149,6 +172,7 @@ import { iconComponent } from '../icons/utils'
import { copyClick } from '@/utils/clipboard'
import { WorkflowType } from '@/enums/workflow'
import { MsgError, MsgConfirm } from '@/utils/message'
+import type { FormInstance } from 'element-plus'
import { t } from '@/locales'
const {
params: { id }
@@ -165,6 +189,11 @@ const height = ref<{
})
const showAnchor = ref<boolean>(false)
const anchorData = ref<any>()
+const titleFormRef = ref()
+const nodeNameDialogVisible = ref<boolean>(false)
+const form = ref<any>({
+ title: ''
+})
const condition = computed({
set: (v) => {
@@ -190,6 +219,7 @@ const showNode = computed({
return true
}
})
+
const handleWheel = (event: any) => {
const isCombinationKeyPressed = event.ctrlKey || event.metaKey
if (!isCombinationKeyPressed) {
@@ -202,19 +232,30 @@ const node_status = computed(() => {
}
return 200
})
-function editName(val: string) {
- if (val.trim() && val.trim() !== props.nodeModel.properties.stepName) {
- if (
- !props.nodeModel.graphModel.nodes?.some(
- (node: any) => node.properties.stepName === val.trim()
- )
- ) {
- set(props.nodeModel.properties, 'stepName', val.trim())
- } else {
- MsgError(t('views.applicationWorkflow.tip.repeatedNodeError'))
+
+function renameNode() {
+ form.value.title = props.nodeModel.properties.stepName
+ nodeNameDialogVisible.value = true
+}
+const editName = async (formEl: FormInstance | undefined) => {
+ if (!formEl) return
+ await formEl.validate((valid) => {
+ if (valid) {
+ if (
+ !props.nodeModel.graphModel.nodes?.some(
+ (node: any) => node.properties.stepName === form.value.title
+ )
+ ) {
+ set(props.nodeModel.properties, 'stepName', form.value.title)
+ nodeNameDialogVisible.value = false
+ formEl.resetFields()
+ } else {
+ MsgError(t('views.applicationWorkflow.tip.repeatedNodeError'))
+ }
}
- }
+ })
}
+
const mousedown = () => {
props.nodeModel.graphModel.clearSelectElements()
set(props.nodeModel, 'isSelected', true)
diff --git a/ui/src/workflow/nodes/variable-assign-node/index.vue b/ui/src/workflow/nodes/variable-assign-node/index.vue
index 4c24bd6c7fc..ecd8fd31ba1 100644
--- a/ui/src/workflow/nodes/variable-assign-node/index.vue
+++ b/ui/src/workflow/nodes/variable-assign-node/index.vue
@@ -39,7 +39,7 @@
<div class="flex-between">
<div>
<span
- >{{ $t('views.applicationWorkflow.nodes.variableAssignNode.assign')
+ >{{ $t('views.applicationWorkflow.nodes.variableAssignNode.assign')
}}<span class="danger">*</span></span
>
</div>
@@ -60,77 +60,83 @@
</el-select>
</div>
</template>
- </el-form-item>
- <div v-if="item.source === 'custom'" class="flex">
- <el-row :gutter="8">
- <el-col :span="8">
- <el-select v-model="item.type" style="width: 130px;">
- <el-option v-for="item in typeOptions" :key="item" :label="item"
- :value="item" />
- </el-select>
- </el-col>
- <el-col :span="16">
- <el-form-item v-if="item.type === 'string'"
- :prop="'variable_list.' + index + '.value'"
- :rules="{
- message: t('dynamicsForm.tip.requiredMessage'),
- trigger: 'blur',
- required: true
- }"
- >
- <el-input
- class="ml-4"
- v-model="item.value"
- :placeholder="$t('common.inputPlaceholder')"
- show-word-limit
- clearable
- @wheel="wheel"
- ></el-input>
- </el-form-item>
- <el-form-item v-else-if="item.type ==='num'"
- :prop="'variable_list.' + index + '.value'"
- :rules="{
- message: t('dynamicsForm.tip.requiredMessage'),
- trigger: 'blur',
- required: true
- }"
- >
- <el-input-number
- class="ml-4"
- v-model="item.value"
- ></el-input-number>
- </el-form-item>
- <el-form-item v-else-if="item.type === 'json'"
- :prop="'variable_list.' + index + '.value'"
- :rules="[{
- message: t('dynamicsForm.tip.requiredMessage'),
- trigger: 'blur',
- required: true
- },
- {
- validator: (rule:any, value:any, callback:any) => {
- try {
- JSON.parse(value);
- callback(); // Valid JSON
- } catch (e) {
- callback(new Error('Invalid JSON format'));
- }
- },
- trigger: 'blur',
- }]"
- >
- <el-input
- class="ml-4"
- v-model="item.value"
- :placeholder="$t('common.inputPlaceholder')"
- type="textarea"
- ></el-input>
- </el-form-item>
- </el-col>
- </el-row>
- </div>
- <el-form-item v-else>
+ <div v-if="item.source === 'custom'" class="flex">
+ <el-row :gutter="8">
+ <el-col :span="8">
+ <el-select v-model="item.type" style="width: 85px">
+ <el-option
+ v-for="item in typeOptions"
+ :key="item"
+ :label="item"
+ :value="item"
+ />
+ </el-select>
+ </el-col>
+ <el-col :span="16">
+ <el-form-item
+ v-if="item.type === 'string'"
+ :prop="'variable_list.' + index + '.value'"
+ :rules="{
+ message: t('dynamicsForm.tip.requiredMessage'),
+ trigger: 'blur',
+ required: true
+ }"
+ >
+ <el-input
+ class="ml-4"
+ v-model="item.value"
+ :placeholder="$t('common.inputPlaceholder')"
+ show-word-limit
+ clearable
+ @wheel="wheel"
+ ></el-input>
+ </el-form-item>
+ <el-form-item
+ v-else-if="item.type === 'num'"
+ :prop="'variable_list.' + index + '.value'"
+ :rules="{
+ message: $t('common.inputPlaceholder'),
+ trigger: 'blur',
+ required: true
+ }"
+ >
+ <el-input-number class="ml-4" v-model="item.value"></el-input-number>
+ </el-form-item>
+ <el-form-item
+ v-else-if="item.type === 'json'"
+ :prop="'variable_list.' + index + '.value'"
+ :rules="[
+ {
+ message: $t('common.inputPlaceholder'),
+ trigger: 'blur',
+ required: true
+ },
+ {
+ validator: (rule: any, value: any, callback: any) => {
+ try {
+ JSON.parse(value)
+ callback() // Valid JSON
+ } catch (e) {
+ callback(new Error('Invalid JSON format'))
+ }
+ },
+ trigger: 'blur'
+ }
+ ]"
+ >
+ <el-input
+ class="ml-4"
+ v-model="item.value"
+ :placeholder="$t('common.inputPlaceholder')"
+ type="textarea"
+ autosize
+ ></el-input>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ </div>
<NodeCascader
+ v-else
ref="nodeCascaderRef2"
:nodeModel="nodeModel"
class="w-full"
@@ -138,7 +144,6 @@
v-model="item.reference"
/>
</el-form-item>
-
</el-card>
</template>
<el-button link type="primary" @click="addVariable">