vue-agent-start 0.1.0

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

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import DatasetItemCard from '@/components/DatasetItemCard.vue';
+import VariableSelector from '@/components/VariableSelector.vue';
+import OutputItemCard from '@/workflow/OutputItemCard.vue';
+import WfField from '@/workflow/WfField.vue';
+
+defineProps<{ nodeId?: string }>();
+
+const formState: any = defineModel();
+</script>
+
+<template>
+  <div class="wf-config-section">
+    <WfField title="查询变量" required>
+      <template #tooltip>
+        作为检索关键词的上游变量，通常是用户提问。
+      </template>
+      <VariableSelector
+        v-model="formState.queryVariableSelector"
+        :node-id="nodeId"
+        placeholder="选择查询变量"
+      />
+    </WfField>
+  </div>
+
+  <div class="wf-config-section">
+    <WfField title="数据集" required>
+      <template #tooltip>
+        选择一个或多个知识库；开启动态变量后可按运行时上下文切换数据集。
+      </template>
+      <DatasetItemCard v-model="formState.dataset" :node-id="nodeId">
+        <template #dynamic>
+          <VariableSelector
+            v-model="formState.dataset.dynamicVariableSelector"
+            :node-id="nodeId"
+            placeholder="选择动态变量"
+          />
+        </template>
+      </DatasetItemCard>
+    </WfField>
+  </div>
+
+  <div class="wf-config-section">
+    <WfField title="输出" foldable default-fold>
+      <OutputItemCard v-model="formState" />
+    </WfField>
+  </div>
+</template>

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

