refactor: tinyflow

apps/web-antd/src/views/ai/workflow/form/index.vue

@@ -56,15 +56,12 @@ const formData: any = ref({
 
 const llmProvider = ref<any>([]);
 const workflowData = ref<any>({});
+const workflowId = ref<string>('');
 provide('workflowData', workflowData);
 
-/** 初始化数据 */
-const actionType = route.params.type as string;
-
 async function initData() {
-  if (actionType === 'update') {
-    const workflowId = route.params.id as string;
-    formData.value = await getWorkflow(workflowId);
+  if (workflowId.value) {
+    formData.value = await getWorkflow(workflowId.value);
     workflowData.value = JSON.parse(formData.value.graph);
   }
   const models = await getModelSimpleList(AiModelTypeEnum.CHAT);
@@ -113,9 +110,7 @@ async function handleSave() {
       ...formData.value,
       graph: JSON.stringify(workflowData.value),
     };
-    await (actionType === 'update'
-      ? updateWorkflow(data)
-      : createWorkflow(data));
+    await (workflowId.value ? updateWorkflow(data) : createWorkflow(data));
 
     // 保存成功，提示并跳转到列表页
     message.success('保存成功');
@@ -191,6 +186,7 @@ function handleBack() {
 
 /** 初始化 */
 onMounted(async () => {
+  workflowId.value = route.query.id as string;
   await initData();
 });
 
@@ -247,30 +243,26 @@ onBeforeUnmount(() => {
               >
                 {{ index + 1 }}
               </div>
-              <span class="whitespace-nowrap text-base font-bold">{{
-                step.title
-              }}</span>
+              <span class="whitespace-nowrap text-base font-bold">
+                {{ step.title }}
+              </span>
             </div>
           </div>
         </div>
 
         <!-- 右侧按钮 -->
         <div class="flex w-48 items-center justify-end gap-2">
-          <Button
-            v-if="actionType === 'update'"
-            type="primary"
-            @click="handleDeploy"
-          >
+          <Button v-if="workflowId" type="primary" @click="handleDeploy">
             发 布
           </Button>
           <Button type="primary" @click="handleSave">
-            <span v-if="actionType === 'definition'">恢 复</span>
+            <span v-if="workflowId">恢 复</span>
             <span v-else>保 存</span>
           </Button>
         </div>
       </div>
       <!-- 主体内容 -->
-      <Card :body-style="{ padding: '10px' }" class="mb-4">
+      <Card class="mb-4 p-4">
         <div class="mt-12">
           <!-- 第一步：基本信息 -->
           <div v-if="currentStep === 0" class="mx-auto w-4/6">

apps/web-antd/src/views/ai/workflow/form/modules/workflow-design.vue

@@ -16,7 +16,7 @@ defineProps<{
   provider: any;
 }>();
 
-const tinyflowRef = ref();
+const tinyflowRef = ref<InstanceType<typeof Tinyflow> | null>(null);
 const workflowData = inject('workflowData') as Ref;
 const params4Test = ref<any[]>([]);
 const paramsOfStartNode = ref<any>({});
@@ -35,7 +35,7 @@ function testWorkflowModel() {
   const startNode = getStartNode();
 
   // 获取参数定义
-  const parameters = startNode.data?.parameters || [];
+  const parameters: any[] = (startNode.data?.parameters as any[]) || [];
   const paramDefinitions: Record<string, any> = {};
 
   // 加入参数选项方便用户添加非必须参数
@@ -70,7 +70,7 @@ function testWorkflowModel() {
 /** 运行流程 */
 async function goRun() {
   try {
-    const val = tinyflowRef.value.getData();
+    const val = tinyflowRef.value?.getData();
     loading.value = true;
     error.value = null;
     testResult.value = null;
@@ -78,7 +78,7 @@ async function goRun() {
     const startNode = getStartNode();
 
     // 获取参数定义
-    const parameters = startNode.data?.parameters || [];
+    const parameters: any[] = (startNode.data?.parameters as any[]) || [];
     const paramDefinitions: Record<string, any> = {};
     parameters.forEach((param: any) => {
       paramDefinitions[param.name] = param.dataType;
@@ -119,12 +119,15 @@ async function goRun() {
 
 /** 获取开始节点 */
 function getStartNode() {
-  const val = tinyflowRef.value.getData();
-  const startNode = val.nodes.find((node: any) => node.type === 'startNode');
-  if (!startNode) {
-    throw new Error('流程缺少开始节点');
+  if (tinyflowRef.value) {
+    const val = tinyflowRef.value.getData();
+    const startNode = val!.nodes.find((node: any) => node.type === 'startNode');
+    if (!startNode) {
+      throw new Error('流程缺少开始节点');
+    }
+    return startNode;
   }
-  return startNode;
+  throw new Error('请设计流程');
 }
 
 /** 添加参数项 */
@@ -171,7 +174,7 @@ function convertParamValue(value: string, dataType: string) {
 /** 表单校验 */
 async function validate() {
   // 获取最新的流程数据
-  if (!workflowData.value) {
+  if (!workflowData.value || !tinyflowRef.value) {
     throw new Error('请设计流程');
   }
   workflowData.value = tinyflowRef.value.getData();
@@ -182,7 +185,7 @@ defineExpose({ validate });
 </script>
 
 <template>
-  <div class="relative h-[700px] w-full">
+  <div class="relative h-[800px] w-full">
     <Tinyflow
       v-if="workflowData"
       ref="tinyflowRef"

apps/web-antd/src/views/ai/workflow/index.vue

@@ -30,7 +30,6 @@ function handleEdit(row: any) {
     name: 'AiWorkflowCreate',
     query: {
       id: row.id,
-      type: 'update',
     },
   });
 }