vue-agent-start 0.1.0

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

@@ -0,0 +1,323 @@
+<script setup lang="ts">
+import { h } from 'vue';
+
+import {
+  DeleteOutlined,
+  PlusCircleOutlined,
+  PlusOutlined,
+} from '@ant-design/icons-vue';
+import { VueDraggableNext } from 'vue-draggable-next';
+
+import VariableSelector from '@/components/VariableSelector.vue';
+import langUtils from '@/utils/langUtils';
+import WfField from '@/workflow/WfField.vue';
+import workflow_utils from '@/workflow/utils/workflow_utils';
+
+defineProps<{ nodeId?: string }>();
+
+const formState: any = defineModel();
+const conditionOperators: any = workflow_utils.conditionOperators;
+
+const CASE_COLORS = [
+  '#f97316',
+  '#f59e0b',
+  '#eab308',
+  '#22c55e',
+  '#14b8a6',
+  '#06b6d4',
+  '#3b82f6',
+  '#6366f1',
+  '#8b5cf6',
+  '#a855f7',
+  '#ec4899',
+];
+
+const getColor = (index: number) => CASE_COLORS[index % CASE_COLORS.length];
+
+const addCase = () => {
+  if (!Array.isArray(formState.value.cases)) formState.value.cases = [];
+  const len = formState.value.cases.length;
+  formState.value.cases.push({
+    id: langUtils.getId('case'),
+    name: '',
+    caseId: 'true',
+    color: getColor(len),
+    logicalOperator: 'and',
+    conditions: [
+      {
+        variableSelector: [],
+        operator: 'CONTAINS',
+        value: '',
+      },
+    ],
+  });
+};
+
+const removeCase = (index: number) => {
+  formState.value.cases.splice(index, 1);
+};
+
+const addCondition = (caseItem: any) => {
+  caseItem.conditions.push({
+    variableSelector: [],
+    operator: 'CONTAINS',
+    value: '',
+  });
+};
+
+const removeCondition = (caseItem: any, condIndex: number) => {
+  caseItem.conditions.splice(condIndex, 1);
+};
+
+// Case 级别的 AND / OR 切换：一次改整案的 logicalOperator，与
+// `ConditionNode.getCaseSummary` 展示的连接词保持一致。
+const toggleLogicalOperator = (caseItem: any) => {
+  const current = (caseItem.logicalOperator || 'and').toLowerCase();
+  caseItem.logicalOperator = current === 'and' ? 'or' : 'and';
+};
+</script>
+
+<template>
+  <div class="wf-config-section">
+    <WfField title="分支条件">
+      <template #tooltip>
+        按顺序判断，第一个满足的分支生效。ELSE 分支从画布右侧默认输出走。
+      </template>
+      <template #operations>
+        <a-button
+          :icon="h(PlusOutlined)"
+          size="small"
+          type="primary"
+          @click="addCase"
+        />
+      </template>
+    </WfField>
+
+    <div
+      v-if="!formState.cases || formState.cases.length === 0"
+      class="cond-empty"
+    >
+      尚未添加分支，点击右上角 + 添加
+    </div>
+
+    <VueDraggableNext
+      v-model="formState.cases"
+      item-key="id"
+      :animation="200"
+      ghost-class="cond-ghost"
+      chosen-class="cond-chosen"
+      class="cond-cases"
+    >
+      <div
+        v-for="(item, index) in formState.cases"
+        :key="item.id"
+        class="cond-case"
+        :style="{ borderLeftColor: item.color || getColor(index) }"
+      >
+        <div class="cond-case-head">
+          <div class="cond-case-title">
+            <span class="cond-case-badge">
+              {{ index === 0 ? 'IF' : 'ELIF' }}
+            </span>
+            <span class="cond-case-tag">CASE {{ index + 1 }}</span>
+          </div>
+          <a-button
+            :icon="h(DeleteOutlined)"
+            size="small"
+            type="text"
+            danger
+            @click="removeCase(index)"
+          />
+        </div>
+
+        <div class="cond-condition-list">
+          <template
+            v-for="(cond, condIndex) in item.conditions"
+            :key="condIndex"
+          >
+            <!-- 相邻条件之间的 AND / OR 连接词：点击可整案切换 —— Dify parity
+                 这里的逻辑操作符是 case 级别（所有条件共享一个），而不是每对
+                 相邻条件独立设置。 -->
+            <button
+              v-if="condIndex > 0"
+              type="button"
+              class="cond-logical-op"
+              :class="{
+                'cond-logical-op-or': (item.logicalOperator || 'and') === 'or',
+              }"
+              @click="toggleLogicalOperator(item)"
+              :title="'点击切换 AND / OR'"
+            >
+              {{ (item.logicalOperator || 'and').toUpperCase() }}
+            </button>
+
+            <div class="cond-condition">
+              <div class="cond-condition-row">
+                <VariableSelector
+                  v-model="cond.variableSelector"
+                  :node-id="nodeId"
+                  placeholder="选择变量"
+                  style="flex: 1"
+                />
+                <a-select
+                  v-model:value="cond.operator"
+                  :options="conditionOperators"
+                  size="small"
+                  style="width: 110px"
+                />
+              </div>
+              <div class="cond-condition-value">
+                <a-input v-model:value="cond.value" placeholder="比较值" />
+                <a-button
+                  v-if="item.conditions.length > 1"
+                  :icon="h(DeleteOutlined)"
+                  size="small"
+                  type="text"
+                  danger
+                  @click="removeCondition(item, condIndex)"
+                />
+              </div>
+            </div>
+          </template>
+        </div>
+
+        <a-button
+          :icon="h(PlusCircleOutlined)"
+          size="small"
+          type="link"
+          @click="addCondition(item)"
+        >
+          添加条件
+        </a-button>
+      </div>
+    </VueDraggableNext>
+
+  </div>
+</template>
+
+<style scoped>
+.cond-empty {
+  padding: 12px;
+  text-align: center;
+  font-size: 12px;
+  color: #9ca3af;
+  background: #f9fafb;
+  border: 1px dashed #e5e7eb;
+  border-radius: 6px;
+}
+
+.cond-cases {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.cond-case {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 8px 10px;
+  background: #ffffff;
+  border: 1px solid #f0f0f0;
+  border-left: 3px solid #d1d5db;
+  border-radius: 6px;
+  cursor: move;
+  transition: box-shadow 0.15s;
+}
+
+.cond-case:hover {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+}
+
+.cond-case-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.cond-case-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.cond-case-badge {
+  padding: 2px 8px;
+  font-size: 11px;
+  font-weight: 700;
+  color: #ffffff;
+  background: #6366f1;
+  border-radius: 4px;
+}
+
+.cond-case-tag {
+  font-size: 11px;
+  color: #9ca3af;
+}
+
+.cond-condition-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.cond-condition {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 6px;
+  background: #f9fafb;
+  border-radius: 4px;
+}
+
+/* 条件之间的 AND / OR 连接钮：一颗药丸样式，AND 走 accent 蓝、OR 走琥珀色以示区别 */
+.cond-logical-op {
+  align-self: flex-start;
+  margin: 2px 0 2px 12px;
+  padding: 1px 10px;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.6px;
+  color: #4338ca;
+  background: #eef2ff;
+  border: 1px solid #c7d2fe;
+  border-radius: 999px;
+  cursor: pointer;
+  transition: background 0.15s, border-color 0.15s, color 0.15s;
+  line-height: 16px;
+}
+.cond-logical-op:hover {
+  background: #e0e7ff;
+  border-color: #a5b4fc;
+}
+.cond-logical-op-or {
+  color: #b45309;
+  background: #fef3c7;
+  border-color: #fcd34d;
+}
+.cond-logical-op-or:hover {
+  background: #fde68a;
+  border-color: #fbbf24;
+}
+
+.cond-condition-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.cond-condition-value {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.cond-ghost {
+  opacity: 0.4;
+  background: #f1f5f9;
+}
+
+.cond-chosen {
+  background: #eef2ff;
+}
+</style>

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

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import VariableSelector from '@/components/VariableSelector.vue';
+import WfField from '@/workflow/WfField.vue';
+
+defineProps<{ nodeId?: string }>();
+
+const formState: any = defineModel();
+
+const EXTRACT_MODES = [
+  { value: 'text', label: '纯文本' },
+  { value: 'markdown', label: 'Markdown' },
+  { value: 'json', label: '智能结构化 (JSON)' },
+];
+
+const SPLIT_MODES = [
+  { value: 'none', label: '不切分' },
+  { value: 'paragraph', label: '按段落' },
+  { value: 'page', label: '按页' },
+  { value: 'length', label: '按长度' },
+];
+</script>
+
+<template>
+  <div class="wf-config-section">
+    <WfField title="源文件" required>
+      <template #tooltip>
+        从上游变量选择 File 类型的变量，节点会提取其中的文本内容。
+      </template>
+      <VariableSelector
+        v-model="formState.variableSelector"
+        :node-id="nodeId"
+        placeholder="选择文件变量"
+      />
+    </WfField>
+  </div>
+
+  <div class="wf-config-section">
+    <WfField title="提取模式" is-subtitle>
+      <template #tooltip>
+        纯文本：直接返回文本；Markdown：保留结构标题；智能结构化：让 LLM 提取键值对。
+      </template>
+      <a-select
+        v-model:value="formState.extractMode"
+        :options="EXTRACT_MODES"
+        style="width: 100%"
+      />
+    </WfField>
+
+    <WfField title="切分策略" is-subtitle>
+      <template #tooltip>
+        对于长文档，可以按段落或按页切分为多个片段。
+      </template>
+      <a-select
+        v-model:value="formState.splitMode"
+        :options="SPLIT_MODES"
+        style="width: 100%"
+      />
+    </WfField>
+
+    <WfField
+      v-if="formState.splitMode === 'length'"
+      title="每段最大字符数"
+      is-subtitle
+    >
+      <a-input-number
+        v-model:value="formState.chunkSize"
+        :min="100"
+        :step="100"
+        style="width: 100%"
+      />
+    </WfField>
+  </div>
+
+  <div class="wf-config-section">
+    <WfField title="支持格式" is-subtitle inline>
+      <template #operations>
+        <span style="font-size: 11px; color: #6b7280">
+          PDF · DOCX · TXT · MD · HTML
+        </span>
+      </template>
+    </WfField>
+  </div>
+</template>

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

@@ -0,0 +1,123 @@
+<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 addOutput = () => {
+  if (!Array.isArray(formState.value.output)) formState.value.output = [];
+  formState.value.output.push({
+    type: 'string',
+    name: '',
+    value: '',
+    description: '',
+    variableSelector: [],
+  });
+};
+
+const removeOutput = (index: number) => {
+  formState.value.output.splice(index, 1);
+};
+
+const TYPES = ['string', 'number', 'boolean', 'array', 'object'];
+</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="addOutput"
+        />
+      </template>
+
+      <div
+        v-if="!formState.output || formState.output.length === 0"
+        class="end-empty"
+      >
+        尚未配置输出，点击右上角 + 添加
+      </div>
+
+      <div class="end-output-list">
+        <div
+          v-for="(it, index) in formState.output"
+          :key="index"
+          class="end-output-item"
+        >
+          <div class="end-output-row">
+            <a-input
+              v-model:value="it.name"
+              placeholder="变量名"
+              size="small"
+              style="flex: 1"
+            />
+            <a-select
+              v-model:value="it.type"
+              :options="TYPES.map((t) => ({ value: t, label: t }))"
+              size="small"
+              style="width: 96px"
+            />
+            <a-button
+              :icon="h(DeleteOutlined)"
+              size="small"
+              type="text"
+              danger
+              @click="removeOutput(index)"
+            />
+          </div>
+          <VariableSelector
+            v-model="it.variableSelector"
+            :node-id="nodeId"
+            placeholder="选择上游变量"
+          />
+        </div>
+      </div>
+    </WfField>
+  </div>
+</template>
+
+<style scoped>
+.end-empty {
+  padding: 12px;
+  text-align: center;
+  font-size: 12px;
+  color: #9ca3af;
+  background: #f9fafb;
+  border: 1px dashed #e5e7eb;
+  border-radius: 6px;
+}
+
+.end-output-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.end-output-item {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 8px;
+  background: #f9fafb;
+  border: 1px solid #f0f0f0;
+  border-radius: 6px;
+}
+
+.end-output-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+</style>