vue-agent-start 0.1.0

package/src/agent-flow/workflow/AuthorizationItem.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import VarSelectField from './VarSelectField.vue';
+
+defineProps({
+  name: {
+    type: String,
+    default: '',
+  },
+  /** 当前节点 id —— API Key Value 支持插入上游变量时需要。 */
+  nodeId: {
+    type: String,
+    default: '',
+  },
+});
+
+const formState: any = defineModel();
+</script>
+
+<template>
+  <div class="wf-auth">
+    <div class="wf-auth-row">
+      <div class="wf-auth-col">
+        <div class="wf-auth-label">认证类型</div>
+        <a-radio-group
+          v-model:value="formState.auth_type"
+          button-style="solid"
+          size="small"
+        >
+          <a-radio-button value="none">无</a-radio-button>
+          <a-radio-button value="api_key">API Key</a-radio-button>
+        </a-radio-group>
+      </div>
+      <div v-if="formState.auth_type === 'api_key'" class="wf-auth-col">
+        <div class="wf-auth-label">鉴权前缀</div>
+        <a-radio-group
+          v-model:value="formState.api_key_header_prefix"
+          button-style="solid"
+          size="small"
+        >
+          <a-radio-button value="basic">Basic</a-radio-button>
+          <a-radio-button value="bearer">Bearer</a-radio-button>
+          <a-radio-button value="custom">Custom</a-radio-button>
+        </a-radio-group>
+      </div>
+    </div>
+
+    <div v-if="formState.auth_type === 'api_key'" class="wf-auth-grid">
+      <div class="wf-auth-col">
+        <div class="wf-auth-label">Header Key</div>
+        <a-input
+          v-model:value="formState.api_key_header"
+          placeholder="Authorization"
+          size="small"
+        />
+      </div>
+      <div class="wf-auth-col">
+        <div class="wf-auth-label">API Key Value</div>
+        <VarSelectField
+          v-model="formState.api_key_value"
+          :node-id="nodeId"
+          placeholder="选择变量"
+          size="small"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.wf-auth {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.wf-auth-row {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.wf-auth-col {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+  flex: 1;
+}
+
+.wf-auth-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+}
+
+.wf-auth-label {
+  font-size: 11px;
+  font-weight: 500;
+  color: #6b7280;
+}
+</style>

package/src/agent-flow/workflow/ConversationVar.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { h } from 'vue';
+
+import {
+  DeleteOutlined,
+  EditOutlined,
+  PlusOutlined,
+} from '@ant-design/icons-vue';
+
+const userItems = [{ name: 'sys.query', type: 'String' }];
+</script>
+
+<template>
+  <div>
+    <div>
+      <div>
+        会话变量用于存储 LLM
+        需要的上下文信息，如用户偏好、对话历史等。它是可读写的。查看文档了解更多。
+      </div>
+      <div><a-button :icon="h(PlusOutlined)" size="small" /></div>
+    </div>
+    <div>
+      <a-button :icon="h(PlusOutlined)" size="small">添加变量</a-button>
+    </div>
+    <div>
+      <div v-for="(item, index) in userItems" :key="index">
+        <div>
+          <span>{x}</span>
+          <span>{{ item.name }}</span>
+        </div>
+        <div>
+          <span>必填</span>
+          <span>String</span>
+          <span><a-button :icon="h(EditOutlined)" size="small" /></span>
+          <span><a-button :icon="h(DeleteOutlined)" size="small" /></span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>

package/src/agent-flow/workflow/CustomEdge.vue

@@ -0,0 +1,94 @@
+<script setup>
+import { computed, defineEmits, defineProps, ref } from 'vue';
+
+import { getBezierPath } from '@vue-flow/core';
+
+const props = defineProps({
+  sourceX: { type: Number, required: true },
+  sourceY: { type: Number, required: true },
+  targetX: { type: Number, required: true },
+  targetY: { type: Number, required: true },
+  sourcePosition: { type: String, default: 'right' },
+  targetPosition: { type: String, default: 'left' },
+  style: { type: Object, default: () => ({}) },
+  markerEnd: { type: String, default: '' },
+  data: { type: Object, default: () => ({}) },
+  id: { type: String, required: true },
+  source: { type: String, required: true },
+  target: { type: String, required: true },
+  selected: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(['edge-click']);
+const hovered = ref(false);
+
+const path = computed(() => {
+  const result = getBezierPath({
+    sourceX: props.sourceX,
+    sourceY: props.sourceY,
+    sourcePosition: props.sourcePosition,
+    targetX: props.targetX,
+    targetY: props.targetY,
+    targetPosition: props.targetPosition,
+  });
+  return Array.isArray(result) ? result[0] : result;
+});
+
+const pathStyle = computed(() => {
+  const baseStroke = props.style.stroke || '#94a3b8';
+  const stroke = props.selected ? '#3b82f6' : hovered.value ? '#6366f1' : baseStroke;
+  const strokeWidth =
+    (props.selected ? 3 : hovered.value ? 2.5 : props.style.strokeWidth || 2);
+  return {
+    stroke,
+    strokeWidth,
+    fill: 'none',
+    transition: 'stroke 0.15s, stroke-width 0.15s',
+  };
+});
+
+function handleClick() {
+  emit('edge-click', { edge: props });
+}
+</script>
+
+<template>
+  <g
+    class="wf-edge"
+    :class="{ 'is-selected': selected, 'is-hovered': hovered }"
+    @mouseenter="hovered = true"
+    @mouseleave="hovered = false"
+  >
+    <path
+      :d="path"
+      :style="pathStyle"
+      :marker-end="markerEnd"
+      class="vue-flow__edge-path"
+      @click="handleClick"
+    />
+    <!-- 加宽的透明命中区，方便选中/悬停。
+     *  pointer-events: stroke 要求 stroke 是"已 paint"的；某些浏览器把 stroke="transparent"
+     *  当成未 paint 直接丢弃点击。用 pointer-events: all + 24px 宽的几何区域，既
+     *  保证宽松的命中判定，也保证透明 stroke 也能吃到事件。 -->
+    <path
+      :d="path"
+      stroke="transparent"
+      stroke-width="24"
+      fill="none"
+      class="wf-edge-hit-area"
+      @click="handleClick"
+    />
+  </g>
+</template>
+
+<style scoped>
+.wf-edge {
+  cursor: pointer;
+  pointer-events: stroke;
+}
+
+.wf-edge-hit-area {
+  pointer-events: all;
+  cursor: pointer;
+}
+</style>

package/src/agent-flow/workflow/EnvironmentVar.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { h } from 'vue';
+
+import {
+  DeleteOutlined,
+  EditOutlined,
+  PlusOutlined,
+} from '@ant-design/icons-vue';
+
+const userItems = [{ name: 'sys.query', type: 'String' }];
+</script>
+
+<template>
+  <div>
+    <div>
+      <div>
+        会话变量用于存储 LLM
+        需要的上下文信息，如用户偏好、对话历史等。它是可读写的。查看文档了解更多。
+      </div>
+      <div><a-button :icon="h(PlusOutlined)" size="small" /></div>
+    </div>
+    <div><a-button :icon="h(PlusOutlined)" size="small" />添加变量</div>
+    <div>
+      <div v-for="(item, index) in userItems" :key="index">
+        <div>
+          <span>{x}</span>
+          <span>{{ item.name }}</span>
+        </div>
+        <div>
+          <span>必填</span>
+          <span>String</span>
+          <span><a-button :icon="h(EditOutlined)" size="small" /></span>
+          <span><a-button :icon="h(DeleteOutlined)" size="small" /></span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>