vue-agent-start 0.1.0

package/src/agent-flow/components/stubs/TriggersItemCard.vue

@@ -0,0 +1,126 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import {
+  ApiOutlined,
+  ClockCircleOutlined,
+  ThunderboltOutlined,
+} from '@ant-design/icons-vue';
+
+/**
+ * 触发器基础实现：只提供开关 + 类型选择。
+ * 具体每种触发器的详细配置（HTTP 端点、cron 表达式、webhook 密钥等）应由宿主
+ * 组件替换本 stub 实现。
+ */
+
+const formState: any = defineModel();
+
+const TRIGGERS = [
+  { key: 'http', label: 'HTTP 请求', icon: ApiOutlined, color: '#06b6d4' },
+  { key: 'schedule', label: '定时', icon: ClockCircleOutlined, color: '#f59e0b' },
+  { key: 'webhook', label: 'Webhook', icon: ThunderboltOutlined, color: '#8b5cf6' },
+];
+
+const enabled = computed({
+  get: () => formState.value?.triggersEnabled ?? false,
+  set: (v: boolean) => (formState.value.triggersEnabled = v),
+});
+
+const currentType = computed({
+  get: () => formState.value?.triggers?.type ?? 'http',
+  set: (v: string) => {
+    if (!formState.value.triggers) formState.value.triggers = { type: v };
+    else formState.value.triggers.type = v;
+  },
+});
+</script>
+
+<template>
+  <div class="wf-triggers">
+    <div class="wf-triggers-toggle">
+      <span>启用触发器</span>
+      <a-switch v-model:checked="enabled" size="small" />
+    </div>
+
+    <div v-if="enabled" class="wf-triggers-types">
+      <div
+        v-for="t in TRIGGERS"
+        :key="t.key"
+        class="wf-triggers-type"
+        :class="{ 'is-active': currentType === t.key }"
+        :style="{ '--tc': t.color }"
+        @click="currentType = t.key"
+      >
+        <component :is="t.icon" class="wf-triggers-type-icon" />
+        <span>{{ t.label }}</span>
+      </div>
+    </div>
+
+    <div v-if="enabled" class="wf-triggers-hint">
+      触发器详细配置由宿主项目提供。
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.wf-triggers {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.wf-triggers-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 10px;
+  background: #f9fafb;
+  border-radius: 6px;
+  font-size: 12px;
+  color: #4b5563;
+}
+
+.wf-triggers-types {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 6px;
+}
+
+.wf-triggers-type {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 10px 6px;
+  background: #ffffff;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: border-color 0.15s, background 0.15s;
+  color: #4b5563;
+  font-size: 11px;
+}
+
+.wf-triggers-type:hover {
+  border-color: var(--tc);
+}
+
+.wf-triggers-type.is-active {
+  background: color-mix(in srgb, var(--tc) 10%, transparent);
+  border-color: var(--tc);
+  color: var(--tc);
+}
+
+.wf-triggers-type-icon {
+  font-size: 18px;
+  color: var(--tc);
+}
+
+.wf-triggers-hint {
+  padding: 6px 10px;
+  font-size: 11px;
+  color: #92400e;
+  background: #fef3c7;
+  border-radius: 4px;
+}
+</style>

package/src/agent-flow/components/stubs/VariableModal.vue

