wangjunxiao/tianshu-engine
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: tone down edge glow, dash and animation for subtler flow effect

Browse Source
This commit is contained in:
cocos02
2026-06-12 12:48:25 +08:00
parent ddf73de519
commit faca71ea6e
1 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/TreeFlow.vue
View File

@@ -238,7 +238,7 @@ const svgH = computed(() => containerH.value)
<stop offset="100%" stop-color="#8b6914"/> <stop offset="100%" stop-color="#8b6914"/>
</linearGradient> </linearGradient>
<filter id="edge-glow"> <filter id="edge-glow">
<feGaussianBlur stdDeviation="1.2" result="b"/> <feGaussianBlur stdDeviation="0.6" result="b"/>
<feMerge> <feMerge>
<feMergeNode in="b"/> <feMergeNode in="b"/>
<feMergeNode in="SourceGraphic"/> <feMergeNode in="SourceGraphic"/>
@@ -255,16 +255,16 @@ const svgH = computed(() => containerH.value)
:d="edgePath(edge)" :d="edgePath(edge)"
fill="none" fill="none"
stroke="url(#edge-gold)" stroke="url(#edge-gold)"
stroke-width="2.2" stroke-width="1.6"
filter="url(#edge-glow)" filter="url(#edge-glow)"
opacity="0.35" opacity="0.18"
/> />
<path <path
v-if="edge.visited" v-if="edge.visited"
:d="edgePath(edge)" :d="edgePath(edge)"
fill="none" fill="none"
stroke="url(#edge-gold)" stroke="url(#edge-gold)"
stroke-width="1.6" stroke-width="1.2"
class="edge-main" class="edge-main"
/> />
<path <path
@@ -272,10 +272,10 @@ const svgH = computed(() => containerH.value)
:d="edgePath(edge)" :d="edgePath(edge)"
fill="none" fill="none"
stroke="#e0c060" stroke="#e0c060"
stroke-width="0.8" stroke-width="0.7"
stroke-dasharray="3 20" stroke-dasharray="2 35"
class="edge-flow" class="edge-flow"
opacity="0.7" opacity="0.35"
/> />
<path <path
v-if="!edge.visited" v-if="!edge.visited"
@@ -443,6 +443,6 @@ const svgH = computed(() => containerH.value)
.edge-flow { .edge-flow {
stroke-linecap: round; stroke-linecap: round;
animation: flowDash 3s linear infinite; animation: flowDash 5s linear infinite;
} }
</style> </style>