AgentCoord/frontend/src/App.vue

<script setup lang="ts">
import Layout from './layout/index.vue'
</script>

<template>
  <Layout />
</template>

<style lang="scss">
#app {
  background-color: var(--color-bg);
  color: var(--color-text);
}

.jtk-endpoint {
  z-index: 100;
}

.card-item + .card-item {
  margin-top: 35px;
}

.el-card {
  border-radius: 8px;
  background: var(--color-bg-tertiary);
  border: 2px solid var(--color-card-border);
  box-shadow: var(--color-card-border-hover);

  &:hover {
    background: var(--color-bg-content-hover);
    box-shadow: none;
    transition: background-color 0.3s ease-in-out;
  }

  .el-card__body {
    padding: 10px;
  }
}

:root {
  --gradient: linear-gradient(to right, #0093eb, #00d2d1);
}

#task-template {
  .active-card {
    border: 2px solid transparent;
    $bg: var(--el-input-bg-color, var(--el-fill-color-blank));
    background: linear-gradient(
          var(--color-agent-list-selected-bg),
          var(--color-agent-list-selected-bg)
        )
        padding-box,
      linear-gradient(to right, #00c8d2, #315ab4) border-box;
    color: var(--color-text);
  }
}

/* 1. 定义流动动画：让虚线沿路径移动 */
@keyframes flowAnimation {
  to {
    stroke-dashoffset: 8; /* 与stroke-dasharray总和一致 */
  }
}

@keyframes flowAnimationReverse {
  to {
    stroke-dashoffset: -8; /* 与stroke-dasharray总和一致 */
  }
}

/* 2. 为jsPlumb连线绑定动画：作用于SVG的path元素 */
/* jtk-connector是jsPlumb连线的默认SVG类，path是实际的线条元素 */
.jtk-connector-output path {
  /* 定义虚线规则：线段长度5px + 间隙3px（总长度8px，与动画偏移量匹配） */
  stroke-dasharray: 5 3;
  /* 应用动画：名称+时长+线性速度+无限循环 */
  animation: flowAnimationReverse 0.5s linear infinite;
  /* 可选：设置线条基础样式（颜色、宽度） */
  stroke-width: 2;
}

/* 2. 为jsPlumb连线绑定动画：作用于SVG的path元素 */
/* jtk-connector是jsPlumb连线的默认SVG类，path是实际的线条元素 */
.jtk-connector-input path {
  /* 定义虚线规则：线段长度5px + 间隙3px（总长度8px，与动画偏移量匹配） */
  stroke-dasharray: 5 3;
  /* 应用动画：名称+时长+线性速度+无限循环 */
  animation: flowAnimationReverse 0.5s linear infinite;
  /* 可选：设置线条基础样式（颜色、宽度） */
  stroke-width: 2;
}

/* 可选： hover时增强动画效果（如加速、变色） */
.jtk-connector path:hover {
  animation-duration: 0.5s; /*  hover时流动加速 */
}
</style>