@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import { reactive, ref } from 'vue';
+
+/**
+ * 输入变量编辑模态框
+ *
+ * 这是 @agent-start/agent-flow 内置的基础实现，覆盖了新增/编辑一个变量的
+ * 常见字段（name / label / type / required / description / default）。
+ * 宿主项目可通过 `app.component('VariableModal', RealVariableModal)`
+ * 全局替换为自己更强大的实现。
+ *
+ * 用法：`variableModalRef.value.showModal(item?)` —— 编辑传 item、新增
+ * 传 undefined / {}。之前用 :main-data prop + 同步 showModal() 的写法会
+ * 撞上 Vue 的父→子 prop 传递需要一个 tick 才刷新的时序问题，导致：
+ *   · 第一次点编辑：表单不带出数据（读到的还是初始 prop）
+ *   · 再点一次：终于带出上一次的数据
+ *   · 第一次点新增：错带出上一次编辑/新增的数据
+ * 现在直接把要展示的对象作为参数传进来，就地写进 form，避免绕一圈 prop
+ * 更新，多快好省。
+ */
+
+const TYPES = [
+  { value: 'string', label: 'String' },
+  { value: 'number', label: 'Number' },
+  { value: 'boolean', label: 'Boolean' },
+  { value: 'array', label: 'Array' },
+  { value: 'object', label: 'Object' },
+  { value: 'file', label: 'File' },
+];
+
+// 保留 mainData prop 只为向后兼容宿主项目里可能存在的老用法；showModal(item)
+// 传参会覆盖它。新代码不要再依赖 :main-data。
+const props = defineProps<{ mainData?: any }>();
+const emit = defineEmits<{ (e: 'formSubmit', v: any): void }>();
+
+const open = ref(false);
+const form = reactive<any>({
+  id: undefined,
+  name: '',
+  label: '',
+  type: 'string',
+  required: false,
+  description: '',
+  defaultValue: '',
+});
+
+function resetForm(src: any) {
+  form.id = src.id;
+  form.name = src.name || '';
+  form.label = src.label || '';
+  form.type = src.type || 'string';
+  form.required = !!src.required;
+  form.description = src.description || '';
+  form.defaultValue = src.defaultValue ?? '';
+}
+
+function showModal(item?: any) {
+  // 优先使用调用方直接传入的 item，回退到 mainData（老 API），最后 {}。
+  const src = item ?? props.mainData ?? {};
+  resetForm(src);
+  open.value = true;
+}
+
+function hideModal() {
+  open.value = false;
+}
+
+function submit() {
+  emit('formSubmit', { ...form });
+  open.value = false;
+}
+
+defineExpose({ showModal, hideModal });
+</script>
+
+<template>
+  <a-modal
+    v-model:open="open"
+    :title="form.id ? '编辑输入变量' : '新增输入变量'"
+    width="480px"
+    :ok-text="form.id ? '保存' : '添加'"
+    cancel-text="取消"
+    @ok="submit"
+  >
+    <a-form
+      layout="vertical"
+      :model="form"
+      autocomplete="off"
+      style="padding-top: 8px"
+    >
+      <a-form-item label="变量名" required>
+        <a-input v-model:value="form.name" placeholder="例如 query" />
+      </a-form-item>
+      <a-form-item label="显示名">
+        <a-input v-model:value="form.label" placeholder="用户看到的中文标题" />
+      </a-form-item>
+      <a-form-item label="类型">
+        <a-select v-model:value="form.type" :options="TYPES" />
+      </a-form-item>
+      <a-form-item label="默认值">
+        <a-input v-model:value="form.defaultValue" placeholder="留空表示无默认值" />
+      </a-form-item>
+      <a-form-item label="描述">
+        <a-textarea
+          v-model:value="form.description"
+          placeholder="给填写者的说明"
+          :auto-size="{ minRows: 2, maxRows: 4 }"
+        />
+      </a-form-item>
+      <a-form-item>
+        <a-checkbox v-model:checked="form.required">必填</a-checkbox>
+      </a-form-item>
+    </a-form>
+  </a-modal>
+</template>

package/src/agent-flow/index.ts

@@ -0,0 +1,73 @@
+import type { App } from 'vue';
+
+import FlowDesigner from './workflow/FlowDesigner.vue';
+import NodeConfig from './workflow/NodeConfig.vue';
+import NodeConfigCard from './workflow/NodeConfigCard.vue';
+import CustomEdge from './workflow/CustomEdge.vue';
+import NodeHandle from './workflow/NodeHandle.vue';
+import Icon from './workflow/Icon.vue';
+import ChatIframePanel from './components/ChatIframePanel.vue';
+
+import { useWorkflowStore } from './stores/workflow';
+import { provideBackend, type BackendAdapter } from './adapter/backend';
+
+import nodeCatalog from './workflow/utils/node_config';
+import nodeCardForm from './workflow/utils/node_card_form';
+import workflowUtils from './workflow/utils/workflow_utils';
+
+export {
+  FlowDesigner,
+  NodeConfig,
+  NodeConfigCard,
+  CustomEdge,
+  NodeHandle,
+  Icon,
+  ChatIframePanel,
+  useWorkflowStore,
+  provideBackend,
+  nodeCatalog,
+  nodeCardForm,
+  workflowUtils,
+};
+
+export type { BackendAdapter } from './adapter/backend';
+export type {
+  ChatDebugVariable,
+  ChatIframeConfig,
+} from './components/chat-iframe-types';
+
+export interface AgentFlowInstallOptions {
+  /** 后端 API 适配器；不传则使用内置 no-op（所有请求返回空数据） */
+  backend?: BackendAdapter;
+  /** 全局注册核心组件（默认 true） */
+  registerGlobal?: boolean;
+}
+
+/**
+ * Vue 插件形式安装。
+ *
+ * @example
+ *   import { createApp } from 'vue';
+ *   import AgentFlow from '@agent-start/agent-flow';
+ *   import '@agent-start/agent-flow/style.css';
+ *
+ *   const app = createApp(App);
+ *   app.use(AgentFlow, {
+ *     backend: {
+ *       getCurrentModel: (t) => http.post(`/model/current/${t}`),
+ *       getWorkflow: (q) => http.get('/workflow', { params: q }),
+ *       publishWorkflow: (p) => http.post('/workflow/publish', p),
+ *     },
+ *   });
+ */
+export default {
+  install(app: App, options: AgentFlowInstallOptions = {}) {
+    if (options.backend) {
+      provideBackend(app, options.backend);
+    }
+    if (options.registerGlobal !== false) {
+      app.component('FlowDesigner', FlowDesigner);
+      app.component('NodeConfigCard', NodeConfigCard);
+    }
+  },
+};

