vue-agent-start 0.1.0

package/src/agent-flow/workflow/nodes/VariableAssignerNode.vue

@@ -0,0 +1,145 @@
+<script setup>
+import { computed, ref } from 'vue';
+
+import Icon from '../Icon.vue';
+import NodeHandle from '../NodeHandle.vue';
+import NodeHoverToolbar from '../NodeHoverToolbar.vue';
+
+const props = defineProps({
+  id: String,
+  data: {
+    type: Object,
+    default: () => ({
+      label: '变量赋值',
+      description: '把上游变量写回到会话/环境变量',
+      assignments: [],
+    }),
+  },
+});
+
+const emit = defineEmits(['duplicate', 'delete', 'connection-plus-click']);
+
+const isHovered = ref(false);
+const onMouseEnter = () => (isHovered.value = true);
+const onMouseLeave = () => (isHovered.value = false);
+const duplicateNode = () => emit('duplicate', props.id);
+const deleteNode = () => emit('delete', props.id);
+const onConnectionPlusClick = (event, nodeId, handleId) => {
+  emit('connection-plus-click', event, nodeId, handleId);
+};
+
+const preview = computed(() => (props.data.assignments || []).slice(0, 3));
+const total = computed(() => props.data.assignments?.length || 0);
+</script>
+
+<template>
+  <div
+    class="wf-node variable-assigner-node"
+    @mouseenter="onMouseEnter"
+    @mouseleave="onMouseLeave"
+  >
+    <NodeHoverToolbar
+      v-if="isHovered"
+      node-type="variable_assigner"
+      @duplicate="duplicateNode"
+      @delete="deleteNode"
+    />
+
+    <div class="wf-node-header">
+      <div class="wf-node-icon">
+        <Icon name="variable" />
+      </div>
+      <div class="wf-node-info">
+        <div class="wf-node-title">{{ data.label }}</div>
+        <div class="wf-node-subtitle">变量赋值</div>
+      </div>
+    </div>
+
+    <div class="wf-node-content">
+      <div class="wf-node-description">{{ data.description }}</div>
+      <div v-if="total > 0" class="wf-node-preview">
+        <div class="wf-node-preview-label">赋值项 ({{ total }})</div>
+        <div class="assigner-list">
+          <div v-for="a in preview" :key="a.target" class="assigner-row">
+            <span class="assigner-target">{{ a.target || '?' }}</span>
+            <span class="assigner-arrow">←</span>
+            <span class="assigner-source">{{ a.source || '?' }}</span>
+          </div>
+          <div v-if="total > 3" class="assigner-more">
+            +{{ total - 3 }} 项
+          </div>
+        </div>
+      </div>
+      <div v-else class="wf-node-empty">
+        <span class="wf-node-empty-text">配置赋值项</span>
+      </div>
+    </div>
+
+    <NodeHandle
+      :id="id"
+      type="target"
+      position="Left"
+      class-name="flow-node-handle-left"
+      :style="{ background: '#059669', border: '2px solid #ffffff' }"
+    />
+    <NodeHandle
+      :id="id"
+      type="source"
+      position="Right"
+      :is-hovered="isHovered"
+      class-name="flow-node-handle-right"
+      :style="{ background: '#059669', border: '2px solid #ffffff' }"
+      @connection-plus-click="onConnectionPlusClick"
+    />
+  </div>
+</template>
+
+<style scoped>
+.variable-assigner-node {
+  --wf-accent: #059669;
+  --wf-accent-hover: #047857;
+}
+
+.assigner-list {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  margin-top: 4px;
+}
+
+.assigner-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 2px 6px;
+  font-size: 11px;
+  background: color-mix(in srgb, var(--wf-accent) 8%, transparent);
+  border-radius: 4px;
+}
+
+.assigner-target {
+  color: color-mix(in srgb, var(--wf-accent) 85%, #000);
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  font-weight: 500;
+}
+
+.assigner-arrow {
+  color: #6b7280;
+  font-weight: 600;
+}
+
+.assigner-source {
+  color: #1f2937;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.assigner-more {
+  padding: 2px 6px;
+  font-size: 10px;
+  font-style: italic;
+  color: #9ca3af;
+}
+</style>

package/src/agent-flow/workflow/nodes/VariableNode.vue

@@ -0,0 +1,130 @@
+<script setup>
+import { computed, ref } from 'vue';
+
+import workflow_utils from '@/workflow/utils/workflow_utils';
+
+import Icon from '../Icon.vue';
+import NodeHandle from '../NodeHandle.vue';
+import NodeHoverToolbar from '../NodeHoverToolbar.vue';
+
+const props = defineProps({
+  id: String,
+  data: {
+    type: Object,
+    default: () => ({
+      label: '变量聚合',
+      description: '变量聚合节点',
+      output: [{ children: [] }],
+    }),
+  },
+});
+
+const emit = defineEmits(['duplicate', 'delete', 'connection-plus-click']);
+
+const isHovered = ref(false);
+
+const onMouseEnter = () => (isHovered.value = true);
+const onMouseLeave = () => (isHovered.value = false);
+const duplicateNode = () => emit('duplicate', props.id);
+const deleteNode = () => emit('delete', props.id);
+const onConnectionPlusClick = (event, nodeId, handleId) => {
+  emit('connection-plus-click', event, nodeId, handleId);
+};
+
+const getAnswerTextLabel = (variableSelector) =>
+  workflow_utils.getVariableLabel(variableSelector);
+
+const aggregated = computed(() => props.data?.output?.[0]?.children ?? []);
+</script>
+
+<template>
+  <div
+    class="wf-node variable-node"
+    @mouseenter="onMouseEnter"
+    @mouseleave="onMouseLeave"
+  >
+    <NodeHoverToolbar
+      v-if="isHovered"
+      node-type="variable"
+      @duplicate="duplicateNode"
+      @delete="deleteNode"
+    />
+
+    <div class="wf-node-header">
+      <div class="wf-node-icon">
+        <Icon name="variable" />
+      </div>
+      <div class="wf-node-info">
+        <div class="wf-node-title">{{ data.label }}</div>
+        <div class="wf-node-subtitle">变量聚合</div>
+      </div>
+    </div>
+
+    <div class="wf-node-content">
+      <div class="wf-node-description">{{ data.description }}</div>
+      <div v-if="aggregated.length > 0" class="wf-node-preview">
+        <div class="wf-node-preview-label">聚合变量</div>
+        <div class="wf-node-preview-list">
+          <div v-for="it in aggregated" :key="it.name" class="variable-row">
+            <div class="variable-name">{{ it.name }}</div>
+            <div class="variable-source">
+              {{ getAnswerTextLabel(it.variableSelector) }}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div v-else class="wf-node-empty">
+        <span class="wf-node-empty-text">配置变量聚合</span>
+      </div>
+    </div>
+
+    <NodeHandle
+      :id="id"
+      type="target"
+      position="Left"
+      class-name="flow-node-handle-left"
+      :style="{ background: '#0ea5e9', border: '2px solid #ffffff' }"
+    />
+    <NodeHandle
+      :id="id"
+      type="source"
+      position="Right"
+      :is-hovered="isHovered"
+      class-name="flow-node-handle-right"
+      :style="{ background: '#0ea5e9', border: '2px solid #ffffff' }"
+      @connection-plus-click="onConnectionPlusClick"
+    />
+  </div>
+</template>
+
+<style scoped>
+.variable-node {
+  --wf-accent: #0ea5e9;
+  --wf-accent-hover: #0284c7;
+}
+
+.variable-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 11px;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+}
+
+.variable-name {
+  flex: none;
+  padding: 1px 6px;
+  color: #ffffff;
+  background: var(--wf-accent);
+  border-radius: 4px;
+}
+
+.variable-source {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  color: #4b5563;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>

package/src/agent-flow/workflow/nodes/_node-base.css

@@ -0,0 +1,338 @@
+/* =========================================================
+ * agent-flow · 节点通用基础样式
+ * 所有节点视觉的共享部分（卡片外观、header、icon、toolbar、
+ * status、content 排版、metrics/config 预览、utility 行）。
+ * 各节点的 <style scoped> 只负责设置 --wf-accent / --wf-accent-hover
+ * 两个 CSS 变量来切换颜色，其余一律走这里。
+ * 命名空间：wf- 前缀，避免污染宿主项目样式。
+ * ========================================================= */
+
+/* -------- 卡片外观 -------- */
+.wf-node {
+  --wf-accent: #6b7280;
+  --wf-accent-hover: #4b5563;
+  --wf-node-bg: #ffffff;
+  --wf-node-border: #e5e7eb;
+  --wf-node-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  --wf-node-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.15);
+
+  position: relative;
+  width: 300px;
+  padding: 16px;
+  background: var(--wf-node-bg);
+  border: 2px solid var(--wf-accent, var(--wf-node-border));
+  border-radius: 12px;
+  box-shadow: var(--wf-node-shadow);
+  transition: box-shadow 0.2s, border-color 0.2s;
+}
+
+.wf-node:hover {
+  border-color: var(--wf-accent-hover, #6366f1);
+  box-shadow: var(--wf-node-shadow-hover);
+}
+
+/* 选中态：走 VueFlow 的 .selected 类（<VueFlow> 会在被选中节点根元素加上）
+ * 我们的 .wf-node 加在内部 div 上，所以用父选择器 .selected .wf-node
+ *
+ * 更强的视觉反馈——之前的 2px @25% halo 在原本已经带 accent 边框的卡片上
+ * 几乎看不出来。加厚成 3px @45% halo，叠一层淡 accent 背景 + 更浓的投影，
+ * 用户一眼就能看出"这是当前正在配置的节点"。纯 CSS，没有 JS reactivity 开销。 */
+.selected .wf-node,
+.wf-node.wf-node-selected {
+  background:
+    linear-gradient(
+      color-mix(in srgb, var(--wf-accent, #6366f1) 6%, #ffffff),
+      color-mix(in srgb, var(--wf-accent, #6366f1) 6%, #ffffff)
+    ),
+    var(--wf-node-bg);
+  border-color: var(--wf-accent, #6366f1) !important;
+  box-shadow:
+    0 0 0 3px color-mix(in srgb, var(--wf-accent, #6366f1) 45%, transparent),
+    0 6px 16px rgba(15, 23, 42, 0.12) !important;
+}
+
+.wf-node.wf-node-dimmed {
+  opacity: 0.6;
+  border-color: #d1d5db !important;
+}
+
+/* 节点右上角状态徽章 */
+.wf-node-badge {
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 6px;
+  font-size: 10px;
+  font-weight: 600;
+  color: #ffffff;
+  background: #6b7280;
+  border: 2px solid #ffffff;
+  border-radius: 999px;
+  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.1);
+}
+
+.wf-node-badge-running {
+  background: #f59e0b;
+  animation: wf-node-pulse 1.6s infinite;
+}
+
+.wf-node-badge-success {
+  background: #10b981;
+}
+
+.wf-node-badge-failed {
+  background: #ef4444;
+}
+
+/* -------- Header：icon + 标题 + 副标题 -------- */
+.wf-node-header {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.wf-node-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: 32px;
+  height: 32px;
+  color: #ffffff;
+  background: var(--wf-accent);
+  border-radius: 8px;
+}
+
+.wf-node-icon :deep(.icon),
+.wf-node-icon svg {
+  width: 18px;
+  height: 18px;
+}
+
+.wf-node-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.wf-node-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #1f2937;
+  margin-bottom: 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.wf-node-subtitle {
+  display: flex;
+  gap: 8px;
+  font-size: 12px;
+  color: var(--wf-accent);
+  font-weight: 500;
+}
+
+.wf-node-description {
+  font-size: 12px;
+  color: #6b7280;
+  line-height: 1.4;
+}
+
+/* 节点悬浮工具栏样式已移到 NodeHoverToolbar.vue 的 scoped style。
+ * 这里只保留 readonly 状态下的隐藏规则（选择器已同时匹配新旧两版）。 */
+
+/* -------- 状态指示灯 -------- */
+.wf-node-status {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+}
+
+.wf-node-status-indicator {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #d1d5db;
+}
+
+.wf-node-status-indicator.wf-is-running {
+  background: var(--wf-accent);
+  animation: wf-node-pulse 2s infinite;
+}
+
+.wf-node-status-indicator.wf-is-completed {
+  background: #10b981;
+}
+
+/* -------- Content 区 -------- */
+.wf-node-content {
+  margin-bottom: 8px;
+}
+
+/* Start 节点的 trigger 预览行 */
+.wf-node-triggers {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px;
+  background: #d1fae5;
+  border-radius: 8px;
+}
+
+.wf-node-triggers-icon {
+  width: 16px;
+  height: 16px;
+  object-fit: cover;
+  border-radius: 4px;
+}
+
+.wf-node-triggers-scope {
+  width: 80px;
+  overflow: hidden;
+  color: #6b7280;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* LLM / Agent 提示词预览：中性灰底，适合代码/长文本 */
+.wf-node-config-preview {
+  padding: 8px;
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  border-radius: 6px;
+}
+
+.wf-node-config-label {
+  margin-bottom: 4px;
+  font-size: 11px;
+  font-weight: 500;
+  color: #64748b;
+}
+
+.wf-node-config-value {
+  font-size: 12px;
+  color: #334155;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  word-break: break-all;
+}
+
+/* 通用带 accent 淡色的配置预览：适合"输入变量/所选知识库/HTTP URL"等短文本摘要
+ * 用 color-mix 依据 --wf-accent 生成淡底色，减少每节点手写颜色 */
+.wf-node-preview {
+  padding: 10px;
+  background: color-mix(in srgb, var(--wf-accent) 8%, transparent);
+  border: 1px solid color-mix(in srgb, var(--wf-accent) 30%, transparent);
+  border-radius: 6px;
+}
+
+.wf-node-preview-label {
+  margin-bottom: 4px;
+  font-size: 11px;
+  font-weight: 500;
+  color: color-mix(in srgb, var(--wf-accent) 85%, #000);
+}
+
+.wf-node-preview-value {
+  font-size: 12px;
+  color: #1f2937;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  word-break: break-all;
+}
+
+.wf-node-preview-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-size: 12px;
+  color: #1f2937;
+}
+
+/* LLM 参数指标行 */
+.wf-node-metrics {
+  display: flex;
+  gap: 12px;
+  padding-top: 8px;
+  border-top: 1px solid #e5e7eb;
+}
+
+.wf-node-metric {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.wf-node-metric-label {
+  font-size: 10px;
+  font-weight: 500;
+  color: #9ca3af;
+}
+
+.wf-node-metric-value {
+  font-size: 12px;
+  font-weight: 600;
+  color: #374151;
+}
+
+/* End 节点回复预览 */
+.wf-node-answer-preview {
+  padding: 10px;
+  border: 1px solid #fed7aa;
+  border-radius: 6px;
+}
+
+.wf-node-answer-text {
+  font-size: 12px;
+  color: #9a3412;
+  font-style: italic;
+  line-height: 1.4;
+}
+
+.wf-node-answer-row {
+  display: flex;
+  gap: 8px;
+}
+
+.wf-node-empty {
+  padding: 12px;
+  text-align: center;
+  border: 1px dashed #d1d5db;
+  border-radius: 6px;
+}
+
+.wf-node-empty-text {
+  font-size: 12px;
+  font-style: italic;
+  color: #9ca3af;
+}
+
+/* -------- 只读模式：隐藏所有节点悬浮操作 -------- */
+.wf-readonly .wf-node-toolbar,
+.wf-readonly .wf-hover-toolbar {
+  display: none !important;
+}
+
+/* -------- utility -------- */
+.wf-row {
+  display: flex;
+  justify-content: space-between;
+}
+
+.wf-row-gap-sm {
+  display: flex;
+  gap: 8px;
+}
+
+@keyframes wf-node-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}