@@ -0,0 +1,206 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import { getCurrentModel } from '@/adapter/backend';
+import MemoryWindow from '@/components/MemoryWindow.vue';
+import PromptEditor from '@/components/PromptEditor.vue';
+import PromptEditorTagPanel from '@/components/PromptEditorTagPanel.vue';
+import ModelPickerPopover from '../../../provider-hub/components/ModelPickerPopover.vue';
+import OutputItemCard from '@/workflow/OutputItemCard.vue';
+import WfField from '@/workflow/WfField.vue';
+import workflow_utils from '@/workflow/utils/workflow_utils';
+
+defineProps({
+  attrListGroup: {
+    type: Array,
+    default: () => [],
+  },
+  /** 当前节点 id —— 变量插入面板需要，由 NodeConfigCard 从 selectNode.id 传下来。 */
+  nodeId: {
+    type: String,
+    default: '',
+  },
+});
+
+const formState: any = defineModel();
+
+const targetElement = ref<HTMLElement | null>(null);
+const showAttr = ref<boolean>(false);
+const attrTargetKey = ref<'apiKey' | null>(null);
+
+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 checkApiKey = (event: any) => {
+  targetElement.value = event.currentTarget;
+  attrTargetKey.value = 'apiKey';
+  showAttr.value = true;
+};
+
+const closeAttrPanel = () => {
+  showAttr.value = false;
+  attrTargetKey.value = null;
+};
+
+const selectAttr = (variableSelector: any[]) => {
+  if (attrTargetKey.value === 'apiKey') {
+    if (!formState.value.apiKeySelector) {
+      formState.value.apiKeySelector = { variableSelector: [] };
+    }
+    formState.value.apiKeySelector.variableSelector = variableSelector;
+  }
+  closeAttrPanel();
+};
+
+const stopSequenceTags = ref<string[]>(
+  Array.isArray(formState.value?.stop) ? formState.value.stop : [],
+);
+const onStopChange = (val: string[]) => {
+  formState.value.stop = val;
+};
+
+const RESPONSE_FORMATS = [
+  { value: 'text', label: '文本 (text)' },
+  { value: 'json_object', label: 'JSON 对象' },
+  { value: 'json_schema', label: 'JSON Schema' },
+];
+</script>
+
+<template>
+  <PromptEditorTagPanel
+    :show="showAttr"
+    :target-element="targetElement"
+    :node-id="nodeId"
+    @close="closeAttrPanel"
+    @select="selectAttr"
+  />
+
+  <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="点击选择 LLM 模型"
+        :width="440"
+      />
+    </WfField>
+
+    <WfField title="API Key 变量" is-subtitle>
+      <template #tooltip>
+        按用户/租户维度切换密钥时使用；未设置时走后端默认凭据。
+      </template>
+      <div class="llm-varselect" @click="checkApiKey">
+        <a-tag class="llm-varselect-tag">
+          {{
+            workflow_utils.getVariableLabel(
+              formState.apiKeySelector?.variableSelector,
+            ) || '点击选择变量'
+          }}
+        </a-tag>
+      </div>
+    </WfField>
+  </div>
+
+  <!-- SYSTEM 提示词 -->
+  <PromptEditor
+    class="wf-config-prompt"
+    title="SYSTEM"
+    :node-id="nodeId"
+    v-model="formState.systemPrompt.text"
+  />
+
+  <!-- USER 提示词 -->
+  <PromptEditor
+    class="wf-config-prompt"
+    title="USER"
+    :node-id="nodeId"
+    v-model="formState.userPrompt.text"
+  />
+
+  <div class="wf-config-section">
+    <WfField title="对话记忆">
+      <template #tooltip>
+        控制注入到 prompt 的历史消息条数。开启后按最近 N 轮追加。
+      </template>
+      <MemoryWindow v-model="formState.memory" />
+    </WfField>
+  </div>
+
+  <div class="wf-config-section">
+    <WfField title="高级参数" foldable default-fold>
+      <WfField title="停止序列" is-subtitle>
+        <template #tooltip>
+          LLM 生成过程中遇到任意一个字符串会立刻停止输出。
+        </template>
+        <a-select
+          v-model:value="stopSequenceTags"
+          mode="tags"
+          :token-separators="[',']"
+          placeholder="回车或逗号分隔，最多 4 个"
+          style="width: 100%"
+          @change="onStopChange"
+        />
+      </WfField>
+
+      <WfField title="响应格式" is-subtitle>
+        <template #tooltip>
+          选择 JSON 会指示模型返回可解析的 JSON。需要模型本身支持该模式。
+        </template>
+        <a-select
+          v-model:value="formState.responseFormat"
+          :options="RESPONSE_FORMATS"
+          style="width: 100%"
+          placeholder="默认文本"
+          allow-clear
+        />
+      </WfField>
+
+      <WfField title="视觉输入" is-subtitle inline>
+        <template #operations>
+          <a-switch v-model:checked="formState.vision" size="small" />
+        </template>
+      </WfField>
+    </WfField>
+  </div>
+
+  <div class="wf-config-section">
+    <WfField title="输出">
+      <OutputItemCard v-model="formState" />
+    </WfField>
+  </div>
+</template>
+
+<style scoped>
+.llm-varselect {
+  padding: 4px 8px;
+  background: #f9fafb;
+  border: 1px dashed #d1d5db;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: border-color 0.15s;
+  min-height: 28px;
+  display: flex;
+  align-items: center;
+}
+
+.llm-varselect:hover {
+  border-color: #6366f1;
+}
+
+.llm-varselect-tag {
+  margin: 0;
+}
+</style>

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

