vue-agent-start 0.1.0

package/src/agent-flow/workflow/nodes/ClassifierNode.vue

@@ -0,0 +1,199 @@
+<script setup>
+import { computed, nextTick, onMounted, ref, watch } from 'vue';
+
+import { useVueFlow } from '@vue-flow/core';
+
+import Icon from '../Icon.vue';
+import NodeHandle from '../NodeHandle.vue';
+import NodeHoverToolbar from '../NodeHoverToolbar.vue';
+
+const props = defineProps({
+  id: String,
+  data: {
+    type: Object,
+    default: () => ({
+      label: '分类器',
+      description: '文本分类节点',
+      config: {
+        categories: ['正面', '负面', '中性'],
+        model: 'text-classification',
+      },
+    }),
+  },
+});
+
+const emit = defineEmits(['duplicate', 'delete', 'connection-plus-click']);
+
+const { updateNodeInternals } = useVueFlow();
+
+const CATEGORY_COLORS = ['#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#06b6d4'];
+const getCategoryColor = (index) => CATEGORY_COLORS[index % CATEGORY_COLORS.length];
+
+/** 可视化用的分类列表：兼容 `data.classes`（新表单）与 `data.config.categories`（旧数据） */
+const visibleCategories = computed(() => {
+  const fromClasses = (props.data.classes || [])
+    .map((c) => c.name || `类别 ${c.id}`)
+    .filter(Boolean);
+  if (fromClasses.length > 0) return fromClasses.slice(0, 5);
+  return (props.data.config?.categories || []).slice(0, 5);
+});
+
+/** 右侧输出 handle：每个分类一个；分类为空时组件模板会退化到单一默认 handle */
+const sourceHandles = computed(() =>
+  visibleCategories.value.map((name, index) => ({
+    id: name || `case-${index}`,
+    color: getCategoryColor(index),
+  })),
+);
+
+// VueFlow 会缓存每个 handle 挂载时的 bounding rect，用这份缓存渲染边。
+// 我们用自定义 top / transform 决定 handle 纵向位置，且 handle 数量随分类
+// 变化 —— 若不主动通知 VueFlow 重新测量，边会从旧的默认锚点（右上或右中）
+// 出发再折返到 DOM 里 handle 的真实位置，视觉上就是"从底部绕出去"。
+// 与 ConditionNode 同样的处理：分类列表变化或组件挂载后强制重量。
+watch(
+  () => sourceHandles.value.map((h) => h.id).join('|'),
+  async () => {
+    await nextTick();
+    updateNodeInternals([props.id]);
+  },
+);
+
+onMounted(async () => {
+  await nextTick();
+  updateNodeInternals([props.id]);
+});
+
+const isHovered = ref(false);
+
+const onMouseEnter = () => (isHovered.value = true);
+const onMouseLeave = () => (isHovered.value = false);
+const duplicateNode = () => emit('duplicate', props.id);
+const deleteNode = () => emit('delete', props.id);
+// NodeHandle 发的是 (event, nodeId, handleId) 三个参数——之前这里只声明了两个，
+// nodeId 被静默塞进了 handleId，结果新建的边 sourceHandle 变成了 nodeId，
+// VueFlow 找不到匹配的 handle，就退回到默认锚点（节点底部），看起来就是
+// "从右侧伸出后折返到底部出来"。改成和 LLMNode 等其他节点一致的三参数签名。
+const onConnectionPlusClick = (event, nodeId, handleId) => {
+  emit('connection-plus-click', event, nodeId, handleId);
+};
+</script>
+
+<template>
+  <div
+    class="wf-node classifier-node"
+    @mouseenter="onMouseEnter"
+    @mouseleave="onMouseLeave"
+  >
+    <NodeHoverToolbar
+      v-if="isHovered"
+      node-type="classifier"
+      @duplicate="duplicateNode"
+      @delete="deleteNode"
+    />
+
+    <div class="wf-node-header">
+      <div class="wf-node-icon">
+        <Icon name="classifier" />
+      </div>
+      <div class="wf-node-info">
+        <div class="wf-node-title">{{ data.label }}</div>
+        <div class="wf-node-subtitle">文本分类</div>
+      </div>
+    </div>
+
+    <div class="wf-node-content">
+      <div class="wf-node-description">{{ data.description }}</div>
+      <div v-if="data.config?.categories?.length" class="wf-node-preview">
+        <div class="wf-node-preview-label">分类标签</div>
+        <div class="classifier-categories">
+          <span
+            v-for="(category, index) in visibleCategories"
+            :key="index"
+            class="classifier-category"
+          >{{ category }}</span>
+          <span
+            v-if="data.config.categories.length > 3"
+            class="classifier-more"
+          >+{{ data.config.categories.length - 3 }} 更多</span>
+        </div>
+      </div>
+      <div v-else class="wf-node-empty">
+        <span class="wf-node-empty-text">配置分类规则</span>
+      </div>
+    </div>
+
+    <NodeHandle
+      :id="id"
+      type="target"
+      position="Left"
+      :is-hovered="isHovered"
+      class-name="flow-node-handle-left"
+      :style="{ background: '#7c3aed', border: '2px solid #ffffff' }"
+    />
+    <!-- 每个分类一个 source handle。若尚未配置分类，退化到单一默认 handle 保证能连线。
+     *   - top: X% 决定纵向位置；分布收缩到 20%~80% 让 handle 远离 header / 底 padding。
+     *   - transform: translate(50%, -50%) 与 VueFlow position="Right" 默认一致 ——
+     *     translateX(50%) 让 handle 半个身位露到节点右边缘外面（否则 handle 会缩在
+     *     border 里，边线看起来像从节点底部拉出去），translateY(-50%) 把 handle 中心
+     *     对齐到 top 的百分位。 -->
+    <template v-if="sourceHandles.length > 0">
+      <NodeHandle
+        v-for="(h, index) in sourceHandles"
+        :key="h.id"
+        :id="id"
+        :handle-id="h.id"
+        type="source"
+        position="Right"
+        :is-hovered="isHovered"
+        class-name="flow-node-handle-right"
+        :style="{
+          background: h.color,
+          border: '2px solid #ffffff',
+          top: `${20 + (60 * (index + 1)) / (sourceHandles.length + 1)}%`,
+          transform: 'translate(50%, -50%)',
+        }"
+        @connection-plus-click="onConnectionPlusClick"
+      />
+    </template>
+    <NodeHandle
+      v-else
+      :id="id"
+      type="source"
+      position="Right"
+      :is-hovered="isHovered"
+      class-name="flow-node-handle-right"
+      :style="{ background: '#7c3aed', border: '2px solid #ffffff' }"
+      @connection-plus-click="onConnectionPlusClick"
+    />
+  </div>
+</template>
+
+<style scoped>
+.classifier-node {
+  --wf-accent: #7c3aed;
+  --wf-accent-hover: #6d28d9;
+}
+
+.classifier-categories {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-top: 4px;
+}
+
+.classifier-category {
+  padding: 2px 8px;
+  font-size: 11px;
+  color: #ffffff;
+  background: var(--wf-accent);
+  border-radius: 999px;
+}
+
+.classifier-more {
+  padding: 2px 8px;
+  font-size: 10px;
+  color: #6b7280;
+  font-style: italic;
+}
+</style>

