vue-agent-start 0.1.0

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

@@ -0,0 +1,119 @@
+<script setup>
+import { ref } from 'vue';
+
+import NodeHandle from '@/workflow/NodeHandle.vue';
+import NodeHoverToolbar from '@/workflow/NodeHoverToolbar.vue';
+import workflow_utils from '@/workflow/utils/workflow_utils';
+
+import Icon from '../Icon.vue';
+
+const props = defineProps({
+  id: String,
+  data: {
+    type: Object,
+    default: () => ({
+      label: '结束',
+      description: '工作流结束节点',
+    }),
+  },
+});
+
+const emit = defineEmits(['duplicate', 'delete', 'connection-plus-click']);
+
+const isCompleted = ref(false);
+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 getAnswerTexts = (answer) => {
+  const label = [];
+  const list = workflow_utils.splitExpressions(answer);
+  for (let i = 0, len = list.length; i < len; i++) {
+    const it = list[i];
+    if (it.startsWith('{{#')) {
+      label.push(it);
+    }
+  }
+  return label;
+};
+
+const getAnswerTextLabel = (variableSelector) => {
+  return workflow_utils.getVariableLabel(variableSelector);
+};
+</script>
+
+<template>
+  <div
+    class="wf-node end-node"
+    @mouseenter="onMouseEnter"
+    @mouseleave="onMouseLeave"
+  >
+    <NodeHoverToolbar
+      v-if="isHovered"
+      node-type="end"
+      @duplicate="duplicateNode"
+      @delete="deleteNode"
+    />
+
+    <div class="wf-node-header">
+      <div class="wf-node-icon">
+        <Icon name="end" />
+      </div>
+      <div class="wf-node-info">
+        <div class="wf-node-title">{{ data.label }}</div>
+        <div class="wf-node-description">{{ data.description }}</div>
+      </div>
+    </div>
+
+    <div v-if="isCompleted" class="wf-node-status">
+      <div class="wf-node-status-indicator wf-is-completed"></div>
+    </div>
+
+    <div class="wf-node-content">
+      <div v-if="data.output && data.output.length" class="wf-node-answer-preview">
+        <div class="wf-node-answer-text">
+          <div v-for="it in data.output" :key="it.name" class="wf-node-answer-row">
+            <div>{{ it.name }}</div>
+            <div>{{ getAnswerTextLabel(it.variableSelector) }}</div>
+          </div>
+        </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: '#ef4444',
+        border: '2px solid #ffffff',
+      }"
+    />
+  </div>
+</template>
+
+<style scoped>
+.end-node {
+  --wf-accent: #ef4444;
+  --wf-accent-hover: #dc2626;
+}
+</style>

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

@@ -0,0 +1,97 @@
+<script setup>
+import { 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: {
+        allowedTypes: ['pdf', 'txt', 'doc'],
+        maxSize: 10,
+      },
+    }),
+  },
+});
+
+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);
+};
+</script>
+
+<template>
+  <div
+    class="wf-node file-upload-node"
+    @mouseenter="onMouseEnter"
+    @mouseleave="onMouseLeave"
+  >
+    <NodeHoverToolbar
+      v-if="isHovered"
+      node-type="file-upload"
+      @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="data.config?.allowedTypes?.length" class="wf-node-preview">
+        <div class="wf-node-preview-label">支持格式</div>
+        <div class="wf-node-preview-value">
+          {{ data.config.allowedTypes.join(', ') }}
+        </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: '#059669', border: '2px solid #ffffff' }"
+    />
+
+    <NodeHandle
+      :id="id"
+      type="source"
+      position="Right"
+      :is-hovered="isHovered"
+      class-name="flow-node-handle-right"
+      :style="{ background: '#059669', border: '2px solid #ffffff' }"
+      @connection-plus-click="onConnectionPlusClick"
+    />
+  </div>
+</template>
+
+<style scoped>
+.file-upload-node {
+  --wf-accent: #059669;
+  --wf-accent-hover: #047857;
+}
+</style>

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

