feat:rename subtree from frontend-vue to frontend

frontend/src/App.vue

@@ -0,0 +1,101 @@
+<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>