Compare commits

..

No commits in common. 'main' and 'old-3.0' have entirely different histories.

@ -1,5 +0,0 @@
*.md
.vscode
.idea
dist
node_modules

@ -1,59 +0,0 @@
module.exports = {
root: true,
env: {
browser: true,
node: true,
es6: true
},
parser: 'vue-eslint-parser',
parserOptions: {
parser: '@typescript-eslint/parser',
ecmaVersion: 'latest',
sourceType: 'module',
jsxPragma: 'React',
ecmaFeatures: {
jsx: true
}
},
extends: [
'plugin:vue/vue3-recommended',
'plugin:@typescript-eslint/recommended',
'prettier',
'plugin:prettier/recommended' // 一定要放在最后。因为 extends 中后引入的规则会覆盖前面的规则。
],
rules: {
// @typescript-eslint
'@typescript-eslint/explicit-function-return-type': 'off', // 需要函数和类方法的显式返回类型
'@typescript-eslint/no-explicit-any': 'off', // 禁止使用该 any 类型
'@typescript-eslint/no-var-requires': 'off', // 不允许使用 require 语句,除了在 import 语句中
'@typescript-eslint/no-empty-function': 'off', // 禁止空函数
'@typescript-eslint/no-use-before-define': 'off', // 在定义之前禁止使用变量
'@typescript-eslint/ban-ts-comment': 'off', // 禁止 @ts-<directive> 使用评论或在指令后要求描述
'@typescript-eslint/ban-types': 'off', // 禁止使用特定类型
'@typescript-eslint/no-non-null-assertion': 'off', // '!'不允许使用后缀运算符的非空断言
'@typescript-eslint/explicit-module-boundary-types': 'off', // 需要导出函数和类的公共类方法的显式返回和参数类型
'@typescript-eslint/no-unused-vars': [
'error',
{
argsIgnorePattern: '^_',
varsIgnorePattern: '^_'
}
], // 禁止未使用的变量
// vue
'vue/custom-event-name-casing': 'off', // 为自定义事件名称强制使用特定大小写
'vue/attributes-order': 'off', // 强制执行属性顺序
'vue/one-component-per-file': 'off', // 强制每个组件都应该在自己的文件中
'vue/html-closing-bracket-newline': 'off', // 在标签的右括号之前要求或禁止换行
'vue/multiline-html-element-content-newline': 'off', // 在多行元素的内容之前和之后需要换行符
'vue/singleline-html-element-content-newline': 'off', // 在单行元素的内容之前和之后需要换行符
'vue/attribute-hyphenation': 'off', // 对模板中的自定义组件强制执行属性命名样式
'vue/require-default-prop': 'off', // 需要 props 的默认值
'vue/html-indent': ['error', 2], // 在<template>中强制一致缩进
'vue/html-self-closing': 'off', // 执行自闭合的风格
'vue/max-attributes-per-line': 'off', // 强制每行属性的最大数量
'vue/multi-word-component-names': 'off', // 是否开启组件命名规则校验(强制多个单词以驼峰或'-'链接的命名规则)
// ESLint
'no-use-before-define': 'off', // 禁止在变量定义之前使用它们
'space-before-function-paren': 'off' // 强制在 function的左括号之前使用一致的空格
}
};

19
.gitignore vendored

@ -1,22 +1,5 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
.DS_Store
dist
dist-ssr
*.local
# Editor directories and files
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

1
.husky/.gitignore vendored

@ -1 +0,0 @@
_

@ -1,4 +0,0 @@
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npx --no -- commitlint --edit $1

@ -1,9 +0,0 @@
#!/bin/sh
command_exists () {
command -v "$1" >/dev/null 2>&1
}
# Workaround for Windows 10, Git Bash and Yarn
if command_exists winpty && test -t 1; then
exec < /dev/tty
fi

@ -1,5 +0,0 @@
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npx lint-staged
npx lint-staged

