feat: Basic nodes of tool workflow

ui/src/workflow-canvas/nodes/tool-base-node/component/input/InputFieldFormDialog.vue

@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import { ref, reactive, watch } from 'vue'
+import type { FormInstance } from 'element-plus'
+import { cloneDeep } from 'lodash'
+
+const typeOptions = ['string', 'int', 'dict', 'array', 'float', 'boolean']
+const emit = defineEmits(['refresh'])
+const fieldFormRef = ref<FormInstance>()
+const loading = ref<boolean>(false)
+const isEdit = ref(false)
+const form = ref<any>({
+  field: '',
+  type: typeOptions[0],
+  label: '',
+  desc: '',
+  is_required: true,
+})
+
+const rules = reactive({
+  field: [
+    {
+      required: true,
+      message: '请输入参数名',
+      trigger: 'blur',
+    },
+  ],
+  label: [
+    {
+      required: true,
+      message: '请输入显示名',
+      trigger: 'blur',
+    },
+  ],
+})
+
+const dialogVisible = ref<boolean>(false)
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    form.value = {
+      field: '',
+      type: typeOptions[0],
+      label: '',
+      desc: '',
+      is_required: true,
+    }
+    isEdit.value = false
+  }
+})
+
+const open = (row: any) => {
+  if (row) {
+    form.value = cloneDeep(row)
+    isEdit.value = true
+  }
+  dialogVisible.value = true
+}
+
+const submit = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid) => {
+    if (valid) {
+      emit('refresh', form.value)
+    }
+  })
+}
+
+const close = () => {
+  dialogVisible.value = false
+}
+
+defineExpose({ open, close })
+</script>
+
+<template>
+  <el-dialog
+    :title="isEdit ? '编辑参数' : '添加参数'"
+    v-model="dialogVisible"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :destroy-on-close="true"
+    append-to-body
+  >
+    <el-form
+      label-position="top"
+      ref="fieldFormRef"
+      :rules="rules"
+      :model="form"
+      require-asterisk-position="right"
+    >
+      <el-form-item label="参数名" prop="field">
+        <el-input
+          v-model="form.field"
+          placeholder="请输入参数名"
+          maxlength="64"
+          show-word-limit
+          @blur="form.field = form.field.trim()"
+        />
+      </el-form-item>
+      <el-form-item label="显示名" prop="label">
+        <el-input
+          v-model="form.label"
+          placeholder="请输入显示名"
+          :maxlength="128"
+          show-word-limit
+          @blur="form.label = form.label?.trim()"
+        />
+      </el-form-item>
+      <el-form-item label="描述">
+        <el-input
+          v-model="form.desc"
+          placeholder="请输入描述"
+          :maxlength="128"
+          show-word-limit
+          @blur="form.desc = form.desc?.trim()"
+        />
+      </el-form-item>
+      <el-form-item label="数据类型">
+        <el-select v-model="form.type">
+          <el-option v-for="item in typeOptions" :key="item" :label="item" :value="item" />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="必填" @click.prevent>
+        <el-switch size="small" v-model="form.is_required" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click.prevent="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="submit(fieldFormRef)" :loading="loading">
+          {{ isEdit ? '保存' : '添加' }}
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>

ui/src/workflow-canvas/nodes/tool-base-node/component/input/InputFieldTable.vue

