cfc/cfc-frontend/components/PearlDiagram.vue

<template>
  <!-- 珍珠图 - 珍珠项链资源清单 -->
  <view class="pearl-graph-wrapper" v-if="hasData" :style="{ minHeight: canvasHeight + 'px' }">
    <canvas
      class="pearl-graph-canvas"
      canvas-id="pearlGraphCanvas"
      id="pearlGraphCanvas"
      type="2d"
      :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"
      @touchstart="onTouchStart"
      @touchmove="onTouchMove"
      @touchend="onTouchEnd" />
    <!-- 点击珍珠时显示详情弹窗 -->
    <view class="pearl-detail-popup" :class="{ 'popup-below': showPopupBelow }" v-if="selectedNode" :style="popupPosition">
      <view class="popup-content">
        <view class="popup-header">
          <image class="popup-avatar" :src="selectedNode.avatar || defaultAvatar" mode="aspectFill" />
          <view class="popup-info">
            <text class="popup-name">{{ selectedNode.name }}</text>
            <view class="popup-tags">
              <text class="popup-tag" :style="{ background: selectedNode.color, color: '#FFFFFF' }">{{ selectedNode.groupTypeName }}</text>
              <text class="popup-tag popup-tag-rel" v-if="selectedNode.relationshipType">{{ selectedNode.relationshipType }}</text>
            </view>
          </view>
        </view>
        <!-- 技能列表（仅 SKILL 组） -->
        <view class="popup-skills" v-if="selectedNode.groupType === 'SKILL' && selectedNode.skills && selectedNode.skills.length > 0">
          <text class="popup-skill-count">技能数 ×{{ selectedNode.skillCount || 0 }}</text>
          <view class="popup-skill-list">
            <text class="popup-skill-item" v-for="(s, idx) in displaySkills" :key="idx">{{ s }}</text>
          </view>
        </view>
        <!-- 描述 -->
        <view class="popup-desc" v-if="selectedNode.description">
          <text class="popup-desc-text">{{ selectedNode.description }}</text>
        </view>
        <!-- 操作按钮 -->
        <view class="popup-actions">
          <text class="action-btn action-btn-delete" v-if="canDelete" @tap="onDelete">删除</text>
        </view>
        <view class="popup-arrow" :class="{ 'popup-arrow-down': showPopupBelow }"></view>
      </view>
    </view>
  </view>
  <!-- 空状态 -->
  <view class="pearl-graph-empty" v-else-if="isEmpty">
    <text class="empty-icon">📿</text>
    <text class="empty-text">暂无珍珠图数据</text>
    <text class="empty-hint">登记你的资源，画出珍珠项链图</text>
    <text class="action-btn action-btn-primary" @tap="onAdd">+ 登记资源</text>
  </view>
  <!-- 加载状态 -->
  <view class="pearl-loading" v-else>
    <text class="loading-text">加载珍珠图...</text>
  </view>
</template>

<script>
/**
 * PearlDiagram - 珍珠图 Canvas 组件
 *
 * 珍珠项链式资源清单可视化：
 * - 中心节点 = 当前用户"我"（固定不动）
 * - 珍珠节点 = 资源，按 4 组分布在中心周围：
 *   人脉(PERSON) / 技能(SKILL) / 信息(INFO) / 场所(PLACE)
 * - 每组以弧形分布在中心周围，颜色编码
 * - 点击珍珠 → 显示详情弹窗
 *
 * 数据源：父组件通过 resources prop 传入
 * 布局方式：确定性弧形布局（非力导向）
 */
