Jelajahi Sumber

fix: 关系图连线视觉映射调整 — 粗细/颜色/虚线 + 无数据默认黑色

E2E Test Bot 3 bulan lalu
induk
melakukan
c84f058fee
1 mengubah file dengan 63 tambahan dan 41 penghapusan
  1. 63 41
      cfc-frontend/components/FamilyRelationGraph.vue

+ 63 - 41
cfc-frontend/components/FamilyRelationGraph.vue

@@ -464,28 +464,41 @@ simulationTick: function() {
         var s = edge.source
         var t = edge.target
 
-        // 连线粗细 = 信任度 (1-6px, 信任越高越粗)
-        var trust = edge.trust || 75
-        ctx.lineWidth = 1 + (trust / 100) * 5
+        var intimacy = edge.closeness     // 亲密度 → 连线粗细
+        var comm = edge.communication     // 沟通度 → 连线颜色
+        var trust = edge.trust           // 信任度 → 线形(虚线密度)
 
-        // 虚线密度 = 沟通频率 (0=稀疏虚线, 100=实线)
-        var comm = edge.communication || 50
-        if (comm >= 90) {
+        var hasData = intimacy !== null || comm !== null || trust !== null
+
+        if (!hasData) {
+          // 无数据: 默认黑色实线 1px
+          ctx.lineWidth = 1
           ctx.setLineDash([])
-        } else if (comm >= 70) {
-          ctx.setLineDash([8, 3])
-        } else if (comm >= 50) {
-          ctx.setLineDash([5, 5])
-        } else if (comm >= 30) {
-          ctx.setLineDash([3, 8])
+          ctx.strokeStyle = '#000000'
         } else {
-          ctx.setLineDash([2, 12])
-        }
+          // 连线粗细 = 亲密度 (1-6px, 越高越粗)
+          var intVal = intimacy != null ? intimacy : 50
+          ctx.lineWidth = 1 + (intVal / 100) * 5
+
+          // 虚线密度 = 信任度 (0=稀疏虚线, 100=实线)
+          var trustVal = trust != null ? trust : 50
+          if (trustVal >= 90) {
+            ctx.setLineDash([])
+          } else if (trustVal >= 70) {
+            ctx.setLineDash([8, 3])
+          } else if (trustVal >= 50) {
+            ctx.setLineDash([5, 5])
+          } else if (trustVal >= 30) {
+            ctx.setLineDash([3, 8])
+          } else {
+            ctx.setLineDash([2, 12])
+          }
 
-        // 连线颜色 = 亲密度 (低=冷色蓝紫, 高=暖色橙红)
-        var closeness = edge.closeness || 50
-        var hue = 220 - (closeness / 100) * 200
-        ctx.strokeStyle = 'hsla(' + hue + ', 75%, 50%, 0.65)'
+          // 连线颜色 = 沟通度 (低=冷色蓝紫, 高=暖色橙红)
+          var commVal = comm != null ? comm : 50
+          var hue = 220 - (commVal / 100) * 200
+          ctx.strokeStyle = 'hsla(' + hue + ', 75%, 50%, 0.65)'
+        }
 
         ctx.beginPath()
         ctx.moveTo(s.x, s.y)
@@ -611,29 +624,41 @@ simulationTick: function() {
       var edges = this.edges
       for (var i = 0; i < edges.length; i++) {
         var edge = edges[i]
-        var trust = edge.trust || 75
-        var comm = edge.communication || 50
-        var closeness = edge.closeness || 50
+        var intimacy = edge.closeness     // 亲密度 → 连线粗细
+        var comm = edge.communication     // 沟通度 → 连线颜色
+        var trust = edge.trust           // 信任度 → 线形(虚线密度)
 
-        // 连线粗细 = 信任度
-        ctx.setLineWidth(1 + (trust / 100) * 5)
+        var hasData = intimacy !== null || comm !== null || trust !== null
 
-        // 虚线密度 = 沟通频率
-        if (comm >= 90) {
+        if (!hasData) {
+          // 无数据: 默认黑色实线 1px
+          ctx.setLineWidth(1)
           ctx.setLineDash([])
-        } else if (comm >= 70) {
-          ctx.setLineDash([8, 3])
-        } else if (comm >= 50) {
-          ctx.setLineDash([5, 5])
-        } else if (comm >= 30) {
-          ctx.setLineDash([3, 8])
+          ctx.setStrokeStyle('#000000')
         } else {
-          ctx.setLineDash([2, 12])
-        }
+          // 连线粗细 = 亲密度
+          var intVal = intimacy != null ? intimacy : 50
+          ctx.setLineWidth(1 + (intVal / 100) * 5)
+
+          // 虚线密度 = 信任度
+          var trustVal = trust != null ? trust : 50
+          if (trustVal >= 90) {
+            ctx.setLineDash([])
+          } else if (trustVal >= 70) {
+            ctx.setLineDash([8, 3])
+          } else if (trustVal >= 50) {
+            ctx.setLineDash([5, 5])
+          } else if (trustVal >= 30) {
+            ctx.setLineDash([3, 8])
+          } else {
+            ctx.setLineDash([2, 12])
+          }
 
-        // 连线颜色 = 亲密度 (低=冷色蓝紫, 高=暖色橙红)
-        var hue = 220 - (closeness / 100) * 200
-        ctx.setStrokeStyle('hsla(' + hue + ', 75%, 50%, 0.65)')
+          // 连线颜色 = 沟通度
+          var commVal = comm != null ? comm : 50
+          var hue = 220 - (commVal / 100) * 200
+          ctx.setStrokeStyle('hsla(' + hue + ', 75%, 50%, 0.65)')
+        }
 
         ctx.beginPath()
         ctx.moveTo(edge.source.x, edge.source.y)
@@ -843,12 +868,9 @@ simulationTick: function() {
 
     getIntimacy: function(memberId, key) {
       var data = this.intimacyMap[memberId]
-      if (!data) {
-        var defaults = { closeness: 75, communication: 50, trust: 85 }
-        return defaults[key]
-      }
+      if (!data) return null
       var val = data[key]
-      return (typeof val !== 'undefined' && val !== null) ? val : 75
+      return (typeof val !== 'undefined' && val !== null) ? val : null
     },
 
     updateCanvasSize: function() {