@@ -0,0 +1,204 @@
+<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: 'HTTP 请求',
+      description: 'HTTP 请求节点',
+      method: 'GET',
+      url: '',
+      headers: [],
+      parameters: [],
+      body: {},
+      bodyType: 'NONE',
+    }),
+  },
+});
+
+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);
+};
+
+/** 有效表头计数：nodeCard 里 headers 是 [{name, value}] 数组，忽略空条目 */
+const headerCount = computed(() => {
+  const headers = props.data.headers;
+  if (!Array.isArray(headers)) return 0;
+  return headers.filter((h) => h && h.name).length;
+});
+
+const paramCount = computed(() => {
+  const params = props.data.parameters;
+  if (!Array.isArray(params)) return 0;
+  return params.filter((p) => p && p.name).length;
+});
+
+const method = computed(() => (props.data.method || 'GET').toUpperCase());
+const url = computed(() => props.data.url || '');
+const bodyType = computed(() => (props.data.bodyType || 'NONE').toUpperCase());
+const authEnabled = computed(() => {
+  const auth = props.data.authorization;
+  return !!(auth && auth.auth_type && auth.auth_type !== 'none');
+});
+
+const truncateText = (text, maxLength) => {
+  if (!text) return '';
+  return text.length > maxLength
+    ? `${text.slice(0, Math.max(0, maxLength))}...`
+    : text;
+};
+</script>
+
+<template>
+  <div
+    class="wf-node http-node"
+    @mouseenter="onMouseEnter"
+    @mouseleave="onMouseLeave"
+  >
+    <NodeHoverToolbar
+      v-if="isHovered"
+      node-type="http"
+      @duplicate="duplicateNode"
+      @delete="deleteNode"
+    />
+
+    <div class="wf-node-header">
+      <div class="wf-node-icon">
+        <Icon name="http" />
+      </div>
+      <div class="wf-node-info">
+        <div class="wf-node-title">{{ data.label }}</div>
+        <div class="wf-node-subtitle">HTTP 请求</div>
+      </div>
+    </div>
+
+    <div class="wf-node-content">
+      <div class="wf-node-description">{{ data.description }}</div>
+      <div class="wf-node-preview http-preview">
+        <div class="http-row">
+          <span :class="['http-method', `is-${method.toLowerCase()}`]">{{ method }}</span>
+          <span class="http-url" :title="url">{{ url ? truncateText(url, 30) : '未配置 URL' }}</span>
+          <span v-if="authEnabled" class="http-auth-badge" title="已配置鉴权">🔒</span>
+        </div>
+        <div v-if="bodyType !== 'NONE'" class="http-row">
+          <span class="http-meta-label">Body</span>
+          <span class="http-meta-value http-body-type">{{ bodyType.toLowerCase().replace(/_/g, '-') }}</span>
+        </div>
+        <div v-if="headerCount > 0 || paramCount > 0" class="http-row http-meta-row">
+          <template v-if="headerCount > 0">
+            <span class="http-meta-label">Headers</span>
+            <span class="http-meta-value">{{ headerCount }}</span>
+          </template>
+          <template v-if="paramCount > 0">
+            <span class="http-meta-label">Query</span>
+            <span class="http-meta-value">{{ paramCount }}</span>
+          </template>
+        </div>
+      </div>
+    </div>
+
+    <NodeHandle
+      :id="id"
+      type="target"
+      position="Left"
+      class-name="flow-node-handle-left"
+      :style="{ background: '#06b6d4', border: '2px solid #ffffff' }"
+    />
+
+    <NodeHandle
+      :id="id"
+      type="source"
+      position="Right"
+      :is-hovered="isHovered"
+      class-name="flow-node-handle-right"
+      :style="{ background: '#06b6d4', border: '2px solid #ffffff' }"
+      @connection-plus-click="onConnectionPlusClick"
+    />
+  </div>
+</template>
+
+<style scoped>
+.http-node {
+  --wf-accent: #06b6d4;
+  --wf-accent-hover: #0891b2;
+}
+
+.http-preview {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.http-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 11px;
+}
+
+.http-method {
+  padding: 2px 8px;
+  font-size: 10px;
+  font-weight: 700;
+  color: #ffffff;
+  background: #6b7280;
+  border-radius: 4px;
+  letter-spacing: 0.5px;
+}
+.http-method.is-get { background: #2563eb; }
+.http-method.is-post { background: #059669; }
+.http-method.is-put { background: #d97706; }
+.http-method.is-delete { background: #dc2626; }
+.http-method.is-patch { background: #7c3aed; }
+
+.http-url {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  color: #1f2937;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.http-meta-label {
+  color: color-mix(in srgb, var(--wf-accent) 90%, #000);
+  font-weight: 500;
+}
+
+.http-meta-value {
+  color: #1f2937;
+}
+
+.http-meta-row {
+  gap: 12px;
+}
+
+.http-body-type {
+  padding: 1px 6px;
+  background: #eef2ff;
+  color: #4338ca;
+  border-radius: 4px;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  font-size: 10px;
+}
+
+.http-auth-badge {
+  font-size: 10px;
+  opacity: 0.75;
+}
+</style>

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

@@ -0,0 +1,110 @@
+<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: '暂停工作流等待人工审批或补充信息',
+      approvalType: 'approve',
+      formFields: [],
+    }),
+  },
+});
+
+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 approvalLabel = computed(() =>
+  ({
+    approve: '审批（是/否）',
+    form: '表单填写',
+    text: '文本回复',
+  })[props.data.approvalType] || '未配置'
+);
+
+const fieldCount = computed(() => props.data.formFields?.length || 0);
+</script>
+
+<template>
+  <div
+    class="wf-node human-input-node"
+    @mouseenter="onMouseEnter"
+    @mouseleave="onMouseLeave"
+  >
+    <NodeHoverToolbar
+      v-if="isHovered"
+      node-type="human_input"
+      @duplicate="duplicateNode"
+      @delete="deleteNode"
+    />
+
+    <div class="wf-node-header">
+      <div class="wf-node-icon">
+        <Icon name="user" />
+      </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 class="wf-node-preview">
+        <div class="wf-node-preview-label">介入类型</div>
+        <div class="wf-node-preview-value">{{ approvalLabel }}</div>
+      </div>
+      <div v-if="fieldCount > 0" class="human-field-hint">
+        {{ fieldCount }} 个表单字段
+      </div>
+    </div>
+
+    <NodeHandle
+      :id="id"
+      type="target"
+      position="Left"
+      class-name="flow-node-handle-left"
+      :style="{ background: '#f59e0b', border: '2px solid #ffffff' }"
+    />
+    <NodeHandle
+      :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>
+.human-input-node {
+  --wf-accent: #f59e0b;
+  --wf-accent-hover: #d97706;
+}
+
+.human-field-hint {
+  margin-top: 4px;
+  padding: 4px 8px;
+  font-size: 11px;
+  color: #78716c;
+  background: #fef3c7;
+  border-radius: 4px;
+}
+</style>

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

@@ -0,0 +1,98 @@
+<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: '对列表变量的每一项执行子图',
+      iteratorVariableSelector: [],
+      outputVariableSelector: [],
+    }),
+  },
+});
+
+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 iterVarLabel = computed(() =>
+  workflow_utils.getVariableLabel(props.data.iteratorVariableSelector || []),
+);
+</script>
+
+<template>
+  <div
+    class="wf-node iteration-node"
+    @mouseenter="onMouseEnter"
+    @mouseleave="onMouseLeave"
+  >
+    <NodeHoverToolbar
+      v-if="isHovered"
+      node-type="iteration"
+      @duplicate="duplicateNode"
+      @delete="deleteNode"
+    />
+
+    <div class="wf-node-header">
+      <div class="wf-node-icon">
+        <Icon name="loop" />
+      </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="iterVarLabel" class="wf-node-preview">
+        <div class="wf-node-preview-label">迭代变量</div>
+        <div class="wf-node-preview-value">{{ iterVarLabel }}</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: '#f472b6', border: '2px solid #ffffff' }"
+    />
+    <NodeHandle
+      :id="id"
+      type="source"
+      position="Right"
+      :is-hovered="isHovered"
+      class-name="flow-node-handle-right"
+      :style="{ background: '#f472b6', border: '2px solid #ffffff' }"
+      @connection-plus-click="onConnectionPlusClick"
+    />
+  </div>
+</template>
+
+<style scoped>
+.iteration-node {
+  --wf-accent: #f472b6;
+  --wf-accent-hover: #ec4899;
+}
+</style>