export default {
  name: 'PearlDiagram',
  props: {
    /** 资源数据 { groups: [{ type, typeName, items }] } */
    resources: {
      type: Object,
      default: null
    },
    /** 当前用户ID */
    selfId: {
      type: [Number, String],
      default: null
    },
    /** 画布宽度 px */
    canvasWidth: {
      type: Number,
      default: 340
    },
    /** 画布高度 px */
    canvasHeight: {
      type: Number,
      default: 400
    },
    /** 是否允许交互（点击珍珠查看详情） */
    interactive: {
      type: Boolean,
      default: true
    }
  },
  data: function() {
    return {
      dpr: 1,
      ctx: null,
      _canvasNode: null,
      _canvasRect: null,
      canvasReady: false,
      _destroyed: false,
      // 珍珠节点数据
      pearlNodes: [],
      // 选中的节点（弹窗用）
      selectedNode: null,
      // 触摸状态
      _touchStartPos: null,
      // 默认头像
      defaultAvatar: '/static/default-avatar.png',
      // 分组配置：类型、颜色、半径比例、弧度范围（弧度）
      // 0=右(3点钟), PI/2=下(6点), PI=左(9点), -PI/2=上(12点)
      groupConfigs: [
        { type: 'PERSON', typeName: '人脉', color: '#F97316', radiusPct: 0.28, startAngle: -Math.PI / 2, endAngle: 0 },
        { type: 'SKILL', typeName: '技能', color: '#F59E0B', radiusPct: 0.38, startAngle: Math.PI, endAngle: Math.PI * 1.5 },
        { type: 'INFO', typeName: '信息', color: '#10B981', radiusPct: 0.38, startAngle: 0, endAngle: Math.PI / 2 },
        { type: 'PLACE', typeName: '场所', color: '#6366F1', radiusPct: 0.28, startAngle: Math.PI / 2, endAngle: Math.PI }
      ],
      // 弧度边距（每侧留白角度）
      arcMargin: Math.PI / 20
    }
  },
  computed: {
    /** 是否有至少一组包含资源 */
    hasData: function() {
      if (!this.resources) return false
      var groups = this.resources.groups
      if (!groups || !Array.isArray(groups)) return false
      for (var i = 0; i < groups.length; i++) {
        if (groups[i].items && groups[i].items.length > 0) return true
      }
      return false
    },
    /** 资源已加载但全部为空 */
    isEmpty: function() {
      if (!this.resources) return false
      var groups = this.resources.groups
      if (!groups || !Array.isArray(groups)) return true
      for (var i = 0; i < groups.length; i++) {
        if (groups[i].items && groups[i].items.length > 0) return false
      }
      return true
    },
    /** 选中节点是否可删除（仅 INFO/PLACE 为手工登记资源；PERSON 来自联系人、SKILL 来自帮助记录聚合，均不可删） */
    canDelete: function() {
      if (!this.selectedNode) return false
      return this.selectedNode.groupType === 'INFO' || this.selectedNode.groupType === 'PLACE'
    },
    /** 弹窗中展示的技能（前3个） */
    displaySkills: function() {
      if (!this.selectedNode || !this.selectedNode.skills) return []
      return this.selectedNode.skills.slice(0, 3)
    },
    /** 弹窗是否显示在节点下方（节点太靠近顶部时） */
    showPopupBelow: function() {
      if (!this.selectedNode) return false
      return this.selectedNode.y < 140
    },
    /** 弹窗定位样式 */
    popupPosition: function() {
      if (!this.selectedNode) return { display: 'none' }
      var px = this.selectedNode.x
      var py = this.selectedNode.y
      // 限制弹窗不超出画布水平范围
      var halfPopup = 120
      var left = Math.max(halfPopup, Math.min(this.canvasWidth - halfPopup, px))
      return {
        left: left + 'px',
        top: py + 'px'
      }
    }
  },
  watch: {
    resources: {
      handler: function() {
        this.selectedNode = null
        this.buildLayout()
        if (this.canvasReady) {
          this.drawAll()
        }
      },
      deep: true
    },
    canvasWidth: function() {
      this.buildLayout()
      if (this.canvasReady) {
        this.drawAll()
      }
    },
    canvasHeight: function() {
      this.buildLayout()
      if (this.canvasReady) {
        this.drawAll()
      }
    }
  },
  mounted: function() {
    this._destroyed = false
    var self = this
    try {
      this.dpr = uni.getWindowInfo().pixelRatio || 1
    } catch (e) {
      this.dpr = 1
    }
    // 延迟初始化 canvas（等待 DOM 布局完成）
    var retryCount = 0
    var maxRetry = 5
    function tryInit() {
      if (self._destroyed) return
      self.initCanvas(function(success) {
        if (self._destroyed) return
        if (!success && retryCount < maxRetry) {
          retryCount++
          setTimeout(tryInit, 60)
        } else if (!success) {
          console.log('[PearlDiagram] canvas 初始化失败，重试 ' + maxRetry + ' 次后放弃')
        }
      })
    }
    this.$nextTick(function() {
      if (self._destroyed) return
      self.updateCanvasSize()
      self.$nextTick(function() {
        if (!self._destroyed) {
          tryInit()
        }
      })
    })
  },
  beforeDestroy: function() {
    this._destroyed = true
  },
  methods: {
    /* ===========================
     * 布局构建（确定性弧形）
     * =========================== */

    /**
     * 根据 resources 构建珍珠节点的 x, y 坐标
     * 布局逻辑：
     * - 中心 = (canvasWidth/2, canvasHeight/2) → "我"
     * - 每组分配一个象限 + 特定半径
     * - 组内珍珠沿弧线等间距分布
     */
    buildLayout: function() {
      this.pearlNodes = []

      if (!this.resources || !this.resources.groups || !Array.isArray(this.resources.groups)) {
        return
      }

      var cx = this.canvasWidth / 2
      var cy = this.canvasHeight / 2
      var minDim = Math.min(this.canvasWidth, this.canvasHeight)
      var configs = this.groupConfigs

      for (var c = 0; c < configs.length; c++) {
        var config = configs[c]
        // 在 resources.groups 中查找该类型
        var group = null
        for (var g = 0; g < this.resources.groups.length; g++) {
          if (this.resources.groups[g].type === config.type) {
            group = this.resources.groups[g]
            break
          }
        }

        if (!group || !group.items || group.items.length === 0) continue

        var R = minDim * config.radiusPct
        var effStart = config.startAngle + this.arcMargin
        var effEnd = config.endAngle - this.arcMargin
        var arcSpan = effEnd - effStart
        var items = group.items

        for (var i = 0; i < items.length; i++) {
          var item = items[i]
          var t = items.length === 1 ? 0.5 : i / (items.length - 1)
          var angle = effStart + t * arcSpan

          this.pearlNodes.push({
            id: item.id || item.contactId || null,
            contactId: item.contactId || null,
            groupType: config.type,
            groupTypeName: config.typeName,
            name: item.name || '未知',
            displayName: item.name ? item.name.charAt(0) : '?',
            avatar: item.avatar || null,
            description: item.description || '',
            skillCount: item.skillCount || 0,
            skills: item.skills || [],
            relationshipType: item.relationshipType || '',
            radius: (config.type === 'PERSON' || config.type === 'SKILL') ? 24 : 20,
            color: config.color,
            x: cx + R * Math.cos(angle),
            y: cy + R * Math.sin(angle)
          })
        }
      }
    },

    /* ===========================
     * Canvas 渲染
     * =========================== */

    drawAll: function() {
      if (!this.ctx) return
      var ctx = this.ctx
      var w = this.canvasWidth
      var h = this.canvasHeight

      ctx.clearRect(0, 0, w, h)

      // 1. 绘制分组弧线背景（半透明色带）
      this._drawGroupArcs(ctx)

      // 2. 绘制中心节点"我"
      this._drawCenterNode(ctx)

      // 3. 绘制珍珠节点
      for (var i = 0; i < this.pearlNodes.length; i++) {
        this._drawPearlNode(ctx, this.pearlNodes[i])
      }

      // 4. 绘制分组标签
      this._drawGroupLabels(ctx)
    },

    /** 绘制每组的弧形色带（背景）和连接线 */
    _drawGroupArcs: function(ctx) {
      var cx = this.canvasWidth / 2
      var cy = this.canvasHeight / 2
      var minDim = Math.min(this.canvasWidth, this.canvasHeight)
      var configs = this.groupConfigs
      var self = this

      for (var c = 0; c < configs.length; c++) {
        var config = configs[c]
        // 检查该组是否有节点
        var hasItems = false
        for (var p = 0; p < this.pearlNodes.length; p++) {
          if (this.pearlNodes[p].groupType === config.type) {
            hasItems = true
            break
          }
        }
        if (!hasItems) continue

        var R = minDim * config.radiusPct
        var effStart = config.startAngle + this.arcMargin
        var effEnd = config.endAngle - this.arcMargin

        // 色带背景（粗线，低透明度）
        ctx.beginPath()
        ctx.arc(cx, cy, R, effStart, effEnd)
        ctx.lineWidth = 14
        ctx.strokeStyle = self._hexToRgba(config.color, 0.12)
        ctx.lineCap = 'round'
        ctx.stroke()

        // 连接线（细线，沿弧串联珍珠）
        ctx.beginPath()
        ctx.arc(cx, cy, R, effStart, effEnd)
        ctx.lineWidth = 1.5
        ctx.strokeStyle = self._hexToRgba(config.color, 0.3)
        ctx.lineCap = 'butt'
        ctx.stroke()

        // 中心到组内每个珍珠的连线
        for (var n = 0; n < this.pearlNodes.length; n++) {
          var node = this.pearlNodes[n]
          if (node.groupType !== config.type) continue
          ctx.beginPath()
          ctx.moveTo(cx, cy)
          ctx.lineTo(node.x, node.y)
          ctx.lineWidth = 1
          ctx.strokeStyle = self._hexToRgba(config.color, 0.15)
          ctx.stroke()
        }
      }
    },

    /** 绘制中心节点"我" */
    _drawCenterNode: function(ctx) {
      var cx = this.canvasWidth / 2
      var cy = this.canvasHeight / 2
      var r = 30

      // 外圈光晕
      ctx.beginPath()
      ctx.arc(cx, cy, r + 4, 0, Math.PI * 2)
      ctx.fillStyle = this._hexToRgba('#10B981', 0.15)
      ctx.fill()

      // 实心圆
      ctx.beginPath()
      ctx.arc(cx, cy, r, 0, Math.PI * 2)
      ctx.fillStyle = '#10B981'
      ctx.fill()
      ctx.strokeStyle = '#FFFFFF'
      ctx.lineWidth = 3
      ctx.stroke()

      // "我" 字
      ctx.font = 'bold 18px PingFang SC, sans-serif'
      ctx.fillStyle = '#FFFFFF'
      ctx.textAlign = 'center'
      ctx.textBaseline = 'middle'
      ctx.fillText('我', cx, cy + 1)
    },

    /** 绘制单个珍珠节点 */
    _drawPearlNode: function(ctx, node) {
      var x = node.x
      var y = node.y
      var r = node.radius

      // 裁剪到画布范围
      if (x - r > this.canvasWidth || x + r < 0 || y - r > this.canvasHeight || y + r < 0) {
        return
      }

      // 珍珠光晕
      ctx.beginPath()
      ctx.arc(x, y, r + 3, 0, Math.PI * 2)
      ctx.fillStyle = this._hexToRgba(node.color, 0.12)
      ctx.fill()

      // 实心圆（珍珠主体）
      ctx.beginPath()
      ctx.arc(x, y, r, 0, Math.PI * 2)
      ctx.fillStyle = node.color
      ctx.fill()

      // 白边
      ctx.strokeStyle = '#FFFFFF'
      ctx.lineWidth = 2
      ctx.stroke()

      // 首字
      ctx.font = 'bold ' + Math.max(12, r * 0.65) + 'px PingFang SC, sans-serif'
      ctx.fillStyle = '#FFFFFF'
      ctx.textAlign = 'center'
      ctx.textBaseline = 'middle'
      ctx.fillText(node.displayName, x, y + 1)
    },

    /** 绘制分组标签（弧外侧文字） */
    _drawGroupLabels: function(ctx) {
      var cx = this.canvasWidth / 2
      var cy = this.canvasHeight / 2
      var minDim = Math.min(this.canvasWidth, this.canvasHeight)
      var configs = this.groupConfigs
      var self = this

      for (var c = 0; c < configs.length; c++) {
        var config = configs[c]
        // 检查该组是否有节点
        var hasItems = false
        for (var p = 0; p < this.pearlNodes.length; p++) {
          if (this.pearlNodes[p].groupType === config.type) {
            hasItems = true
            break
          }
        }
        if (!hasItems) continue

        var R = minDim * config.radiusPct
        var midAngle = (config.startAngle + config.endAngle) / 2
        // 标签在弧线外侧
        var labelR = R + 18
        var lx = cx + labelR * Math.cos(midAngle)
        var ly = cy + labelR * Math.sin(midAngle)

        ctx.font = '12px PingFang SC, sans-serif'
        ctx.fillStyle = self._hexToRgba(config.color, 0.8)
        ctx.textAlign = 'center'
        ctx.textBaseline = 'middle'
        ctx.fillText(config.typeName, lx, ly)
      }
    },

    /* ===========================
     * 交互：触摸处理
     * =========================== */

    /** 命中测试：返回被点击的珍珠索引，-1 表示未命中 */
    hitTest: function(x, y) {
      for (var i = this.pearlNodes.length - 1; i >= 0; i--) {
        var node = this.pearlNodes[i]
        var dx = x - node.x
        var dy = y - node.y
        if (dx * dx + dy * dy <= node.radius * node.radius) {
          return i
        }
      }
      return -1
    },

    onTouchStart: function(e) {
      if (!this.interactive) return
      var touches = e.touches || e.changedTouches
      if (!touches || touches.length === 0) return
      var touch = touches[0]
      var canvasRect = this._getCanvasRect()
      if (!canvasRect) return
      var x = touch.clientX - canvasRect.left
      var y = touch.clientY - canvasRect.top

      this._touchStartPos = { x: x, y: y }

      // 未命中任何珍珠 → 关闭弹窗
      var hitIndex = this.hitTest(x, y)
      if (hitIndex < 0) {
        this.selectedNode = null
      }
    },

    onTouchMove: function(e) {
      if (!this._touchStartPos) return
      var touches = e.touches || e.changedTouches
      if (!touches || touches.length === 0) return
      var touch = touches[0]
      var canvasRect = this._getCanvasRect()
      if (!canvasRect) return
      var x = touch.clientX - canvasRect.left
      var y = touch.clientY - canvasRect.top
      var dx = x - this._touchStartPos.x
      var dy = y - this._touchStartPos.y
      // 移动超过 10px 取消点击判定
      if (dx * dx + dy * dy > 100) {
        this._touchStartPos = null
      }
    },

    onTouchEnd: function(e) {
      if (!this._touchStartPos) return
      var touches = e.changedTouches
      if (!touches || touches.length === 0) {
        this._touchStartPos = null
        return
      }
      var touch = touches[0]
      var canvasRect = this._getCanvasRect()
      if (!canvasRect) {
        this._touchStartPos = null
        return
      }
      var x = touch.clientX - canvasRect.left
      var y = touch.clientY - canvasRect.top
      var dx = x - this._touchStartPos.x
      var dy = y - this._touchStartPos.y
      this._touchStartPos = null

      // 移动超过 10px 不算点击
      if (dx * dx + dy * dy > 100) return

      var hitIndex = this.hitTest(x, y)
      if (hitIndex >= 0) {
        this.selectedNode = this.pearlNodes[hitIndex]
      }
    },

    /* ===========================
     * 事件发射
     * =========================== */

    onAdd: function() {
      this.$emit('add')
    },

    onDelete: function() {
      if (!this.selectedNode) return
      // INFO/PLACE 为手工登记资源，删除键是 resource_items 的真实 id；
      // 节点登记时可能关联了联系人（contactId），但不能作为删除标识
      var id = this.selectedNode.id || this.selectedNode.contactId
      this.$emit('delete', { type: this.selectedNode.groupType, id: id })
      this.selectedNode = null
    },

    /* ===========================
     * Canvas 初始化
     * =========================== */

    updateCanvasSize: function() {
      var self = this
      var query = uni.createSelectorQuery().in(this)
      query.select('.pearl-graph-wrapper').boundingClientRect(function(rect) {
        if (rect) {
          self.canvasWidth = rect.width || 340
        }
      }).exec()
    },

    initCanvas: function(cb) {
      var self = this
      uni.createSelectorQuery().in(this)
        .select('#' + 'pearlGraphCanvas')
        .fields({ node: true, size: true, rect: true })
        .exec(function(res) {
          try {
            if (self._destroyed) return
            if (!res || !res[0]) {
              if (cb) cb(false)
              return
            }
            var info = res[0]
            if (!info.node) {
              if (cb) cb(false)
              return
            }

            var canvas = info.node
            var width = info.width
            var height = info.height
            if (!width || !height) {
              var winWidth = 375
              try {
                var winInfo = uni.getWindowInfo()
                winWidth = winInfo.windowWidth || 375
              } catch (e2) {}
              width = Math.round((self.canvasWidth || 340) * winWidth / 750)
              height = Math.round((self.canvasHeight || 400) * winWidth / 750)
            }

            var pixelRatio = 2
            try {
              var system = uni.getWindowInfo()
              pixelRatio = system.pixelRatio || 2
            } catch (e) {}

            canvas.width = width * pixelRatio
            canvas.height = height * pixelRatio

            var ctx = canvas.getContext('2d')
            if (!ctx) {
              if (cb) cb(false)
              return
            }
            ctx.scale(pixelRatio, pixelRatio)

            self.ctx = ctx
            self._canvasNode = canvas
            self.canvasWidth = width
            self.canvasHeight = height
            self.dpr = pixelRatio
            self.canvasReady = true
            // 存储 canvas 在页面中的真实位置（触摸坐标转换用）
            if (info.rect) {
              self._canvasRect = { left: info.rect.left || 0, top: info.rect.top || 0 }
            }

            self.buildLayout()
            self.drawAll()

            if (cb) cb(true)
          } catch (e) {
            if (cb) cb(false)
          }
        })
    },

    /* ===========================
     * 工具方法
     * =========================== */

    _getCanvasRect: function() {
      if (this._canvasRect) {
        return {
          left: this._canvasRect.left,
          top: this._canvasRect.top,
          width: this.canvasWidth,
          height: this.canvasHeight
        }
      }
      return {
        left: 0,
        top: 0,
        width: this.canvasWidth,
        height: this.canvasHeight
      }
    },

    _hexToRgba: function(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 + ')'
    }
  }
}
</script>