@ -1,3 +0,0 @@
/node_modules/**
/dist*
/public/*

@ -1,3 +1,3 @@
{
"recommendations": ["Vue.volar"]
"recommendations": ["johnsoncodehk.volar"]
}

@ -1,7 +0,0 @@
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
"eslint.autoFixOnSave": true
},
"files.eol": "\n"
}

@ -1,229 +1,287 @@
# vue-webtopo-svgeditor
> 基于 vue3.2+ts 实现的 svg 可视化 web 组态编辑器。可直接把 svg 文件和 vue 组件作为编辑器图形库使用,赋予其缩放和旋转等功能,并支持自定义拓展参数,实时控制组件状态等
# 重制版正在开发中请关注分支Re-1.0,预览地址[Re-1.0](http://re.svg.yaolm.top/),目前进展顺利,不久会替换掉当前分支代码
预览地址:[http://svg.yaolm.top/](http://svg.yaolm.top/)
> 基于vue3.2+ts实现的svg可视化web组态编辑器。可无需修改代码动态添加组件、自定义拓展组件参数
`qq`交流群:`209048413`,仅供交流,有问题请提[issue](https://github.com/yaolunmao/vue-webtopo-svgeditor/issues),以便帮助更多有相同问题的人
qq交流群209048413
历史版本请在本项目其它分支进行查看
当前主分支版本为3.0,该项目基于vue3.2+ts开发,ui使用了[naiveui](https://www.naiveui.com/zh-CN/os-theme)
## 项目优点
## [本文图片挂了请点此查看](https://www.cnblogs.com/Hero-/p/14784744.html)
### 组态软件核心功能都具备
## 预览地址
没有特殊需求,只需要配置好图形库,即可开始您的组态世界
[http://svg.yaolm.top](http://svg.yaolm.top)(请使用版本新一点的浏览器🤔)
### 优越的性能
## git地址
使用了`svg`的`symbol`技术,`use`方式加载`svg`图形,同样的 svg 图形不管数量多少,只会渲染一次
https://github.com/yaolunmao/vue-webtopo-svgeditor
### 学习成本极低
https://gitee.com/yaolunmao/vue-webtopo-svgeditor
`svg`文件即组件,引入之后无需进行额外配置,编辑器会自适应解析加载组件,添加自定义组件和传统`html`无差,前端 er 零学习成本上手
## 这个项目都能干什么
### 易拓展
目前我用来绘制物联网监控系统图
配置文件采用开放式结构,属性支持自定义拓展。图形库支持添加`svg`文件或者`vue`组件,定制开发将变得容易
电力监控系统图
### 易于集成
![电力监控系统图](https://images.cnblogs.com/cnblogs_com/Hero-/2077550/o_211211075750_%E7%94%B5%E5%8A%9B%E9%A2%84%E8%A7%88.gif)
项目已经编写好了库模式脚本,组件已经发布到[npm](https://www.npmjs.com/package/webtopo-svg-edit),支持外部传入自定义组件,支持组件事件订阅等
水务系统图
### 免费开源
![水务系统图](https://images.cnblogs.com/cnblogs_com/Hero-/2077550/o_211222131344_shuiwu.gif)
MIT 开源协议 可商用(自带的`svg`文件除外)
但不仅仅局限于这些只要是svg矢量图标都可以作为组件进行拖拽组态
## 图形库说明
### 无状态组件
无状态组件就是`svg`文件,编辑器已经将节点的拖动,缩放,旋转等功能封装好了,您无需做出额外配置即可使用,若是需要动态的去设置`svg`的颜色边框之类的,需要自行设置`props`,参考`src\config-center\svg-file\stateless`的配置,可以设置的属性为`svg`的公共属性,例如`fill`、`stroke `、`stroke-dasharray`这些,具体属性请参考[MDN-SVG 属性](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute#svg_%E5%B1%9E%E6%80%A7%EF%BC%88%E6%8C%89%E7%B1%BB%E5%88%AB%E5%88%86%E7%B1%BB%EF%BC%89)
## 优点
### 有状态组件
- **学习成本极低**核心代码仅500多行
- **添加组件无需修改代码**只要在json里新增一项就可
- **轻量**组件打包只有1MB
- **易拓展**按照我定义好的格式只需要在json里面定义好属性便可以动态修改svg组件的任意节点
- **易于集成**组件已经发布到npm只需要引用到现有项目将组件数据传给组件即可使用
- **免费**MIT开源协议 可商用
有状态组件也是 svg 文件,区别就在于无状态组件控制节点属性的配置配置在`props`上,而有状态组件的配置需要配置到`state`上,有状态组件对比无状态组件的好处是可以改变一个状态去影响多个属性,例如这里的断路器开关,其实是同时改变了颜色和把手的透明度,参考配置:`src\config-center\svg-file\stateful\circuit-breaker\index.ts`
## 如何引用
![](./readme-imgs/有状态组件.gif)
```
# 创建项目(已有项目跳过此步骤)
npm init vite@latest
# 进入项目目录
cd projectname
### 自带动画组件
# 安装插件
npm install vue-webtopo-svgeditor
#引入插件
import {SvgEditor,SvgPrview} from 'vue-webtopo-svgeditor';
import 'vue-webtopo-svgeditor/dist/style.css'
# 修改vite.config.ts使之可以进行运行时创建组件
alias: {
'vue': 'vue/dist/vue.esm-bundler.js' // 定义vue的别名如果使用其他的插件可能会用到别名
},
# 如果需要使用图表 修改main.ts 全局注册一下图表组件
import { VChart} from 'vue-webtopo-svgeditor';
const app=createApp(App)
app.component('v-chart',VChart)
app.mount('#app')
```
## 如何使用
使用编辑器需要将配置好的插件列表传递给组件,插件列表可通过调用后台接口的方式或者定义在项目里,推荐使用接口方式,可使项目更加灵活,举例`demo.json`
```json
[{
"type": "TestAddSvg",//组件类型 可理解为组件的唯一id
"title": "测试新增心形",//组件名称
"panel_class": "common",//组件在左侧工具栏的分类
"template": "<path :fill=\"prop_data.extend_attr.color.val\" :stroke=\"prop_data.extend_attr.color.val\" stroke-width=\"5\" style=\"pointer-events:inherit\" d=\"m143.72081869586242,163.35565803158485 c14.617751633754164,-41.93617271978648 71.89058180534832,0 0,53.91793635401125 c-71.89058180534832,-53.91793635401125 -14.617751633754164,-95.85410907379776 0,-53.91793635401125 z\" fill-opacity=\"1\" stroke-opacity=\"1\" transform=\"translate(-145,-180)\"></path> ",//svg元素
"props": [
"prop_data"
],
"extend_attr": {//拓展参数
"color": {
"title": "心形颜色",
"val": "#FF0000",
"type": "colorinputbox"
}
},
"create_type": "draggable",//创建方式 拖动还是绘制
"priview_img": "http://svg.yaolm.top/test.png"//左侧工具栏的预览图像
}
]
```
没什么好说的了,支持直接使用自带动画的`svg`文件,参考`src\config-center\svg-file\have-animation`
更多组件请参考`public\InterfaceReturn.json`
### 自定义 svg
在vue里引入编辑器组件然后将`demo.json`传递给组件的`component_infos`
本质上就是`vue`的`template`代码片段,它可以完全替代无状态组件和有状态组件,并且可以根据自定义代码实现更多节点和属性的控制,缺点就是需要写代码--!参考`src\config-center\svg-file\custom-svg`
```vue
<svg-editor
:component_infos="demo.json"
@saveSvgInfo="saveSvgInfo"
:svgCanvas="{ width: 1920, height: 1080 }"
></svg-editor>
```
### vue 组件
| 属性名 | 说明 | 默认值 |
| --------------- | ------------------------ | ---------------------------- |
| component_infos | 预定义的组件列表 | |
| saveSvgInfo | 编辑器点击保存的回调方法 | |
| svgCanvas | 画板的大小 | { width: 1520, height: 720 } |
其实和自定义`svg`相似,都是`vue`的`template`代码片段,但是`svg`标签里面无法渲染`html`的代码,所以在最外层用了`foreignObject`进行了包裹,同样支持缩放旋转等操作。参考`src\config-center\vue`
预览组件同理
## 如何添加图形库
```vue
<svg-prview
:component_infos="demo.json"
:svg_data="prview_data"
:svgCanvas="{ width: 1920, height: 1080 }"
></svg-prview>
```
1. 将下载好的svg文件放到`src\assets\svgs`目录下
2. 修改下载好的svg文件代码片段删除想动态修改的属性。例如你想动态修改svg的填充颜色要删掉代码片段的`fill`属性
3. 添加配置文件,文件目录为`src\config-center`
| 属性名 | 说明 | 默认值 |
| --------------- | -------------------- | ---------------------------- |
| component_infos | 预定义的组件列表 | |
| svg_data | 编辑器点击保存的数据 | |
| svgCanvas | 画板的大小 | { width: 1520, height: 720 } |
需要注意配置文件的`name`属性要和`svg`文件名保持一致,如果是自定义组件需要按需导入一下,参考`src\config-center\index.ts`,这么做的目的是当你把编辑器构建成插件引入到其它项目的时候,其它项目使用编辑器无需注册你的自定义组件
## 如何进行开发
## 操作说明
```
# 克隆项目
git clone https://github.com/yaolunmao/vue-webtopo-svgeditor.git
### 绘画
# 进入项目目录
cd vue-webtopo-svgeditor
选中左侧的组件库,按住鼠标左键即可把组件拖动到画布中
# 安装依赖
npm install
![](./readme-imgs/绘画.gif)
# 启动服务
npm run dev
## 操作
```
选中绘制好的节点后会出现锚点,可以直接进行移动、缩放、旋转等功能,右侧属性面板可以设置配置好的节点的属性,鼠标右键可以进行一些快捷操作
![](./readme-imgs/操作.gif)
### 连线
## 操作说明
鼠标移动到组件上时会出现连线锚点,左键点击锚点创建线段,继续左键点击画布会连续创建线段,右键停止创建线段,鼠标放在线段上会出现线段端点提示,拖动即可重新设置连线,选中线段后还可以在右侧的动画面板设置线段的动画效果
- 常规组件和图表组件用鼠标左键选中并按住可拖动至画布
- 绘制组件需先选中 再将鼠标移至画布中按住左键开始绘制 松开左键结束绘制
- 在画布上单击左键并按住可以拖动组件改变位置
- 当组件选中时会有选中效果 此时右侧面板弹出 可使用快捷键和编辑右侧面板属性更改组件
- 键盘↑↓←→可移动选中组件 ctrl+c复制当前选中组件 deleted删除当前选中组件
- 点击画布空白处可以取消选中组件 并关闭属性面板
- 点击《 符号可以显示或隐藏左侧面板
![](./readme-imgs/连线.gif)
## 动态添加组件
## 其他说明
可使用任意生成svg代码的工具我这里使用在线编译器进行模拟
- 若是组件中心点不是鼠标指针点,请自行在页面设置里匹配`x`轴和`y`轴数据
- 组件隐藏后,可以在顶部工具栏的组件树里面选中隐藏的组件,进而设置隐藏组件的属性
- 本项目示例`svg`文件规格以标准图标大小`1024x1024px`,如果您的组件效果不好,请使用该规格
点击[这里](http://svgedit.yaolm.top/)进行svg图像绘制我这里以心形为例
## 集成到已有项目
![绘制心形图片](https://images.cnblogs.com/cnblogs_com/Hero-/1976969/o_2105190646421.png)
### 脚手架项目
将svg代码复制下来双引号进行转义删除无用属性比如id你也可以直接使用我下面的代码
```
# 创建项目(已有项目跳过此步骤)
npm init vite@latest
<path fill=\"#FF0000\" stroke=\"#000000\" stroke-width=\"5\" style=\"pointer-events:inherit\" d=\"m143.72081869586242,163.35565803158485 c14.617751633754164,-41.93617271978648 71.89058180534832,0 0,53.91793635401125 c-71.89058180534832,-53.91793635401125 -14.617751633754164,-95.85410907379776 0,-53.91793635401125 z\" fill-opacity=\"1\" stroke-opacity=\"1\"></path>
```
# 进入项目目录
cd projectname
将拓展字段进行双向绑定 我目前只做了颜色
# 安装插件
pnpm i webtopo-svg-edit
```
<path :fill=\"prop_data.extend_attr.color.val\" :stroke=\"prop_data.extend_attr.color.val\" stroke-width=\"5\" style=\"pointer-events:inherit\" d=\"m143.72081869586242,163.35565803158485 c14.617751633754164,-41.93617271978648 71.89058180534832,0 0,53.91793635401125 c-71.89058180534832,-53.91793635401125 -14.617751633754164,-95.85410907379776 0,-53.91793635401125 z\" fill-opacity=\"1\" stroke-opacity=\"1\" transform=\"translate(-145,-180)\"></path>
```
# 安装pinia
pnpm i pinia
修改项目文件夹pubilc下的模拟接口返回的json新增一项
```json
{
"type": "TestAddSvg",
"title": "测试新增心形",
"panel_class": "common",
"template": "<path :fill=\"prop_data.extend_attr.color.val\" :stroke=\"prop_data.extend_attr.color.val\" stroke-width=\"5\" style=\"pointer-events:inherit\" d=\"m143.72081869586242,163.35565803158485 c14.617751633754164,-41.93617271978648 71.89058180534832,0 0,53.91793635401125 c-71.89058180534832,-53.91793635401125 -14.617751633754164,-95.85410907379776 0,-53.91793635401125 z\" fill-opacity=\"1\" stroke-opacity=\"1\" transform=\"translate(-145,-180)\"></path>",
"props": [
"prop_data"
],
"extend_attr": {
"color": {
"title": "心形颜色",
"val": "#FF0000",
"type": "colorinputbox"
}
},
"create_type": "draggable",
"priview_img": "http://svg.yaolm.top/test.png"
}
```
# 修改main.ts 注册pinia
import { createPinia } from 'pinia';
const app = createApp(App);
app.use(createPinia());
app.mount('#app')
#在需要的页面引入插件
import { WebtopoSvgEdit,WebtopoSvgPreview } from 'webtopo-svg-edit';
import 'webtopo-svg-edit/dist/style.css'
```
### umd方式集成
```html
<!DOCTYPE html>
<html>
<head>
<title>webtopo-svg-edit Example</title>
<link href="https://unpkg.com/webtopo-svg-edit@0.0.8/dist/style.css" rel="stylesheet" />
<script src="https://unpkg.com/vue@3.2.6/dist/vue.global.prod.js"></script>
<script src="https://unpkg.com/vue-demi@0.13.11/lib/index.iife.js"></script>
<script src="https://unpkg.com/pinia@2.0.33/dist/pinia.iife.prod.js"></script>
<script src="https://unpkg.com/webtopo-svg-edit@0.0.8/dist/webtopo-svg-edit.umd.js"></script>
</head>
<body>
<div id="app"></div>
<script>
const pinia = Pinia.createPinia()
const app = Vue.createApp(WebtopoYLM.WebtopoSvgEdit)
app.use(pinia)
app.mount('#app')
</script>
</body>
</html>
```
### es module方式集成
```html
<!DOCTYPE html>
<html>
<head>
<title>webtopo-svg-edit Example</title>
<link href="https://unpkg.com/webtopo-svg-edit@0.0.8/dist/style.css" rel="stylesheet" />
</head>
<body>
<div id="app"></div>
</body>
</html>
<script type="importmap">
{
"imports": {
"vue": "https://unpkg.com/vue@3.2.47/dist/vue.esm-browser.prod.js",
"@vue/devtools-api": "https://cdn.jsdelivr.net/npm/@vue/devtools-api/lib/esm/index.min.js",
"vue-demi": "https://unpkg.com/vue-demi@0.13.11/lib/index.mjs",
"pinia": "https://unpkg.com/pinia@2.0.29/dist/pinia.esm-browser.js",
"WebtopoYLM": "https://unpkg.com/webtopo-svg-edit@0.0.8/dist/webtopo-svg-edit.es.js"
}
}
</script>
<script type="module">
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import { WebtopoSvgEdit } from 'WebtopoYLM'
const app = createApp(WebtopoSvgEdit)
app.use(createPinia())
app.mount('#app')
</script>
启动项目,就可以看到刚才添加的组件了
![预览界面](https://images.cnblogs.com/cnblogs_com/Hero-/1976969/o_211031113925_%E5%8A%A8%E6%80%81%E6%96%B0%E5%A2%9E%E7%9A%84%E7%BB%84%E4%BB%B6.gif)
也支持直接引入图片只不过放大有失真将下面的代码替换上面json文件的template值
```
如果集成有问题请参考示例项目[demo](/demo)
<image x=\"-33\" y=\"-33\" width=\"66\" height=\"66\" xlink:href=\"http://svg.yaolm.top/test.png\" />
```
ps目前中心辅助线的坐标取决于svg组件的中心坐标请自行添加transform属性调整svg组件中心坐标
## 右侧属性面板的自定义属性说明
**请注意:插件方式引入会导致左侧工具栏的 icon 图标无法正确显示,请自行寻找您项目构建工具的 svg 加载器,将 icon 图标转换成 symbol并将名字命名为svg-xxx即可正常显示**
因为组件的多样性,所以增加了自定义拓展属性。例如文字组件可输入文字内容、修改字体样式等,开关组件则可以进行闭合,使用拓展属性可以针对某个组件显示不同的样式。
## 贡献代码
目前只封装了6种
1. `Fork` 本项目
2. 新建`Feat_xxx`分支
3. 提交代码
4. 新建 `Pull Request`
- colorinputbox:颜色选择器
- radiogroup单选
- numberinputbox数字输入框
- textinputbox文本输入框
- textareainputbox文本域
- select下拉选择器
**只接受 github 的 prgitee 为 github 镜像库**
具体配置可参考文件`public\InterfaceReturn.json`查看对象的`extend_attr`属性
##
## 关于vue2的特别说明
**本项目组件库来源均为网络,仅供学习交流使用,请勿将本项目里面的组件用于商业用途**
vue2想使用动态组件可以使用`Vue.component()`,此处感谢大佬[chj2020](https://github.com/chj2020)指导
## 君子协议
### vue2如何支持多节点
开源版使用时请保留底部的版权声明,感谢支持
首先安装vue-fragment
```vue
npm install vue-fragment
```
引用vue-fragment
```vue
//main.js
import Fragment from 'vue-fragment'
Vue.use(Fragment.Plugin)
```
然后在json文件的template属性值里面最外层使用标签
```vue
<fragment></fragment>
```
例如
```vue
<fragment><path :fill=\"prop_data.extend_attr.color.val\" :stroke=\"prop_data.extend_attr.color.val\" stroke-width=\"5\" style=\"pointer-events:inherit\" d=\"m143.72081869586242,163.35565803158485 c14.617751633754164,-41.93617271978648 71.89058180534832,0 0,53.91793635401125 c-71.89058180534832,-53.91793635401125 -14.617751633754164,-95.85410907379776 0,-53.91793635401125 z\" fill-opacity=\"1\" stroke-opacity=\"1\" transform=\"translate(-145,-180)\"></path></fragment>
```
![](./readme-imgs/版权声明.png)
## 常见问题
### vue2怎么集成有vue2的版本吗
## 截图
vue2建议使用iframe、cdn集成目前没有vue2的版本如果您接受不了vue2方式集成也可参考2.1分支进行改造。
### 项目启动不起来怎么办?
请使用`pnpm`安装依赖
### 随便改哪里的代码eslint都报错怎么办
vscode安装eslint插件
## 鸣谢
吉林省格尺科技有限公司促进该项目诞生
[秀英童鞋](https://blog.csdn.net/qq_42862247)对此项目前进的耐心指导
## ![常规组件](https://images.cnblogs.com/cnblogs_com/Hero-/1976969/o_211031114029_%E5%B8%B8%E8%A7%84%E7%BB%84%E4%BB%B6.gif)
[一个低代码(可视化拖拽)教学项目](https://github.com/woai3c/visual-drag-demo)
![绘制组件](https://images.cnblogs.com/cnblogs_com/Hero-/1976969/o_211031114035_%E7%BB%98%E5%88%B6%E7%BB%84%E4%BB%B6.gif)
还在坚持用原生`svg`进行组态的开发者们
![图表组件](https://images.cnblogs.com/cnblogs_com/Hero-/1976969/o_211031114040_%E5%9B%BE%E8%A1%A8%E7%BB%84%E4%BB%B6.gif)
## 捐助
![修改组件属性](https://images.cnblogs.com/cnblogs_com/Hero-/1976969/o_211031114045_%E4%BF%AE%E6%94%B9%E7%BB%84%E4%BB%B6%E5%B1%9E%E6%80%A7.gif)
如果这个项目对您有所帮助,请扫下方二维码打赏一杯咖啡。
![](https://images.cnblogs.com/cnblogs_com/Hero-/2077550/o_211211080131_%E5%8A%A8%E7%94%BB%E7%BB%98%E5%88%B6.gif)
![](./readme-imgs/捐赠.jpg)
![预览界面](https://images.cnblogs.com/cnblogs_com/Hero-/2077550/o_211211075750_%E7%94%B5%E5%8A%9B%E9%A2%84%E8%A7%88.gif)
## 感谢以下小伙伴为此项目做出的贡献
## License
<a href="https://github.com/yaolunmao/vue-webtopo-svgeditor/graphs/contributors"><img src="https://contrib.rocks/image?repo=yaolunmao/vue-webtopo-svgeditor" /></a>
[MIT](http://opensource.org/licenses/MIT)

@ -1 +0,0 @@
module.exports = { extends: ['@commitlint/config-conventional'] };

@ -1,29 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>webtopo-svg-edit Example</title>
<link href="https://unpkg.com/webtopo-svg-edit@0.0.8/dist/style.css" rel="stylesheet" />
</head>
<body>
<div id="app"></div>
</body>
</html>
<script type="importmap">
{
"imports": {
"vue": "https://unpkg.com/vue@3.2.47/dist/vue.esm-browser.prod.js",
"@vue/devtools-api": "https://cdn.jsdelivr.net/npm/@vue/devtools-api/lib/esm/index.min.js",
"vue-demi": "https://unpkg.com/vue-demi@0.13.11/lib/index.mjs",
"pinia": "https://unpkg.com/pinia@2.0.29/dist/pinia.esm-browser.js",
"WebtopoYLM": "https://unpkg.com/webtopo-svg-edit@0.0.8/dist/webtopo-svg-edit.es.js"
}
}
</script>
<script type="module">
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import { WebtopoSvgEdit } from 'WebtopoYLM'
const app = createApp(WebtopoSvgEdit)
app.use(createPinia())
app.mount('#app')
</script>

@ -1,20 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>webtopo-svg-edit Example</title>
<link href="https://unpkg.com/webtopo-svg-edit@0.0.8/dist/style.css" rel="stylesheet" />
<script src="https://unpkg.com/vue@3.2.6/dist/vue.global.prod.js"></script>
<script src="https://unpkg.com/vue-demi@0.13.11/lib/index.iife.js"></script>
<script src="https://unpkg.com/pinia@2.0.33/dist/pinia.iife.prod.js"></script>
<script src="https://unpkg.com/webtopo-svg-edit@0.0.8/dist/webtopo-svg-edit.umd.js"></script>
</head>
<body>
<div id="app"></div>
<script>
const pinia = Pinia.createPinia()
const app = Vue.createApp(WebtopoYLM.WebtopoSvgEdit)
app.use(pinia)
app.mount('#app')
</script>
</body>
</html>

@ -1,24 +0,0 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

@ -1,3 +0,0 @@
{
"recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
}

@ -1,2 +0,0 @@
# 说明
此项目为开源项目[vue-webtopo-svgeditor](https://github.com/yaolunmao/vue-webtopo-svgeditor)的集成示例

@ -1,13 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue + TS</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>

@ -1,22 +0,0 @@
{
"name": "vue-webtopo-svgeditor-example",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vue-tsc && vite build",
"preview": "vite preview"
},
"dependencies": {
"pinia": "^2.0.29",
"vue": "^3.2.45",
"webtopo-svg-edit": "^0.0.2"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.0.0",
"typescript": "^4.9.3",
"vite": "^4.0.0",
"vue-tsc": "^1.0.11"
}
}

@ -1,834 +0,0 @@
lockfileVersion: 5.4
specifiers:
'@vitejs/plugin-vue': ^4.0.0
pinia: ^2.0.29
typescript: ^4.9.3
vite: ^4.0.0
vue: ^3.2.45
vue-tsc: ^1.0.11
webtopo-svg-edit: ^0.0.2
dependencies:
pinia: 2.0.29_prq2uz4lho2pwp6irk4cfkrxwu
vue: 3.2.45
webtopo-svg-edit: 0.0.2_typescript@4.9.4
devDependencies:
'@vitejs/plugin-vue': 4.0.0_vite@4.0.4+vue@3.2.45
typescript: 4.9.4
vite: 4.0.4
vue-tsc: 1.0.24_typescript@4.9.4
packages:
/@babel/helper-string-parser/7.19.4:
resolution: {integrity: sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==}
engines: {node: '>=6.9.0'}
/@babel/helper-validator-identifier/7.19.1:
resolution: {integrity: sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==}
engines: {node: '>=6.9.0'}
/@babel/parser/7.20.7:
resolution: {integrity: sha512-T3Z9oHybU+0vZlY9CiDSJQTD5ZapcW18ZctFMi0MOAl/4BjFF4ul7NVSARLdbGO5vDqy9eQiGTV0LtKfvCYvcg==}
engines: {node: '>=6.0.0'}
hasBin: true
dependencies:
'@babel/types': 7.20.7
/@babel/types/7.20.7:
resolution: {integrity: sha512-69OnhBxSSgK0OzTJai4kyPDiKTIe3j+ctaHdIGVbRahTLAT7L3R9oeXHC2aVSuGYt3cVnoAMDmOCgJ2yaiLMvg==}
engines: {node: '>=6.9.0'}
dependencies:
'@babel/helper-string-parser': 7.19.4
'@babel/helper-validator-identifier': 7.19.1
to-fast-properties: 2.0.0
/@ctrl/tinycolor/3.5.0:
resolution: {integrity: sha512-tlJpwF40DEQcfR/QF+wNMVyGMaO9FQp6Z1Wahj4Gk3CJQYHwA2xVG7iKDFdW6zuxZY9XWOpGcfNCTsX4McOsOg==}
engines: {node: '>=10'}
dev: false
/@element-plus/icons-vue/2.0.10_vue@3.2.45:
resolution: {integrity: sha512-ygEZ1mwPjcPo/OulhzLE7mtDrQBWI8vZzEWSNB2W/RNCRjoQGwbaK4N8lV4rid7Ts4qvySU3njMN7YCiSlSaTQ==}
peerDependencies:
vue: ^3.2.0
dependencies:
vue: 3.2.45
dev: false
/@esbuild/android-arm/0.16.17:
resolution: {integrity: sha512-N9x1CMXVhtWEAMS7pNNONyA14f71VPQN9Cnavj1XQh6T7bskqiLLrSca4O0Vr8Wdcga943eThxnVp3JLnBMYtw==}
engines: {node: '>=12'}
cpu: [arm]
os: [android]
requiresBuild: true
dev: true
optional: true
/@esbuild/android-arm64/0.16.17:
resolution: {integrity: sha512-MIGl6p5sc3RDTLLkYL1MyL8BMRN4tLMRCn+yRJJmEDvYZ2M7tmAf80hx1kbNEUX2KJ50RRtxZ4JHLvCfuB6kBg==}
engines: {node: '>=12'}
cpu: [arm64]
os: [android]
requiresBuild: true
dev: true
optional: true
/@esbuild/android-x64/0.16.17:
resolution: {integrity: sha512-a3kTv3m0Ghh4z1DaFEuEDfz3OLONKuFvI4Xqczqx4BqLyuFaFkuaG4j2MtA6fuWEFeC5x9IvqnX7drmRq/fyAQ==}
engines: {node: '>=12'}
cpu: [x64]
os: [android]
requiresBuild: true
dev: true
optional: true
/@esbuild/darwin-arm64/0.16.17:
resolution: {integrity: sha512-/2agbUEfmxWHi9ARTX6OQ/KgXnOWfsNlTeLcoV7HSuSTv63E4DqtAc+2XqGw1KHxKMHGZgbVCZge7HXWX9Vn+w==}
engines: {node: '>=12'}
cpu: [arm64]
os: [darwin]
requiresBuild: true
dev: true
optional: true
/@esbuild/darwin-x64/0.16.17:
resolution: {integrity: sha512-2By45OBHulkd9Svy5IOCZt376Aa2oOkiE9QWUK9fe6Tb+WDr8hXL3dpqi+DeLiMed8tVXspzsTAvd0jUl96wmg==}
engines: {node: '>=12'}
cpu: [x64]
os: [darwin]
requiresBuild: true
dev: true
optional: true
/@esbuild/freebsd-arm64/0.16.17:
resolution: {integrity: sha512-mt+cxZe1tVx489VTb4mBAOo2aKSnJ33L9fr25JXpqQqzbUIw/yzIzi+NHwAXK2qYV1lEFp4OoVeThGjUbmWmdw==}
engines: {node: '>=12'}
cpu: [arm64]
os: [freebsd]
requiresBuild: true
dev: true
optional: true
/@esbuild/freebsd-x64/0.16.17:
resolution: {integrity: sha512-8ScTdNJl5idAKjH8zGAsN7RuWcyHG3BAvMNpKOBaqqR7EbUhhVHOqXRdL7oZvz8WNHL2pr5+eIT5c65kA6NHug==}
engines: {node: '>=12'}
cpu: [x64]
os: [freebsd]
requiresBuild: true
dev: true
optional: true
/@esbuild/linux-arm/0.16.17:
resolution: {integrity: sha512-iihzrWbD4gIT7j3caMzKb/RsFFHCwqqbrbH9SqUSRrdXkXaygSZCZg1FybsZz57Ju7N/SHEgPyaR0LZ8Zbe9gQ==}
engines: {node: '>=12'}
cpu: [arm]
os: [linux]
requiresBuild: true
dev: true
optional: true
/@esbuild/linux-arm64/0.16.17:
resolution: {integrity: sha512-7S8gJnSlqKGVJunnMCrXHU9Q8Q/tQIxk/xL8BqAP64wchPCTzuM6W3Ra8cIa1HIflAvDnNOt2jaL17vaW+1V0g==}
engines: {node: '>=12'}
cpu: [arm64]
os: [linux]
requiresBuild: true
dev: true
optional: true
/@esbuild/linux-ia32/0.16.17:
resolution: {integrity: sha512-kiX69+wcPAdgl3Lonh1VI7MBr16nktEvOfViszBSxygRQqSpzv7BffMKRPMFwzeJGPxcio0pdD3kYQGpqQ2SSg==}
engines: {node: '>=12'}
cpu: [ia32]
os: [linux]
requiresBuild: true
dev: true
optional: true
/@esbuild/linux-loong64/0.16.17:
resolution: {integrity: sha512-dTzNnQwembNDhd654cA4QhbS9uDdXC3TKqMJjgOWsC0yNCbpzfWoXdZvp0mY7HU6nzk5E0zpRGGx3qoQg8T2DQ==}
engines: {node: '>=12'}
cpu: [loong64]
os: [linux]
requiresBuild: true
dev: true
optional: true
/@esbuild/linux-mips64el/0.16.17:
resolution: {integrity: sha512-ezbDkp2nDl0PfIUn0CsQ30kxfcLTlcx4Foz2kYv8qdC6ia2oX5Q3E/8m6lq84Dj/6b0FrkgD582fJMIfHhJfSw==}
engines: {node: '>=12'}
cpu: [mips64el]
os: [linux]
requiresBuild: true
dev: true
optional: true
/@esbuild/linux-ppc64/0.16.17:
resolution: {integrity: sha512-dzS678gYD1lJsW73zrFhDApLVdM3cUF2MvAa1D8K8KtcSKdLBPP4zZSLy6LFZ0jYqQdQ29bjAHJDgz0rVbLB3g==}
engines: {node: '>=12'}
cpu: [ppc64]
os: [linux]
requiresBuild: true
dev: true
optional: true
/@esbuild/linux-riscv64/0.16.17:
resolution: {integrity: sha512-ylNlVsxuFjZK8DQtNUwiMskh6nT0vI7kYl/4fZgV1llP5d6+HIeL/vmmm3jpuoo8+NuXjQVZxmKuhDApK0/cKw==}
engines: {node: '>=12'}
cpu: [riscv64]
os: [linux]
requiresBuild: true
dev: true
optional: true
/@esbuild/linux-s390x/0.16.17:
resolution: {integrity: sha512-gzy7nUTO4UA4oZ2wAMXPNBGTzZFP7mss3aKR2hH+/4UUkCOyqmjXiKpzGrY2TlEUhbbejzXVKKGazYcQTZWA/w==}
engines: {node: '>=12'}
cpu: [s390x]
os: [linux]
requiresBuild: true
dev: true
optional: true
/@esbuild/linux-x64/0.16.17:
resolution: {integrity: sha512-mdPjPxfnmoqhgpiEArqi4egmBAMYvaObgn4poorpUaqmvzzbvqbowRllQ+ZgzGVMGKaPkqUmPDOOFQRUFDmeUw==}
engines: {node: '>=12'}
cpu: [x64]
os: [linux]
requiresBuild: true
dev: true
optional: true
/@esbuild/netbsd-x64/0.16.17:
resolution: {integrity: sha512-/PzmzD/zyAeTUsduZa32bn0ORug+Jd1EGGAUJvqfeixoEISYpGnAezN6lnJoskauoai0Jrs+XSyvDhppCPoKOA==}
engines: {node: '>=12'}
cpu: [x64]
os: [netbsd]
requiresBuild: true
dev: true
optional: true
/@esbuild/openbsd-x64/0.16.17:
resolution: {integrity: sha512-2yaWJhvxGEz2RiftSk0UObqJa/b+rIAjnODJgv2GbGGpRwAfpgzyrg1WLK8rqA24mfZa9GvpjLcBBg8JHkoodg==}
engines: {node: '>=12'}
cpu: [x64]
os: [openbsd]
requiresBuild: true
dev: true
optional: true
/@esbuild/sunos-x64/0.16.17:
resolution: {integrity: sha512-xtVUiev38tN0R3g8VhRfN7Zl42YCJvyBhRKw1RJjwE1d2emWTVToPLNEQj/5Qxc6lVFATDiy6LjVHYhIPrLxzw==}
engines: {node: '>=12'}
cpu: [x64]
os: [sunos]
requiresBuild: true
dev: true
optional: true
/@esbuild/win32-arm64/0.16.17:
resolution: {integrity: sha512-ga8+JqBDHY4b6fQAmOgtJJue36scANy4l/rL97W+0wYmijhxKetzZdKOJI7olaBaMhWt8Pac2McJdZLxXWUEQw==}
engines: {node: '>=12'}
cpu: [arm64]
os: [win32]
requiresBuild: true
dev: true
optional: true
/@esbuild/win32-ia32/0.16.17:
resolution: {integrity: sha512-WnsKaf46uSSF/sZhwnqE4L/F89AYNMiD4YtEcYekBt9Q7nj0DiId2XH2Ng2PHM54qi5oPrQ8luuzGszqi/veig==}
engines: {node: '>=12'}
cpu: [ia32]
os: [win32]
requiresBuild: true
dev: true
optional: true
/@esbuild/win32-x64/0.16.17:
resolution: {integrity: sha512-y+EHuSchhL7FjHgvQL/0fnnFmO4T1bhvWANX6gcnqTjtnKWbTvUMCpGnv2+t+31d7RzyEAYAd4u2fnIhHL6N/Q==}
engines: {node: '>=12'}
cpu: [x64]
os: [win32]
requiresBuild: true
dev: true
optional: true
/@floating-ui/core/1.1.0:
resolution: {integrity: sha512-zbsLwtnHo84w1Kc8rScAo5GMk1GdecSlrflIbfnEBJwvTSj1SL6kkOYV+nHraMCPEy+RNZZUaZyL8JosDGCtGQ==}
dev: false
/@floating-ui/dom/1.1.0:
resolution: {integrity: sha512-TSogMPVxbRe77QCj1dt8NmRiJasPvuc+eT5jnJ6YpLqgOD2zXc5UA3S1qwybN+GVCDNdKfpKy1oj8RpzLJvh6A==}
dependencies:
'@floating-ui/core': 1.1.0
dev: false
/@sxzz/popperjs-es/2.11.7:
resolution: {integrity: sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ==}
dev: false
/@types/lodash-es/4.17.6:
resolution: {integrity: sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==}
dependencies:
'@types/lodash': 4.14.191
dev: false
/@types/lodash/4.14.191:
resolution: {integrity: sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ==}
dev: false
/@types/web-bluetooth/0.0.16:
resolution: {integrity: sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==}
dev: false
/@vitejs/plugin-vue/4.0.0_vite@4.0.4+vue@3.2.45:
resolution: {integrity: sha512-e0X4jErIxAB5oLtDqbHvHpJe/uWNkdpYV83AOG2xo2tEVSzCzewgJMtREZM30wXnM5ls90hxiOtAuVU6H5JgbA==}
engines: {node: ^14.18.0 || >=16.0.0}
peerDependencies:
vite: ^4.0.0
vue: ^3.2.25
dependencies:
vite: 4.0.4
vue: 3.2.45
dev: true
/@volar/language-core/1.0.24:
resolution: {integrity: sha512-vTN+alJiWwK0Pax6POqrmevbtFW2dXhjwWiW/MW4f48eDYPLdyURWcr8TixO7EN/nHsUBj2udT7igFKPtjyAKg==}
dependencies:
'@volar/source-map': 1.0.24
muggle-string: 0.1.0
dev: true
/@volar/source-map/1.0.24:
resolution: {integrity: sha512-Qsv/tkplx18pgBr8lKAbM1vcDqgkGKQzbChg6NW+v0CZc3G7FLmK+WrqEPzKlN7Cwdc6XVL559Nod8WKAfKr4A==}
dependencies:
muggle-string: 0.1.0
dev: true
/@volar/typescript/1.0.24:
resolution: {integrity: sha512-f8hCSk+PfKR1/RQHxZ79V1NpDImHoivqoizK+mstphm25tn/YJ/JnKNjZHB+o21fuW0yKlI26NV3jkVb2Cc/7A==}
dependencies:
'@volar/language-core': 1.0.24
dev: true
/@volar/vue-language-core/1.0.24:
resolution: {integrity: sha512-2NTJzSgrwKu6uYwPqLiTMuAzi7fAY3yFy5PJ255bGJc82If0Xr+cW8pC80vpjG0D/aVLmlwAdO4+Ya2BI8GdDg==}
dependencies:
'@volar/language-core': 1.0.24
'@volar/source-map': 1.0.24
'@vue/compiler-dom': 3.2.45
'@vue/compiler-sfc': 3.2.45
'@vue/reactivity': 3.2.45
'@vue/shared': 3.2.45
minimatch: 5.1.6
vue-template-compiler: 2.7.14
dev: true
/@volar/vue-typescript/1.0.24:
resolution: {integrity: sha512-9a25oHDvGaNC0okRS47uqJI6FxY4hUQZUsxeOUFHcqVxZEv8s17LPuP/pMMXyz7jPygrZubB/qXqHY5jEu/akA==}
dependencies:
'@volar/typescript': 1.0.24
'@volar/vue-language-core': 1.0.24
dev: true
/@vue/compiler-core/3.2.45:
resolution: {integrity: sha512-rcMj7H+PYe5wBV3iYeUgbCglC+pbpN8hBLTJvRiK2eKQiWqu+fG9F+8sW99JdL4LQi7Re178UOxn09puSXvn4A==}
dependencies:
'@babel/parser': 7.20.7
'@vue/shared': 3.2.45
estree-walker: 2.0.2
source-map: 0.6.1
/@vue/compiler-dom/3.2.45:
resolution: {integrity: sha512-tyYeUEuKqqZO137WrZkpwfPCdiiIeXYCcJ8L4gWz9vqaxzIQRccTSwSWZ/Axx5YR2z+LvpUbmPNXxuBU45lyRw==}
dependencies:
'@vue/compiler-core': 3.2.45
'@vue/shared': 3.2.45
/@vue/compiler-sfc/3.2.45:
resolution: {integrity: sha512-1jXDuWah1ggsnSAOGsec8cFjT/K6TMZ0sPL3o3d84Ft2AYZi2jWJgRMjw4iaK0rBfA89L5gw427H4n1RZQBu6Q==}
dependencies:
'@babel/parser': 7.20.7
'@vue/compiler-core': 3.2.45
'@vue/compiler-dom': 3.2.45
'@vue/compiler-ssr': 3.2.45
'@vue/reactivity-transform': 3.2.45
'@vue/shared': 3.2.45
estree-walker: 2.0.2
magic-string: 0.25.9
postcss: 8.4.21
source-map: 0.6.1
/@vue/compiler-ssr/3.2.45:
resolution: {integrity: sha512-6BRaggEGqhWht3lt24CrIbQSRD5O07MTmd+LjAn5fJj568+R9eUD2F7wMQJjX859seSlrYog7sUtrZSd7feqrQ==}
dependencies:
'@vue/compiler-dom': 3.2.45
'@vue/shared': 3.2.45
/@vue/devtools-api/6.4.5:
resolution: {integrity: sha512-JD5fcdIuFxU4fQyXUu3w2KpAJHzTVdN+p4iOX2lMWSHMOoQdMAcpFLZzm9Z/2nmsoZ1a96QEhZ26e50xLBsgOQ==}
dev: false
/@vue/reactivity-transform/3.2.45:
resolution: {integrity: sha512-BHVmzYAvM7vcU5WmuYqXpwaBHjsS8T63jlKGWVtHxAHIoMIlmaMyurUSEs1Zcg46M4AYT5MtB1U274/2aNzjJQ==}
dependencies:
'@babel/parser': 7.20.7
'@vue/compiler-core': 3.2.45
'@vue/shared': 3.2.45
estree-walker: 2.0.2
magic-string: 0.25.9
/@vue/reactivity/3.2.45:
resolution: {integrity: sha512-PRvhCcQcyEVohW0P8iQ7HDcIOXRjZfAsOds3N99X/Dzewy8TVhTCT4uXpAHfoKjVTJRA0O0K+6QNkDIZAxNi3A==}
dependencies:
'@vue/shared': 3.2.45
/@vue/runtime-core/3.2.45:
resolution: {integrity: sha512-gzJiTA3f74cgARptqzYswmoQx0fIA+gGYBfokYVhF8YSXjWTUA2SngRzZRku2HbGbjzB6LBYSbKGIaK8IW+s0A==}
dependencies:
'@vue/reactivity': 3.2.45
'@vue/shared': 3.2.45
/@vue/runtime-dom/3.2.45:
resolution: {integrity: sha512-cy88YpfP5Ue2bDBbj75Cb4bIEZUMM/mAkDMfqDTpUYVgTf/kuQ2VQ8LebuZ8k6EudgH8pYhsGWHlY0lcxlvTwA==}
dependencies:
'@vue/runtime-core': 3.2.45
'@vue/shared': 3.2.45
csstype: 2.6.21
/@vue/server-renderer/3.2.45_vue@3.2.45:
resolution: {integrity: sha512-ebiMq7q24WBU1D6uhPK//2OTR1iRIyxjF5iVq/1a5I1SDMDyDu4Ts6fJaMnjrvD3MqnaiFkKQj+LKAgz5WIK3g==}
peerDependencies:
vue: 3.2.45
dependencies:
'@vue/compiler-ssr': 3.2.45
'@vue/shared': 3.2.45
vue: 3.2.45
/@vue/shared/3.2.45:
resolution: {integrity: sha512-Ewzq5Yhimg7pSztDV+RH1UDKBzmtqieXQlpTVm2AwraoRL/Rks96mvd8Vgi7Lj+h+TH8dv7mXD3FRZR3TUvbSg==}
/@vueuse/core/9.11.0_vue@3.2.45:
resolution: {integrity: sha512-7yZJ8LNOssA8ZmeSjd4F+wbFBA4csiP4TiaXgruqg1H4PAtzSkv93PPwFLvQkSnfo3Bar+e+6QoRvWjhz7l2Xg==}
dependencies:
'@types/web-bluetooth': 0.0.16
'@vueuse/metadata': 9.11.0
'@vueuse/shared': 9.11.0_vue@3.2.45
vue-demi: 0.13.11_vue@3.2.45
transitivePeerDependencies:
- '@vue/composition-api'
- vue
dev: false
/@vueuse/metadata/9.11.0:
resolution: {integrity: sha512-HhtG2SWkcfZBLbamHdvLn7jKOCFpw/ifXjVTd5ilFkj98WVUk/3UTQ03wF1XIkuhSO4+b45hD2lfG9/GdKCF7w==}
dev: false
/@vueuse/shared/9.11.0_vue@3.2.45:
resolution: {integrity: sha512-8lO7wD5abYxupKy2KynH1pSgP715ky6iCrWYb8aX2AuAVi9uHXj7qE1dw6BnmArSaLHci4x9iuzWPCpAzUkC/A==}
dependencies:
vue-demi: 0.13.11_vue@3.2.45
transitivePeerDependencies:
- '@vue/composition-api'
- vue
dev: false
/ace-builds/1.14.0:
resolution: {integrity: sha512-3q8LvawomApRCt4cC0OzxVjDsZ609lDbm8l0Xl9uqG06dKEq4RT0YXLUyk7J2SxmqIp5YXzZNw767Dr8GKUruw==}
dev: false
/async-validator/4.2.5:
resolution: {integrity: sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==}
dev: false
/balanced-match/1.0.2:
resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
dev: true
/brace-expansion/2.0.1:
resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==}
dependencies:
balanced-match: 1.0.2
dev: true
/csstype/2.6.21:
resolution: {integrity: sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==}
/dayjs/1.11.7:
resolution: {integrity: sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ==}
dev: false
/de-indent/1.0.2:
resolution: {integrity: sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==}
dev: true
/echarts/5.4.1:
resolution: {integrity: sha512-9ltS3M2JB0w2EhcYjCdmtrJ+6haZcW6acBolMGIuf01Hql1yrIV01L1aRj7jsaaIULJslEP9Z3vKlEmnJaWJVQ==}
dependencies:
tslib: 2.3.0
zrender: 5.4.1
dev: false
/element-plus/2.2.28_vue@3.2.45:
resolution: {integrity: sha512-BsxF7iEaBydmRfw1Tt++EO9jRBjbtJr7ZRIrnEwz4J3Cwa1IzHCNCcx3ZwcYTlJq9CYFxv94JnbNr1EbkTou3A==}
peerDependencies:
vue: ^3.2.0
dependencies:
'@ctrl/tinycolor': 3.5.0
'@element-plus/icons-vue': 2.0.10_vue@3.2.45
'@floating-ui/dom': 1.1.0
'@popperjs/core': /@sxzz/popperjs-es/2.11.7
'@types/lodash': 4.14.191
'@types/lodash-es': 4.17.6
'@vueuse/core': 9.11.0_vue@3.2.45
async-validator: 4.2.5
dayjs: 1.11.7
escape-html: 1.0.3
lodash: 4.17.21
lodash-es: 4.17.21
lodash-unified: 1.0.3_3ib2ivapxullxkx3xftsimdk7u
memoize-one: 6.0.0
normalize-wheel-es: 1.2.0
vue: 3.2.45
transitivePeerDependencies:
- '@vue/composition-api'
dev: false
/esbuild/0.16.17:
resolution: {integrity: sha512-G8LEkV0XzDMNwXKgM0Jwu3nY3lSTwSGY6XbxM9cr9+s0T/qSV1q1JVPBGzm3dcjhCic9+emZDmMffkwgPeOeLg==}
engines: {node: '>=12'}
hasBin: true
requiresBuild: true
optionalDependencies:
'@esbuild/android-arm': 0.16.17
'@esbuild/android-arm64': 0.16.17
'@esbuild/android-x64': 0.16.17
'@esbuild/darwin-arm64': 0.16.17
'@esbuild/darwin-x64': 0.16.17
'@esbuild/freebsd-arm64': 0.16.17
'@esbuild/freebsd-x64': 0.16.17
'@esbuild/linux-arm': 0.16.17
'@esbuild/linux-arm64': 0.16.17
'@esbuild/linux-ia32': 0.16.17
'@esbuild/linux-loong64': 0.16.17
'@esbuild/linux-mips64el': 0.16.17
'@esbuild/linux-ppc64': 0.16.17
'@esbuild/linux-riscv64': 0.16.17
'@esbuild/linux-s390x': 0.16.17
'@esbuild/linux-x64': 0.16.17
'@esbuild/netbsd-x64': 0.16.17
'@esbuild/openbsd-x64': 0.16.17
'@esbuild/sunos-x64': 0.16.17
'@esbuild/win32-arm64': 0.16.17
'@esbuild/win32-ia32': 0.16.17
'@esbuild/win32-x64': 0.16.17
dev: true
/escape-html/1.0.3:
resolution: {integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==}
dev: false
/estree-walker/2.0.2:
resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
/fsevents/2.3.2:
resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
os: [darwin]
requiresBuild: true
dev: true
optional: true
/function-bind/1.1.1:
resolution: {integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==}
dev: true
/has/1.0.3:
resolution: {integrity: sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==}
engines: {node: '>= 0.4.0'}
dependencies:
function-bind: 1.1.1
dev: true
/he/1.2.0:
resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
hasBin: true
dev: true
/is-core-module/2.11.0:
resolution: {integrity: sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==}
dependencies:
has: 1.0.3
dev: true
/lodash-es/4.17.21:
resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==}
dev: false
/lodash-unified/1.0.3_3ib2ivapxullxkx3xftsimdk7u:
resolution: {integrity: sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ==}
peerDependencies:
'@types/lodash-es': '*'
lodash: '*'
lodash-es: '*'
dependencies:
'@types/lodash-es': 4.17.6
lodash: 4.17.21
lodash-es: 4.17.21
dev: false
/lodash/4.17.21:
resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
dev: false
/magic-string/0.25.9:
resolution: {integrity: sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==}
dependencies:
sourcemap-codec: 1.4.8
/memoize-one/6.0.0:
resolution: {integrity: sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==}
dev: false
/minimatch/5.1.6:
resolution: {integrity: sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==}
engines: {node: '>=10'}
dependencies:
brace-expansion: 2.0.1
dev: true
/muggle-string/0.1.0:
resolution: {integrity: sha512-Tr1knR3d2mKvvWthlk7202rywKbiOm4rVFLsfAaSIhJ6dt9o47W4S+JMtWhd/PW9Wrdew2/S2fSvhz3E2gkfEg==}
dev: true
/nanoid/3.3.4:
resolution: {integrity: sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==}
engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
hasBin: true
/normalize-wheel-es/1.2.0:
resolution: {integrity: sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw==}
dev: false
/path-parse/1.0.7:
resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
dev: true
/picocolors/1.0.0:
resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
/pinia/2.0.29_prq2uz4lho2pwp6irk4cfkrxwu:
resolution: {integrity: sha512-5z/KpFecq/cIgfeTnulJXldiLcTITRkTe3N58RKYSj0Pc1EdR6oyCdnf5A9jLoVwBqX5LtHhd0kGlpzWvk9oiQ==}
peerDependencies:
'@vue/composition-api': ^1.4.0
typescript: '>=4.4.4'
vue: ^2.6.14 || ^3.2.0
peerDependenciesMeta:
'@vue/composition-api':
optional: true
typescript:
optional: true
dependencies:
'@vue/devtools-api': 6.4.5
typescript: 4.9.4
vue: 3.2.45
vue-demi: 0.13.11_vue@3.2.45
dev: false
/postcss/8.4.21:
resolution: {integrity: sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==}
engines: {node: ^10 || ^12 || >=14}
dependencies:
nanoid: 3.3.4
picocolors: 1.0.0
source-map-js: 1.0.2
/resize-detector/0.3.0:
resolution: {integrity: sha512-R/tCuvuOHQ8o2boRP6vgx8hXCCy87H1eY9V5imBYeVNyNVpuL9ciReSccLj2gDcax9+2weXy3bc8Vv+NRXeEvQ==}
dev: false
/resize-observer-polyfill/1.5.1:
resolution: {integrity: sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==}
dev: false
/resolve/1.22.1:
resolution: {integrity: sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==}
hasBin: true
dependencies:
is-core-module: 2.11.0
path-parse: 1.0.7
supports-preserve-symlinks-flag: 1.0.0
dev: true
/rollup/3.10.0:
resolution: {integrity: sha512-JmRYz44NjC1MjVF2VKxc0M1a97vn+cDxeqWmnwyAF4FvpjK8YFdHpaqvQB+3IxCvX05vJxKZkoMDU8TShhmJVA==}
engines: {node: '>=14.18.0', npm: '>=8.0.0'}
hasBin: true
optionalDependencies:
fsevents: 2.3.2
dev: true
/source-map-js/1.0.2:
resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
engines: {node: '>=0.10.0'}
/source-map/0.6.1:
resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
engines: {node: '>=0.10.0'}
/sourcemap-codec/1.4.8:
resolution: {integrity: sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==}
deprecated: Please use @jridgewell/sourcemap-codec instead
/supports-preserve-symlinks-flag/1.0.0:
resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
engines: {node: '>= 0.4'}
dev: true
/to-fast-properties/2.0.0:
resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
engines: {node: '>=4'}
/tslib/2.3.0:
resolution: {integrity: sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==}
dev: false
/typescript/4.9.4:
resolution: {integrity: sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==}
engines: {node: '>=4.2.0'}
hasBin: true
/vite/4.0.4:
resolution: {integrity: sha512-xevPU7M8FU0i/80DMR+YhgrzR5KS2ORy1B4xcX/cXLsvnUWvfHuqMmVU6N0YiJ4JWGRJJsLCgjEzKjG9/GKoSw==}
engines: {node: ^14.18.0 || >=16.0.0}
hasBin: true
peerDependencies:
'@types/node': '>= 14'
less: '*'
sass: '*'
stylus: '*'
sugarss: '*'
terser: ^5.4.0
peerDependenciesMeta:
'@types/node':
optional: true
less:
optional: true
sass:
optional: true
stylus:
optional: true
sugarss:
optional: true
terser:
optional: true
dependencies:
esbuild: 0.16.17
postcss: 8.4.21
resolve: 1.22.1
rollup: 3.10.0
optionalDependencies:
fsevents: 2.3.2
dev: true
/vue-demi/0.13.11_vue@3.2.45:
resolution: {integrity: sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==}
engines: {node: '>=12'}
hasBin: true
requiresBuild: true
peerDependencies:
'@vue/composition-api': ^1.0.0-rc.1
vue: ^3.0.0-0 || ^2.6.0
peerDependenciesMeta:
'@vue/composition-api':
optional: true
dependencies:
vue: 3.2.45
dev: false
/vue-echarts/6.5.1_echarts@5.4.1+vue@3.2.45:
resolution: {integrity: sha512-vlCX65ITq83xkOljip3juL8LyMd4cHOE6Zmp+9u1nPxPrar0irEtTwV80lkFm5yQM4Ef9X9fNdMa6gmsj75xYw==}
requiresBuild: true
peerDependencies:
'@vue/composition-api': ^1.0.5
echarts: ^5.4.1
vue: ^2.6.12 || ^3.1.1
peerDependenciesMeta:
'@vue/composition-api':
optional: true
dependencies:
echarts: 5.4.1
resize-detector: 0.3.0
vue: 3.2.45
vue-demi: 0.13.11_vue@3.2.45
dev: false
/vue-router/4.1.6_vue@3.2.45:
resolution: {integrity: sha512-DYWYwsG6xNPmLq/FmZn8Ip+qrhFEzA14EI12MsMgVxvHFDYvlr4NXpVF5hrRH1wVcDP8fGi5F4rxuJSl8/r+EQ==}
peerDependencies:
vue: ^3.2.0
dependencies:
'@vue/devtools-api': 6.4.5
vue: 3.2.45
dev: false
/vue-template-compiler/2.7.14:
resolution: {integrity: sha512-zyA5Y3ArvVG0NacJDkkzJuPQDF8RFeRlzV2vLeSnhSpieO6LK2OVbdLPi5MPPs09Ii+gMO8nY4S3iKQxBxDmWQ==}
dependencies:
de-indent: 1.0.2
he: 1.2.0
dev: true
/vue-tsc/1.0.24_typescript@4.9.4:
resolution: {integrity: sha512-mmU1s5SAqE1nByQAiQnao9oU4vX+mSdsgI8H57SfKH6UVzq/jP9+Dbi2GaV+0b4Cn361d2ln8m6xeU60ApiEXg==}
hasBin: true
peerDependencies:
typescript: '*'
dependencies:
'@volar/vue-language-core': 1.0.24
'@volar/vue-typescript': 1.0.24
typescript: 4.9.4
dev: true
/vue/3.2.45:
resolution: {integrity: sha512-9Nx/Mg2b2xWlXykmCwiTUCWHbWIj53bnkizBxKai1g61f2Xit700A1ljowpTIM11e3uipOeiPcSqnmBg6gyiaA==}
dependencies:
'@vue/compiler-dom': 3.2.45
'@vue/compiler-sfc': 3.2.45
'@vue/runtime-dom': 3.2.45
'@vue/server-renderer': 3.2.45_vue@3.2.45
'@vue/shared': 3.2.45
/vue3-ace-editor/2.2.2:
resolution: {integrity: sha512-fZ6OWosbU+odLrtrcGC/536QjCigujYJB0Hf6/tBp+ef/ohTadwQAqyBlVzOmvrmzZyubphpV9zkaZcx5Fuivw==}
dependencies:
ace-builds: 1.14.0
resize-observer-polyfill: 1.5.1
vue: 3.2.45
dev: false
/webtopo-svg-edit/0.0.2_typescript@4.9.4:
resolution: {integrity: sha512-u+6a6vdOONV9Gb0Xj11OdGcAJxMKUD3hLplfZFbIivESlhCOoHBwTu2UCTRbbLf821KXyANgZsRpaiU7pbNW8w==}
requiresBuild: true
dependencies:
ace-builds: 1.14.0
echarts: 5.4.1
element-plus: 2.2.28_vue@3.2.45
pinia: 2.0.29_prq2uz4lho2pwp6irk4cfkrxwu
vue: 3.2.45
vue-echarts: 6.5.1_echarts@5.4.1+vue@3.2.45
vue-router: 4.1.6_vue@3.2.45
vue3-ace-editor: 2.2.2
transitivePeerDependencies:
- '@vue/composition-api'
- typescript
dev: false
/zrender/5.4.1:
resolution: {integrity: sha512-M4Z05BHWtajY2241EmMPHglDQAJ1UyHQcYsxDNzD9XLSkPDqMq4bB28v9Pb4mvHnVQ0GxyTklZ/69xCFP6RXBA==}
dependencies:
tslib: 2.3.0
dev: false

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

Before

Width:  |  Height:  |  Size: 1.5 KiB

@ -1,277 +0,0 @@
<script setup lang="ts">
import { WebtopoSvgEdit } from 'webtopo-svg-edit';
import 'webtopo-svg-edit/dist/style.css';
import { ref } from 'vue';
const setCustomToolBar = ref({
测试注入组件: [
{
groupType: 'element-ui',
title: 'element-ui',
list: [
{
name: 'el-button',
tag: 'el-button',
title: '按钮',
type: 'Vue',
config: {
can_zoom: true,
have_anchor: true,
actual_rect: true
},
display: true,
props: {
size: {
title: '尺寸',
type: 'Select',
val: 'default',
options: [
{
label: '大',
value: 'large'
},
{
label: '默认',
value: 'default'
},
{
label: '小',
value: 'small'
}
]
},
type: {
title: '类型',
type: 'Select',
val: 'primary',
options: [
{
label: '主要按钮',
value: 'primary'
},
{
label: '成功按钮',
value: 'success'
},
{
label: '警告按钮',
value: 'warning'
},
{
label: '危险按钮',
value: 'danger'
},
{
label: '信息按钮',
value: 'info'
}
]
},
plain: {
title: '朴素按钮',
type: 'Switch',
val: false
},
text: {
title: '文字按钮',
type: 'Switch',
val: false
}
},
tag_slot: '按钮'
}
]
},
{
groupType: 'custom-vue',
title: '自定义',
list: [
{
name: 'hello-world',
title: '自带组件',
tag: 'hello-world',
type: 'Vue',
config: {
can_zoom: true,
have_anchor: true,
actual_rect: true
},
display: true,
props: {
msg: {
title: 'msg',
type: 'Input',
val: '你好,咬轮猫'
}
}
}
]
}
]
});
const import_model = ref(
JSON.stringify({
layout_center: {
x: 0,
y: 0
},
config: {
background_color: '#fff',
scale: 1,
position_center: {
x: -295,
y: -95
},
svg_position_center: {
x: 50,
y: 50
}
},
done_json: [
{
id: 'el-buttonAfTY1bUEts',
x: 398,
y: 172,
client: {
x: 398,
y: 172
},
scale_x: 1,
scale_y: 1,
rotate: 0,
actual_bound: {
x: 20,
y: 34,
width: 60,
height: 32
},
point_coordinate: {
tl: {
x: 368,
y: 156
},
tc: {
x: 398,
y: 156
},
tr: {
x: 428,
y: 156
},
l: {
x: 368,
y: 172
},
r: {
x: 428,
y: 172
},
bl: {
x: 368,
y: 188
},
bc: {
x: 398,
y: 188
},
br: {
x: 428,
y: 188
}
},
name: 'el-button',
tag: 'el-button',
title: '按钮',
type: 'Vue',
config: {
can_zoom: true,
have_anchor: true,
actual_rect: true
},
display: true,
props: {
size: {
title: '尺寸',
type: 'Select',
val: 'default',
options: [
{
label: '大',
value: 'large'
},
{
label: '默认',
value: 'default'
},
{
label: '小',
value: 'small'
}
]
},
type: {
title: '类型',
type: 'Select',
val: 'primary',
options: [
{
label: '主要按钮',
value: 'primary'
},
{
label: '成功按钮',
value: 'success'
},
{
label: '警告按钮',
value: 'warning'
},
{
label: '危险按钮',
value: 'danger'
},
{
label: '信息按钮',
value: 'info'
}
]
},
plain: {
title: '朴素按钮',
type: 'Switch',
val: false
},
text: {
title: '文字按钮',
type: 'Switch',
val: false
}
},
tag_slot: '按钮'
}
]
})
);
const onReturn = () => {
console.log('点击了返回按钮');
};
const onPreview = (data_model: any) => {
console.log('点击了预览按钮,可以在此处跳转到预览页', data_model);
};
const onSave = (data_model: any) => {
console.log('点击了保存按钮,可以在此处将图存到数据库', data_model);
};
</script>
<template>
<div>
<webtopo-svg-edit
@on-return="onReturn"
@on-preview="onPreview"
@on-save="onSave"
:custom-tool-bar="setCustomToolBar"
:data-model="import_model"
></webtopo-svg-edit>
</div>
</template>
<style scoped></style>

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

Before

Width:  |  Height:  |  Size: 496 B

@ -1,27 +0,0 @@
<script setup lang="ts">
import { ref } from 'vue';
defineProps<{ msg: string }>();
const count = ref(0);
</script>
<template>
<div style="width: 100%; height: 100%">
<h1>{{ msg }}</h1>
<div class="card">
<button type="button" @click="count++">count is {{ count }}</button>
<p>
Edit
<code>components/HelloWorld.vue</code> to test HMR
</p>
</div>
</div>
</template>
<style scoped>
.read-the-docs {
color: #888;
}
</style>

@ -1,9 +0,0 @@
import { createApp } from 'vue';
import App from './App.vue';
import { createPinia } from 'pinia';
import HelloWorld from './components/HelloWorld.vue';
const app = createApp(App);
app.use(createPinia());
app.component('HelloWorld', HelloWorld);
app.mount('#app');

@ -1,81 +0,0 @@
:root {
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 24px;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
}
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
}
body {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
}
h1 {
font-size: 3.2em;
line-height: 1.1;
}
button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}
.card {
padding: 2em;
}
#app {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
}

@ -1 +0,0 @@
/// <reference types="vite/client" />

@ -1,18 +0,0 @@
{
"compilerOptions": {
"target": "ESNext",
"useDefineForClassFields": true,
"module": "ESNext",
"moduleResolution": "Node",
"strict": true,
"jsx": "preserve",
"resolveJsonModule": true,
"isolatedModules": true,
"esModuleInterop": true,
"lib": ["ESNext", "DOM"],
"skipLibCheck": true,
"noEmit": true
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
"references": [{ "path": "./tsconfig.node.json" }]
}

@ -1,9 +0,0 @@
{
"compilerOptions": {
"composite": true,
"module": "ESNext",
"moduleResolution": "Node",
"allowSyntheticDefaultImports": true
},
"include": ["vite.config.ts"]
}

@ -1,7 +0,0 @@
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()]
});

@ -4,7 +4,7 @@
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>webtopo-svg-editor</title>
<title>vue-webtopo-svgeditor</title>
</head>
<body>
<div id="app"></div>

1587
package-lock.json generated

File diff suppressed because it is too large Load Diff

@ -1,17 +1,15 @@
{
"name": "webtopo-svg-edit",
"version": "0.0.8",
"description": "基于vue3.2+ts实现的svg可视化web组态编辑器。",
"author": "咬轮猫 <10928033@qq.com>",
"name": "vue-webtopo-svgeditor",
"version": "0.0.4",
"files": [
"dist"
],
"module": "./dist/webtopo-svg-edit.es.js",
"main": "./dist/webtopo-svg-edit.umd.cjs",
"module": "./dist/vue-webtopo-svgeditor.es.ts",
"main": "./dist/vue-webtopo-svgeditor.umd.ts",
"exports": {
".": {
"import": "./dist/webtopo-svg-edit.es.js",
"require": "./dist/webtopo-svg-edit.umd.cjs"
"import": "./dist/vue-webtopo-svgeditor.es.ts",
"require": "./dist/vue-webtopo-svgeditor.umd.ts"
},
"./dist/style.css": {
"import": "./dist/style.css",
@ -19,51 +17,23 @@
}
},
"scripts": {
"dev": "vite --port 3001",
"dev": "vite",
"build": "vue-tsc --noEmit && vite build",
"preview": "vite preview",
"lint:eslint": "eslint --fix --ext .js,.ts,.vue,.tsx ./src",
"preinstall": "npx only-allow pnpm",
"postinstall": "husky install",
"lib": "vue-tsc --noEmit --skipLibCheck && vite build --mode lib"
"serve": "vite preview"
},
"dependencies": {
"ace-builds": "^1.14.0",
"animate.css": "^4.1.1",
"echarts": "^5.4.1",
"element-plus": "^2.2.9",
"pinia": "^2.0.16",
"vue": "^3.2.25",
"vue-echarts": "^6.5.1",
"vue-router": "4",
"vue3-ace-editor": "^2.2.2"
"axios": "^0.22.0",
"vue": "^3.2.6"
},
"devDependencies": {
"@commitlint/cli": "^17.0.3",
"@commitlint/config-conventional": "^17.0.3",
"@typescript-eslint/eslint-plugin": "^5.30.5",
"@typescript-eslint/parser": "^5.30.5",
"@vitejs/plugin-vue": "^2.3.3",
"eslint": "^8.19.0",
"eslint-config-prettier": "^8.5.0",
"eslint-define-config": "^1.5.1",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-vue": "^9.2.0",
"husky": "^8.0.1",
"less": "^4.1.3",
"prettier": "^2.7.1",
"typescript": "^4.5.4",
"vite": "^2.9.9",
"vite-plugin-eslint": "^1.6.1",
"vite-plugin-svg-icons": "^2.0.1",
"vite-plugin-windicss": "^1.8.6",
"vue-eslint-parser": "^9.0.3",
"vue-tsc": "^0.34.7",
"windicss": "^3.5.6"
},
"lint-staged": {
"*.{js,jsx,vue,ts,tsx}": [
"pnpm run lint:eslint"
]
"@vicons/fluent": "^0.11.0",
"@vitejs/plugin-vue": "^1.6.1",
"@vue/compiler-sfc": "^3.2.6",
"naive-ui": "^2.18.2",
"typescript": "^4.3.2",
"vite": "^2.5.4",
"echarts": "^5.2.1",
"vue-echarts": "^6.0.0",
"vue-tsc": "^0.2.2"
}
}
}

File diff suppressed because it is too large Load Diff

@ -1,20 +0,0 @@
module.exports = {
printWidth: 100, // 最大行长规则通常设置为 100 或 120
tabWidth: 2, // 指定每个标签缩进级别的空格数。
useTabs: false, // 使用制表符而不是空格缩进行。
semi: true, // true默认: 在每条语句的末尾添加一个分号。false仅在可能导致 ASI 失败的行的开头添加分号。
vueIndentScriptAndStyle: true, // Vue 文件脚本和样式标签缩进
singleQuote: true, // 使用单引号而不是双引号
quoteProps: 'as-needed', // 引用对象中的属性时,仅在需要时在对象属性周围添加引号。
bracketSpacing: true, // 在对象文字中的括号之间打印空格。
trailingComma: 'none', // "none":没有尾随逗号。"es5": 在 ES5 中有效的尾随逗号对象、数组等TypeScript 中的类型参数中没有尾随逗号。"all"- 尽可能使用尾随逗号。
bracketSameLine: false, // 将>多行 HTMLHTML、JSX、Vue、Angular元素放在最后一行的末尾而不是单独放在下一行不适用于自闭合元素
jsxSingleQuote: false, // 在 JSX 中使用单引号而不是双引号。
arrowParens: 'always', // 在唯一的箭头函数参数周围始终包含括号。
insertPragma: false, // 插入编译指示
requirePragma: false, // 需要编译指示
proseWrap: 'never', // 如果散文超过打印宽度,则换行
htmlWhitespaceSensitivity: 'strict', // 所有标签周围的空格(或缺少空格)被认为是重要的。
endOfLine: 'auto', // 确保在文本文件中仅使用 ( \n)换行,常见于 Linux 和 macOS 以及 git repos 内部。
rangeStart: 0 // 格式化文件时,回到包含所选语句的第一行的开头。
};

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

File diff suppressed because it is too large Load Diff

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.4 KiB

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 153 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 589 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 49 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 84 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 476 KiB

@ -1,9 +1,159 @@
<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import 'element-plus/dist/index.css';
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
import SvgEditor from './components/SvgEditor.vue';
import SvgPrview from './components/SvgPrview.vue';
import axios from "axios";
import { ref } from '@vue/reactivity';
const interval = ref<any>(null);
const component_infos = ref([]);
const ref_svgedit = ref();
//
const prview_data = ref<any>([]);
//
axios.get("InterfaceReturn.json").then(res => {
component_infos.value = res.data;
});
// 0 1
const displaymode = ref(0);
//svg
const savesvg_data = ref([]);
//svgdom
const savesvg_dom_data: any = ref(null);
//
const saveSvgInfo = (svg_data: any, svg_dom: any) => {
savesvg_data.value = svg_data;
savesvg_dom_data.value = svg_dom;
}
const downloadSvgData = () => {
if (savesvg_data.value == null) {
alert('请先保存绘制数据');
return;
}
let datastr = 'data:text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(savesvg_data.value))
let download = document.createElement('a')
download.setAttribute('href', datastr)
download.setAttribute('download', `${new Date().getTime()}.json`)
download.click()
download.remove();
}
const downloadSvgDomData = () => {
if (savesvg_dom_data.value == null) {
alert('请先保存绘制数据');
return;
}
console.log(savesvg_dom_data.value);
let datastr = 'data:text;charset=utf-8,' + encodeURIComponent(savesvg_dom_data.value.outerHTML);
let download = document.createElement('a')
download.setAttribute('href', datastr)
download.setAttribute('download', `${new Date().getTime()}.html`)
download.click()
download.remove()
}
const switchMode = () => {
displaymode.value = displaymode.value == 0 ? 1 : 0;
if (displaymode.value == 1) {
prview_data.value = [];
setTimeout(() => {
prview_data.value = savesvg_data.value;
}, 500);
}
}
const loadExampleData = () => {
axios.get("example.json").then(res => {
clearInterval(interval.value)
prview_data.value = res.data;
let temp: Array<any> = [...res.data];
//
//
let anyCircuitBreakerList = temp.filter(f => f.type == 'CircuitBreakerSvg');
//线
const anyWireBreakList = temp.filter(f => f.type == 'WireBreakSvg');
//
const anyEchartsPieList = temp.filter(f => f.type == 'EchartsPieSvg');
//
const anyEchartsBasicBarSvgList = temp.filter(f => f.type == 'EchartsBasicBarSvg');
interval.value = setInterval(function () {
anyCircuitBreakerList.forEach(anyCircuitBreaker => {
//
let random = Math.round(Math.random() * 10);
if (random < 5) {
(anyCircuitBreaker as any).extend_attr.switch.val.selectval = '{\"fill\":\"#FF0000\"}';
}
else {
(anyCircuitBreaker as any).extend_attr.switch.val.selectval = '{\"fill\":\"#00FF00\"}';
}
});
anyWireBreakList.forEach(anyWireBreak => {
//
let random = Math.round(Math.random() * 10);
if (random < 5) {
(anyWireBreak as any).extend_attr.switch.val.selectval = '{\"x2\":-10}';
}
else {
(anyWireBreak as any).extend_attr.switch.val.selectval = '{\"x2\":0}';
}
});
anyEchartsPieList.forEach(anyEchartsPie => {
const temp_val = JSON.parse(anyEchartsPie.extend_attr.echarts_option.val);
(temp_val.series[0].data as Array<any>).forEach(f => {
//
let random = Math.round(Math.random() * 100);
f.value = random;
});
anyEchartsPie.extend_attr.echarts_option.val = JSON.stringify(temp_val);
})
anyEchartsBasicBarSvgList.forEach(anyEchartsBasicBar => {
let data_arr = [Math.round(Math.random() * 300), Math.round(Math.random() * 300), Math.round(Math.random() * 300), Math.round(Math.random() * 300), Math.round(Math.random() * 300), Math.round(Math.random() * 300), Math.round(Math.random() * 300)];
const temp_val = JSON.parse(anyEchartsBasicBar.extend_attr.echarts_option.val);
temp_val.series[0].data = data_arr;
anyEchartsBasicBar.extend_attr.echarts_option.val = JSON.stringify(temp_val);
})
const tempa = JSON.stringify(temp)
prview_data.value = JSON.parse(tempa);
}, 2000)
});
}
const loadExample = (file_name: string) => {
axios.get(file_name).then(res => {
console.log(ref_svgedit.value);
(ref_svgedit.value as any).setSvgLists(res.data);
})
}
</script>
<template>
<router-view></router-view>
<div style="text-align: center;">
<span>此处为测试演示用 组件不包含此元素</span>
<button class="btn" @click="loadExample('example.json')" v-if="displaymode == 0"></button>
<button class="btn" @click="loadExample('example2.json')" v-if="displaymode == 0"></button>
<button class="btn" @click="switchMode">{{ displaymode == 0 ? '' : '' }}</button>
<button class="btn" @click="downloadSvgData" v-if="displaymode == 0"></button>
<button class="btn" @click="downloadSvgDomData" v-if="displaymode == 0">svg</button>
<button class="btn" @click="loadExampleData" v-if="displaymode == 1"></button>
</div>
<div style="width:1500px;height:650px;margin:0 auto">
<div v-show="displaymode == 0">
<svg-editor
ref="ref_svgedit"
:component_infos="component_infos"
@saveSvgInfo="saveSvgInfo"
:svgCanvas="{ width: 1920, height: 1080 }"
></svg-editor>
</div>
<div v-show="displaymode != 0">
<svg-prview
:component_infos="component_infos"
:svg_data="prview_data"
:svgCanvas="{ width: 1920, height: 1080 }"
></svg-prview>
</div>
</div>
</template>
<style>
.btn {
margin-left: 1rem;
}
</style>

@ -0,0 +1,77 @@
/**
* @description:
* @param {*} commonComponentList
* @param {*} drawComponentList
* @param {*} chartComponentList
* @return {*}
*/
export interface ILeftImgLists {
commonComponentList?: Array<IComponentInfo>,
drawComponentList?: Array<IComponentInfo>,
chartComponentList?: Array<IComponentInfo>
}
/**
* @description:
* @param {*}
* @return {*}
*/
export interface ISvgDataLists {
id: string,
type?: string,
title?: string,
svgPositionX: number,
svgPositionY: number,
angle?: number,
size?: number,
extend_attr?: any
}
export interface ISvgCanvas {
width: number,
height: number
}
/**
* @description:
* @param {*} type
* @param {*} title
* @param {*} panel_class
* @param {*} template
* @param {*} props
* @param {*} extend_attr
* @param {*} create_type
* @param {*} priview_img
* @return {*}
*/
export interface IComponentInfo {
type?: string,
title?: string,
panel_class?: string,
template?: string,//
props?: Array<string>,
extend_attr?: any,
create_type?: string,
priview_img?: string
}
/**
* @description:
* @param {*} status 1 0
* @param {*} mPositionX x
* @param {*} mPositionY y
* @return {*}
*/
export interface IMouseInfo {
status: number,
mPositionX: number
mPositionY: number
}
/**
* @description: svg
* @param {*}
* @return {*}
*/
export interface ISelectSvg {
id: string,
index: number,
sPositionX: number,
sPositionY: number,
create_type: string,
}

