vue-agent-start 0.1.0

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

@@ -0,0 +1,147 @@
+<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: '从上游文本中抽取结构化参数',
+      parameters: [],
+      model: { modelName: '' },
+    }),
+  },
+});
+
+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 paramCount = computed(() => props.data.parameters?.length || 0);
+const params = computed(() => props.data.parameters?.slice(0, 3) || []);
+const modelProvider = computed(
+  () => props.data.model?.provider || props.data.model?.providerName || '',
+);
+const modelName = computed(() => props.data.model?.modelName || '');
+</script>
+
+<template>
+  <div
+    class="wf-node parameter-extractor-node"
+    @mouseenter="onMouseEnter"
+    @mouseleave="onMouseLeave"
+  >
+    <NodeHoverToolbar
+      v-if="isHovered"
+      node-type="parameter_extractor"
+      @duplicate="duplicateNode"
+      @delete="deleteNode"
+    />
+
+    <div class="wf-node-header">
+      <div class="wf-node-icon">
+        <Icon name="variable" />
+      </div>
+      <div class="wf-node-info">
+        <div class="wf-node-title">{{ data.label }}</div>
+        <div class="wf-node-subtitle">
+          <template v-if="modelName">
+            <div v-if="modelProvider">{{ modelProvider }}</div>
+            <div>{{ modelName }}</div>
+          </template>
+          <div v-else class="wf-node-subtitle-empty">未选择模型</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="wf-node-content">
+      <div class="wf-node-description">{{ data.description }}</div>
+      <div v-if="paramCount > 0" class="wf-node-preview">
+        <div class="wf-node-preview-label">抽取参数 · {{ paramCount }} 个</div>
+        <div class="wf-node-preview-list">
+          <div v-for="p in params" :key="p.name" class="param-row">
+            <span class="param-name">{{ p.name }}</span>
+            <span class="param-type">{{ p.type || 'string' }}</span>
+          </div>
+          <div v-if="paramCount > 3" class="param-more">
+            +{{ paramCount - 3 }} 个更多
+          </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"
+      class-name="flow-node-handle-left"
+      :style="{ background: '#eab308', border: '2px solid #ffffff' }"
+    />
+    <NodeHandle
+      :id="id"
+      type="source"
+      position="Right"
+      :is-hovered="isHovered"
+      class-name="flow-node-handle-right"
+      :style="{ background: '#eab308', border: '2px solid #ffffff' }"
+      @connection-plus-click="onConnectionPlusClick"
+    />
+  </div>
+</template>
+
+<style scoped>
+.parameter-extractor-node {
+  --wf-accent: #eab308;
+  --wf-accent-hover: #ca8a04;
+}
+
+.wf-node-subtitle-empty {
+  font-style: italic;
+  color: #9ca3af;
+  font-weight: 400;
+}
+
+.param-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 2px 6px;
+  font-size: 11px;
+  background: color-mix(in srgb, var(--wf-accent) 8%, transparent);
+  border-radius: 4px;
+}
+
+.param-name {
+  color: #1f2937;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+}
+
+.param-type {
+  color: color-mix(in srgb, var(--wf-accent) 85%, #000);
+  font-weight: 500;
+}
+
+.param-more {
+  padding: 2px 6px;
+  font-size: 10px;
+  font-style: italic;
+  color: #9ca3af;
+}
+</style>

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

@@ -0,0 +1,161 @@
+<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: '调用内部服务接口',
+      method: 'GET',
+      url: '',
+      headers: [],
+      parameters: [],
+    }),
+  },
+});
+
+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 headerCount = computed(() => {
+  const headers = props.data.headers;
+  if (!Array.isArray(headers)) return 0;
+  return headers.filter((h) => h && h.name).length;
+});
+
+const method = computed(() => (props.data.method || 'GET').toUpperCase());
+const url = computed(() => props.data.url || '');
+
+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 service-api-node"
+    @mouseenter="onMouseEnter"
+    @mouseleave="onMouseLeave"
+  >
+    <NodeHoverToolbar
+      v-if="isHovered"
+      node-type="service-api"
+      @duplicate="duplicateNode"
+      @delete="deleteNode"
+    />
+
+    <div class="wf-node-header">
+      <div class="wf-node-icon">
+        <Icon name="service" />
+      </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 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) : '未配置接口地址' }}</span>
+        </div>
+        <div v-if="headerCount > 0" class="http-row">
+          <span class="http-meta-label">头部</span>
+          <span class="http-meta-value">{{ headerCount }} 个</span>
+        </div>
+      </div>
+    </div>
+
+    <NodeHandle
+      :id="id"
+      type="target"
+      position="Left"
+      class-name="flow-node-handle-left"
+      :style="{ background: '#0ea5a4', border: '2px solid #ffffff' }"
+    />
+
+    <NodeHandle
+      :id="id"
+      type="source"
+      position="Right"
+      :is-hovered="isHovered"
+      class-name="flow-node-handle-right"
+      :style="{ background: '#0ea5a4', border: '2px solid #ffffff' }"
+      @connection-plus-click="onConnectionPlusClick"
+    />
+  </div>
+</template>
+
+<style scoped>
+.service-api-node {
+  --wf-accent: #0ea5a4;
+  --wf-accent-hover: #0d9488;
+}
+
+.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;
+}
+</style>

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

