Bläddra i källkod

fix(frontend): use setFontSize in renderLegacy for WeChat compat, add _destroyed lifecycle guard

openhands 3 månader sedan
förälder
incheckning
1d27806143
2 ändrade filer med 31 tillägg och 16 borttagningar
  1. 30 15
      cfc-frontend/components/FamilyRelationGraph.vue
  2. 1 1
      cfc-frontend/main.js

+ 30 - 15
cfc-frontend/components/FamilyRelationGraph.vue

@@ -219,17 +219,25 @@ export default {
     }
   },
   mounted: function() {
+    this._destroyed = false
     var self = this
-    this.dpr = uni.getSystemInfoSync().pixelRatio || 1
-
+    try {
+      this.dpr = uni.getSystemInfoSync().pixelRatio || 1
+    } catch (e) {
+      this.dpr = 1
+    }
     this.$nextTick(function() {
+      if (self._destroyed) return
       self.updateCanvasSize()
       self.$nextTick(function() {
-        self.initSimulation()
+        if (!self._destroyed) {
+          self.initSimulation()
+        }
       })
     })
   },
   beforeDestroy: function() {
+    this._destroyed = true
     this.stopSimulation()
   },
   methods: {
@@ -281,10 +289,13 @@ export default {
       }
     },
 
-    simulationTick: function() {
-      if (!this.isSimulating) return
-
-      var self = this
+simulationTick: function() {
+    if (!this.isSimulating) return
+    if (this._destroyed) {
+      this.isSimulating = false
+      return
+    }
+    var self = this
         var nodes = this.nodeData
         var edges = this.edges
       var p = this.physics
@@ -500,14 +511,16 @@ export default {
       }
     },
 
-    // 降级渲染 (CanvasContext)
-    renderLegacy: function() {
+    // WeChat mini-program compatible fallback renderer.
+  // Note: uni-app legacy canvas uses setFontSize(size), not setFont().
+  renderLegacy: function() {
+    if (this._destroyed) return
+    try {
       var ctx = uni.createCanvasContext('forceGraphCanvas', this)
       var self = this
 
       ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
 
-      // 边
       var edges = this.edges
       for (var i = 0; i < edges.length; i++) {
         var edge = edges[i]
@@ -522,7 +535,6 @@ export default {
         ctx.stroke()
       }
 
-      // 节点
       var nodes = this.nodeData
       for (var j = 0; j < nodes.length; j++) {
         var node = nodes[j]
@@ -542,18 +554,21 @@ export default {
         }
 
         ctx.setFillStyle(node.isSelf ? this.themeColor : '#4A5568')
-        ctx.font = 'bold ' + (r * 0.9) + 'px sans-serif'
+        ctx.setFontSize(Math.max(10, Math.round(r * 0.9)))
         ctx.setTextAlign('center')
         ctx.setTextBaseline('middle')
         ctx.fillText(node.displayName, node.x, node.y)
 
         ctx.setFillStyle(node.isSelf ? this.themeColor : '#94A3B8')
-        ctx.font = (r * 0.4) + 'px sans-serif'
-        ctx.fillText(node.nickname.substring(0, 3), node.x, node.y + r + 10)
+        ctx.setFontSize(Math.max(9, Math.round(r * 0.4)))
+        ctx.fillText((node.nickname || '').substring(0, 3), node.x, node.y + r + 10)
       }
 
       ctx.draw()
-    },
+    } catch (err) {
+      // Legacy canvas fallback must never crash page initialization.
+    }
+  },
 
     // ===== 交互 =====
 

+ 1 - 1
cfc-frontend/main.js

@@ -15,6 +15,6 @@ App.mpType = 'app'
 
 const app = new Vue({
   store,
-  ...App
+  render: h => h(App)
 })
 app.$mount()