@ -0,0 +1,111 @@
/* 正向流动效果 */
.svg_ani_flow {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: ani_flow 10s linear infinite;
animation-fill-mode: forwards;
-webkit-animation: ani_flow 10s linear infinite;
-webkit-animation-fill-mode: forwards;
}
@keyframes ani_flow {
from {
stroke-dasharray: 10, 5;
}
to {
stroke-dasharray: 13, 5;
}
}
@-webkit-keyframes ani_flow {
from {
stroke-dasharray: 10, 5;
}
to {
stroke-dasharray: 13, 5;
}
}
/* 停止流动效果 */
.svg_ani_flow_stop {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: ani_flow_stop 10s linear infinite;
animation-fill-mode: forwards;
-webkit-animation: ani_flow_stop 10s linear infinite;
-webkit-animation-fill-mode: forwards;
}
@keyframes ani_flow_stop {
from {
stroke-dasharray: 10, 5;
}
to {
stroke-dasharray: 10, 5;
}
}
@-webkit-keyframes ani_flow_stop {
from {
stroke-dasharray: 10, 5;
}
to {
stroke-dasharray: 10, 5;
}
}
/* 反向流动效果 */
.svg_ani_flow_back {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: ani_flow_back 10s linear infinite;
animation-fill-mode: forwards;
-webkit-animation: ani_flow_back 10s linear infinite;
-webkit-animation-fill-mode: forwards;
}
@keyframes ani_flow_back {
from {
stroke-dasharray: 13, 5;
}
to {
stroke-dasharray: 10, 5;
}
}
@-webkit-keyframes ani_flow_stop {
from {
stroke-dasharray: 10, 5;
}
to {
stroke-dasharray: 10, 5;
}
}
/* 以最大40高度填充 */
.svg_ani_fill_h40 {
animation: ani_fill_h40 5s linear infinite;
animation-fill-mode: forwards;
-webkit-animation: ani_fill_h40 5s linear infinite;
-webkit-animation-fill-mode: forwards;
}
@keyframes ani_fill_h40 {
from {
height: 0px;
}
to {
height: 40px;
}
}
@-webkit-keyframes ani_flow_stop {
from {
stroke-dasharray: 10, 5;
}
to {
stroke-dasharray: 10, 5;
}
}