package/src/agent-flow/stores/workflow.ts

@@ -0,0 +1,72 @@
+import { defineStore } from 'pinia';
+
+interface WorkflowState {
+  graph: any; // 字典数据缓存
+  selectDataCache: any; // 下拉数据缓存
+}
+export const useWorkflowStore = defineStore('workflow', {
+  state: (): WorkflowState => ({
+    graph: {},
+    selectDataCache: {},
+  }),
+  getters: {},
+  actions: {
+    setGraph(graph: any) {
+      this.graph = graph;
+    },
+    getNodes() {
+      return this.graph.nodes;
+    },
+    getStartNode() {
+      return this.getNodeById('1');
+    },
+    getStartNodeVariable() {
+      const startNode: any = this.getStartNode();
+      const data = startNode.data;
+      const items: any = [];
+      if (data.triggersEnabled) {
+        const triggers = data.structOutput.data;
+        items.push(...triggers);
+      } else {
+        items.push({
+          type: 'string',
+          name: 'query',
+          value: '',
+          label: '用户查询',
+        });
+      }
+      return items;
+    },
+    getNodeById(id: string) {
+      const nodes = this.graph.nodes;
+      for (const node of nodes) {
+        if (node.id === id) {
+          return node;
+        }
+      }
+      return {};
+    },
+    getParentNodeList(nodeId: string, items: any = []) {
+      const edges = this.graph.edges || [];
+      const parentEdges = edges.filter((edge: any) => edge.target === nodeId);
+      parentEdges.forEach((edge: any) => {
+        const parentNode = this.getNodeById(edge.source);
+        if (
+          parentNode &&
+          !items.some((item: any) => item.id === parentNode.id)
+        ) {
+          items.unshift(parentNode);
+          this.getParentNodeList(parentNode.id, items);
+        }
+      });
+      return items;
+    },
+    getOutputItemsTree(nodeId: string, items: any = []) {
+      const nodeList = this.getParentNodeList(nodeId);
+      for (const node of nodeList) {
+        const output = node.data.output;
+        items.push(this.getNodeById(node));
+      }
+    },
+  },
+});

package/src/agent-flow/utils/langUtils.ts

