陈子默
aedefe6b5e
- 分阶段加载智能体配置并按需缓存 MCP 工具 - 合并画布状态更新与节点尺寸监听，启用大图可视区域渲染和静态连线 - 隔离 Tinyflow Store 实例并补充数据同步与回归测试
56 lines
1.2 KiB
Vue
56 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
import type { AgentStudioConnectionView, AgentStudioViewport } from './types';
|
|
|
|
defineProps<{
|
|
connections: AgentStudioConnectionView[];
|
|
viewport: AgentStudioViewport;
|
|
}>();
|
|
</script>
|
|
|
|
<template>
|
|
<svg class="agent-studio-edge-layer" aria-hidden="true">
|
|
<g
|
|
:transform="`translate(${viewport.x} ${viewport.y}) scale(${viewport.zoom})`"
|
|
>
|
|
<path
|
|
v-for="connection in connections"
|
|
:key="connection.id"
|
|
class="agent-studio-edge-layer__path"
|
|
:class="{ 'is-active': connection.active }"
|
|
:d="connection.path"
|
|
:data-source-id="connection.sourceId"
|
|
:data-target-id="connection.targetId"
|
|
/>
|
|
</g>
|
|
</svg>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.agent-studio-edge-layer {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 1;
|
|
overflow: visible;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.agent-studio-edge-layer__path {
|
|
fill: none;
|
|
stroke: var(--el-border-color);
|
|
stroke: color-mix(
|
|
in srgb,
|
|
var(--el-color-primary) 30%,
|
|
var(--el-border-color)
|
|
);
|
|
stroke-width: 1.6;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
vector-effect: non-scaling-stroke;
|
|
}
|
|
|
|
.agent-studio-edge-layer__path.is-active {
|
|
stroke: var(--el-color-primary);
|
|
stroke-width: 2.2;
|
|
}
|
|
</style>
|