@ -1,12 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24" height="24" viewBox="0 0 48 48" fill="none"
xmlns="http://www.w3.org/2000/svg">
<g stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
<path d="M9 10V44H39V10H9Z" fill="none" />
<path d="M20 20V33" />
<path d="M28 20V33" />
<path d="M4 10H44" />
<path d="M16 10L19.289 4H28.7771L32 10H16Z" fill="none" />
</g>
</svg>

Before

Width:  |  Height:  |  Size: 451 B

@ -1,4 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024">
<path d="M888.3 757.4h-53.8c-4.2 0-7.7 3.5-7.7 7.7v61.8H197.1V197.1h629.8v61.8c0 4.2 3.5 7.7 7.7 7.7h53.8c4.2 0 7.7-3.4 7.7-7.7V158.7c0-17-13.7-30.7-30.7-30.7H158.7c-17 0-30.7 13.7-30.7 30.7v706.6c0 17 13.7 30.7 30.7 30.7h706.6c17 0 30.7-13.7 30.7-30.7V765.1c0-4.3-3.5-7.7-7.7-7.7zm18.6-251.7L765 393.7c-5.3-4.2-13-.4-13 6.3v76H438c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h314v76c0 6.7 7.8 10.5 13 6.3l141.9-112a8 8 0 0 0 0-12.6z" fill="currentColor"></path>
</svg>

