fix: FamilyTianpanCard 修复多余闭合括号导致编译失败 + Canvas动画改用setTimeout兼容小程序

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>

cfc-frontend/components/FamilyTianpanCard.vue

@@ -332,31 +332,33 @@ export default {
     startAnimation: function() {
       var self = this
       if (this._animFrameId) {
-        cancelAnimationFrame(this._animFrameId)
+        clearTimeout(this._animFrameId)
+        this._animFrameId = null
       }
       
-      var animFrameId = null
       var lastTime = 0
+      var fps = 30 // 小程序 Canvas 30fps 即可保证流畅
+      var interval = 1000 / fps
       
-      function animationLoop(timestamp) {
+      function animationLoop() {
         if (!self.canvasCtx || !self.canvasReady) {
-          cancelAnimationFrame(animFrameId)
+          self._animFrameId = null
           return
         }
         
-        // 控制帧率
-        if (timestamp - lastTime < 16) {
-          animFrameId = requestAnimationFrame(animationLoop)
+        var now = Date.now()
+        if (now - lastTime < interval) {
+          self._animFrameId = setTimeout(animationLoop, 16)
           return
         }
-        lastTime = timestamp
+        lastTime = now
         
         self.clearCanvas()
-        self.drawCompassWithAnimation(timestamp)
-        animFrameId = requestAnimationFrame(animationLoop)
+        self.drawCompassWithAnimation(now)
+        self._animFrameId = setTimeout(animationLoop, 16)
       }
       
-      this._animFrameId = requestAnimationFrame(animationLoop)
+      animationLoop()
     },
 
     drawCompass: function() {
@@ -395,13 +397,21 @@ export default {
 
       var luckyDir = this.luckyDirection.replace('方', '')
       var luckyColor = this.luckyElementColor
+      
+      // hex转rgba辅助
+      function hexToRgba(hex, alpha) {
+        var r = parseInt(hex.slice(1, 3), 16)
+        var g = parseInt(hex.slice(3, 5), 16)
+        var b = parseInt(hex.slice(5, 7), 16)
+        return 'rgba(' + r + ',' + g + ',' + b + ',' + alpha + ')'
+      }
 
       // 外圈背景
       ctx.beginPath()
       ctx.arc(cx, cy, outerR, 0, Math.PI * 2)
       ctx.fillStyle = '#FFF5F7'
       ctx.fill()
-      ctx.strokeStyle = luckyColor + '40'
+      ctx.strokeStyle = hexToRgba(luckyColor, 0.25)
       ctx.lineWidth = 1.5
       ctx.stroke()
 
@@ -416,7 +426,7 @@ export default {
         var ex = cx + outerR * Math.cos(d.angle)
         var ey = cy + outerR * Math.sin(d.angle)
         ctx.lineTo(ex, ey)
-        ctx.strokeStyle = color + '30'
+        ctx.strokeStyle = hexToRgba(color, 0.19)
         ctx.lineWidth = 1
         ctx.stroke()
 
@@ -430,7 +440,7 @@ export default {
           // 吉位高亮圆
           ctx.beginPath()
           ctx.arc(lx, ly, 12, 0, Math.PI * 2)
-          ctx.fillStyle = luckyColor + '20'
+          ctx.fillStyle = hexToRgba(luckyColor, 0.13)
           ctx.fill()
           ctx.strokeStyle = luckyColor
           ctx.lineWidth = 1.5