|
|
# maotu-webtopo
|
|
|
|
|
|
<<<<<<< HEAD
|
|
|
#### 介绍
|
|
|
{**以下是 Gitee 平台说明，您可以替换此简介**
|
|
|
Gitee 是 OSCHINA 推出的基于 Git 的代码托管平台（同时支持 SVN）。专为开发者提供稳定、高效、安全的云端软件开发协作平台
|
|
|
无论是个人、团队、或是企业，都能够用 Gitee 实现代码托管、项目管理、协作开发。企业项目请看 [https://gitee.com/enterprises](https://gitee.com/enterprises)}
|
|
|
|
|
|
#### 软件架构
|
|
|
软件架构说明
|
|
|
|
|
|
|
|
|
#### 安装教程
|
|
|
|
|
|
1. xxxx
|
|
|
2. xxxx
|
|
|
3. xxxx
|
|
|
|
|
|
#### 使用说明
|
|
|
|
|
|
1. xxxx
|
|
|
2. xxxx
|
|
|
3. xxxx
|
|
|
|
|
|
#### 参与贡献
|
|
|
|
|
|
1. Fork 本仓库
|
|
|
2. 新建 Feat_xxx 分支
|
|
|
3. 提交代码
|
|
|
4. 新建 Pull Request
|
|
|
|
|
|
|
|
|
#### 特技
|
|
|
|
|
|
1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
|
|
|
2. Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
|
|
|
3. 你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
|
|
|
4. [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
|
|
|
5. Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
|
|
|
6. Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)
|
|
|
=======
|
|
|
基于 vue3 的 web 组态引擎库
|
|
|
|
|
|
探索将已有 svg 文件转为自由缩放图形库的解决方案，也可用作低代码大屏项目开发
|
|
|
|
|
|
## 说明
|
|
|
|
|
|
此开源版本的代码源自于 [maotu 插件版](https://www.npmjs.com/package/maotu) 0.3.1 版本，与插件版的差异请查阅插件版的 readme。
|
|
|
|
|
|
## 使用文档
|
|
|
|
|
|
请参考：[http://mt.yaolm.top](http://mt.yaolm.top)
|
|
|
|
|
|
## 声明
|
|
|
|
|
|
`maotu-webtopo` 使用了 `LGPL-3.0` 协议。这意味着：
|
|
|
* 您可以将 `maotu-webtopo` 作为库链接到您的商业项目，而无需开源您的整个项目。
|
|
|
* 如果您修改了 `maotu-webtopo` 的**核心库**代码，并分发了修改后的版本，您必须按照 LGPL-3.0 协议的要求，开源您所做的修改。
|
|
|
* 如果您仅仅是将`maotu-webtopo` 作为库链接到你的项目，而没有修改或分发它的源代码，那么你的项目无需开源。
|
|
|
|
|
|
详细的 LGPL-3.0 许可证文本请查阅 [https://www.gnu.org/licenses/lgpl-3.0.html](https://www.gnu.org/licenses/lgpl-3.0.html)。
|
|
|
|
|
|
## 如何构建插件并使用
|
|
|
|
|
|
**构建库：**
|
|
|
|
|
|
1. 使用 `pnpm run lib` 命令构建 `maotu-webtopo`，生成 `dist` 文件夹。
|
|
|
|
|
|
**使用库：**
|
|
|
|
|
|
1. **推荐使用 pnpm 安装:**
|
|
|
|
|
|
```bash
|
|
|
pnpm i maotu # 前提是你已经发布到了 npm
|
|
|
```
|
|
|
|
|
|
如果选择手动复制，请继续参考以下步骤
|
|
|
|
|
|
2. 将 `dist` 文件夹中的以下文件复制到你的项目：
|
|
|
* `dist/maotu.es.js`：库的入口文件。
|
|
|
* `dist/style.css`：库的样式文件。
|
|
|
* `dist/src` ： 库的ts类型定义。
|
|
|
* 将这些文件放到你项目中的合适位置。例如，你可以创建一个 `src/lib/maotu` 目录，并将它们复制到这里。
|
|
|
|
|
|
3. 确保你的项目可以访问到 `style.css` 文件。可以通过在入口文件或组件中引入的方式来实现。
|
|
|
|
|
|
**在项目中使用示例：**
|
|
|
|
|
|
```vue
|
|
|
<script setup lang="ts">
|
|
|
import { MtEdit } from "@/lib/maotu/maotu.es" // 替换为你的实际路径
|
|
|
import "@/lib/maotu/style.css" // 替换为你的实际路径
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
<div class="w-1/1 h-100vh">
|
|
|
<mt-edit ref="MtEditRef" />
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<style scoped></style>
|
|
|
```
|
|
|
|
|
|
## 鸣谢
|
|
|
|
|
|
maotu的部分逻辑实现参考了以下大佬的文章
|
|
|
|
|
|
[幽月之格-可拖拽、缩放、旋转组件实现细节](https://juejin.cn/user/3597257779449165/posts)
|
|
|
|
|
|
[woai3c-一个低代码（可视化拖拽）教学项目](https://github.com/woai3c/visual-drag-demo)
|
|
|
|
|
|
>>>>>>> 6a5e8b1 (首次提交)
|