feat: 支持工作流插件复用与试运行
- 新增工作流插件类型、发布快照同步、实时可用性与下线影响检查 - 收口绑定候选、分类权限、间接环路校验与运行态优雅降级 - 补齐管理端工作流插件配置、详情与试运行界面及定向测试
This commit is contained in:
@@ -1,16 +1,18 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue';
|
||||
import { nextTick, onUnmounted, ref, watch } from 'vue';
|
||||
|
||||
import { EasyFlowPanelModal } from '@easyflow/common-ui';
|
||||
import { $t } from '@easyflow/locales';
|
||||
import { preferences } from '@easyflow/preferences';
|
||||
import { sortNodes } from '@easyflow/utils';
|
||||
|
||||
import { VideoPlay } from '@element-plus/icons-vue';
|
||||
import { ElButton, ElMenu, ElMenuItem } from 'element-plus';
|
||||
import { ElAlert, ElButton, ElMenu, ElMenuItem, ElMessage } from 'element-plus';
|
||||
import { JsonViewer } from 'vue3-json-viewer';
|
||||
|
||||
import { api } from '#/api/request';
|
||||
import PluginRunParams from '#/views/ai/plugin/PluginRunParams.vue';
|
||||
import WorkflowSteps from '#/views/ai/workflow/components/WorkflowSteps.vue';
|
||||
|
||||
import 'vue3-json-viewer/dist/vue3-json-viewer.css';
|
||||
|
||||
@@ -26,42 +28,159 @@ watch(
|
||||
},
|
||||
);
|
||||
const dialogVisible = ref(false);
|
||||
const openDialog = () => {
|
||||
getPluginToolInfo();
|
||||
runResultResponse.value = null;
|
||||
dialogVisible.value = true;
|
||||
};
|
||||
const runTitle = ref('');
|
||||
const runResult = ref('');
|
||||
const inputDataParams = ref<any>(null);
|
||||
const runResultResponse = ref<any>(null);
|
||||
function getPluginToolInfo() {
|
||||
api
|
||||
.post('/api/v1/pluginItem/tool/search', {
|
||||
aiPluginToolId: props.pluginToolId,
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.errorCode === 0) {
|
||||
runTitle.value = `${res.data.aiPlugin.title} - ${res.data.data.name} ${$t(
|
||||
'pluginItem.inputData',
|
||||
)}`;
|
||||
runResult.value = `${$t('pluginItem.pluginToolEdit.runResult')}`;
|
||||
inputDataParams.value = JSON.parse(res.data.data.inputData || '[]');
|
||||
}
|
||||
});
|
||||
}
|
||||
const runParamsRef = ref();
|
||||
const runLoading = ref(false);
|
||||
const pluginAvailable = ref(true);
|
||||
const pluginReasonMessage = ref('');
|
||||
const isWorkflowPlugin = ref(false);
|
||||
const workflowId = ref<null | string>(null);
|
||||
const workflowSnapshot = ref<any>(null);
|
||||
const workflowNodeJson = ref<any[]>([]);
|
||||
const pollingNodes = ref<any[]>([]);
|
||||
const executeId = ref('');
|
||||
const pollingData = ref<any>({ nodes: {} });
|
||||
const initSignal = ref(false);
|
||||
const pollingTimer = ref<null | ReturnType<typeof setInterval>>(null);
|
||||
const activeIndex = ref('1');
|
||||
const dialogContentKey = ref(0);
|
||||
const dialogPreparing = ref(false);
|
||||
|
||||
defineExpose({
|
||||
openDialog,
|
||||
});
|
||||
function handleSelect(index: string) {
|
||||
activeIndex.value = index;
|
||||
|
||||
async function openDialog() {
|
||||
if (dialogPreparing.value) {
|
||||
return;
|
||||
}
|
||||
dialogPreparing.value = true;
|
||||
resetDialogState();
|
||||
const ready = await getPluginToolInfo();
|
||||
dialogPreparing.value = false;
|
||||
if (!ready) {
|
||||
return;
|
||||
}
|
||||
dialogContentKey.value += 1;
|
||||
await nextTick();
|
||||
dialogVisible.value = true;
|
||||
}
|
||||
const runParamsRef = ref();
|
||||
const runLoading = ref(false);
|
||||
|
||||
function resetExecutionState() {
|
||||
stopPolling();
|
||||
runResultResponse.value = null;
|
||||
runLoading.value = false;
|
||||
executeId.value = '';
|
||||
pollingData.value = { nodes: {} };
|
||||
initSignal.value = !initSignal.value;
|
||||
activeIndex.value = '1';
|
||||
}
|
||||
|
||||
function resetDialogState() {
|
||||
resetExecutionState();
|
||||
runTitle.value = '';
|
||||
runResult.value = '';
|
||||
inputDataParams.value = [];
|
||||
pluginAvailable.value = true;
|
||||
pluginReasonMessage.value = '';
|
||||
isWorkflowPlugin.value = false;
|
||||
workflowId.value = null;
|
||||
workflowSnapshot.value = null;
|
||||
workflowNodeJson.value = [];
|
||||
pollingNodes.value = [];
|
||||
}
|
||||
|
||||
async function getPluginToolInfo() {
|
||||
try {
|
||||
const res = await api.post('/api/v1/pluginItem/tool/search', {
|
||||
aiPluginToolId: props.pluginToolId,
|
||||
});
|
||||
if (res.errorCode !== 0 || !res.data) {
|
||||
ElMessage.error(res?.message || '加载试运行信息失败');
|
||||
return false;
|
||||
}
|
||||
runTitle.value = `${res.data.aiPlugin.title} - ${res.data.data.name} ${$t(
|
||||
'pluginItem.inputData',
|
||||
)}`;
|
||||
runResult.value = `${$t('pluginItem.pluginToolEdit.runResult')}`;
|
||||
inputDataParams.value = JSON.parse(res.data.data.inputData || '[]');
|
||||
pluginAvailable.value = res.data.aiPlugin?.available !== false;
|
||||
pluginReasonMessage.value = res.data.aiPlugin?.reasonMessage || '';
|
||||
isWorkflowPlugin.value = Number(res.data.aiPlugin?.type || 1) === 2;
|
||||
workflowId.value = res.data.aiPlugin?.workflowId
|
||||
? String(res.data.aiPlugin.workflowId)
|
||||
: null;
|
||||
workflowSnapshot.value = res.data.workflowSnapshot || null;
|
||||
hydrateWorkflowNodes(workflowSnapshot.value);
|
||||
return true;
|
||||
} catch (error) {
|
||||
ElMessage.error(buildErrorResult(error).error);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
function hydrateWorkflowNodes(snapshot: any) {
|
||||
workflowNodeJson.value = [];
|
||||
pollingNodes.value = [];
|
||||
const content = snapshot?.content;
|
||||
if (!content) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const workflowContent = JSON.parse(content);
|
||||
workflowNodeJson.value = sortNodes(workflowContent) || [];
|
||||
pollingNodes.value = Array.isArray(workflowContent?.nodes)
|
||||
? workflowContent.nodes.map((node: any) => ({
|
||||
nodeId: node.id,
|
||||
nodeName: node?.data?.title || node.id,
|
||||
}))
|
||||
: [];
|
||||
} catch (error) {
|
||||
console.error('解析工作流插件快照失败', error);
|
||||
}
|
||||
}
|
||||
|
||||
function buildErrorResult(error: any) {
|
||||
const responseData = error?.response?.data ?? {};
|
||||
return {
|
||||
error:
|
||||
responseData?.error ||
|
||||
responseData?.message ||
|
||||
error?.message ||
|
||||
'试运行失败',
|
||||
};
|
||||
}
|
||||
|
||||
function buildUnavailableResult() {
|
||||
runResultResponse.value = {
|
||||
skipped: true,
|
||||
reasonMessage:
|
||||
pluginReasonMessage.value ||
|
||||
$t('pluginItem.pluginToolEdit.unavailableHint'),
|
||||
};
|
||||
}
|
||||
|
||||
function handleSubmitRun() {
|
||||
if (!pluginAvailable.value) {
|
||||
buildUnavailableResult();
|
||||
return;
|
||||
}
|
||||
const runParams = runParamsRef.value?.handleSubmitParams?.();
|
||||
if (runParams === null || runParams === undefined) {
|
||||
return;
|
||||
}
|
||||
if (isWorkflowPlugin.value) {
|
||||
handleWorkflowSubmit(runParams);
|
||||
return;
|
||||
}
|
||||
handleHttpSubmit(runParams);
|
||||
}
|
||||
|
||||
function handleHttpSubmit(runParams: any) {
|
||||
runLoading.value = true;
|
||||
const runParams = runParamsRef.value.handleSubmitParams();
|
||||
api
|
||||
.post('/api/v1/pluginItem/test', {
|
||||
pluginToolId: props.pluginToolId,
|
||||
@@ -72,9 +191,160 @@ function handleSubmitRun() {
|
||||
runResultResponse.value = res.data;
|
||||
activeIndex.value = '2';
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
runResultResponse.value = buildErrorResult(error);
|
||||
})
|
||||
.finally(() => {
|
||||
runLoading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
function handleWorkflowSubmit(runParams: any) {
|
||||
if (!workflowId.value) {
|
||||
runResultResponse.value = {
|
||||
error: '当前插件未绑定有效工作流，无法试运行。',
|
||||
};
|
||||
return;
|
||||
}
|
||||
resetExecutionState();
|
||||
runLoading.value = true;
|
||||
api
|
||||
.post('/api/v1/pluginItem/testAsync', {
|
||||
pluginToolId: props.pluginToolId,
|
||||
inputData: JSON.stringify(runParams),
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.errorCode === 0 && res.data) {
|
||||
executeId.value = String(res.data);
|
||||
pollingData.value = {
|
||||
executeId: executeId.value,
|
||||
status: 1,
|
||||
nodes: {},
|
||||
};
|
||||
runResultResponse.value = pollingData.value;
|
||||
activeIndex.value = '2';
|
||||
startPolling(executeId.value);
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
runResultResponse.value = buildErrorResult(error);
|
||||
})
|
||||
.finally(() => {
|
||||
runLoading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
function startPolling(nextExecuteId: string) {
|
||||
stopPolling();
|
||||
pollingTimer.value = setInterval(() => {
|
||||
executePolling(nextExecuteId);
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
function stopPolling() {
|
||||
if (pollingTimer.value) {
|
||||
clearInterval(pollingTimer.value);
|
||||
pollingTimer.value = null;
|
||||
}
|
||||
}
|
||||
|
||||
function executePolling(nextExecuteId: string) {
|
||||
api
|
||||
.post('/api/v1/pluginItem/testChainStatus', {
|
||||
executeId: nextExecuteId,
|
||||
nodes: pollingNodes.value,
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.errorCode !== 0) {
|
||||
return;
|
||||
}
|
||||
const nextData = {
|
||||
...res.data,
|
||||
nodes: res.data?.nodes || {},
|
||||
};
|
||||
pollingData.value = nextData;
|
||||
runResultResponse.value = nextData;
|
||||
if (nextData.status !== 1) {
|
||||
stopPolling();
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
stopPolling();
|
||||
runResultResponse.value = buildErrorResult(error);
|
||||
});
|
||||
}
|
||||
|
||||
function resumeChain(payload: any) {
|
||||
if (!executeId.value) {
|
||||
return;
|
||||
}
|
||||
api
|
||||
.post('/api/v1/pluginItem/testResume', {
|
||||
executeId: executeId.value,
|
||||
confirmParams: payload?.confirmParams || {},
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.errorCode === 0) {
|
||||
startPolling(executeId.value);
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
runResultResponse.value = buildErrorResult(error);
|
||||
});
|
||||
}
|
||||
|
||||
function showWorkflowSteps() {
|
||||
return isWorkflowPlugin.value === true;
|
||||
}
|
||||
|
||||
function showWorkflowStepList() {
|
||||
return showWorkflowSteps();
|
||||
}
|
||||
|
||||
function showWorkflowResultAlert() {
|
||||
return (
|
||||
showWorkflowSteps() &&
|
||||
(!!runResultResponse.value?.error || !!runResultResponse.value?.skipped)
|
||||
);
|
||||
}
|
||||
|
||||
function workflowResultAlertType() {
|
||||
return runResultResponse.value?.skipped ? 'warning' : 'error';
|
||||
}
|
||||
|
||||
function workflowResultAlertMessage() {
|
||||
return (
|
||||
runResultResponse.value?.reasonMessage ||
|
||||
runResultResponse.value?.error ||
|
||||
''
|
||||
);
|
||||
}
|
||||
|
||||
function showWorkflowStepsEmpty() {
|
||||
return showWorkflowSteps() && workflowNodeJson.value.length === 0;
|
||||
}
|
||||
|
||||
function showHttpResultEmpty() {
|
||||
return (
|
||||
showWorkflowSteps() !== true &&
|
||||
activeIndex.value === '2' &&
|
||||
!runResultResponse.value
|
||||
);
|
||||
}
|
||||
|
||||
function handleSelect(index: string) {
|
||||
activeIndex.value = index;
|
||||
}
|
||||
|
||||
function closeDialog() {
|
||||
stopPolling();
|
||||
dialogVisible.value = false;
|
||||
}
|
||||
|
||||
onUnmounted(() => {
|
||||
stopPolling();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -83,27 +353,37 @@ function handleSubmitRun() {
|
||||
width="80%"
|
||||
align-center
|
||||
:title="$t('pluginItem.pluginToolEdit.trialRun')"
|
||||
:before-close="() => (dialogVisible = false)"
|
||||
:before-close="closeDialog"
|
||||
>
|
||||
<div class="run-test-container">
|
||||
<div :key="dialogContentKey" class="run-test-container">
|
||||
<div class="run-test-params">
|
||||
<div class="run-title-style">
|
||||
{{ runTitle }}
|
||||
</div>
|
||||
<ElAlert
|
||||
v-if="!pluginAvailable"
|
||||
class="mb-4"
|
||||
type="warning"
|
||||
:closable="false"
|
||||
show-icon
|
||||
:title="$t('pluginItem.pluginToolEdit.unavailableHint')"
|
||||
:description="pluginReasonMessage"
|
||||
/>
|
||||
<div>
|
||||
<PluginRunParams
|
||||
v-model="inputDataParams"
|
||||
:editable="true"
|
||||
:is-edit-output="true"
|
||||
ref="runParamsRef"
|
||||
v-model="inputDataParams"
|
||||
:editable="pluginAvailable"
|
||||
:is-edit-output="true"
|
||||
:payload-mode="isWorkflowPlugin ? 'workflow' : 'plugin'"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="run-test-result">
|
||||
<div class="run-title-style">
|
||||
{{ runResult }}
|
||||
{{ showWorkflowSteps() ? $t('aiWorkflow.steps') : runResult }}
|
||||
</div>
|
||||
<div>
|
||||
<div v-if="!showWorkflowSteps()">
|
||||
<ElMenu
|
||||
:default-active="activeIndex"
|
||||
class="el-menu-demo"
|
||||
@@ -116,32 +396,58 @@ function handleSubmitRun() {
|
||||
</ElMenu>
|
||||
</div>
|
||||
<div class="run-res-json">
|
||||
<JsonViewer
|
||||
v-if="activeIndex === '1'"
|
||||
:value="inputDataParams || {}"
|
||||
copyable
|
||||
:expand-depth="Infinity"
|
||||
:theme="themeMode"
|
||||
/>
|
||||
<JsonViewer
|
||||
v-if="activeIndex === '2'"
|
||||
:value="runResultResponse || {}"
|
||||
copyable
|
||||
:expand-depth="Infinity"
|
||||
:theme="themeMode"
|
||||
/>
|
||||
<template v-if="showWorkflowSteps()">
|
||||
<ElAlert
|
||||
v-if="showWorkflowResultAlert()"
|
||||
class="run-result-alert"
|
||||
:type="workflowResultAlertType()"
|
||||
:closable="false"
|
||||
show-icon
|
||||
:title="workflowResultAlertMessage()"
|
||||
/>
|
||||
<WorkflowSteps
|
||||
v-if="showWorkflowStepList()"
|
||||
:workflow-id="workflowId"
|
||||
:node-json="workflowNodeJson"
|
||||
:init-signal="initSignal"
|
||||
:polling-data="pollingData"
|
||||
@resume="resumeChain"
|
||||
/>
|
||||
<div v-if="showWorkflowStepsEmpty()" class="run-result-placeholder">
|
||||
{{ $t('pluginItem.pluginToolEdit.runWorkflowStepsEmpty') }}
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<JsonViewer
|
||||
v-if="activeIndex === '1'"
|
||||
:value="inputDataParams || {}"
|
||||
copyable
|
||||
:expand-depth="Infinity"
|
||||
:theme="themeMode"
|
||||
/>
|
||||
<JsonViewer
|
||||
v-if="activeIndex === '2' && runResultResponse"
|
||||
:value="runResultResponse || {}"
|
||||
copyable
|
||||
:expand-depth="Infinity"
|
||||
:theme="themeMode"
|
||||
/>
|
||||
<div v-if="showHttpResultEmpty()" class="run-result-placeholder">
|
||||
{{ $t('common.noDataAvailable') }}
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<ElButton @click="dialogVisible = false">
|
||||
<ElButton @click="closeDialog">
|
||||
{{ $t('button.cancel') }}
|
||||
</ElButton>
|
||||
<ElButton
|
||||
type="primary"
|
||||
:icon="VideoPlay"
|
||||
@click="handleSubmitRun"
|
||||
:loading="runLoading"
|
||||
@click="handleSubmitRun"
|
||||
>
|
||||
{{ $t('pluginItem.pluginToolEdit.run') }}
|
||||
</ElButton>
|
||||
@@ -163,21 +469,34 @@ function handleSubmitRun() {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.run-res-json {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.run-test-result {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.name-cell {
|
||||
position: relative;
|
||||
min-width: 100%;
|
||||
.run-res-json {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.run-result-alert {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.run-result-placeholder {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 240px;
|
||||
padding: 24px;
|
||||
color: var(--el-text-color-secondary);
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
border: 1px dashed var(--el-border-color);
|
||||
border-radius: 10px;
|
||||
background: var(--el-fill-color-extra-light);
|
||||
}
|
||||
|
||||
.run-title-style {
|
||||
@@ -186,30 +505,6 @@ function handleSubmitRun() {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.editable-name {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.name-input-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.name-input-wrapper .el-input {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
margin-top: 2px;
|
||||
font-size: 12px;
|
||||
line-height: 1.2;
|
||||
color: #ff4d4f;
|
||||
}
|
||||
|
||||
:deep(.el-table td.el-table__cell.first-column div) {
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
|
||||
Reference in New Issue
Block a user