<style scoped>
.pearl-graph-wrapper {
  position: relative;
  width: 100%;
  min-height: 200px;
  height: auto;
  margin: 10rpx 0;
  background: #FFFFFF;
  border-radius: 24rpx;
  overflow: visible;
}
.pearl-graph-canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

/* 详情弹窗 */
.pearl-detail-popup {
  position: absolute;
  z-index: 10;
  pointer-events: none;
  transform: translate(-50%, -100%);
  margin-top: -16rpx;
}
.pearl-detail-popup.popup-below {
  transform: translate(-50%, 0);
  margin-top: 16rpx;
}
.popup-content {
  background: #FFFFFF;
  border-radius: 16rpx;
  padding: 20rpx;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
  min-width: 220rpx;
  max-width: 300rpx;
  pointer-events: auto;
}
.popup-header {
  display: flex;
  align-items: center;
  margin-bottom: 12rpx;
}
.popup-avatar {
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  margin-right: 12rpx;
}
.popup-info {
  display: flex;
  flex-direction: column;
}
.popup-name {
  font-size: 28rpx;
  font-weight: 600;
  color: #1E293B;
}
.popup-tags {
  display: flex;
  flex-wrap: wrap;
  margin-top: 6rpx;
}
.popup-tag {
  font-size: 18rpx;
  padding: 2rpx 10rpx;
  border-radius: 6rpx;
  margin-right: 8rpx;
}
.popup-tag-rel {
  background: #F1F5F9;
  color: #64748B;
}
.popup-skills {
  padding: 10rpx 0;
  border-top: 1rpx solid #F1F5F9;
}
.popup-skill-count {
  font-size: 22rpx;
  font-weight: 600;
  color: #F59E0B;
  display: block;
  margin-bottom: 6rpx;
}
.popup-skill-list {
  display: flex;
  flex-wrap: wrap;
}
.popup-skill-item {
  font-size: 20rpx;
  color: #64748B;
  margin-right: 8rpx;
  margin-bottom: 4rpx;
}
.popup-desc {
  padding: 10rpx 0;
  border-top: 1rpx solid #F1F5F9;
}
.popup-desc-text {
  font-size: 22rpx;
  color: #475569;
  display: block;
}
.popup-actions {
  display: flex;
  justify-content: center;
  margin-top: 12rpx;
}
.action-btn {
  display: inline-block;
  padding: 10rpx 24rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
}
.action-btn-primary {
  background: #F97316;
  color: #FFFFFF;
}
.action-btn-delete {
  background: #FEE2E2;
  color: #EF4444;
  margin-left: 16rpx;
}
.popup-arrow {
  position: absolute;
  bottom: -8rpx;
  left: 50%;
  margin-left: -8rpx;
  width: 0;
  height: 0;
  border-left: 8rpx solid transparent;
  border-right: 8rpx solid transparent;
  border-top: 8rpx solid #FFFFFF;
}
.popup-arrow-down {
  bottom: auto;
  top: -8rpx;
  border-top: none;
  border-bottom: 8rpx solid #FFFFFF;
}

/* 空状态 */
.pearl-graph-empty,
.pearl-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60rpx 20rpx;
  background: #FFFFFF;
  border-radius: 24rpx;
  margin: 10rpx 0;
}
.empty-icon {
  font-size: 80rpx;
  margin-bottom: 16rpx;
}
.empty-text {
  font-size: 28rpx;
  font-weight: 600;
  color: #1E293B;
  margin-bottom: 8rpx;
}
.empty-hint {
  font-size: 24rpx;
  color: #94A3B8;
  margin-bottom: 24rpx;
}
.loading-text {
  font-size: 28rpx;
  color: #64748B;
}
</style>