@@ -0,0 +1,188 @@
+<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';
+import workflow_utils from '@/workflow/utils/workflow_utils';
+
+defineProps<{ nodeId?: string }>();
+
+const formState: any = defineModel();
+
+const OPERATIONS = [
+  { value: 'filter', label: '过滤（filter）' },
+  { value: 'map', label: '映射（map）' },
+  { value: 'reduce', label: '归约（reduce）' },
+  { value: 'slice', label: '截取（slice）' },
+  { value: 'sort', label: '排序（sort）' },
+  { value: 'reverse', label: '反转（reverse）' },
+  { value: 'count', label: '计数（count）' },
+];
+
+const SORT_ORDERS = [
+  { value: 'asc', label: '升序' },
+  { value: 'desc', label: '降序' },
+];
+
+const addFilter = () => {
+  if (!Array.isArray(formState.value.filterConditions)) {
+    formState.value.filterConditions = [];
+  }
+  formState.value.filterConditions.push({
+    field: '',
+    operator: 'CONTAINS',
+    value: '',
+  });
+};
+
+const removeFilter = (index: number) => {
+  formState.value.filterConditions.splice(index, 1);
+};
+</script>
+
+<template>
+  <div class="wf-config-section">
+    <WfField title="输入列表" required>
+      <VariableSelector
+        v-model="formState.inputVariableSelector"
+        :node-id="nodeId"
+        placeholder="选择要操作的列表变量"
+      />
+    </WfField>
+
+    <WfField title="操作类型" required>
+      <a-select
+        v-model:value="formState.operation"
+        :options="OPERATIONS"
+        style="width: 100%"
+      />
+    </WfField>
+  </div>
+
+  <!-- 各操作对应的额外配置 -->
+  <div v-if="formState.operation === 'filter'" class="wf-config-section">
+    <WfField title="过滤条件">
+      <template #tooltip>
+        所有条件都满足才保留该项。留空字段名表示对整个 item 操作。
+      </template>
+      <template #operations>
+        <a-button
+          :icon="h(PlusOutlined)"
+          size="small"
+          type="primary"
+          @click="addFilter"
+        />
+      </template>
+      <div
+        v-if="!formState.filterConditions || formState.filterConditions.length === 0"
+        class="list-op-empty"
+      >
+        点击右上角 + 添加条件
+      </div>
+      <div class="list-op-filter-list">
+        <div
+          v-for="(f, i) in formState.filterConditions"
+          :key="i"
+          class="list-op-filter-row"
+        >
+          <a-input
+            v-model:value="f.field"
+            placeholder="字段路径"
+            size="small"
+            style="flex: 1"
+          />
+          <a-select
+            v-model:value="f.operator"
+            :options="workflow_utils.conditionOperators"
+            size="small"
+            style="width: 96px"
+          />
+          <a-input
+            v-model:value="f.value"
+            placeholder="比较值"
+            size="small"
+            style="flex: 1"
+          />
+          <a-button
+            :icon="h(DeleteOutlined)"
+            size="small"
+            type="text"
+            danger
+            @click="removeFilter(i)"
+          />
+        </div>
+      </div>
+    </WfField>
+  </div>
+
+  <div v-if="formState.operation === 'map'" class="wf-config-section">
+    <WfField title="映射表达式">
+      <template #tooltip>
+        以 <code>item</code> 引用当前项。示例：<code>item.name</code>、<code>item.price * 1.1</code>
+      </template>
+      <a-input
+        v-model:value="formState.mapExpression"
+        placeholder="item.name"
+      />
+    </WfField>
+  </div>
+
+  <div v-if="formState.operation === 'slice'" class="wf-config-section">
+    <WfField title="偏移" is-subtitle>
+      <a-input-number
+        v-model:value="formState.offset"
+        :min="0"
+        style="width: 100%"
+      />
+    </WfField>
+    <WfField title="数量" is-subtitle>
+      <a-input-number
+        v-model:value="formState.limit"
+        :min="0"
+        style="width: 100%"
+      />
+    </WfField>
+  </div>
+
+  <div v-if="formState.operation === 'sort'" class="wf-config-section">
+    <WfField title="排序字段" is-subtitle>
+      <a-input
+        v-model:value="formState.sortField"
+        placeholder="留空按 item 本身"
+      />
+    </WfField>
+    <WfField title="顺序" is-subtitle>
+      <a-select
+        v-model:value="formState.sortOrder"
+        :options="SORT_ORDERS"
+        style="width: 100%"
+      />
+    </WfField>
+  </div>
+</template>
+
+<style scoped>
+.list-op-empty {
+  padding: 12px;
+  text-align: center;
+  font-size: 12px;
+  color: #9ca3af;
+  background: #f9fafb;
+  border: 1px dashed #e5e7eb;
+  border-radius: 6px;
+}
+
+.list-op-filter-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.list-op-filter-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+</style>