vue-agent-start 0.1.0

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

@@ -0,0 +1,180 @@
+<script setup lang="ts">
+import { getCurrentModel } from '@/adapter/backend';
+import MemoryWindow from '@/components/MemoryWindow.vue';
+import PromptEditor from '@/components/PromptEditor.vue';
+import ToolItemCard from '@/components/ToolItemCard.vue';
+import ModelPickerPopover from '../../../provider-hub/components/ModelPickerPopover.vue';
+import WfField from '@/workflow/WfField.vue';
+import workflow_utils from '@/workflow/utils/workflow_utils';
+
+defineProps<{ nodeId?: string }>();
+
+const formState: any = defineModel();
+
+const loadDefaultModel = async () => {
+  const res: any = await getCurrentModel('LLM');
+  const data = res?.data ?? {};
+  if (!formState.value.model) formState.value.model = {};
+  formState.value.model.modelName = data.modelName;
+  formState.value.model.provider = data.provider ?? data.providerName;
+  formState.value.model.providerName = data.provider ?? data.providerName;
+  formState.value.model.modelProvider = data.provider ?? data.providerName;
+  formState.value.model.modelType = data.modelType ?? 'LLM';
+};
+
+const OUTPUT_DEFAULTS = [
+  { name: 'text', type: 'String', label: '生成内容' },
+  { name: 'files', type: 'Array[File]', label: 'Agent 生成的文件' },
+  { name: 'json', type: 'Array[Object]', label: 'Agent 生成的 JSON' },
+];
+</script>
+
+<template>
+  <div class="wf-config-section">
+    <WfField title="Agent 策略" required>
+      <template #tooltip>
+        推理循环的实现方式。ReAct 用观察-思考-行动多轮；FunctionCalling 由模型直接触发工具。
+      </template>
+      <a-select
+        v-model:value="formState.agentStrategy"
+        :options="workflow_utils.agentStrategy"
+        style="width: 100%"
+      />
+    </WfField>
+
+    <WfField title="模型" required>
+      <template #operations>
+        <a-button type="link" size="small" @click="loadDefaultModel">
+          使用默认
+        </a-button>
+      </template>
+      <ModelPickerPopover
+        v-model="formState.model"
+        model-type="LLM"
+        placeholder="点击选择 Agent 模型"
+        :width="440"
+      />
+    </WfField>
+  </div>
+
+  <div class="wf-config-section">
+    <WfField title="工具">
+      <template #tooltip>
+        Agent 可调用的工具集合，运行时按模型返回决定调用哪个。
+      </template>
+      <ToolItemCard v-model="formState" />
+    </WfField>
+
+    <WfField title="MCP Server" is-subtitle>
+      <template #tooltip>
+        追加 MCP Server 配置（JSON），会自动融合入工具集。
+      </template>
+      <a-textarea
+        v-model:value="formState.agentParameters.mcpServersConfig"
+        placeholder='{"servers": [...]}'
+        :auto-size="{ minRows: 3, maxRows: 8 }"
+      />
+    </WfField>
+  </div>
+
+  <PromptEditor
+    class="wf-config-prompt"
+    title="SYSTEM"
+    :node-id="nodeId"
+    v-model="formState.systemPrompt.text"
+  />
+
+  <PromptEditor
+    class="wf-config-prompt"
+    title="USER"
+    :node-id="nodeId"
+    v-model="formState.userPrompt.text"
+  />
+
+  <div class="wf-config-section">
+    <WfField title="对话记忆">
+      <MemoryWindow v-model="formState.memory" />
+    </WfField>
+
+    <WfField title="最大迭代次数" is-subtitle>
+      <template #tooltip>
+        单次运行内 Agent 最多进行多少轮 think/act。防止死循环。
+      </template>
+      <div class="agent-slider-row">
+        <a-slider
+          v-model:value="formState.memory.windows"
+          :step="1"
+          :min="1"
+          :max="20"
+          style="flex: 1"
+        />
+        <a-input-number
+          v-model:value="formState.memory.windows"
+          :min="1"
+          :max="20"
+          size="small"
+          style="width: 88px"
+        />
+      </div>
+    </WfField>
+  </div>
+
+  <div class="wf-config-section">
+    <WfField title="输出变量" foldable default-fold>
+      <div class="agent-output-list">
+        <div
+          v-for="it in OUTPUT_DEFAULTS"
+          :key="it.name"
+          class="agent-output-item"
+        >
+          <div class="agent-output-row">
+            <span class="agent-output-name">{{ it.name }}</span>
+            <a-tag>{{ it.type }}</a-tag>
+          </div>
+          <div class="agent-output-desc">{{ it.label }}</div>
+        </div>
+      </div>
+    </WfField>
+  </div>
+</template>
+
+<style scoped>
+.agent-slider-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.agent-output-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.agent-output-item {
+  padding: 6px 10px;
+  background: #f9fafb;
+  border: 1px solid #f0f0f0;
+  border-radius: 6px;
+}
+
+.agent-output-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.agent-output-name {
+  font-size: 12px;
+  font-weight: 500;
+  color: #1f2937;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+}
+
+.agent-output-desc {
+  margin-top: 2px;
+  font-size: 11px;
+  color: #6b7280;
+}
+</style>

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

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import PromptEditor from '@/components/PromptEditor.vue';
+import WfField from '@/workflow/WfField.vue';
+
+defineProps({
+  attrListGroup: {
+    type: Array,
+    default: () => [],
+  },
+  /** 当前节点 id —— 变量插入面板需要，由 NodeConfigCard 从 selectNode.id 传下来。 */
+  nodeId: {
+    type: String,
+    default: '',
+  },
+});
+
+const formState: any = defineModel();
+</script>
+
+<template>
+  <PromptEditor
+    class="wf-config-prompt"
+    title="ANSWER"
+    :node-id="nodeId"
+    v-model="formState.answer"
+  />
+
+  <div class="wf-config-section">
+    <WfField title="输出" foldable default-fold>
+      <template #tooltip>
+        Answer 节点默认输出 <code>text</code> 字段，供下游节点引用。
+      </template>
+      <div class="answer-output">
+        <span class="answer-output-name">text</span>
+        <a-tag>string</a-tag>
+        <span class="answer-output-desc">回复文本</span>
+      </div>
+    </WfField>
+  </div>
+</template>
+
+<style scoped>
+.answer-output {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  background: #f9fafb;
+  border: 1px solid #f0f0f0;
+  border-radius: 6px;
+}
+
+.answer-output-name {
+  font-size: 12px;
+  font-weight: 500;
+  color: #1f2937;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+}
+
+.answer-output-desc {
+  margin-left: auto;
+  font-size: 11px;
+  color: #6b7280;
+}
+</style>

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

@@ -0,0 +1,152 @@
+<script setup lang="ts">
+import { h } from 'vue';
+
+import { DeleteOutlined, PlusOutlined } from '@ant-design/icons-vue';
+
+import { getCurrentModel } from '@/adapter/backend';
+import PromptEditor from '@/components/PromptEditor.vue';
+import ModelPickerPopover from '../../../provider-hub/components/ModelPickerPopover.vue';
+import WfField from '@/workflow/WfField.vue';
+
+defineProps<{ nodeId?: string }>();
+
+const formState: any = defineModel();
+
+const loadDefaultModel = async () => {
+  const res: any = await getCurrentModel('LLM');
+  const data = res?.data ?? {};
+  if (!formState.value.model) formState.value.model = {};
+  formState.value.model.modelName = data.modelName;
+  formState.value.model.provider = data.provider ?? data.providerName;
+  formState.value.model.providerName = data.provider ?? data.providerName;
+  formState.value.model.modelProvider = data.provider ?? data.providerName;
+  formState.value.model.modelType = data.modelType ?? 'LLM';
+};
+
+const addClass = () => {
+  if (!Array.isArray(formState.value.classes)) formState.value.classes = [];
+  formState.value.classes.push({
+    id: formState.value.classes.length + 1,
+    name: '',
+  });
+};
+
+const removeClass = (index: number) => {
+  formState.value.classes.splice(index, 1);
+};
+</script>
+
+<template>
+  <div class="wf-config-section">
+    <WfField title="模型" required>
+      <template #operations>
+        <a-button type="link" size="small" @click="loadDefaultModel">
+          使用默认
+        </a-button>
+      </template>
+      <ModelPickerPopover
+        v-model="formState.model"
+        model-type="LLM"
+        placeholder="点击选择分类模型"
+        :width="440"
+      />
+    </WfField>
+  </div>
+
+  <PromptEditor
+    class="wf-config-prompt"
+    title="INPUT"
+    :node-id="nodeId"
+    v-model="formState.query"
+  />
+
+  <div class="wf-config-section">
+    <WfField title="分类定义" required>
+      <template #tooltip>
+        逐条描述每个类别；模型根据描述将输入归到匹配度最高的类。
+      </template>
+      <template #operations>
+        <a-button
+          :icon="h(PlusOutlined)"
+          size="small"
+          type="primary"
+          @click="addClass"
+        />
+      </template>
+
+      <div
+        v-if="!formState.classes || formState.classes.length === 0"
+        class="classifier-empty"
+      >
+        至少配置一个分类，点击右上角 + 添加
+      </div>
+
+      <div class="classifier-list">
+        <div
+          v-for="(cls, index) in formState.classes"
+          :key="cls.id ?? index"
+          class="classifier-item"
+        >
+          <div class="classifier-item-head">
+            <span class="classifier-item-name">分类 {{ index + 1 }}</span>
+            <a-button
+              :icon="h(DeleteOutlined)"
+              size="small"
+              type="text"
+              danger
+              @click="removeClass(index)"
+            />
+          </div>
+          <PromptEditor
+            :title="`CLASS ${index + 1}`"
+            :node-id="nodeId"
+            v-model="cls.name"
+            :show-toolbar="false"
+            min-height="60px"
+            max-height="120px"
+          />
+        </div>
+      </div>
+    </WfField>
+  </div>
+</template>
+
+<style scoped>
+.classifier-empty {
+  padding: 12px;
+  text-align: center;
+  font-size: 12px;
+  color: #9ca3af;
+  background: #f9fafb;
+  border: 1px dashed #e5e7eb;
+  border-radius: 6px;
+}
+
+.classifier-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.classifier-item {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 10px;
+  background: #f9fafb;
+  border: 1px solid #f0f0f0;
+  border-radius: 6px;
+}
+
+.classifier-item-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.classifier-item-name {
+  font-size: 12px;
+  font-weight: 500;
+  color: #4b5563;
+}
+</style>

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

@@ -0,0 +1,139 @@
+<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 LANGUAGES = [
+  { value: 'python', label: 'Python' },
+  { value: 'javascript', label: 'JavaScript' },
+  { value: 'groovy', label: 'Groovy' },
+  { value: 'jexl', label: 'JEXL' },
+];
+
+const addVariable = () => {
+  if (!Array.isArray(formState.value.variables)) formState.value.variables = [];
+  formState.value.variables.push({
+    variable: '',
+    value_selector: [],
+  });
+};
+
+const removeVariable = (index: number) => {
+  formState.value.variables.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="addVariable"
+        />
+      </template>
+
+      <div
+        v-if="!formState.variables || formState.variables.length === 0"
+        class="code-empty"
+      >
+        暂无输入变量
+      </div>
+
+      <div class="code-var-list">
+        <div
+          v-for="(v, index) in formState.variables"
+          :key="index"
+          class="code-var-row"
+        >
+          <a-input
+            v-model:value="v.variable"
+            placeholder="参数名"
+            size="small"
+            style="width: 120px"
+          />
+          <VariableSelector
+            v-model="v.value_selector"
+            :node-id="nodeId"
+            placeholder="选择变量"
+            style="flex: 1"
+          />
+          <a-button
+            :icon="h(DeleteOutlined)"
+            size="small"
+            type="text"
+            danger
+            @click="removeVariable(index)"
+          />
+        </div>
+      </div>
+    </WfField>
+  </div>
+
+  <div class="wf-config-section">
+    <WfField title="语言" is-subtitle inline>
+      <template #operations>
+        <a-select
+          v-model:value="formState.code_language"
+          :options="LANGUAGES"
+          size="small"
+          style="width: 140px"
+        />
+      </template>
+    </WfField>
+
+    <WfField title="脚本">
+      <template #tooltip>
+        必须返回一个字典（对象），会自动映射到本节点的输出变量。
+      </template>
+      <a-textarea
+        v-model:value="formState.code"
+        :auto-size="{ minRows: 8, maxRows: 20 }"
+        class="code-textarea"
+        placeholder="def main(arg1: str, arg2: str) -> dict:&#10;    return { 'result': arg1 + arg2 }"
+      />
+    </WfField>
+  </div>
+</template>
+
+<style scoped>
+.code-empty {
+  padding: 12px;
+  text-align: center;
+  font-size: 12px;
+  color: #9ca3af;
+  background: #f9fafb;
+  border: 1px dashed #e5e7eb;
+  border-radius: 6px;
+}
+
+.code-var-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.code-var-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.code-textarea :deep(textarea) {
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  font-size: 12px;
+  line-height: 1.5;
+}
+</style>