基于 vue+quasar 的 web 组态，核心代码基于 vue，quasar 仅仅是为了方便构建 (我是不太建议用 quasar,这个框架看起来比较麻烦，组件的事件基本上没有示例，看着不是太清晰（个人观点）)
- 完善撤销和恢复
- 折线箭头（思路：增加控制锚点作为转折点）
- 属性元数据设计和属性编辑 UI 生成（思路：仿造 winform 的属性面板）
| 功能 | 状态 |
|---|---|
| 面板标尺 | 完成 |
| 拖曳添加组件 | 完成 |
| 位置移动-鼠标 | 完成 |
| 位置移动-方向键 | 完成 |
| 位置移动-批量 | 完成 |
| 拖动位置磁性吸附 | 未完成 |
| 尺寸锚点（8 个） | 完成 |
| 旋转锚点 | 完成 |
| 选中效果 | 完成 |
| 层叠控制 | 完成 |
| 面板比例缩放 | 完成 |
| CTRL+C/V 复制黏贴 | 完成 |
| CTRL+A 多选 | 完成 |
| 鼠标框选 | 完成 |
| DELETE 删除（支持删除多个） | 完成 |
| 样式配置（文字、大小、位置、边框、颜色、旋转） | 完成 |
| 组件继承体系 | 完成 |
| DOM 组件（文字、图片） | 完成 |
| canvas 组件（圆形、三角形、矩形、线条、箭头线条） | 完成 |
| 折线箭头 | 部分完成 |
| echarts 组件 | 完成 |
| SVG 组件 | 完成 |
| 组件同步/异步数据加载 | 完成 |
| 通讯机制-事件总线 | 完成 |
| 通讯机制-VUEX | 未开始 |
| 事件总线-WebSocket | 未开始 |
| 事件总线-MQTT | 未开始 |
| VUEX-WebSocket | 未开始 |
| VUEX-MQTT | 未开始 |
| 功能 | 状态 |
|---|---|
| 批量编辑属性 | 未完成 |
| 对齐工具 | 未完成 |
| 撤销和恢复 | 有限支持 |
| 容器组件 | 未完成 |
| 动画 | 未完成 |
| 命令码 | 操作 | 撤销 | 恢复 |
|---|---|---|---|
| add | 新增 | 支持 | 支持 |
| del | 删除 | 支持 | 不支持 |
| move | 移动 | 支持 | 支持 |
| select | 选择 | 未完成 | 未完成 |
| -- | 反选 | 未完成 | 未完成 |
| resize | 形变 | 未完成 | 未完成 |
| copy-add | 多项复制 | 未完成 | 未完成 |
| -- | 属性修改 | 未完成 | 未完成 |
- 目前的属性面板的鼠标编辑是硬编码的，这样初期拓展简单但是维护麻烦，更好的方法是每个属性定义完整的属性元数据，属性面板根据每个属性的元数据动态生成编辑，并支持属性分组
- 在 src/assets/data/topo-data.json 文件中
- 定义数据文件（参见 \src\components\topo\data-toolbox 下的 json 文件）
- 新增控件，根据数据文件的数据自己实现显示方式（在\src\components\topo\control 下新增控件，继承组件，可参考其他组件实现方式，整个思想就是利用第一步的数据绘制 dom 节点或 canvas 图像）
- 注册控件到工具栏（在 TopoToolbox.vue 中）
- 注册控件（在 TopoBase.vue 中）
其实整体思想很简单，就是定义一些数据，然后自己新增 vue 组件根据这些数据控制渲染和行为，其他的一些组态编辑操作是公共的。
3 种机制：独立 http、VUEX、事件总线（基于一个消息中心，订阅和发布消息的模式）
每个组件独立使用 http 接口和定时器实现，适用于少量组件的应用（组件太多会导致过多连接和定时器）
参见/src/assets/libs/simpleEventBus.js 和 ViewRect.vue 组件的演示代码（直接进入预览可看见矩形变色）
未开始
未开始
未开始
准备中
未开始
- 安装 NodeJs
- 安装 vue-cli：npm install -g @vue/cli
- 安装 quasar-cli：npm install -g @quasar/cli
- 进入根目录，执行安装 npm install（建议使用 cnpm 安装）
- 启动项目：quasar dev
更多构建功能请参考 quasar 官网，以下是一些常用的构建命令
$ quasar dev
$ quasar dev -p 9090
$ quasar dev -m pwa
$ quasar dev -m cordova
$ quasar dev -m electron
注意：Electron 应用等请参考官网配置相应的开发环境
安装 yarn：npm install -g yarn
设置 yarn 镜像：yarn config set registry http://registry.npm.taobao.org/
安装 electron：yarn add --dev electron@^7.0.0 electron-debug@^3.0.0 electron-devtools-installer@^2.2.4 devtron@^1.4.0
安装环境：cnpm install --global windows-build-tools
在打包过程中会从 github 下载文件，如果下载不了，可以直接百度网盘下载，网盘地址： https://pan.baidu.com/s/1RiHHBDJMeiXLubaFzryTAw
- 编辑 quasar.conf.js 下的 publicPath，修改为实际的名称
- 去编译后(使用命令 quasar build)的 dist 文件夹将文件拷贝到 web 服务器即可
- 目前 publicPath 默认为 WebTopo，所以构建后访问http://127.0.0.1/WebTopo/即可
注意：由于 VUE 使用 history 模式，使用 nginx 等服务器需要解决路径 404 问题（本项目只有 2 个 url）
quasar build
quasar build -m electron