@andrewyang/ai-workflow-editor 0.1.0

package/src/components/editor/nodes/SysmlRequirementNode.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="sysml-req-node group relative min-w-[180px] h-full transition-all" :style="containerStyle">
+    <NodeResizer :is-visible="selected" :min-width="120" :min-height="60" />
+    <Handle type="target" position="top" class="!bg-gray-700 !w-2.5 !h-2.5 !border-2 !border-white" />
+    
+    <div class="flex flex-col h-full">
+      <!-- Header -->
+      <div class="px-2 pt-1 flex items-center justify-between border-b border-gray-300 bg-yellow-100/50">
+        <div class="text-[10px] font-bold text-gray-600">req</div>
+        <div class="text-[10px] text-gray-500">Id: 001</div>
+      </div>
+      <!-- Name -->
+      <div v-if="data.isEditing" class="px-2 py-2">
+         <input
+          v-model="data.label"
+          ref="inputRef"
+          class="nodrag w-full text-center text-sm font-bold text-gray-800 bg-white/50 border border-yellow-300 rounded px-1 focus:outline-none focus:ring-2 focus:ring-yellow-200"
+          :style="data.textStyle"
+          @blur="stopEditing"
+          @keydown.enter.prevent="stopEditing"
+          @vue:mounted="focusInput"
+        />
+      </div>
+      <div v-else class="px-2 py-2 text-center text-sm font-bold text-gray-800 break-words" :style="data.textStyle">
+        {{ data.label }}
+      </div>
+      <!-- Text -->
+      <div class="px-2 pb-2 text-[10px] text-gray-600 italic border-t border-gray-300 pt-1 flex-1">
+        The system shall...
+      </div>
+    </div>
+    
+    <Handle type="source" position="bottom" class="!bg-gray-700 !w-2.5 !h-2.5 !border-2 !border-white" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, nextTick } from 'vue';
+import { Handle } from '@vue-flow/core';
+import { NodeResizer } from '@vue-flow/node-resizer';
+import '@vue-flow/node-resizer/dist/style.css';
+
+const props = defineProps<{
+  data: { label: string; style?: any; textStyle?: any; isEditing?: boolean };
+  selected?: boolean;
+}>();
+
+const inputRef = ref<HTMLInputElement>();
+
+const focusInput = () => {
+  nextTick(() => {
+    inputRef.value?.focus();
+    inputRef.value?.select();
+  });
+};
+
+const stopEditing = () => {
+  if (props.data) {
+    props.data.isEditing = false;
+  }
+};
+
+const containerStyle = computed(() => ({
+  backgroundColor: props.data.style?.backgroundColor || 'rgba(254, 252, 232, 0.3)', // yellow-50/30
+  borderColor: props.selected ? '#eab308' : (props.data.style?.borderColor || '#374151'),
+  borderWidth: props.data.style?.borderWidth || '2px',
+  borderStyle: props.data.style?.borderStyle || 'solid',
+  borderRadius: props.data.style?.borderRadius || '0.125rem',
+  boxShadow: props.selected ? '0 4px 6px -1px rgba(234, 179, 8, 0.2)' : (props.data.style?.boxShadow || '0 1px 2px 0 rgba(0, 0, 0, 0.05)'),
+  opacity: props.data.style?.opacity !== undefined ? props.data.style.opacity : 1,
+}));
+</script>

package/src/components/editor/nodes/SysmlUseCaseNode.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="sysml-usecase-node group relative min-w-[140px] h-[80px] flex items-center justify-center transition-all" :style="containerStyle">
+    <NodeResizer :is-visible="selected" :min-width="100" :min-height="50" />
+    <Handle type="target" position="top" class="!bg-gray-700 !w-2.5 !h-2.5 !border-2 !border-white" />
+    
+    <div class="text-center px-4 w-full h-full flex items-center justify-center">
+      <textarea
+        v-if="data.isEditing"
+        v-model="data.label"
+        ref="textareaRef"
+        class="nodrag w-full text-center bg-white/50 border border-green-300 rounded px-1 text-sm font-bold text-gray-800 focus:outline-none focus:ring-2 focus:ring-green-200 resize-none overflow-hidden"
+        :style="data.textStyle"
+        rows="1"
+        @blur="stopEditing"
+        @keydown.enter.prevent="stopEditing"
+        @vue:mounted="focusInput"
+      />
+      <div v-else class="text-sm font-bold text-gray-800 break-words w-full" :style="data.textStyle">
+        {{ data.label }}
+      </div>
+    </div>
+    
+    <Handle type="source" position="bottom" class="!bg-gray-700 !w-2.5 !h-2.5 !border-2 !border-white" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, nextTick } from 'vue';
+import { Handle } from '@vue-flow/core';
+import { NodeResizer } from '@vue-flow/node-resizer';
+import '@vue-flow/node-resizer/dist/style.css';
+
+const props = defineProps<{
+  data: { label: string; style?: any; textStyle?: any; isEditing?: boolean };
+  selected?: boolean;
+}>();
+
+const textareaRef = ref<HTMLTextAreaElement>();
+
+const focusInput = () => {
+  nextTick(() => {
+    textareaRef.value?.focus();
+    textareaRef.value?.select();
+  });
+};
+
+const stopEditing = () => {
+  if (props.data) {
+    props.data.isEditing = false;
+  }
+};
+
+const containerStyle = computed(() => ({
+  backgroundColor: props.data.style?.backgroundColor || '#ffffff',
+  borderColor: props.selected ? '#22c55e' : (props.data.style?.borderColor || '#374151'),
+  borderWidth: props.data.style?.borderWidth || '2px',
+  borderStyle: props.data.style?.borderStyle || 'solid',
+  borderRadius: props.data.style?.borderRadius || '50%',
+  boxShadow: props.selected ? '0 4px 6px -1px rgba(34, 197, 94, 0.2)' : (props.data.style?.boxShadow || '0 1px 2px 0 rgba(0, 0, 0, 0.05)'),
+  opacity: props.data.style?.opacity !== undefined ? props.data.style.opacity : 1,
+}));
+</script>