Before

Width:  |  Height:  |  Size: 576 B

@ -1,13 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24" height="24" viewBox="0 0 48 48" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M12 4H4V12H12V4Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
<path d="M44 36H36V44H44V36Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
<path d="M12 36H4V44H12V36Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
<path d="M44 4H36V12H44V4Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
<path d="M8 36V12" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M40 36V12" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12 8H36" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12 40H36" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M16 16H25.6V22.4H32V32H22.4V25.6H16V16Z" fill="none" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.1 KiB

@ -1,4 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024">
<path d="M888.3 757.4h-53.8c-4.2 0-7.7 3.5-7.7 7.7v61.8H197.1V197.1h629.8v61.8c0 4.2 3.5 7.7 7.7 7.7h53.8c4.2 0 7.7-3.4 7.7-7.7V158.7c0-17-13.7-30.7-30.7-30.7H158.7c-17 0-30.7 13.7-30.7 30.7v706.6c0 17 13.7 30.7 30.7 30.7h706.6c17 0 30.7-13.7 30.7-30.7V765.1c0-4.3-3.5-7.7-7.7-7.7zM902 476H588v-76c0-6.7-7.8-10.5-13-6.3l-141.9 112a8 8 0 0 0 0 12.6l141.9 112c5.3 4.2 13 .4 13-6.3v-76h314c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8z" fill="currentColor"></path>
</svg>