package/src/agent-flow/workflow/nodes/CodeNode.vue

@@ -0,0 +1,152 @@
+<script setup>
+import { computed, ref } from 'vue';
+
+import Icon from '../Icon.vue';
+import NodeHandle from '../NodeHandle.vue';
+import NodeHoverToolbar from '../NodeHoverToolbar.vue';
+
+const props = defineProps({
+  id: String,
+  data: {
+    type: Object,
+    default: () => ({
+      label: '代码执行',
+      description: '代码执行节点',
+      config: {
+        language: 'python',
+        code: '',
+      },
+    }),
+  },
+});
+
+const emit = defineEmits(['duplicate', 'delete', 'connection-plus-click']);
+
+const isHovered = ref(false);
+
+const onMouseEnter = () => (isHovered.value = true);
+const onMouseLeave = () => (isHovered.value = false);
+const duplicateNode = () => emit('duplicate', props.id);
+const deleteNode = () => emit('delete', props.id);
+const onConnectionPlusClick = (event, nodeId, handleId) => {
+  emit('connection-plus-click', event, nodeId, handleId);
+};
+
+const lineCount = computed(
+  () => props.data.config?.code?.split('\n').length || 0,
+);
+
+const truncateCode = (code, maxLength) => {
+  if (!code) return '';
+  return code.length > maxLength
+    ? `${code.slice(0, Math.max(0, maxLength))}...`
+    : code;
+};
+</script>
+
+<template>
+  <div
+    class="wf-node code-node"
+    @mouseenter="onMouseEnter"
+    @mouseleave="onMouseLeave"
+  >
+    <NodeHoverToolbar
+      v-if="isHovered"
+      node-type="code"
+      @duplicate="duplicateNode"
+      @delete="deleteNode"
+    />
+
+    <div class="wf-node-header">
+      <div class="wf-node-icon">
+        <Icon name="code" />
+      </div>
+      <div class="wf-node-info">
+        <div class="wf-node-title">{{ data.label }}</div>
+        <div class="wf-node-subtitle">{{ data.config?.language || 'Python' }}</div>
+      </div>
+    </div>
+
+    <div class="wf-node-content">
+      <div class="wf-node-description">{{ data.description }}</div>
+      <div v-if="data.config?.code" class="code-preview">
+        <div class="code-preview-header">
+          <span class="code-lang">{{ data.config.language || 'Python' }}</span>
+          <span class="code-lines">{{ lineCount }} 行</span>
+        </div>
+        <pre class="code-preview-body"><code>{{ truncateCode(data.config.code, 80) }}</code></pre>
+      </div>
+      <div v-else class="wf-node-empty">
+        <span class="wf-node-empty-text">点击编辑代码</span>
+      </div>
+    </div>
+
+    <NodeHandle
+      :id="id"
+      type="target"
+      position="Left"
+      class-name="flow-node-handle-left"
+      :style="{ background: '#84cc16', border: '2px solid #ffffff' }"
+    />
+
+    <NodeHandle
+      :id="id"
+      type="source"
+      position="Right"
+      :is-hovered="isHovered"
+      class-name="flow-node-handle-right"
+      :style="{ background: '#84cc16', border: '2px solid #ffffff' }"
+      @connection-plus-click="onConnectionPlusClick"
+    />
+  </div>
+</template>
+
+<style scoped>
+.code-node {
+  --wf-accent: #84cc16;
+  --wf-accent-hover: #65a30d;
+}
+
+.wf-node-subtitle {
+  text-transform: capitalize;
+}
+
+.code-preview {
+  overflow: hidden;
+  border: 1px solid color-mix(in srgb, var(--wf-accent) 30%, transparent);
+  border-radius: 6px;
+  background: color-mix(in srgb, var(--wf-accent) 8%, transparent);
+}
+
+.code-preview-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 4px 8px;
+  border-bottom: 1px solid color-mix(in srgb, var(--wf-accent) 30%, transparent);
+  background: color-mix(in srgb, var(--wf-accent) 14%, transparent);
+}
+
+.code-lang {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  color: color-mix(in srgb, var(--wf-accent) 90%, #000);
+}
+
+.code-lines {
+  font-size: 10px;
+  color: #6b7280;
+}
+
+.code-preview-body {
+  margin: 0;
+  padding: 8px;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  font-size: 11px;
+  line-height: 1.4;
+  color: #1f2937;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+</style>

package/src/agent-flow/workflow/nodes/ConditionNode.vue

@@ -0,0 +1,232 @@
+<script setup lang="ts">
+import { computed, nextTick, onMounted, ref, watch } from 'vue';
+
+import { useVueFlow } from '@vue-flow/core';
+
+import { useWorkflowStore } from '@/stores/workflow';
+import workflow_utils from '@/workflow/utils/workflow_utils';
+
+import Icon from '../Icon.vue';
+import NodeHandle from '../NodeHandle.vue';
+import NodeHoverToolbar from '../NodeHoverToolbar.vue';
+
+const props = defineProps({
+  id: { type: String, default: '' },
+  data: {
+    type: Object,
+    default: () => ({
+      label: '条件分支',
+      description: '条件判断分支节点',
+      cases: [],
+    }),
+  },
+});
+
+const emit = defineEmits(['duplicate', 'delete', 'connection-plus-click']);
+const workflowStore = useWorkflowStore();
+const isHovered = ref(false);
+const { updateNodeInternals } = useVueFlow();
+
+// 当 cases 数量或顺序变化时，通知 vue-flow 重新测量本节点的所有 handle 边界，
+// 否则新加的 handle 边界为空，边会被画到节点默认锚点（右上角）而不是对应 case。
+watch(
+  () => props.data.cases?.map((c: any) => c.id).join(',') ?? '',
+  async () => {
+    await nextTick();
+    updateNodeInternals([props.id]);
+  },
+);
+
+onMounted(async () => {
+  await nextTick();
+  updateNodeInternals([props.id]);
+});
+
+const onMouseEnter = () => (isHovered.value = true);
+const onMouseLeave = () => (isHovered.value = false);
+const duplicateNode = () => emit('duplicate', props.id);
+const deleteNode = () => emit('delete', props.id);
+const onConnectionPlusClick = (event, nodeId, handleId) => {
+  emit('connection-plus-click', event, nodeId, handleId);
+};
+
+const getOperatorText = (operator) => workflow_utils.getOperator(operator);
+
+const getCaseSummary = (item: any) => {
+  const list = item?.conditions || [];
+  if (list.length === 0) return '';
+  const logical = (item?.logicalOperator || 'and').toUpperCase();
+  return list
+    .map((it: any) => {
+      const varLabel = workflow_utils.getVariableLabel(it.variableSelector) || '?';
+      const op = getOperatorText(it.operator) || '';
+      const val = it.value ?? '';
+      return `${varLabel} ${op} ${val}`.trim();
+    })
+    .join(` ${logical} `);
+};
+
+const conditionCount = computed(() => props.data.cases?.length || 0);
+</script>
+
+<template>
+  <div
+    class="wf-node condition-node"
+    @mouseenter="onMouseEnter"
+    @mouseleave="onMouseLeave"
+  >
+    <NodeHoverToolbar
+      v-if="isHovered"
+      node-type="condition"
+      @duplicate="duplicateNode"
+      @delete="deleteNode"
+    />
+
+    <div class="wf-node-header">
+      <div class="wf-node-icon">
+        <Icon name="condition" />
+      </div>
+      <div class="wf-node-info">
+        <div class="wf-node-title">{{ data.label }}</div>
+        <div class="wf-node-subtitle">
+          <span>{{ conditionCount }} 个条件</span>
+          <span class="wf-node-description">{{ data.description }}</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="wf-node-content">
+      <div v-if="!data.cases || data.cases.length === 0" class="wf-node-empty">
+        <span class="wf-node-empty-text">尚未配置分支条件</span>
+      </div>
+      <div
+        v-for="(item, idx) in data.cases"
+        :key="item.id"
+        class="condition-case"
+        :style="{ borderLeftColor: item.color }"
+        :title="getCaseSummary(item)"
+      >
+        <span class="condition-case-badge">
+          {{ idx === 0 ? 'IF' : 'ELIF' }}
+        </span>
+        <span class="condition-case-index">#{{ idx + 1 }}</span>
+        <span class="condition-case-summary">
+          <template v-if="item.conditions && item.conditions.length > 0">
+            {{ getCaseSummary(item) }}
+          </template>
+          <template v-else>
+            <span class="condition-case-placeholder">未设置条件</span>
+          </template>
+        </span>
+        <!-- 每个 case 卡片内嵌自己的 source handle。位置由卡片布局决定，
+             不再依赖 JS 测量 nodeRect/caseRect，避免缩放 & 时序问题。 -->
+        <NodeHandle
+          :id="id"
+          :handle-id="item.id"
+          type="source"
+          position="Right"
+          :is-hovered="isHovered"
+          class-name="flow-node-handle-right condition-case-handle"
+          :style="{
+            background: item.color || '#f59e0b',
+            border: '2px solid #ffffff',
+          }"
+          @connection-plus-click="onConnectionPlusClick"
+        />
+      </div>
+    </div>
+
+    <NodeHandle
+      :id="id"
+      type="target"
+      position="Left"
+      class-name="flow-node-handle-left"
+      :style="{ background: '#f59e0b', border: '2px solid #ffffff' }"
+    />
+
+    <!-- 没有 case 时也要有一个默认 source handle，保证能连线 -->
+    <NodeHandle
+      v-if="!data.cases || data.cases.length === 0"
+      :id="id"
+      type="source"
+      position="Right"
+      :is-hovered="isHovered"
+      class-name="flow-node-handle-right"
+      :style="{ background: '#f59e0b', border: '2px solid #ffffff' }"
+      @connection-plus-click="onConnectionPlusClick"
+    />
+  </div>
+</template>
+
+<style scoped>
+.condition-node {
+  --wf-accent: #f59e0b;
+  --wf-accent-hover: #d97706;
+}
+
+.condition-case {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  height: 28px;
+  margin: 4px 0;
+  padding: 0 8px;
+  border: 1px solid var(--wf-accent);
+  border-left: 3px solid var(--wf-accent);
+  border-radius: 6px;
+  background: color-mix(in srgb, var(--wf-accent) 6%, transparent);
+  /* 不裁剪，让 handle 能突出到卡片外，落在节点右边缘 */
+  overflow: visible;
+}
+
+.condition-case + .condition-case {
+  margin-top: 6px;
+}
+
+.condition-case-badge {
+  flex: 0 0 auto;
+  padding: 1px 6px;
+  font-size: 10px;
+  font-weight: 700;
+  color: #ffffff;
+  background: color-mix(in srgb, var(--wf-accent) 85%, #000);
+  border-radius: 3px;
+  letter-spacing: 0.3px;
+  line-height: 14px;
+}
+
+.condition-case-index {
+  flex: 0 0 auto;
+  font-size: 10px;
+  color: color-mix(in srgb, var(--wf-accent) 80%, #000);
+  font-weight: 500;
+  opacity: 0.7;
+}
+
+.condition-case-summary {
+  flex: 1 1 auto;
+  min-width: 0;
+  font-size: 11px;
+  color: #1f2937;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.condition-case-placeholder {
+  color: #9ca3af;
+  font-style: italic;
+}
+
+/* 内嵌到 case 卡片的 source handle：
+   - top: 50% + translateY(-50%) → 精确对齐卡片纵向中心
+   - right: -18px → 补偿节点 padding(16) + 边框(2)，让 handle 中心落在节点右边框
+   - translateX(50%) → 让 handle 半个身位在节点外，与其他节点视觉一致
+   :deep 用于穿透 vue-flow 默认 .vue-flow__handle-right 优先级 */
+.condition-case :deep(.condition-case-handle) {
+  top: 50% !important;
+  right: -18px !important;
+  transform: translate(50%, -50%) !important;
+}
+</style>

package/src/agent-flow/workflow/nodes/DocumentExtractorNode.vue

@@ -0,0 +1,96 @@
+<script setup>
+import { computed, ref } from 'vue';
+
+import workflow_utils from '@/workflow/utils/workflow_utils';
+
+import Icon from '../Icon.vue';
+import NodeHandle from '../NodeHandle.vue';
+import NodeHoverToolbar from '../NodeHoverToolbar.vue';
+
+const props = defineProps({
+  id: String,
+  data: {
+    type: Object,
+    default: () => ({
+      label: '文档提取',
+      description: '从文件变量中提取文本内容',
+      variableSelector: [],
+    }),
+  },
+});
+
+const emit = defineEmits(['duplicate', 'delete', 'connection-plus-click']);
+
+const isHovered = ref(false);
+const onMouseEnter = () => (isHovered.value = true);
+const onMouseLeave = () => (isHovered.value = false);
+const duplicateNode = () => emit('duplicate', props.id);
+const deleteNode = () => emit('delete', props.id);
+const onConnectionPlusClick = (event, nodeId, handleId) => {
+  emit('connection-plus-click', event, nodeId, handleId);
+};
+
+const sourceLabel = computed(() =>
+  workflow_utils.getVariableLabel(props.data.variableSelector || []),
+);
+</script>
+
+<template>
+  <div
+    class="wf-node document-extractor-node"
+    @mouseenter="onMouseEnter"
+    @mouseleave="onMouseLeave"
+  >
+    <NodeHoverToolbar
+      v-if="isHovered"
+      node-type="document_extractor"
+      @duplicate="duplicateNode"
+      @delete="deleteNode"
+    />
+
+    <div class="wf-node-header">
+      <div class="wf-node-icon">
+        <Icon name="file" />
+      </div>
+      <div class="wf-node-info">
+        <div class="wf-node-title">{{ data.label }}</div>
+        <div class="wf-node-subtitle">文档解析</div>
+      </div>
+    </div>
+
+    <div class="wf-node-content">
+      <div class="wf-node-description">{{ data.description }}</div>
+      <div v-if="sourceLabel" class="wf-node-preview">
+        <div class="wf-node-preview-label">源文件</div>
+        <div class="wf-node-preview-value">{{ sourceLabel }}</div>
+      </div>
+      <div v-else class="wf-node-empty">
+        <span class="wf-node-empty-text">选择文件变量</span>
+      </div>
+    </div>
+
+    <NodeHandle
+      :id="id"
+      type="target"
+      position="Left"
+      class-name="flow-node-handle-left"
+      :style="{ background: '#0891b2', border: '2px solid #ffffff' }"
+    />
+    <NodeHandle
+      :id="id"
+      type="source"
+      position="Right"
+      :is-hovered="isHovered"
+      class-name="flow-node-handle-right"
+      :style="{ background: '#0891b2', border: '2px solid #ffffff' }"
+      @connection-plus-click="onConnectionPlusClick"
+    />
+  </div>
+</template>
+
+<style scoped>
+.document-extractor-node {
+  --wf-accent: #0891b2;
+  --wf-accent-hover: #0e7490;
+}
+</style>