bring the journey graph onto the cyan edge palette
The canvas renderer branched on isDark for every color, but isDark has been a constant true since the theme switch was removed, so half of each ternary was unreachable. Resolve the values directly and shift the hues from the old pale blue to the accent cyan, keeping alpha as the only thing that varies between idle and focused edges. useTheme is no longer referenced here and is dropped from the imports.
This commit is contained in:
@@ -3,7 +3,6 @@ import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
|
||||
import { useMessage } from '@/composables/useMessage'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { fetchJourneyGraph, type JourneyGraphResponse, type JourneyMemory, type JourneyNode } from '@/api/hermes/journey'
|
||||
import { useTheme } from '@/composables/useTheme'
|
||||
|
||||
interface SceneNode extends JourneyNode {
|
||||
x: number
|
||||
@@ -40,7 +39,6 @@ const MAX_ZOOM = 2.4
|
||||
|
||||
const { t } = useI18n()
|
||||
const message = useMessage()
|
||||
const { isDark } = useTheme()
|
||||
|
||||
const data = ref<JourneyGraphResponse | null>(null)
|
||||
const loading = ref(false)
|
||||
@@ -284,13 +282,12 @@ function drawEdges(projectedById: Map<string, ProjectedNode>, activeId: string,
|
||||
const active = !!activeId && (edge.source === activeId || edge.target === activeId)
|
||||
const categoryActive = !!hoverCategory.value && (source.category === hoverCategory.value || target.category === hoverCategory.value)
|
||||
const nearby = activeNeighbors.has(edge.source) || activeNeighbors.has(edge.target)
|
||||
const alpha = active ? 0.62 + pulse * 0.28 : categoryActive ? 0.46 : nearby ? 0.4 : isDark.value ? 0.1 : 0.22
|
||||
ctx.lineWidth = isDark.value ? 1 : 1.15
|
||||
const alpha = active ? 0.62 + pulse * 0.28 : categoryActive ? 0.46 : nearby ? 0.4 : 0.1
|
||||
ctx.lineWidth = 1
|
||||
ctx.shadowColor = 'transparent'
|
||||
ctx.shadowBlur = 0
|
||||
ctx.strokeStyle = isDark.value
|
||||
? `rgba(180, 210, 255, ${alpha})`
|
||||
: `rgba(42, 58, 78, ${alpha})`
|
||||
// 青色系与全站强调色一致;亮度差异由 alpha 控制,不换色相。
|
||||
ctx.strokeStyle = `rgba(45, 212, 191, ${alpha})`
|
||||
const curve = edgeCurve(source, target, `${edge.source}:${edge.target}`)
|
||||
drawCurvedEdge(source, target, curve)
|
||||
if (active) drawPulseEdge(source, target, curve, pulse, now)
|
||||
@@ -326,8 +323,8 @@ function drawPulseEdge(source: ProjectedNode, target: ProjectedNode, curve: { cx
|
||||
const head = (now * 0.0018) % 1
|
||||
const tail = Math.max(0, head - 0.24)
|
||||
const points = sampleCurve(source, target, curve, 1 - head, 1 - tail, 18).reverse()
|
||||
const glowColor = isDark.value ? 'rgba(180, 225, 255, 0.92)' : 'rgba(74, 144, 217, 0.78)'
|
||||
const coreColor = isDark.value ? 'rgba(255, 255, 255, 0.96)' : 'rgba(255, 255, 255, 0.9)'
|
||||
const glowColor = 'rgba(45, 212, 191, 0.92)'
|
||||
const coreColor = 'rgba(235, 255, 252, 0.96)'
|
||||
ctx.save()
|
||||
ctx.lineJoin = 'round'
|
||||
ctx.lineCap = 'round'
|
||||
@@ -383,7 +380,8 @@ function drawNode(node: ProjectedNode, activeId: string, activeNeighbors: Set<st
|
||||
const alpha = active || nearby || categoryActive || !hasFocus ? 1 : 0.32
|
||||
const pulse = active ? 0.5 + Math.sin(now * 0.005) * 0.5 : 0
|
||||
const glow = active ? 20 + pulse * 24 : node.createdBy === 'agent' ? 12 : node.pinned ? 10 : 0
|
||||
const nodeBackdrop = isDark.value ? '#1a1a1a' : '#fafafa'
|
||||
// 节点底衬,用来把节点从边线里“抠”出来;取侧栏色比页面底更深。
|
||||
const nodeBackdrop = '#1c1f26'
|
||||
|
||||
ctx.save()
|
||||
ctx.globalAlpha = 1
|
||||
|
||||
Reference in New Issue
Block a user