Before

Width:  |  Height:  |  Size: 575 B

@ -1,7 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24" height="24" viewBox="0 0 48 48" fill="none"
xmlns="http://www.w3.org/2000/svg">
<rect x="6" y="22" width="36" height="22" rx="2" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
<path d="M14 22V14C14 8.47715 18.4772 4 24 4C29.5228 4 34 8.47715 34 14V22" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M24 30V36" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Before

Width:  |  Height:  |  Size: 531 B

@ -1,9 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24" height="24" viewBox="0 0 48 48" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M8 10.5H40" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M24 19.5H40" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M24 28.5H40" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8 37.5H40" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8 19L16 24L8 29V19Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
</svg>

Before

Width:  |  Height:  |  Size: 671 B

@ -1,9 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24" height="24" viewBox="0 0 48 48" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M8 10.5H40" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M24 19.5H40" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M24 28.5H40" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8 37.5H40" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M16 19L8 24L16 29V19Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
</svg>

Before

Width:  |  Height:  |  Size: 672 B

@ -1,6 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24" height="24" viewBox="0 0 48 48" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M24 36C35.0457 36 44 24 44 24C44 24 35.0457 12 24 12C12.9543 12 4 24 4 24C4 24 12.9543 36 24 36Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
<path d="M24 29C26.7614 29 29 26.7614 29 24C29 21.2386 26.7614 19 24 19C21.2386 19 19 21.2386 19 24C19 26.7614 21.2386 29 24 29Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
</svg>