package/src/composables/useAi.ts

@@ -0,0 +1,82 @@
+import { ref } from 'vue';
+import type { AiGenerateWorkflowParams, WorkflowNode, WorkflowEdge } from '@/types/workflow';
+import { LlmClient } from '@/utils/llmAdapter';
+import { z } from 'zod';
+
+// 定义 AI 返回结构的校验 Schema
+const WorkflowSchema = z.object({
+  nodes: z.array(z.object({
+    id: z.string(),
+    type: z.string(),
+    data: z.object({
+      label: z.string(),
+    }),
+    position: z.object({
+      x: z.number(),
+      y: z.number(),
+    }),
+  })),
+  edges: z.array(z.object({
+    id: z.string(),
+    source: z.string(),
+    target: z.string(),
+  })),
+});
+
+/**
+ * AI 工作流生成 Composable
+ */
+export const useAi = () => {
+  const loading = ref(false);
+  const error = ref<string | null>(null);
+
+  /**
+   * 生成工作流
+   * @param params 生成参数
+   * @returns 工作流节点和连线数据
+   */
+  const generateWorkflow = async (params: AiGenerateWorkflowParams): Promise<{ nodes: WorkflowNode[]; edges: WorkflowEdge[] }> => {
+    loading.value = true;
+    error.value = null;
+    try {
+      const llmClient = new LlmClient(params.llmConfig);
+      // 构造 Prompt（引导 AI 返回结构化 JSON）
+      const prompt = `
+        根据以下描述生成工作流的 JSON 结构：${params.prompt}
+        要求：
+        1. 仅返回 JSON，不要其他文字，不要Markdown代码块标记；
+        2. JSON 包含 nodes 和 edges 两个数组；
+        3. nodes 中每个节点包含 id、type（可选：custom-ai、custom-normal）、data（包含 label）、position（x/y 为数字）；
+        4. edges 中每个连线包含 id、source（源节点 ID）、target（目标节点 ID）；
+        5. 节点 position 分布合理，避免重叠；
+      `;
+      const response = await llmClient.invoke(prompt);
+      
+      // 简单的 JSON 提取逻辑
+      let jsonString = response.trim();
+      const firstBrace = jsonString.indexOf('{');
+      const lastBrace = jsonString.lastIndexOf('}');
+      if (firstBrace !== -1 && lastBrace !== -1) {
+        jsonString = jsonString.substring(firstBrace, lastBrace + 1);
+      }
+
+      // 解析并校验返回结果
+      const workflow = JSON.parse(jsonString);
+      const validatedWorkflow = WorkflowSchema.parse(workflow);
+      
+      // 转换为应用内部类型
+      return validatedWorkflow as unknown as { nodes: WorkflowNode[]; edges: WorkflowEdge[] };
+    } catch (err) {
+      error.value = (err as Error).message;
+      throw err;
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  return {
+    loading,
+    error,
+    generateWorkflow,
+  };
+};

package/src/i18n.config.ts

@@ -0,0 +1,5 @@
+export default defineI18nConfig(() => ({
+  legacy: false,
+  locale: 'zh',
+  fallbackLocale: 'en'
+}))

package/src/locales/en.json

@@ -0,0 +1,106 @@
+{
+  "common": {
+    "loading": "Loading Editor...",
+    "generating": "Generating Workflow..."
+  },
+  "toolbar": {
+    "draw": "Draw",
+    "shape": "Shape",
+    "style": "Style",
+    "insert": "Insert",
+    "save": "Save",
+    "import": "Import",
+    "undo": "Undo",
+    "redo": "Redo",
+    "zoomOut": "Zoom Out",
+    "zoomIn": "Zoom In",
+    "fitView": "Fit View",
+    "untitled": "Untitled Workflow"
+  },
+  "nodePanel": {
+    "search": "Search shapes...",
+    "general": "General",
+    "sysml": "SysML",
+    "advanced": "Advanced",
+    "moreShapes": "More Shapes",
+    "noAdvanced": "No advanced shapes yet",
+    "nodes": {
+      "ai": "AI",
+      "aiFull": "AI Node",
+      "action": "Action",
+      "actionFull": "Action Node",
+      "square": "Square",
+      "circle": "Circle",
+      "diamond": "Diamond",
+      "triangle": "Triangle",
+      "cylinder": "Cylinder",
+      "file": "File",
+      "sysmlBlock": "Block",
+      "sysmlReq": "Requirement",
+      "sysmlUseCase": "Use Case",
+      "sysmlBlockFull": "SysML Block",
+      "sysmlReqFull": "SysML Requirement",
+      "sysmlUseCaseFull": "SysML Use Case"
+    }
+  },
+  "aiChat": {
+    "title": "AI Assistant",
+    "new": "NEW",
+    "v2": "Workflow Gen V2",
+    "desc": "Describe your business logic naturally. Supports complex branching and error handling.",
+    "createTitle": "Create with AI",
+    "createDesc": "Describe the workflow you want to build or upload an image to replicate.",
+    "quickStarts": "Quick Starts",
+    "docProcess": {
+      "title": "Doc Processing",
+      "desc": "Parse PDF/JSON files automatically"
+    },
+    "userAuth": {
+      "title": "User Auth",
+      "desc": "Registration & Verification flow"
+    },
+    "etl": {
+      "title": "ETL Pipeline",
+      "desc": "Extract, Transform, Load data"
+    },
+    "inputPlaceholder": "Describe your workflow...",
+    "generate": "Generate",
+    "quickInputs": {
+      "doc": "Create a document processing workflow",
+      "auth": "Create a user registration flow with email verification",
+      "etl": "Create a data ETL pipeline"
+    }
+  },
+  "aiGenerator": {
+    "title": "Generate Workflow with AI",
+    "placeholder": "Describe your workflow logic here...",
+    "cancel": "Cancel",
+    "generate": "Generate"
+  },
+  "propertyPanel": {
+    "title": "Format",
+    "noSelection": "No Selection",
+    "tabs": {
+      "style": "Style",
+      "text": "Text",
+      "arrange": "Arrange"
+    },
+    "style": {
+      "fill": "Fill",
+      "stroke": "Stroke",
+      "opacity": "Opacity",
+      "rounded": "Rounded",
+      "shadow": "Shadow"
+    },
+    "text": {
+      "content": "Content",
+      "color": "Text Color"
+    },
+    "arrange": {
+      "front": "Bring to Front",
+      "back": "Send to Back",
+      "size": "Size",
+      "position": "Position"
+    }
+  }
+}

package/src/locales/zh.json

@@ -0,0 +1,106 @@
+{
+  "common": {
+    "loading": "加载编辑器...",
+    "generating": "生成工作流..."
+  },
+  "toolbar": {
+    "draw": "绘制",
+    "shape": "图形",
+    "style": "样式",
+    "insert": "插入",
+    "save": "保存",
+    "import": "导入",
+    "undo": "撤销",
+    "redo": "重做",
+    "zoomOut": "缩小",
+    "zoomIn": "放大",
+    "fitView": "适应视图",
+    "untitled": "未命名工作流"
+  },
+  "nodePanel": {
+    "search": "搜索图形...",
+    "general": "通用",
+    "sysml": "SysML",
+    "advanced": "高级",
+    "moreShapes": "更多图形",
+    "noAdvanced": "暂无高级图形",
+    "nodes": {
+      "ai": "AI",
+      "aiFull": "AI 节点",
+      "action": "动作",
+      "actionFull": "动作节点",
+      "square": "正方形",
+      "circle": "圆形",
+      "diamond": "菱形",
+      "triangle": "三角形",
+      "cylinder": "圆柱体",
+      "file": "文件",
+      "sysmlBlock": "SysML 块",
+      "sysmlReq": "需求",
+      "sysmlUseCase": "用例",
+      "sysmlBlockFull": "SysML 块定义",
+      "sysmlReqFull": "SysML 需求",
+      "sysmlUseCaseFull": "SysML 用例"
+    }
+  },
+  "aiChat": {
+    "title": "AI 助手",
+    "new": "新",
+    "v2": "工作流生成 V2",
+    "desc": "自然语言描述业务逻辑，支持复杂分支和错误处理。",
+    "createTitle": "AI 创建",
+    "createDesc": "描述您想构建的工作流，或上传图片进行复刻。",
+    "quickStarts": "快速开始",
+    "docProcess": {
+      "title": "文档处理",
+      "desc": "自动解析 PDF/JSON 文件"
+    },
+    "userAuth": {
+      "title": "用户认证",
+      "desc": "注册与验证流程"
+    },
+    "etl": {
+      "title": "ETL 管道",
+      "desc": "提取、转换、加载数据"
+    },
+    "inputPlaceholder": "描述您的工作流...",
+    "generate": "生成",
+    "quickInputs": {
+      "doc": "创建一个文档处理工作流",
+      "auth": "创建一个带有邮箱验证的用户注册流程",
+      "etl": "创建一个数据 ETL 管道"
+    }
+  },
+  "aiGenerator": {
+    "title": "AI 生成工作流",
+    "placeholder": "在此描述您的工作流逻辑...",
+    "cancel": "取消",
+    "generate": "生成"
+  },
+  "propertyPanel": {
+    "title": "格式",
+    "noSelection": "未选中节点",
+    "tabs": {
+      "style": "样式",
+      "text": "文本",
+      "arrange": "调整图形"
+    },
+    "style": {
+      "fill": "填充",
+      "stroke": "线条",
+      "opacity": "不透明度",
+      "rounded": "圆角",
+      "shadow": "阴影"
+    },
+    "text": {
+      "content": "内容",
+      "color": "字体颜色"
+    },
+    "arrange": {
+      "front": "移至最前",
+      "back": "移至最后",
+      "size": "大小",
+      "position": "位置"
+    }
+  }
+}

package/src/plugins/aiWorkflowEditor.ts

@@ -0,0 +1,6 @@
+import { defineNuxtPlugin } from '#app';
+import AiWorkflowEditor from '@/components/AiWorkflowEditor.vue';
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.component('AiWorkflowEditor', AiWorkflowEditor);
+});

