Ver Fonte

fix: 关系图连线映射交换 — 信任度→颜色(低红高绿),沟通度→线形

E2E Test Bot há 3 meses atrás
pai
commit
72edb80535
1 ficheiros alterados com 28 adições e 26 exclusões
  1. 28 26
      cfc-frontend/components/FamilyRelationGraph.vue

+ 28 - 26
cfc-frontend/components/FamilyRelationGraph.vue

@@ -465,10 +465,10 @@ simulationTick: function() {
         var t = edge.target
 
         var intimacy = edge.closeness     // 亲密度 → 连线粗细
-        var comm = edge.communication     // 沟通度 → 连线颜色
-        var trust = edge.trust           // 信任度 → 线形(虚线密度)
+        var trust = edge.trust           // 信任度 → 连线颜色(低红高绿)
+        var comm = edge.communication     // 沟通度 → 线形(越多越实)
 
-        var hasData = intimacy !== null || comm !== null || trust !== null
+        var hasData = intimacy !== null || trust !== null || comm !== null
 
         if (!hasData) {
           // 无数据: 默认黑色实线 1px
@@ -480,24 +480,25 @@ simulationTick: function() {
           var intVal = intimacy != null ? intimacy : 50
           ctx.lineWidth = 1 + (intVal / 100) * 5
 
-          // 虚线密度 = 信任度 (0=稀疏虚线, 100=实线)
+          // 连线颜色 = 信任度 (低=红, 高=绿)
           var trustVal = trust != null ? trust : 50
-          if (trustVal >= 90) {
+          var green = Math.round((trustVal / 100) * 180)
+          var red = Math.round((1 - trustVal / 100) * 200 + 55)
+          ctx.strokeStyle = 'rgba(' + red + ',' + green + ', 60, 0.7)'
+
+          // 虚线密度 = 沟通度 (越多越实)
+          var commVal = comm != null ? comm : 50
+          if (commVal >= 90) {
             ctx.setLineDash([])
-          } else if (trustVal >= 70) {
+          } else if (commVal >= 70) {
             ctx.setLineDash([8, 3])
-          } else if (trustVal >= 50) {
+          } else if (commVal >= 50) {
             ctx.setLineDash([5, 5])
-          } else if (trustVal >= 30) {
+          } else if (commVal >= 30) {
             ctx.setLineDash([3, 8])
           } else {
             ctx.setLineDash([2, 12])
           }
-
-          // 连线颜色 = 沟通度 (低=冷色蓝紫, 高=暖色橙红)
-          var commVal = comm != null ? comm : 50
-          var hue = 220 - (commVal / 100) * 200
-          ctx.strokeStyle = 'hsla(' + hue + ', 75%, 50%, 0.65)'
         }
 
         ctx.beginPath()
@@ -625,10 +626,10 @@ simulationTick: function() {
       for (var i = 0; i < edges.length; i++) {
         var edge = edges[i]
         var intimacy = edge.closeness     // 亲密度 → 连线粗细
-        var comm = edge.communication     // 沟通度 → 连线颜色
-        var trust = edge.trust           // 信任度 → 线形(虚线密度)
+        var trust = edge.trust           // 信任度 → 连线颜色(低红高绿)
+        var comm = edge.communication     // 沟通度 → 线形(越多越实)
 
-        var hasData = intimacy !== null || comm !== null || trust !== null
+        var hasData = intimacy !== null || trust !== null || comm !== null
 
         if (!hasData) {
           // 无数据: 默认黑色实线 1px
@@ -640,24 +641,25 @@ simulationTick: function() {
           var intVal = intimacy != null ? intimacy : 50
           ctx.setLineWidth(1 + (intVal / 100) * 5)
 
-          // 虚线密度 = 信任度
+          // 连线颜色 = 信任度 (低=红, 高=绿)
           var trustVal = trust != null ? trust : 50
-          if (trustVal >= 90) {
+          var green = Math.round((trustVal / 100) * 180)
+          var red = Math.round((1 - trustVal / 100) * 200 + 55)
+          ctx.setStrokeStyle('rgba(' + red + ',' + green + ', 60, 0.7)')
+
+          // 虚线密度 = 沟通度 (越多越实)
+          var commVal = comm != null ? comm : 50
+          if (commVal >= 90) {
             ctx.setLineDash([])
-          } else if (trustVal >= 70) {
+          } else if (commVal >= 70) {
             ctx.setLineDash([8, 3])
-          } else if (trustVal >= 50) {
+          } else if (commVal >= 50) {
             ctx.setLineDash([5, 5])
-          } else if (trustVal >= 30) {
+          } else if (commVal >= 30) {
             ctx.setLineDash([3, 8])
           } else {
             ctx.setLineDash([2, 12])
           }
-
-          // 连线颜色 = 沟通度
-          var commVal = comm != null ? comm : 50
-          var hue = 220 - (commVal / 100) * 200
-          ctx.setStrokeStyle('hsla(' + hue + ', 75%, 50%, 0.65)')
         }
 
         ctx.beginPath()