Before

Width:  |  Height:  |  Size: 528 B

@ -1,8 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24" height="24" viewBox="0 0 48 48" fill="none"
xmlns="http://www.w3.org/2000/svg">
<g stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
<path d="M36.728 36.728A17.943 17.943 0 0 1 24 42c-9.941 0-18-8.059-18-18S14.059 6 24 6c4.97 0 9.47 2.015 12.728 5.272C38.386 12.93 42 17 42 17"></path>
<path d="M42 8v9h-9"></path>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 438 B

@ -1,8 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.9998 8L6 14L12.9998 21" stroke="#333" stroke-width="4" stroke-linecap="round"
stroke-linejoin="round" />
<path
d="M6 14H28.9938C35.8768 14 41.7221 19.6204 41.9904 26.5C42.2739 33.7696 36.2671 40 28.9938 40H11.9984"
stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
</svg>

Before

Width:  |  Height:  |  Size: 482 B

@ -1 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?><svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44C30.9566 44 37.0836 40.4483 40.6667 35.0593" stroke="#333" stroke-width="4" stroke-linecap="round"/><path d="M44 24H30" stroke="#333" stroke-width="4" stroke-linecap="round"/><circle cx="24" cy="24" r="6" fill="#333" stroke="#333" stroke-width="4"/></svg>