@@ -0,0 +1,199 @@
+<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: '工作流开始节点',
+      variables: [],
+    }),
+  },
+});
+
+const variables = computed(() =>
+  Array.isArray(props.data.variables) ? props.data.variables : [],
+);
+
+const emit = defineEmits(['duplicate', 'delete', 'connection-plus-click']);
+
+const isRunning = 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 onConnectionPlusClick = (event, nodeId, handleId) => {
+  emit('connection-plus-click', event, nodeId, handleId);
+};
+</script>
+
+<template>
+  <div
+    class="wf-node start-node"
+    @mouseenter="onMouseEnter"
+    @mouseleave="onMouseLeave"
+  >
+    <NodeHoverToolbar
+      v-if="isHovered"
+      node-type="start"
+      @duplicate="duplicateNode"
+      @delete="deleteNode"
+    />
+
+    <div class="wf-node-header">
+      <div class="wf-node-icon">
+        <Icon name="start" />
+      </div>
+      <div class="wf-node-info">
+        <div class="wf-node-title">{{ data.label }}</div>
+        <div class="wf-row">
+          <div class="wf-node-description">{{ data.description }}</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="wf-node-content">
+      <div v-if="data.triggers && data.triggers.name" class="wf-node-triggers">
+        <img
+          class="wf-node-triggers-icon"
+          src="https://picsum.photos/800/600?random=11"
+          alt=""
+        />
+        <div>{{ data.triggers.name }}</div>
+        <div class="wf-node-triggers-scope">全部</div>
+      </div>
+
+      <div v-if="variables.length > 0" class="wf-node-preview start-var-preview">
+        <div class="wf-node-preview-label">输入变量</div>
+        <div class="wf-node-preview-list">
+          <div
+            v-for="v in variables"
+            :key="v.id ?? v.name"
+            class="start-var-row"
+          >
+            <span class="start-var-left">
+              <span class="start-var-name">{{ v.name }}</span>
+              <span v-if="v.label && v.label !== v.name" class="start-var-label">
+                {{ v.label }}
+              </span>
+            </span>
+            <span class="start-var-meta">
+              <span class="start-var-type">{{ v.type || 'string' }}</span>
+              <span v-if="v.required" class="start-var-required">必填</span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="isRunning" class="wf-node-status">
+      <div class="wf-node-status-indicator wf-is-running"></div>
+    </div>
+
+    <NodeHandle
+      :id="id"
+      type="source"
+      position="Right"
+      :is-hovered="isHovered"
+      class-name="flow-node-handle-right"
+      :style="{
+        background: '#10b981',
+        border: '2px solid #ffffff',
+      }"
+      @connection-plus-click="onConnectionPlusClick"
+    />
+  </div>
+</template>
+
+<style scoped>
+.start-node {
+  --wf-accent: #10b981;
+  --wf-accent-hover: #059669;
+}
+
+.start-var-preview {
+  margin-top: 8px;
+}
+
+.start-var-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 2px 6px;
+  font-size: 11px;
+  background: color-mix(in srgb, var(--wf-accent) 8%, transparent);
+  border-radius: 4px;
+}
+
+.start-var-left {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 6px;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.start-var-name {
+  color: #1f2937;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.start-var-label {
+  color: #6b7280;
+  font-size: 10px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.start-var-meta {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  flex: none;
+}
+
+.start-var-type {
+  color: color-mix(in srgb, var(--wf-accent) 85%, #000);
+  font-weight: 500;
+}
+
+.start-var-required {
+  padding: 0 4px;
+  font-size: 10px;
+  color: #b45309;
+  background: #fef3c7;
+  border-radius: 3px;
+}
+
+.start-var-more {
+  padding: 2px 6px;
+  font-size: 10px;
+  font-style: italic;
+  color: #9ca3af;
+}
+</style>

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

@@ -0,0 +1,103 @@
+<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: {
+        template: '',
+        variables: [],
+      },
+    }),
+  },
+});
+
+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 truncateText = (text, maxLength) => {
+  if (!text) return '';
+  return text.length > maxLength
+    ? `${text.slice(0, Math.max(0, maxLength))}...`
+    : text;
+};
+</script>
+
+<template>
+  <div
+    class="wf-node template-node"
+    @mouseenter="onMouseEnter"
+    @mouseleave="onMouseLeave"
+  >
+    <NodeHoverToolbar
+      v-if="isHovered"
+      node-type="template"
+      @duplicate="duplicateNode"
+      @delete="deleteNode"
+    />
+
+    <div class="wf-node-header">
+      <div class="wf-node-icon">
+        <Icon name="template" />
+      </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?.template" class="wf-node-preview">
+        <div class="wf-node-preview-label">模板预览</div>
+        <div class="wf-node-preview-value">
+          {{ truncateText(data.config.template, 50) }}
+        </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: '#a855f7', border: '2px solid #ffffff' }"
+    />
+    <NodeHandle
+      :id="id"
+      type="source"
+      position="Right"
+      :is-hovered="isHovered"
+      class-name="flow-node-handle-right"
+      :style="{ background: '#a855f7', border: '2px solid #ffffff' }"
+      @connection-plus-click="onConnectionPlusClick"
+    />
+  </div>
+</template>
+
+<style scoped>
+.template-node {
+  --wf-accent: #a855f7;
+  --wf-accent-hover: #9333ea;
+}
+</style>

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

@@ -0,0 +1,92 @@
+<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: { variable: '' },
+    }),
+  },
+});
+
+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 user-input-node"
+    @mouseenter="onMouseEnter"
+    @mouseleave="onMouseLeave"
+  >
+    <NodeHoverToolbar
+      v-if="isHovered"
+      node-type="user-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 v-if="data.config?.variable" class="wf-node-preview">
+        <div class="wf-node-preview-label">输入变量</div>
+        <div class="wf-node-preview-value">{{ data.config.variable }}</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: '#3b82f6', border: '2px solid #ffffff' }"
+    />
+
+    <NodeHandle
+      :id="id"
+      type="source"
+      position="Right"
+      :is-hovered="isHovered"
+      class-name="flow-node-handle-right"
+      :style="{ background: '#3b82f6', border: '2px solid #ffffff' }"
+      @connection-plus-click="onConnectionPlusClick"
+    />
+  </div>
+</template>
+
+<style scoped>
+.user-input-node {
+  --wf-accent: #3b82f6;
+  --wf-accent-hover: #2563eb;
+}
+</style>