AgentCoord/frontend/src/App.vue

<script setup lang="ts">
import { onMounted } from 'vue'

import Layout from './layout/index.vue'

onMounted(() => {
  document.documentElement.classList.add('dark')
})
</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-bg-tertiary);

  &:hover {
    background: #171B22;
    box-shadow: none !important;
    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-bg-tertiary), var(--color-bg-tertiary)) 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 .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 .5s linear infinite;
  /* 可选：设置线条基础样式（颜色、宽度） */
  stroke-width: 2;
}

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