cc22655a1e
- 在 config.json 中新增 dev 配置项用于区分开发与生产环境 - 实现 v-dev-only 指令，仅在开发模式下渲染元素 - 注册全局自定义指令 dev-only，支持通过 binding.value 控制启用状态 - 在 TaskSyllabus/Bg.vue 中使用 v-dev-only 指令隐藏生产环境下的加号区域 - 移除 card 样式中的固定 margin-bottom，改由容器控制间距 - 统一使用 CSS 变量 --color-border-separate 替代硬编码的分割线颜色 - 为 Task.vue 的搜索框添加 clearable 属性并移除弹出项的阴影效果 - Layout 组件名称规范化为首字母大写 - 在主题样式中定义深色与浅色模式下的 --color-border-separate 颜色值 - 覆盖 Element Plus 的 --el-fill-color-blank 以适配暗黑模式背景透明度需求
98 lines
2.5 KiB
Vue
98 lines
2.5 KiB
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>
|