@@ -0,0 +1,173 @@
+import { createVNode } from 'vue';
+
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import { message, Modal } from 'ant-design-vue';
+
+const config = { hostname: '' };
+
+export default {
+  getId(str: never | string = ''): string {
+    if (!str) {
+      str = '';
+    }
+    // 取时间戳后6位 + 3位随机数
+    return `${str}_${Date.now().toString().slice(-6)}${Math.random().toString(36).slice(-3)}`;
+  },
+  getResponseImageUri(datas: any): string {
+    if (datas) {
+      const data = datas[0];
+      return `${data.bucketName}/${data.objectName}`;
+    }
+    return '';
+  },
+  getImageUrl(str: never | string = ''): string {
+    if (str) {
+      if (str.includes('data:image/')) {
+        return str;
+      }
+      if (str.startsWith('http://') || str.startsWith('https://')) {
+        return str;
+      }
+      return `/api/agent-start/storage/file/${str}`;
+    }
+    return '';
+  },
+  getQueryString(name: string) {
+    const reg = new RegExp(`(^|&)${name}=([^&]*)(&|$)`, 'i');
+    const r = window.location.search.slice(1).match(reg);
+    if (r) {
+      return unescape(r[2]);
+    }
+    return null;
+  },
+  message(ar: any) {
+    if (ar.error) {
+      this.error(ar.message);
+      return false;
+    } else if (ar.success) {
+      this.info(ar.message);
+      return true;
+    } else {
+      this.warn(ar.message);
+      return false;
+    }
+  },
+  info(msg: any) {
+    if (!msg) {
+      msg = '完成';
+    }
+    message.info(msg);
+  },
+  warn(msg: any) {
+    message.warning(msg);
+  },
+  error(msg: any) {
+    message.error(msg);
+  },
+  confirm(prop: any, ok?: any, cancel?: any) {
+    prop = prop || {};
+    Modal.confirm({
+      title: prop.title || '确定要继续操作吗?',
+      icon: createVNode(ExclamationCircleOutlined),
+      content: createVNode(
+        'div',
+        {
+          style: 'color:red;',
+        },
+        prop.message || '',
+      ),
+      onOk() {
+        if (ok) {
+          ok();
+        }
+      },
+      onCancel() {
+        if (cancel) {
+          cancel();
+        }
+      },
+      class: 'test',
+    });
+  },
+  copy(from: any, to: any) {
+    for (const attr in from) {
+      // eslint-disable-next-line eqeqeq
+      if (from[attr] !== null || from[attr] != undefined) {
+        to[attr] = from[attr];
+      }
+    }
+  },
+  clone(obj: any) {
+    let o: any;
+    switch (typeof obj) {
+      case 'boolean': {
+        o = obj;
+        break;
+      }
+      case 'number': {
+        o = obj - 0;
+        break;
+      }
+      case 'object': {
+        if (obj === null) {
+          o = null;
+        } else {
+          if (Array.isArray(obj)) {
+            o = [];
+            for (let i = 0, len = obj.length; i < len; i++) {
+              o.push(this.clone(obj[i]));
+            }
+          } else {
+            o = {};
+            for (const k in obj) {
+              o[k] = this.clone(obj[k]);
+            }
+          }
+        }
+        break;
+      }
+      case 'string': {
+        o = `${obj}`;
+        break;
+      }
+      case 'undefined': {
+        break;
+      }
+      default: {
+        o = obj;
+        break;
+      }
+    }
+    return o;
+  },
+  buildTreeData(data: any, rootId: string) {
+    if (!data) {
+      return [];
+    }
+    if (!rootId) {
+      rootId = '0';
+    }
+    const jsonstr = JSON.stringify(data);
+    const cloneData = JSON.parse(jsonstr);
+    const newData = cloneData.filter((father: any) => {
+      const branchArr = cloneData.filter(
+        (child) => father.id === child.parentId,
+      );
+      if (branchArr.length > 0) {
+        father.children = branchArr;
+      } else {
+        father.children = [];
+        father.isLeaf = true; // 设置为叶子节点
+      }
+      return father.parentId === rootId;
+    });
+    return newData.length > 0 ? newData : cloneData;
+  },
+  cdn(url: string) {
+    if (!url) return '';
+    if (url.indexOf('http') === 0) {
+      return url;
+    }
+    return config.hostname + url;
+  },
+};

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

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { h, reactive } from 'vue';
+
+import { PlusOutlined } from '@ant-design/icons-vue';
+
+const formState = reactive<any>({
+  prologue: '',
+  context: '',
+  system: '',
+  selectOptions: [],
+  required: false,
+  memory: { windows: 1 },
+});
+</script>
+
+<template>
+  <div>
+    <div>
+      <div>
+        <div>对话开场白</div>
+        <div></div>
+        <div><a-switch v-model:checked="formState.prologue" /></div>
+      </div>
+      <div>在对话型应用中，让 AI 主动说第一段话可以拉近与用户间的距离。</div>
+      <div>
+        <a-button :icon="h(PlusOutlined)" size="small">编辑开场白</a-button>
+      </div>
+    </div>
+    <div>
+      <div>
+        <div>下一步问题建议</div>
+        <div></div>
+        <div><a-switch v-model:checked="formState.prologue" /></div>
+      </div>
+      <div>设置下一步问题建议可以让用户更好的对话。</div>
+      <div>
+        <a-button :icon="h(PlusOutlined)" size="small">编辑开场白</a-button>
+      </div>
+    </div>
+    <div>
+      <div>
+        <div>引用和归属</div>
+        <div></div>
+        <div><a-switch v-model:checked="formState.prologue" /></div>
+      </div>
+      <div>显示源文档和生成内容的归属部分。</div>
+      <div>
+        <a-button :icon="h(PlusOutlined)" size="small">编辑开场白</a-button>
+      </div>
+    </div>
+    <div>
+      <div>
+        <div>内容审查</div>
+        <div></div>
+        <div><a-switch v-model:checked="formState.prologue" /></div>
+      </div>
+      <div>您可以调用审查 API 或者维护敏感词库来使模型更安全地输出</div>
+      <div>
+        <a-button :icon="h(PlusOutlined)" size="small">编辑开场白</a-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>