# 终端图标统一处理
# 背景
由于历史原因，在前端代码中存在好几套终端图标的写法：
- 通过图标名生成class去匹配精灵图的坐标
- 通过类型id去匹配class
- 通过字段判断是否自定义的图片
- 通过类型id匹配svg图片（最新写法）
正好最近的项目终端识别中，需要升级终端类型库，于是将控制器中的所有图标写法都统一起来，方便后续维护。
# 实现
由于控制器中存在vue和ext两套框架，需要分别处理对应的页面。
# vue页面
vue页面中已封装好了一套基于id去匹配svg的组件，只需要改造一下即可。
# 缓存
由于新增的很多终端类型没有专门设计图标，需要使用其父类的图标。
所以通过请求终端类型的数据并缓存成map，方便子类型查不到专属图标时去找父类型的。
# 获取
之前的获取类型是非响应式的，加上远程数据后就不适用了。
通过在远程数据中提供一个加载状态，起到加载完后触发重新查找的效果。
# ext页面
# 渲染
模板中渲染
观察ext的页面基本是在表格或者渲染模板中使用到了图标，且生成的dom结构也是基本一致的。
这里提供一个hook，通过h函数渲染vue的图标组件，再生成一个随机不重复的id，添加到渲染模板中：
`<span class="dev-icon-ext-span" id="${renderId}" title="${data.title ?? ''}"></span>`
ext在render时使用返回的模板进行渲染，在一个定时器周期后，调用vue的render函数将生成的VNode挂载到指定id中，就实现了图标的渲染。
注：
之所以用定时器去实现，是因为IxIcon是通过promise异步渲染的，h后是拿不到完整dom。
提供dom渲染
在端口面板中，原来的实现是在端口的dom上添加class去实现。
这种存在dom的更好实现，只需要render到对应dom上即可。
# 磨平接口差异
由于历史原因，存在好几套图标的写法。
icon名匹配
这种通过icon转id再去匹配svg
自定义图片
如果存在自定义的图片，则去匹配出图片路径，通过img去渲染
其它的则通过id去匹配svg
# 总结
通过以上实现，解决了之前多套写法不统一的问题，后续只需维护一份id对应图片的映射关系即可。