vue-agent-start 0.1.0

package/src/agent-flow/workflow/nodeCard/StartNodeCard.vue

@@ -0,0 +1,216 @@
+<script setup lang="ts">
+import { h, ref } from 'vue';
+
+import {
+  DeleteOutlined,
+  EditOutlined,
+  PlusOutlined,
+  UserSwitchOutlined,
+} from '@ant-design/icons-vue';
+
+import TriggersItemCard from '@/components/stubs/TriggersItemCard.vue';
+import VariableModal from '@/components/stubs/VariableModal.vue';
+import WfField from '@/workflow/WfField.vue';
+
+defineProps<{ nodeId?: string }>();
+
+const formState: any = defineModel();
+
+const variableModalRef = ref();
+
+// 直接把 item 作为参数交给 showModal，同一次同步调用里就把表单初值写进
+// 弹窗内部的 form；再也不通过 :main-data prop 中转，避免 prop 需要下一
+// 个 tick 才刷新导致的"第一次点开表单是空的 / 是上次的"那种时序 bug。
+function toEditVariable(item?: any) {
+  variableModalRef.value?.showModal?.(item ?? {});
+}
+
+function removeVariable(index: number) {
+  formState.value.variables.splice(index, 1);
+}
+
+const variableFormSubmit = (data: any) => {
+  if (!Array.isArray(formState.value.variables)) formState.value.variables = [];
+  const items = formState.value.variables;
+  if (data.id) {
+    const index = items.findIndex((it: any) => it.id === data.id);
+    if (index === -1) items.push(data);
+    else items[index] = { ...data };
+  } else {
+    data.id = Date.now();
+    items.push(data);
+  }
+};
+</script>
+
+<template>
+  <VariableModal
+    ref="variableModalRef"
+    @form-submit="variableFormSubmit"
+  />
+
+  <div v-if="formState.mode === 'WORKFLOW'" class="wf-config-section">
+    <WfField title="触发器">
+      <template #tooltip>
+        定义工作流被外部（HTTP / 定时 / 事件）触发的方式。
+      </template>
+      <TriggersItemCard v-model="formState" />
+    </WfField>
+  </div>
+
+  <div class="wf-config-section">
+    <WfField title="输入变量">
+      <template #tooltip>
+        这里定义的变量会在整个流程中可用，通过 <code v-pre>{{#sys.xxx#}}</code> 或 <code>/</code> 引用。
+      </template>
+      <template #operations>
+        <a-button
+          :icon="h(PlusOutlined)"
+          size="small"
+          type="primary"
+          @click="toEditVariable({})"
+        />
+      </template>
+
+      <div
+        v-if="!formState.variables || formState.variables.length === 0"
+        class="start-empty"
+      >
+        尚未配置输入变量，点击右上角 + 添加
+      </div>
+
+      <div class="start-var-list">
+        <div
+          v-for="(item, index) in formState.variables"
+          :key="item.id ?? index"
+          class="start-var-item"
+        >
+          <div class="start-var-left">
+            <UserSwitchOutlined class="start-var-icon" />
+            <div>
+              <div class="start-var-label">{{ item.label || item.name }}</div>
+              <div class="start-var-sub">{{ item.name }}</div>
+            </div>
+          </div>
+          <div class="start-var-right">
+            <a-tag>{{ item.type }}</a-tag>
+            <a-tag v-if="item.required" color="orange">必填</a-tag>
+            <a-button
+              :icon="h(EditOutlined)"
+              size="small"
+              type="text"
+              @click="toEditVariable(item)"
+            />
+            <a-button
+              :icon="h(DeleteOutlined)"
+              size="small"
+              type="text"
+              danger
+              @click="removeVariable(index)"
+            />
+          </div>
+        </div>
+      </div>
+    </WfField>
+  </div>
+
+  <div class="wf-config-section">
+    <WfField title="系统变量" foldable default-fold>
+      <template #tooltip>
+        运行时由引擎注入的只读变量，通过 <code v-pre>{{#sys.xxx#}}</code> 引用。
+      </template>
+      <div class="start-var-list">
+        <div
+          v-for="(item, index) in formState.sysVariables"
+          :key="index"
+          class="start-var-item start-var-item-readonly"
+        >
+          <div class="start-var-left">
+            <div class="start-var-sys">sys</div>
+            <div class="start-var-label">{{ item.name }}</div>
+          </div>
+          <a-tag>{{ item.type }}</a-tag>
+        </div>
+      </div>
+    </WfField>
+  </div>
+</template>
+
+<style scoped>
+.start-empty {
+  padding: 12px;
+  text-align: center;
+  font-size: 12px;
+  color: #9ca3af;
+  background: #f9fafb;
+  border: 1px dashed #e5e7eb;
+  border-radius: 6px;
+}
+
+.start-var-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.start-var-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 10px;
+  background: #f9fafb;
+  border: 1px solid #f0f0f0;
+  border-radius: 6px;
+  transition: background 0.15s;
+}
+
+.start-var-item:hover {
+  background: #f3f4f6;
+}
+
+.start-var-item-readonly {
+  background: #ffffff;
+}
+
+.start-var-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.start-var-right {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.start-var-icon {
+  font-size: 16px;
+  color: #6366f1;
+}
+
+.start-var-label {
+  font-size: 12px;
+  font-weight: 500;
+  color: #1f2937;
+}
+
+.start-var-sub {
+  font-size: 11px;
+  color: #9ca3af;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+}
+
+.start-var-sys {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 20px;
+  font-size: 10px;
+  font-weight: 600;
+  color: #ffffff;
+  background: #6b7280;
+  border-radius: 4px;
+}
+</style>

package/src/agent-flow/workflow/nodeCard/VariableAssignerCard.vue

@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import { h } from 'vue';
+
+import { DeleteOutlined, PlusOutlined } from '@ant-design/icons-vue';
+
+import VariableSelector from '@/components/VariableSelector.vue';
+import WfField from '@/workflow/WfField.vue';
+
+defineProps<{ nodeId?: string }>();
+
+const formState: any = defineModel();
+
+const WRITE_MODES = [
+  { value: 'overwrite', label: '覆盖' },
+  { value: 'append', label: '追加' },
+  { value: 'clear', label: '清空' },
+];
+
+const addAssignment = () => {
+  if (!Array.isArray(formState.value.assignments)) formState.value.assignments = [];
+  formState.value.assignments.push({
+    target: '',
+    source: [],
+    writeMode: 'overwrite',
+  });
+};
+
+const removeAssignment = (index: number) => {
+  formState.value.assignments.splice(index, 1);
+};
+</script>
+
+<template>
+  <div class="wf-config-section">
+    <WfField title="赋值项">
+      <template #tooltip>
+        为每一项指定目标变量、来源变量、写入模式。
+      </template>
+      <template #operations>
+        <a-button
+          :icon="h(PlusOutlined)"
+          size="small"
+          type="primary"
+          @click="addAssignment"
+        />
+      </template>
+
+      <div
+        v-if="!formState.assignments || formState.assignments.length === 0"
+        class="assigner-empty"
+      >
+        点击右上角 + 添加赋值项
+      </div>
+
+      <div class="assigner-list">
+        <div
+          v-for="(a, index) in formState.assignments"
+          :key="index"
+          class="assigner-item"
+        >
+          <div class="assigner-row-1">
+            <a-input
+              v-model:value="a.target"
+              placeholder="目标变量（如 sys.foo）"
+              size="small"
+              style="flex: 1"
+            />
+            <a-select
+              v-model:value="a.writeMode"
+              :options="WRITE_MODES"
+              size="small"
+              style="width: 80px"
+            />
+            <a-button
+              :icon="h(DeleteOutlined)"
+              size="small"
+              type="text"
+              danger
+              @click="removeAssignment(index)"
+            />
+          </div>
+          <VariableSelector
+            v-if="a.writeMode !== 'clear'"
+            v-model="a.source"
+            :node-id="nodeId"
+            placeholder="来源变量"
+          />
+        </div>
+      </div>
+    </WfField>
+  </div>
+</template>
+
+<style scoped>
+.assigner-empty {
+  padding: 12px;
+  text-align: center;
+  font-size: 12px;
+  color: #9ca3af;
+  background: #f9fafb;
+  border: 1px dashed #e5e7eb;
+  border-radius: 6px;
+}
+
+.assigner-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.assigner-item {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 8px;
+  background: #f9fafb;
+  border-radius: 6px;
+}
+
+.assigner-row-1 {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+</style>

package/src/agent-flow/workflow/nodeCard/VariableNodeCard.vue

@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import { h } from 'vue';
+
+import { DeleteOutlined, PlusOutlined } from '@ant-design/icons-vue';
+
+import VariableSelector from '@/components/VariableSelector.vue';
+import WfField from '@/workflow/WfField.vue';
+
+defineProps<{ nodeId?: string }>();
+
+const formState: any = defineModel();
+
+const addItem = () => {
+  if (!formState.value.output) formState.value.output = [{ children: [] }];
+  if (!Array.isArray(formState.value.output[0].children)) {
+    formState.value.output[0].children = [];
+  }
+  formState.value.output[0].children.push({
+    type: 'string',
+    name: '',
+    label: '',
+    value: '',
+    description: '',
+    variableSelector: [],
+  });
+};
+
+const removeItem = (index: number) => {
+  formState.value.output[0].children.splice(index, 1);
+};
+
+const onNameChange = (it: any) => {
+  it.label = it.name;
+};
+</script>
+
+<template>
+  <div class="wf-config-section">
+    <WfField title="聚合变量" required>
+      <template #tooltip>
+        把多个上游变量映射到本节点的输出字段，供下游统一引用。
+      </template>
+      <template #operations>
+        <a-button
+          :icon="h(PlusOutlined)"
+          size="small"
+          type="primary"
+          @click="addItem"
+        />
+      </template>
+
+      <div
+        v-if="
+          !formState.output ||
+          !formState.output[0]?.children ||
+          formState.output[0].children.length === 0
+        "
+        class="var-empty"
+      >
+        点击右上角 + 添加聚合项
+      </div>
+
+      <div class="var-list">
+        <div
+          v-for="(it, index) in formState.output[0]?.children"
+          :key="index"
+          class="var-item"
+        >
+          <a-input
+            v-model:value="it.name"
+            placeholder="字段名"
+            size="small"
+            style="width: 120px"
+            @change="onNameChange(it)"
+          />
+          <VariableSelector
+            v-model="it.variableSelector"
+            :node-id="nodeId"
+            placeholder="选择上游变量"
+            style="flex: 1"
+          />
+          <a-button
+            :icon="h(DeleteOutlined)"
+            size="small"
+            type="text"
+            danger
+            @click="removeItem(index)"
+          />
+        </div>
+      </div>
+    </WfField>
+  </div>
+</template>
+
+<style scoped>
+.var-empty {
+  padding: 12px;
+  text-align: center;
+  font-size: 12px;
+  color: #9ca3af;
+  background: #f9fafb;
+  border: 1px dashed #e5e7eb;
+  border-radius: 6px;
+}
+
+.var-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.var-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 8px;
+  background: #f9fafb;
+  border: 1px solid #f0f0f0;
+  border-radius: 6px;
+}
+</style>

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

@@ -0,0 +1,122 @@
+<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: 'Agent',
+      description: '智能体节点',
+      config: {
+        model: 'gpt-3.5-turbo',
+        temperature: 0.7,
+        max_tokens: 1000,
+        prompt: '',
+      },
+    }),
+  },
+});
+
+const emit = defineEmits(['duplicate', 'delete', 'connection-plus-click']);
+
+const isRunning = ref(false);
+const showMetrics = ref(true);
+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 agent-node"
+    @mouseenter="onMouseEnter"
+    @mouseleave="onMouseLeave"
+  >
+    <NodeHoverToolbar
+      v-if="isHovered"
+      node-type="agent"
+      @duplicate="duplicateNode"
+      @delete="deleteNode"
+    />
+
+    <div class="wf-node-header">
+      <div class="wf-node-icon">
+        <Icon name="agent" />
+      </div>
+      <div class="wf-node-info">
+        <div class="wf-node-title">{{ data.label }}</div>
+        <div class="wf-node-subtitle">
+          <div>{{ data.model?.provider }}</div>
+          <div>{{ data.model?.modelName || 'GPT-3.5-turbo' }}</div>
+        </div>
+      </div>
+      <div v-if="isRunning" class="wf-node-status">
+        <div class="wf-node-status-indicator wf-is-running"></div>
+      </div>
+    </div>
+
+    <div class="wf-node-content">
+      <div class="wf-node-description">{{ data.description }}</div>
+      <div v-if="data.config?.prompt" class="wf-node-config-preview">
+        <div class="wf-node-config-label">提示词预览</div>
+        <div class="wf-node-config-value">
+          {{ truncateText(data.config.prompt, 50) }}
+        </div>
+      </div>
+    </div>
+
+    <div v-if="showMetrics" class="wf-node-metrics">
+      <div class="wf-node-metric">
+        <span class="wf-node-metric-label">温度</span>
+        <span class="wf-node-metric-value">{{ data.config?.temperature ?? 0.7 }}</span>
+      </div>
+      <div class="wf-node-metric">
+        <span class="wf-node-metric-label">最大令牌</span>
+        <span class="wf-node-metric-value">{{ data.config?.max_tokens ?? 1000 }}</span>
+      </div>
+    </div>
+
+    <NodeHandle
+      :id="id"
+      type="target"
+      position="Left"
+      class-name="flow-node-handle-left"
+      :style="{ background: '#8b5cf6', border: '2px solid #ffffff' }"
+    />
+
+    <NodeHandle
+      :id="id"
+      type="source"
+      position="Right"
+      :is-hovered="isHovered"
+      class-name="flow-node-handle-right"
+      :style="{ background: '#8b5cf6', border: '2px solid #ffffff' }"
+      @connection-plus-click="onConnectionPlusClick"
+    />
+  </div>
+</template>
+
+<style scoped>
+.agent-node {
+  --wf-accent: #8b5cf6;
+  --wf-accent-hover: #7c3aed;
+}
+</style>

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

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import { 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: '直接回复节点',
+      config: { text: '' },
+    }),
+  },
+});
+
+const emit = defineEmits(['duplicate', 'delete']);
+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: string) => {
+  const label: string[] = [];
+  const list = workflow_utils.splitExpressions(answer);
+  for (const it of list) {
+    if (it.startsWith('{{#')) label.push(it);
+  }
+  return label;
+};
+
+const getAnswerTextLabel = (str: string) => {
+  const list = str.replaceAll(/\{\{#(.*?)#\}\}/g, '$1').split('.');
+  return workflow_utils.getVariableLabel(list);
+};
+</script>
+
+<template>
+  <div
+    class="wf-node answer-node"
+    @mouseenter="onMouseEnter"
+    @mouseleave="onMouseLeave"
+  >
+    <NodeHoverToolbar
+      v-if="isHovered"
+      node-type="answer"
+      @duplicate="duplicateNode"
+      @delete="deleteNode"
+    />
+
+    <div class="wf-node-header">
+      <div class="wf-node-icon">
+        <Icon name="answer" />
+      </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.answer" class="wf-node-preview">
+        <div class="wf-node-preview-list">
+          <template v-for="text in getAnswerTexts(data.answer)" :key="text">
+            <div v-if="text.startsWith('{{#')">{{ getAnswerTextLabel(text) }}</div>
+            <div v-else>{{ text }}</div>
+          </template>
+        </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: '#f97316', border: '2px solid #ffffff' }"
+    />
+  </div>
+</template>
+
+<style scoped>
+.answer-node {
+  --wf-accent: #f97316;
+  --wf-accent-hover: #ea580c;
+}
+</style>