package/src/types/ai.ts

@@ -0,0 +1,7 @@
+export interface LlmConfig {
+  provider: 'openai' | 'ollama';
+  model: string;
+  temperature: number;
+  apiKey?: string;
+  baseUrl?: string;
+}

package/src/types/workflow.ts

@@ -0,0 +1,25 @@
+import type { LlmConfig } from './ai';
+
+export interface WorkflowNode {
+  id: string;
+  type: string;
+  data: {
+    label: string;
+    props?: Record<string, any>;
+    llmConfig?: LlmConfig;
+  };
+  position: { x: number; y: number };
+}
+
+export interface WorkflowEdge {
+  id: string;
+  source: string;
+  target: string;
+  label?: string;
+}
+
+export interface AiGenerateWorkflowParams {
+  prompt: string;
+  llmConfig: LlmConfig;
+  nodeTypes?: string[];
+}

package/src/utils/llmAdapter.ts

@@ -0,0 +1,46 @@
+import { ChatOpenAI } from '@langchain/openai';
+import { ChatOllama } from '@langchain/community/chat_models/ollama';
+import type { LlmConfig } from '@/types/ai';
+
+/**
+ * LLM 客户端适配器
+ * 统一封装 OpenAI 和 Ollama 的调用接口
+ */
+export class LlmClient {
+  public client: ChatOpenAI | ChatOllama;
+
+  constructor(config: LlmConfig) {
+    if (config.provider === 'openai') {
+      this.client = new ChatOpenAI({
+        apiKey: config.apiKey,
+        modelName: config.model,
+        temperature: config.temperature,
+        configuration: {
+            baseURL: config.baseUrl,
+        }
+      });
+    } else if (config.provider === 'ollama') {
+      this.client = new ChatOllama({
+        model: config.model,
+        temperature: config.temperature,
+        baseUrl: config.baseUrl || 'http://localhost:11434',
+      });
+    } else {
+      throw new Error('Unsupported LLM provider');
+    }
+  }
+
+  /**
+   * 统一调用方法
+   * @param prompt 提示词
+   * @returns AI 响应内容
+   */
+  async invoke(prompt: string): Promise<string> {
+    const response = await this.client.invoke(prompt);
+    // 确保返回字符串
+    if (typeof response.content === 'string') {
+        return response.content;
+    }
+    return JSON.stringify(response.content);
+  }
+}

package/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "./.nuxt/tsconfig.json"
+}

package/uno.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig, presetUno, presetIcons, presetAttributify } from 'unocss'
+
+export default defineConfig({
+  presets: [
+    presetUno(),
+    presetIcons({
+        cdn: 'https://esm.sh/',
+        extraProperties: {
+            'display': 'inline-block',
+            'vertical-align': 'middle',
+        },
+    }),
+    presetAttributify(),
+  ],
+})