Before

Width:  |  Height:  |  Size: 481 B

@ -1,9 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<g stroke="#ffffff" stroke-width="4">
<path d="M39.3 6.00012H8.7C7.20883 6.00012 6 7.20895 6 8.70012V39.3001C6 40.7913 7.20883 42.0001 8.7 42.0001H39.3C40.7912 42.0001 42 40.7913 42 39.3001V8.70012C42 7.20895 40.7912 6.00012 39.3 6.00012Z" fill="none" stroke-linejoin="round" />
<path d="M32 6V24H15V6H32Z" fill="none" stroke-linejoin="round" />
<path d="M26 13.0001V17.0001" stroke-linecap="round" />
<path d="M10.9969 6.00012H35.9985" stroke-linecap="round" />
</g>
</svg>

Before

Width:  |  Height:  |  Size: 653 B

@ -1,6 +0,0 @@
<svg viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" width="200" height="200">
<path
d="M919.6 405.6l-57.2-8c-12.7-1.8-23-10.4-28-22.1-11.3-26.7-25.7-51.7-42.9-74.5-7.7-10.2-10-23.5-5.2-35.3l21.7-53.5c6.7-16.4 0.2-35.3-15.2-44.1L669.1 96.6c-15.4-8.9-34.9-5.1-45.8 8.9l-35.4 45.3c-7.9 10.2-20.7 14.9-33.5 13.3-14-1.8-28.3-2.8-42.8-2.8-14.5 0-28.8 1-42.8 2.8-12.8 1.6-25.6-3.1-33.5-13.3l-35.4-45.3c-10.9-14-30.4-17.8-45.8-8.9L230.4 168c-15.4 8.9-21.8 27.7-15.2 44.1l21.7 53.5c4.8 11.9 2.5 25.1-5.2 35.3-17.2 22.8-31.7 47.8-42.9 74.5-5 11.8-15.3 20.4-28 22.1l-57.2 8C86 408 72.9 423 72.9 440.8v142.9c0 17.7 13.1 32.7 30.6 35.2l57.2 8c12.7 1.8 23 10.4 28 22.1 11.3 26.7 25.7 51.7 42.9 74.5 7.7 10.2 10 23.5 5.2 35.3l-21.7 53.5c-6.7 16.4-0.2 35.3 15.2 44.1L354 927.8c15.4 8.9 34.9 5.1 45.8-8.9l35.4-45.3c7.9-10.2 20.7-14.9 33.5-13.3 14 1.8 28.3 2.8 42.8 2.8 14.5 0 28.8-1 42.8-2.8 12.8-1.6 25.6 3.1 33.5 13.3l35.4 45.3c10.9 14 30.4 17.8 45.8 8.9l123.7-71.4c15.4-8.9 21.8-27.7 15.2-44.1l-21.7-53.5c-4.8-11.8-2.5-25.1 5.2-35.3 17.2-22.8 31.7-47.8 42.9-74.5 5-11.8 15.3-20.4 28-22.1l57.2-8c17.6-2.5 30.6-17.5 30.6-35.2V440.8c0.2-17.8-12.9-32.8-30.5-35.2z m-408 245.5c-76.7 0-138.9-62.2-138.9-138.9s62.2-138.9 138.9-138.9 138.9 62.2 138.9 138.9-62.2 138.9-138.9 138.9z"
></path>
</svg>

Before

Width:  |  Height:  |  Size: 1.3 KiB

@ -1,11 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24" height="24" viewBox="0 0 48 48" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M38 20H18V28H38V20Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
<path d="M32 6H18V14H32V6Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
<path d="M44 34H18V42H44V34Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
<path d="M17 10H5" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M17 24H5" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M17 38H5" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M5 44V4" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Before

Width:  |  Height:  |  Size: 863 B

@ -1,7 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<g stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
<path d="M11.2721 36.7279C14.5294 39.9853 19.0294 42 24 42C33.9411 42 42 33.9411 42 24C42 14.0589 33.9411 6 24 6C19.0294 6 14.5294 8.01472 11.2721 11.2721C9.61407 12.9301 6 17 6 17"/>
<path d="M6 9V17H14" />
</g>
</svg>

Before

Width:  |  Height:  |  Size: 460 B

@ -1,16 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24" height="24" viewBox="0 0 48 48" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M11.2727 4H4V11.2727H11.2727V4Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
<path d="M43.9998 36.7271H36.7271V43.9998H43.9998V36.7271Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
<path d="M11.2727 24H4V31.2727H11.2727V24Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
<path d="M23.9998 36.7271H16.7271V43.9998H23.9998V36.7271Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
<path d="M31.2727 4H24V11.2727H31.2727V4Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
<path d="M43.9998 16.7271H36.7271V23.9998H43.9998V16.7271Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
<path d="M11.2729 7.63623H24.0002" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M24 40.3638H36.7273" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M11.2729 27.6366H27.6366V11.2729" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M28.8275 20.3633H36.7269M20.3633 36.7269V27.6282V36.7269Z" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7.63672 11.2725V23.9997" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M40.3633 24V36.7273" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.6 KiB

@ -1,7 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24" height="24" viewBox="0 0 48 48" fill="none"
xmlns="http://www.w3.org/2000/svg">
<rect x="7" y="22.0476" width="34" height="22" rx="2" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
<path d="M14 22V14.0047C13.9948 8.87022 17.9227 4.56718 23.0859 4.05117C28.249 3.53516 32.9673 6.97408 34 12.0059" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M24 30V36" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Before

Width:  |  Height:  |  Size: 575 B

@ -1,8 +0,0 @@
<?xml version="1.0" standalone="no"?>
<svg viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
<path d="M512 273.194667A238.805333 238.805333 0 1 1 273.194667 512 238.805333 238.805333 0 0 1 512 273.194667M512 234.666667a277.333333 277.333333 0 1 0 277.333333 277.333333 277.333333 277.333333 0 0 0-277.333333-277.333333z"></path>
<path d="M675.157333 556.928a14.677333 14.677333 0 0 0-12.8 7.445333 96 96 0 0 1-137.109333 24.661334 125.098667 125.098667 0 0 0-188.032 24.149333 14.208 14.208 0 0 0-1.28 2.133333 5.802667 5.802667 0 0 0-0.661333 1.408 14.656 14.656 0 0 0 24.149333 15.68 6.272 6.272 0 0 0 1.28-1.493333 96.832 96.832 0 0 1 13.248-16.490667 95.765333 95.765333 0 0 1 124.629333-9.301333 125.077333 125.077333 0 0 0 189.269334-26.176 5.824 5.824 0 0 0 0.682666-1.493333 14.634667 14.634667 0 0 0-13.44-20.437334z"></path>
<path d="M593.834667 444.778667l-12.8 1.557333c-0.192 13.674667-0.384 27.733333-0.384 43.2v9.621333a89.6 89.6 0 0 1-47.296 12.8 76.16 76.16 0 0 1 1.173333-152.277333 81.066667 81.066667 0 0 1 42.666667 10.666667l-0.405334 33.813333h-11.648l-8.213333-32.426667a41.088 41.088 0 0 0-18.965333-4.117333c-29.333333 0-50.837333 23.104-50.837334 68.053333 0 42.666667 20.714667 68.266667 49.642667 68.266667a65.088 65.088 0 0 0 17.792-2.304v-12.8c0-14.272-0.192-27.946667-0.597333-42.026667l-21.461334-2.133333v-6.848h61.376z"></path>
</svg>

Before

Width:  |  Height:  |  Size: 1.4 KiB

Some files were not shown because too many files have changed in this diff Show More

Loading…
Cancel
Save