cfc/cfc-frontend/components/FamilyRelationGraph.vue

<template>
  <view class="family-relation-graph">
    <!-- 空状态 -->
    <view class="graph-empty" v-if="!members || members.length === 0">
      <text class="empty-text">暂无家庭成员</text>
    </view>
    <!-- Canvas 画布 -->
    <canvas
      v-else
      canvas-id="relationGraphCanvas"
      id="relationGraphCanvas"
      type="2d"
      @tap="onCanvasTap"
      :style="{
        width: canvasWidth + 'px',
        height: canvasHeight + 'px'
      }" />
  </view>
</template>

<script>
export default {
  name: 'FamilyRelationGraph',
  props: {
    dimensionCode: {
      type: String,
      required: true,
      validator: function(val) {
        return ['body', 'mind', 'action'].indexOf(val) !== -1
      }
    },
    selfId: {
      type: [Number, String],
      default: null
    },
    members: {
      type: Array,
      default: function() { return [] }
    },
    energyMap: {
      type: Object,
      default: function() { return {} }
    },
    intimacyMap: {
      type: Object,
      default: function() { return {} }
    }
  },
  data: function() {
    return {
      canvasWidth: 320,
      canvasHeight: 320,
      dpr: 1,
      positionedMembers: [],
      selfPosition: { x: 0, y: 0 },
      themeColors: {
        body: '#8D6E63',
        mind: '#FF6B35',
        action: '#4CAF50'
      }
    }
  },
  computed: {
    themeColor: function() {
      return this.themeColors[this.dimensionCode] || '#8D6E63'
    },
    themeColorRgba: function() {
      // 主题色15%透明度 for fill
      var c = this.themeColor
      return c + '26'  // 15% alpha hex
    },
    themeColorStroke: function() {
      var c = this.themeColor
      return c + '66'  // 40% alpha hex
    }
  },
  watch: {
    members: function() { this.draw() },
    energyMap: function() { this.draw() },
    intimacyMap: function() { this.draw() }
  },
  mounted: function() {
    this.initCanvas()
  },
  methods: {
    initCanvas: function() {
      var sysInfo = uni.getSystemInfoSync()
      this.dpr = sysInfo.pixelRatio || 1
      var size = uni.upx2px(690)
      this.canvasWidth = size
      this.canvasHeight = size
      var self = this
      this.$nextTick(function() {
        if (self.members && self.members.length > 0) {
          self.draw()
        }
      })
    },

    // 获取亲密度数据（有则用，无则返回默认值）
    getIntimacy: function(memberId, key) {
      var data = this.intimacyMap[memberId]
      if (!data) {
        var defaults = { closeness: 75, communication: 50, trust: 85 }
        return defaults[key]
      }
      var val = data[key]
      return (typeof val !== 'undefined' && val !== null) ? val : 75
    },

    // 获取能量值
    getEnergy: function(memberId) {
      var data = this.energyMap[memberId]
      if (!data) return 0
      var key = this.dimensionCode + 'Score'  // bodyScore / mindScore / actionScore
      var val = data[key]
      return (typeof val !== 'undefined' && val !== null) ? val : 0
    },

    // 极坐标布局 — 计算每个成员的位置
    polarLayout: function() {
      var centerX = this.canvasWidth / 2
      var centerY = this.canvasHeight / 2
      this.selfPosition = { x: centerX, y: centerY }

      var N = this.members.length
      if (N === 0) {
        this.positionedMembers = []
        return
      }

      var R_INNER = uni.upx2px(160)   // ~74px
      var R_OUTER = uni.upx2px(480)   // ~222px
      var positioned = []

      for (var i = 0; i < N; i++) {
        var member = this.members[i]
        var intimacy = this.getIntimacy(member.id, 'closeness')
        // 亲密度0→半径最大，100→半径最小
        var radius = R_INNER + (100 - intimacy) / 100 * (R_OUTER - R_INNER)
        // 从正上方（12点钟）开始均匀分布
        var angle = (2 * Math.PI * i) / N - Math.PI / 2
        var x = centerX + radius * Math.cos(angle)
        var y = centerY + radius * Math.sin(angle)

        var isSelf = (member.id === this.selfId)
        var memberType = member.memberType || 'child'

        positioned.push({
          id: member.id,
          nickname: member.nickname || member.name || '成员',
          memberType: memberType,
          canvasX: x,
          canvasY: y,
          radius: isSelf ? uni.upx2px(150) : uni.upx2px(120),  // self 72px, others 56px -> divide by 2
          hitRadius: isSelf ? uni.upx2px(180) : uni.upx2px(140),
          isSelf: isSelf,
          intimacy: this.getIntimacy(member.id, 'closeness'),
          communication: this.getIntimacy(member.id, 'communication'),
          trust: this.getIntimacy(member.id, 'trust')
        })
      }
      this.positionedMembers = positioned
    },

    // 主绘制流程
    draw: function() {
      this.polarLayout()
      if (this.positionedMembers.length === 0) return

      var self = this
      var query = uni.createSelectorQuery().in(this)

      // 使用 type="2d" 的 node API
      query.select('#relationGraphCanvas')
        .fields({ node: true, size: true })
        .exec(function(res) {
          if (!res || !res[0]) {
            // 降级方案：使用 CanvasContext
            self.drawLegacy()
            return
          }
          var canvas = res[0].node
          if (!canvas) {
            self.drawLegacy()
            return
          }
          var ctx = canvas.getContext('2d')

          // 设置 canvas 实际像素（适配高清屏）
          canvas.width = self.canvasWidth * self.dpr
          canvas.height = self.canvasHeight * self.dpr
          ctx.scale(self.dpr, self.dpr)

          // 清除画布
          ctx.clearRect(0, 0, self.canvasWidth, self.canvasHeight)

          // 绘制连线（先画线，让形状盖在线上）
          self.drawLines(ctx)

          // 绘制成员
          for (var i = 0; i < self.positionedMembers.length; i++) {
            self.drawMember(ctx, self.positionedMembers[i])
          }
        })
    },

    // 降级绘制（使用 CanvasContext 兼容旧版基础库）
    drawLegacy: function() {
      var ctx = uni.createCanvasContext('relationGraphCanvas', this)
      var self = this

      // 清除
      ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight)

      // 连线
      self.drawLinesLegacy(ctx)

      // 成员
      for (var i = 0; i < self.positionedMembers.length; i++) {
        self.drawMemberLegacy(ctx, self.positionedMembers[i])
      }

      ctx.draw()
    },

    // 绘制连线（type=2d mode）
    drawLines: function(ctx) {
      var selfPos = this.selfPosition
      var members = this.positionedMembers
      for (var i = 0; i < members.length; i++) {
        var m = members[i]
        if (m.isSelf) continue

        // 信任度 → 色相 (红0°→黄60°→绿120°)
        var trust = Math.max(0, Math.min(100, m.trust || 0))
        var hue = (120 * trust / 100)
        ctx.strokeStyle = 'hsl(' + hue + ', 75%, 45%)'
        ctx.globalAlpha = 0.8

        // 沟通度 → 线宽 2~10px
        var comm = Math.max(0, Math.min(100, m.communication || 0))
        ctx.lineWidth = 2 + (comm / 100) * 8

        // 绘制从 self 到成员的线段
        ctx.beginPath()
        ctx.moveTo(selfPos.x, selfPos.y)
        ctx.lineTo(m.canvasX, m.canvasY)
        ctx.stroke()
      }
      ctx.globalAlpha = 1.0
    },

    // 绘制连线（legacy mode）
    drawLinesLegacy: function(ctx) {
      var selfPos = this.selfPosition
      var members = this.positionedMembers
      for (var i = 0; i < members.length; i++) {
        var m = members[i]
        if (m.isSelf) continue

        var trust = Math.max(0, Math.min(100, m.trust || 0))
        var hue = (120 * trust / 100)
        ctx.setStrokeStyle('hsl(' + hue + ', 75%, 45%)')
        ctx.globalAlpha = 0.8

        var comm = Math.max(0, Math.min(100, m.communication || 0))
        ctx.setLineWidth(2 + (comm / 100) * 8)

        ctx.beginPath()
        ctx.moveTo(selfPos.x, selfPos.y)
        ctx.lineTo(m.canvasX, m.canvasY)
        ctx.stroke()
      }
    },

    // 根据成员类型绘制形状 path
    drawMemberShape: function(ctx, x, y, r, memberType) {
      ctx.beginPath()
      if (memberType === 'parent' || memberType === 'PARENT') {
        // 圆角正方形
        var cr = r * 0.25
        var s = r * 0.8
        ctx.moveTo(x - s + cr, y - s)
        ctx.lineTo(x + s - cr, y - s)
        ctx.arcTo(x + s, y - s, x + s, y - s + cr, cr)
        ctx.lineTo(x + s, y + s - cr)
        ctx.arcTo(x + s, y + s, x + s - cr, y + s, cr)
        ctx.lineTo(x - s + cr, y + s)
        ctx.arcTo(x - s, y + s, x - s, y + s - cr, cr)
        ctx.lineTo(x - s, y - s + cr)
        ctx.arcTo(x - s, y - s, x - s + cr, y - s, cr)
        ctx.closePath()
      } else if (memberType === 'child' || memberType === 'CHILD' || memberType === 'children') {
        // 圆形
        ctx.arc(x, y, r * 0.8, 0, 2 * Math.PI)
      } else if (memberType === 'partner' || memberType === 'spouse' || memberType === 'PARTNER') {
        // 简化心形
        var hr = r * 0.48
        // 左上弧（左心耳）
        ctx.arc(x - hr * 0.5, y - hr * 0.2, hr, 0, Math.PI * 1.7, true)
        // 右上弧（右心耳）
        ctx.arc(x + hr * 0.5, y - hr * 0.2, hr, Math.PI * 1.3, Math.PI * 0.5, true)
        ctx.closePath()
      } else {
        // 默认圆形
        ctx.arc(x, y, r * 0.8, 0, 2 * Math.PI)
      }
    },

    // 绘制环形能量进度条
    drawEnergyRing: function(ctx, x, y, radius, fillRatio, color) {
      var lineWidth = 4
      // 灰色底圈
      ctx.beginPath()
      ctx.arc(x, y, radius, 0, 2 * Math.PI)
      ctx.strokeStyle = 'rgba(200, 200, 200, 0.35)'
      ctx.lineWidth = lineWidth
      ctx.stroke()

      if (fillRatio <= 0) return

      // 彩色进度圈
      ctx.beginPath()
      var startAngle = -Math.PI / 2
      var endAngle = startAngle + fillRatio * 2 * Math.PI
      ctx.arc(x, y, radius, startAngle, endAngle)
      ctx.strokeStyle = color
      ctx.lineWidth = lineWidth
      ctx.lineCap = 'round'
      ctx.stroke()
      ctx.lineCap = 'butt'  // reset
    },

    // 绘制成员形状（type=2d mode）
    drawMember: function(ctx, member) {
      var themeColor = this.themeColor
      var x = member.canvasX
      var y = member.canvasY
      var r = member.radius
      var energy = this.getEnergy(member.id)
      var fillRatio = Math.max(0, Math.min(1, energy / 100))

      ctx.save()

      if (member.isSelf) {
        // self：外层发光描边
        ctx.beginPath()
        ctx.arc(x, y, r + 6, 0, 2 * Math.PI)
        ctx.strokeStyle = themeColor
        ctx.lineWidth = 3
        ctx.globalAlpha = 0.4
        ctx.stroke()
        ctx.globalAlpha = 1.0

        // 内圆填充
        ctx.beginPath()
        ctx.arc(x, y, r, 0, 2 * Math.PI)
        ctx.fillStyle = '#FFFFFF'
        ctx.fill()
        ctx.strokeStyle = themeColor
        ctx.lineWidth = 3
        ctx.stroke()

        // 中心文字（昵称首字）
        ctx.fillStyle = themeColor
        ctx.font = 'bold ' + Math.round(r * 1.0) + 'px sans-serif'
        ctx.textAlign = 'center'
        ctx.textBaseline = 'middle'
        var displayName = (member.nickname && member.nickname.charAt(0)) || '我'
        ctx.fillText(displayName, x, y)
      } else {
        // 其他成员：根据 memberType 选择形状
        this.drawMemberShape(ctx, x, y, r, member.memberType)

        // 填充主题色（淡）
        ctx.fillStyle = this.themeColorRgba
        ctx.fill()
        ctx.strokeStyle = this.themeColorStroke
        ctx.lineWidth = 2
        ctx.stroke()

        // 环形能量进度条（在形状外围）
        this.drawEnergyRing(ctx, x, y, r + 5, fillRatio, themeColor)

        // 中心昵称首字
        ctx.fillStyle = '#4A5568'
        ctx.font = 'bold ' + Math.round(r * 0.7) + 'px sans-serif'
        ctx.textAlign = 'center'
        ctx.textBaseline = 'middle'
        var displayName = (member.nickname && member.nickname.charAt(0)) || '?'
        ctx.fillText(displayName, x, y)
      }

      ctx.restore()
    },

    // 绘制成员（legacy mode）
    drawMemberLegacy: function(ctx, member) {
      var themeColor = this.themeColor
      var x = member.canvasX
      var y = member.canvasY
      var r = member.radius
      var energy = this.getEnergy(member.id)
      var fillRatio = Math.max(0, Math.min(1, energy / 100))

      if (member.isSelf) {
        ctx.beginPath()
        ctx.arc(x, y, r + 6, 0, 2 * Math.PI)
        ctx.setStrokeStyle(themeColor)
        ctx.setLineWidth(3)
        ctx.setGlobalAlpha(0.4)
        ctx.stroke()
        ctx.setGlobalAlpha(1.0)

        ctx.beginPath()
        ctx.arc(x, y, r, 0, 2 * Math.PI)
        ctx.setFillStyle('#FFFFFF')
        ctx.fill()
        ctx.setStrokeStyle(themeColor)
        ctx.setLineWidth(3)
        ctx.stroke()

        ctx.setFillStyle(themeColor)
        ctx.font = 'bold ' + Math.round(r * 1.0) + 'px sans-serif'
        ctx.setTextAlign('center')
        ctx.setTextBaseline('middle')
        var name = (member.nickname && member.nickname.charAt(0)) || '我'
        ctx.fillText(name, x, y)
      } else {
        this.drawMemberShape(ctx, x, y, r, member.memberType)
        ctx.setFillStyle(this.themeColorRgba)
        ctx.fill()
        ctx.setStrokeStyle(this.themeColorStroke)
        ctx.setLineWidth(2)
        ctx.stroke()

        // 环形进度条
        ctx.beginPath()
        ctx.arc(x, y, r + 5, 0, 2 * Math.PI)
        ctx.setStrokeStyle('rgba(200, 200, 200, 0.35)')
        ctx.setLineWidth(4)
        ctx.stroke()

        if (fillRatio > 0) {
          ctx.beginPath()
          var startAngle = -Math.PI / 2
          var endAngle = startAngle + fillRatio * 2 * Math.PI
          ctx.arc(x, y, r + 5, startAngle, endAngle)
          ctx.setStrokeStyle(themeColor)
          ctx.setLineWidth(4)
          ctx.setLineCap('round')
          ctx.stroke()
          ctx.setLineCap('butt')
        }

        ctx.setFillStyle('#4A5568')
        ctx.font = 'bold ' + Math.round(r * 0.7) + 'px sans-serif'
        ctx.setTextAlign('center')
        ctx.setTextBaseline('middle')
        var name = (member.nickname && member.nickname.charAt(0)) || '?'
        ctx.fillText(name, x, y)
      }
    },

    // Canvas 点击命中检测
    onCanvasTap: function(e) {
      if (!e || !e.detail || typeof e.detail.x === 'undefined') return

      var self = this
      var query = uni.createSelectorQuery().in(this)
      query.select('#relationGraphCanvas').boundingClientRect(function(rect) {
        if (!rect) return
        var tapX = e.detail.x - (rect.left || 0)
        var tapY = e.detail.y - (rect.top || 0)

        for (var i = 0; i < self.positionedMembers.length; i++) {
          var m = self.positionedMembers[i]
          var dx = tapX - m.canvasX
          var dy = tapY - m.canvasY
          var dist = Math.sqrt(dx * dx + dy * dy)
          if (dist <= m.hitRadius) {
            self.$emit('memberTap', {
              memberId: m.id,
              memberType: m.memberType,
              nickname: m.nickname
            })
            return
          }
        }
      }).exec()
    }
  }
}
</script>

<style scoped>
.family-relation-graph {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20rpx 0;
  margin: 10rpx 0;
  background: #FFFFFF;
  border-radius: 24rpx;
  position: relative;
}
.graph-empty {
  padding: 60rpx 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.empty-text {
  font-size: 28rpx;
  color: #94A3B8;
}
</style>