@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { cloneDeep, set } from 'lodash'
+import { MsgError } from '@/utils/message'
+import InputFieldFormDialog from './InputFieldFormDialog.vue'
+import InputTitleDialog from './InputTitleDialog.vue'
+
+const props = defineProps<{ nodeModel: any }>()
+const inputFieldFormDialogRef = ref<InstanceType<typeof InputFieldFormDialog>>()
+const inputTitleDialogRef = ref<InstanceType<typeof InputTitleDialog>>()
+const inputFieldList = ref<any[]>([])
+const inputFieldConfig = ref({ title: '用户输入' })
+
+function openAddDialog(data?: any, index?: any) {
+  if (index !== undefined) {
+    currentIndex.value = index
+  }
+  inputFieldFormDialogRef.value?.open(data)
+}
+
+function openChangeTitleDialog() {
+  inputTitleDialogRef.value?.open(inputFieldConfig.value)
+}
+
+function deleteField(index: any) {
+  inputFieldList.value.splice(index, 1)
+  set(props.nodeModel.properties, 'user_input_field_list', cloneDeep(inputFieldList.value))
+  props.nodeModel.graphModel.eventCenter.emit('refreshFieldList')
+}
+
+const currentIndex = ref<number | null>(null)
+function refreshFieldList(data: any) {
+  if (currentIndex.value !== null) {
+    if (
+      inputFieldList.value
+        .filter((item, index) => index != currentIndex.value)
+        .some((field) => field.field == data.field)
+    ) {
+      MsgError('参数名已存在：' + data.field)
+      return
+    }
+    inputFieldList.value?.splice(currentIndex.value, 1, data)
+  } else {
+    if (inputFieldList.value.some((field) => field.field == data.field)) {
+      MsgError('参数名已存在：' + data.field)
+      return
+    }
+    inputFieldList.value?.push(data)
+  }
+  set(props.nodeModel.properties, 'user_input_field_list', cloneDeep(inputFieldList.value))
+  props.nodeModel.graphModel.eventCenter.emit('refreshFieldList')
+  props.nodeModel.graphModel.getNodeModelById('tool-start-node')?.clearNextNodeField(true)
+  inputFieldFormDialogRef.value?.close()
+  currentIndex.value = null
+}
+
+function refreshFieldTitle(data: any) {
+  inputFieldConfig.value = data
+  inputTitleDialogRef.value?.close()
+}
+
+onMounted(() => {
+  if (props.nodeModel.properties.user_input_config) {
+    inputFieldConfig.value = cloneDeep(props.nodeModel.properties.user_input_config)
+  }
+  if (props.nodeModel.properties.user_input_field_list) {
+    inputFieldList.value = cloneDeep(props.nodeModel.properties.user_input_field_list)
+  }
+  props.nodeModel.graphModel.eventCenter.emit('refreshFieldList')
+})
+</script>
+
+<template>
+  <div class="flex-between mb-4">
+    <h6 class="break-all ellipsis lighter" style="max-width: 80%" :title="inputFieldConfig.title">
+      {{ inputFieldConfig.title }}
+    </h6>
+    <div>
+      <el-button type="primary" link @click="openChangeTitleDialog">
+        <MkIcon name="icon_setting_outlined" />
+      </el-button>
+      <span class="ml-4">
+        <el-button link type="primary" @click="openAddDialog()">
+          <MkIcon name="icon_add_outlined" class="mr-4" />
+          添加
+        </el-button>
+      </span>
+    </div>
+  </div>
+
+  <el-table :data="inputFieldList" class="mb-4">
+    <el-table-column prop="field" label="参数名">
+      <template #default="{ row }">
+        <span class="ellipsis-1" :title="row.field">
+          {{ row.field }}
+        </span>
+      </template>
+    </el-table-column>
+    <el-table-column prop="label" label="显示名">
+      <template #default="{ row }">
+        <span class="ellipsis-1" :title="row.label">
+          {{ row.label }}
+        </span>
+      </template>
+    </el-table-column>
+    <el-table-column label="数据类型">
+      <template #default="{ row }">
+        <el-tag type="info" class="info-tag">{{ row.type }}</el-tag>
+      </template>
+    </el-table-column>
+    <el-table-column label="必填">
+      <template #default="{ row }">
+        <div @click.stop>
+          <el-switch disabled size="small" v-model="row.is_required" />
+        </div>
+      </template>
+    </el-table-column>
+    <el-table-column label="操作" align="left" width="90">
+      <template #default="{ row, $index }">
+        <span class="mr-4">
+          <el-tooltip effect="dark" content="编辑" placement="top">
+            <el-button type="primary" text @click.stop="openAddDialog(row, $index)">
+              <MkIcon name="icon_edit_outlined" />
+            </el-button>
+          </el-tooltip>
+        </span>
+        <el-tooltip effect="dark" content="删除" placement="top">
+          <el-button type="primary" text @click="deleteField($index)">
+            <MkIcon name="icon_delete_outlined" />
+          </el-button>
+        </el-tooltip>
+      </template>
+    </el-table-column>
+  </el-table>
+  <InputFieldFormDialog ref="inputFieldFormDialogRef" @refresh="refreshFieldList" />
+  <InputTitleDialog ref="inputTitleDialogRef" @refresh="refreshFieldTitle" />
+</template>

ui/src/workflow-canvas/nodes/tool-base-node/component/input/InputTitleDialog.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { reactive, ref, watch } from 'vue'
+import type { FormInstance } from 'element-plus'
+import { cloneDeep } from 'lodash'
+
+const emit = defineEmits(['refresh'])
+const fieldFormRef = ref<FormInstance>()
+const loading = ref<boolean>(false)
+
+const form = ref<any>({
+  title: '用户输入',
+})
+
+const rules = reactive({
+  title: [
+    { required: true, message: '请输入标题', trigger: 'blur' },
+  ],
+})
+
+const dialogVisible = ref<boolean>(false)
+
+const open = (row: any) => {
+  if (row) {
+    form.value = cloneDeep(row)
+  }
+  dialogVisible.value = true
+}
+
+const close = () => {
+  dialogVisible.value = false
+}
+
+const submit = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid) => {
+    if (valid) {
+      emit('refresh', form.value)
+    }
+  })
+}
+
+defineExpose({ open, close })
+</script>
+
+<template>
+  <el-dialog
+    title="设置"
+    v-model="dialogVisible"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :destroy-on-close="true"
+    :before-close="close"
+    append-to-body
+  >
+    <el-form
+      label-position="top"
+      ref="fieldFormRef"
+      :rules="rules"
+      :model="form"
+      require-asterisk-position="right"
+      @submit.prevent
+    >
+      <el-form-item label="标题" prop="title">
+        <el-input
+          v-model="form.title"
+          maxlength="64"
+          show-word-limit
+          @blur="form.title = form.title.trim()"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click.prevent="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="submit(fieldFormRef)" :loading="loading">
+          保存
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>