客户关系网络

灵感：能力工具箱 vis-network（画客户-联系人关系图）。

> 小四原创：当事人 → {nodes,edges} → Network。
> 卸载时 network.destroy()，防泄漏。

何时使用

• 客户详情「关系人」图谱
• Demo 展示客户—联系人—同事连线
• 一眼看出关键人/介绍人链路

硬约束

1. 依赖：vis-network（及文档要求的 vis-data / 样式）。
2. 节点至少：id、label；边至少：from、to。
3. 容器需固定宽高；空数据展示空态，勿初始化报错。
4. 实现要点注释标 小四原创。
5. 组件卸载必须 destroy()。
6. 不做物理引擎调参全集、不做服务端图计算。

推荐实现

import { DataSet } from 'vis-data'
import { Network } from 'vis-network'
import 'vis-network/styles/vis-network.min.css'

export type PartyNode = {
  id: string
  label: string
  group?: 'customer' | 'contact' | 'staff'
}

export type PartyEdge = {
  id?: string
  from: string
  to: string
  label?: string
}

// 小四原创：当事人列表 → network 数据
export function toNetworkData(
  nodes: PartyNode[],
  edges: PartyEdge[],
) {
  return {
    nodes: new DataSet(
      nodes.map((n) => ({
        id: n.id,
        label: n.label,
        group: n.group ?? 'contact',
      })),
    ),
    edges: new DataSet(
      edges.map((e, i) => ({
        id: e.id ?? `e-${i}`,
        from: e.from,
        to: e.to,
        label: e.label,
        arrows: 'to',
      })),
    ),
  }
}

export function mountPartyNetwork(
  el: HTMLElement,
  nodes: PartyNode[],
  edges: PartyEdge[],
): { destroy: () => void } {
  if (!nodes.length) {
    el.textContent = '暂无关系人'
    return { destroy: () => { el.textContent = '' } }
  }
  const data = toNetworkData(nodes, edges)
  const network = new Network(el, data, {
    physics: { stabilization: true },
    interaction: { hover: true },
    groups: {
      customer: { color: '#3b82f6' },
      contact: { color: '#94a3b8' },
      staff: { color: '#22c55e' },
    },
  })
  return { destroy: () => network.destroy() }
}

Agent 步骤

1. npm i vis-network vis-data；引入 CSS。
2. 客户详情挂载容器，传入节点与边。
3. onBeforeUnmount 调 destroy。
4. 自测：客户+2 联系人可见；空列表不崩。

不要做

• 一次渲染上千节点无筛选。
• 忘记 destroy 导致画布叠层。

附加

• README.md · reference.md · templates/usage.md