vue-agent-start 0.1.0

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

@@ -0,0 +1,223 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+import PromptEditorTagPanel from '@/components/PromptEditorTagPanel.vue';
+import { useWorkflowStore } from '@/stores/workflow';
+import workflow_utils from '@/workflow/utils/workflow_utils';
+
+/**
+ * VarSelectField —— 单变量选择器
+ *
+ * 与 VarInsertField 的区别：VarInsertField 允许文本 + 变量混排，
+ * 而这里只能选中一个上游变量。空状态显示 placeholder，选中后
+ * 展示一颗带类型色的 pill；点击 pill 上的 × 清空。
+ *
+ * v-model 仍是 `{{#nodeId.field#}}` 模板字符串（保持与后端
+ * VariableResolver 的契约），空值为 ''。
+ */
+
+interface Props {
+  modelValue?: string;
+  nodeId: string;
+  placeholder?: string;
+  size?: 'small' | 'middle' | 'large';
+  bordered?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: '',
+  placeholder: '选择变量',
+  size: 'small',
+  bordered: true,
+});
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: string): void;
+}>();
+
+const workflowStore = useWorkflowStore();
+
+const triggerRef = ref<HTMLElement | null>(null);
+const panelOpen = ref(false);
+
+/** `{{#nodeId.field#}}` → ["nodeId","field"]，非合法模板则 null */
+const selector = computed<string[] | null>(() => {
+  const v = (props.modelValue ?? '').trim();
+  const m = v.match(/^\{\{#([^}]+)#\}\}$/);
+  if (!m) return null;
+  const parts = m[1].split('.');
+  return parts.length >= 2 ? parts : null;
+});
+
+const pillLabel = computed(() => {
+  const sel = selector.value;
+  if (!sel) return '';
+  return workflow_utils.getVariableLabel(sel) || sel.join('.');
+});
+
+const pillType = computed(() => {
+  const sel = selector.value;
+  if (!sel || sel.length < 2) return '';
+  const [nodeId, ...rest] = sel;
+  const node = workflowStore.getNodeById(nodeId);
+  if (!node?.data) return '';
+  const outputs = workflow_utils.getOutputList(node.data) || [];
+  let cur: any = outputs.find((o: any) => o.name === rest[0]);
+  for (let i = 1; i < rest.length; i++) {
+    if (!cur?.children) return cur?.type ?? '';
+    cur = cur.children.find((c: any) => c.name === rest[i]);
+  }
+  return cur?.type ?? '';
+});
+
+const pillIconChar = computed(() => (pillType.value?.[0] ?? '·').toUpperCase());
+
+function openPanel(e: MouseEvent) {
+  e.preventDefault();
+  e.stopPropagation();
+  panelOpen.value = true;
+}
+
+function closePanel() {
+  panelOpen.value = false;
+}
+
+function onSelect(variableSelector: string[]) {
+  emit('update:modelValue', `{{#${variableSelector.join('.')}#}}`);
+  closePanel();
+}
+
+function clear(e: MouseEvent) {
+  e.preventDefault();
+  e.stopPropagation();
+  emit('update:modelValue', '');
+}
+</script>
+
+<template>
+  <div
+    ref="triggerRef"
+    class="wf-vsf"
+    :class="[
+      `wf-vsf-${size}`,
+      { 'wf-vsf-borderless': !bordered, 'wf-vsf-filled': !!selector },
+    ]"
+    @click="openPanel"
+  >
+    <template v-if="selector">
+      <span class="wf-vsf-pill" :data-type="pillType" :title="selector.join('.')">
+        <span class="wf-vsf-pill-icon">{{ pillIconChar }}</span>
+        <span class="wf-vsf-pill-label">{{ pillLabel }}</span>
+        <span class="wf-vsf-pill-close" title="清除" @click="clear">×</span>
+      </span>
+    </template>
+    <span v-else class="wf-vsf-placeholder">{{ placeholder }}</span>
+
+    <PromptEditorTagPanel
+      :show="panelOpen"
+      :node-id="nodeId"
+      :target-element="triggerRef"
+      @close="closePanel"
+      @select="onSelect"
+    />
+  </div>
+</template>
+
+<style scoped>
+.wf-vsf {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-height: 24px;
+  padding: 2px 6px;
+  background: #ffffff;
+  border: 1px solid #e5e7eb;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+
+.wf-vsf:hover {
+  border-color: #a5b4fc;
+}
+
+.wf-vsf-filled {
+  background: #f9fafb;
+}
+
+.wf-vsf-borderless {
+  border-color: transparent;
+  background: transparent;
+}
+
+.wf-vsf-borderless:hover {
+  border-color: transparent;
+}
+
+.wf-vsf-small { min-height: 24px; font-size: 13px; }
+.wf-vsf-middle { min-height: 32px; font-size: 14px; }
+.wf-vsf-large { min-height: 40px; font-size: 15px; }
+
+.wf-vsf-placeholder {
+  color: #9ca3af;
+  font-size: 12px;
+}
+
+.wf-vsf-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  padding: 0 3px 0 2px;
+  font-size: 12px;
+  line-height: 1.4;
+  color: #1f2937;
+  background: #eef2ff;
+  border: 1px solid #c7d2fe;
+  border-radius: 4px;
+  user-select: none;
+}
+
+.wf-vsf-pill-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 12px;
+  height: 12px;
+  font-size: 8px;
+  font-weight: 700;
+  color: #ffffff;
+  background: #6366f1;
+  border-radius: 2px;
+  text-transform: uppercase;
+}
+
+.wf-vsf-pill[data-type='string'] .wf-vsf-pill-icon { background: #3b82f6; }
+.wf-vsf-pill[data-type='number'] .wf-vsf-pill-icon { background: #f59e0b; }
+.wf-vsf-pill[data-type='boolean'] .wf-vsf-pill-icon { background: #10b981; }
+.wf-vsf-pill[data-type='array'] .wf-vsf-pill-icon { background: #a855f7; }
+.wf-vsf-pill[data-type='object'] .wf-vsf-pill-icon { background: #6b7280; }
+.wf-vsf-pill[data-type='file'] .wf-vsf-pill-icon { background: #ef4444; }
+
+.wf-vsf-pill-label {
+  color: #4338ca;
+  font-weight: 500;
+}
+
+.wf-vsf-pill-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 12px;
+  height: 12px;
+  font-size: 12px;
+  line-height: 1;
+  color: #6366f1;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.wf-vsf-pill-close:hover {
+  background: #c7d2fe;
+}
+</style>

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

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const props = defineProps({
+  readonly: {
+    type: Boolean,
+    default: () => false,
+  },
+});
+const targetElement = ref(null);
+const showAttr = ref<boolean>(false);
+const formState: any = defineModel();
+
+const checkAttr = (event: any) => {
+  const element = event.currentTarget;
+  targetElement.value = element;
+  showAttr.value = true;
+};
+const closeAttrPanel = () => {
+  showAttr.value = false;
+};
+
+const selectAttr = (variableSelector: any, tag: any, node: any) => {
+  formState.value.queryVariableSelector = variableSelector;
+  showAttr.value = false;
+};
+
+const getVarLabel = (variableSelector) => {
+  return '';
+};
+</script>
+
+<template>
+  <div>
+    <div
+      v-if="readonly"
+      @click="checkAttr($event)"
+      class="flex h-8 w-full cursor-pointer items-center rounded-lg border p-1"
+    >
+      <a-tag class="text-primary">
+        {{ getVarLabel(formState.variableSelector) }}
+      </a-tag>
+    </div>
+    <a-input v-else v-model:value="formState.value" />
+  </div>
+</template>
+
+<style scoped></style>

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

@@ -0,0 +1,206 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+import {
+  DownOutlined,
+  QuestionCircleOutlined,
+  RightOutlined,
+} from '@ant-design/icons-vue';
+
+/**
+ * WfField —— 对标 Dify 的 Field 组件
+ * 统一提供：title / tooltip / operations（右上角操作区）/ children 四部分
+ * 减少 nodeCard 里重复的 `.wf-config-section-title` 结构
+ *
+ * @example
+ * <WfField title="模型" required :warning="hasWarning">
+ *   <ModelPickerPopover v-model="formState.model" />
+ *   <template #operations>
+ *     <a-button size="small">使用默认</a-button>
+ *   </template>
+ *   <template #tooltip>选择要调用的 LLM 模型</template>
+ * </WfField>
+ */
+
+interface Props {
+  title?: string;
+  /** 副标题时字号收敛 */
+  isSubtitle?: boolean;
+  /** 是否必填（标题后加 *） */
+  required?: boolean;
+  /** 是否显示警告点（标题后加红点） */
+  warning?: boolean;
+  /** 支持折叠 */
+  foldable?: boolean;
+  /** 折叠默认状态 */
+  defaultFold?: boolean;
+  /** 内联布局：title 左、children 右（不占单独行） */
+  inline?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: '',
+  isSubtitle: false,
+  required: false,
+  warning: false,
+  foldable: false,
+  defaultFold: false,
+  inline: false,
+});
+
+const folded = ref(props.defaultFold);
+const showBody = computed(() => !props.foldable || !folded.value);
+
+const toggleFold = () => {
+  if (props.foldable) folded.value = !folded.value;
+};
+</script>
+
+<template>
+  <div class="wf-field" :class="{ 'wf-field-inline': inline }">
+    <div
+      v-if="title || $slots.title || $slots.operations || $slots.tooltip"
+      class="wf-field-header"
+      :class="{ 'wf-field-header-clickable': foldable }"
+      @click="toggleFold"
+    >
+      <div class="wf-field-title-wrap">
+        <RightOutlined
+          v-if="foldable && folded"
+          class="wf-field-fold-icon"
+        />
+        <DownOutlined
+          v-else-if="foldable"
+          class="wf-field-fold-icon"
+        />
+        <div
+          class="wf-field-title"
+          :class="{ 'wf-field-title-sub': isSubtitle }"
+        >
+          <slot name="title">{{ title }}</slot>
+          <span v-if="required" class="wf-field-required">*</span>
+          <span v-if="warning" class="wf-field-warning-dot" />
+          <a-tooltip v-if="$slots.tooltip">
+            <template #title>
+              <slot name="tooltip" />
+            </template>
+            <QuestionCircleOutlined class="wf-field-help-icon" />
+          </a-tooltip>
+        </div>
+      </div>
+      <div v-if="$slots.operations" class="wf-field-operations" @click.stop>
+        <slot name="operations" />
+      </div>
+    </div>
+    <div v-if="showBody" class="wf-field-body" :class="{ 'wf-field-body-titled': title || $slots.title }">
+      <slot />
+    </div>
+    <div v-if="$slots.hint && showBody" class="wf-field-hint">
+      <slot name="hint" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.wf-field {
+  display: flex;
+  flex-direction: column;
+}
+
+.wf-field + .wf-field {
+  margin-top: 12px;
+}
+
+.wf-field-inline {
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.wf-field-inline .wf-field-body {
+  flex: 0 1 auto;
+}
+
+.wf-field-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  min-height: 20px;
+}
+
+.wf-field-header-clickable {
+  cursor: pointer;
+  user-select: none;
+}
+
+.wf-field-title-wrap {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+}
+
+.wf-field-fold-icon {
+  font-size: 10px;
+  color: #9ca3af;
+}
+
+.wf-field-title {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1.4;
+  color: #1f2937;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+}
+
+.wf-field-title-sub {
+  font-size: 11px;
+  color: #4b5563;
+}
+
+.wf-field-required {
+  color: #ef4444;
+  font-weight: 700;
+}
+
+.wf-field-warning-dot {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  background: #ef4444;
+  border-radius: 50%;
+}
+
+.wf-field-help-icon {
+  font-size: 12px;
+  color: #9ca3af;
+  cursor: help;
+}
+
+.wf-field-help-icon:hover {
+  color: #4b5563;
+}
+
+.wf-field-operations {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.wf-field-body-titled {
+  margin-top: 6px;
+}
+
+.wf-field-hint {
+  margin-top: 4px;
+  font-size: 11px;
+  line-height: 1.5;
+  color: #9ca3af;
+}
+</style>