“智能图形”项目的数据结构都推翻了

今天再三决定后把之前给“智能图形”项目设计的数据结构都推翻了，这里主要是考虑到多种类型图的兼容问题。一张图可能有列表形式可增删的项目（包含图标和文本），也有可能出现独立存在，不可改变数量的项目（例如标题）。

这是原来传递数据的结构体：

const options = {
  title: "这是标题",
  items: [
    { text: "这是一个类似列表的", icon: "computer" },
    { text: "可以增加和删除的", icon: "camera" },
    { text: "智能图形", icon: "diagram" },
  ]
}

标题其实和 items 的 text 是完全一样的可编辑文本框，那么这种结构就很难快速修改和获取原来的文本。我改成了这种形式：

const options = {
  { id: "title", text: "这是标题", },
  { id: "text-1", text: "这是一个类似列表的" },
  { id: "icon-1", name: "computer" },
  { id: "text-2", text: "可以增加和删除的" },
  { id: "icon-2", name: "camera" },
  { id: "text-3", text: "智能图形", icon: "diagram" },
  { id: "icon-3", name: "diagram" },
}

若要从此前的数据结构调整过来，需要考虑到一张图从拿到数据到渲染完毕，如果要修改文本如何获取原文本以及文本对应节点。以及增删项目时，如何将此前的设置移除。

前者将原数据和渲染的元素保存在一个数组或对象里面就行，后者我想到了使用比较算法。如果新增了项目，则比较新图所需要的设置，自动补充一个。如果删除，则在执行渲染前移除掉多余的。不过这样做如果删除掉了中间的一个就有些头疼了，因为需要修改键名，整体的 ID 都需要减一。这个尚未有什么更好的思路，恐怕只能继续验证了。