feat: 0.3.1版本开源

8 months ago · 384930a892
commit 384930a892
173 changed files with 17471 additions and 0 deletions
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@ -0,0 +1,24 @@
+/* eslint-env node */
+require('@rushstack/eslint-patch/modern-module-resolution');
+
+module.exports = {
+  root: true,
+  extends: [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/eslint-config-typescript',
+    '@vue/eslint-config-prettier'
+    // '@vue/eslint-config-prettier/skip-formatting'
+  ],
+  parserOptions: {
+    ecmaVersion: 'latest'
+  },
+  rules: {
+    'vue/multi-word-component-names': [
+      'error',
+      {
+        ignores: ['index', 'main']
+      }
+    ]
+  }
+};
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,26 @@
+# 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
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/.prettierrc.json
+++ b/.prettierrc.json
@ -0,0 +1,8 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "semi": true,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "printWidth": 100,
+  "trailingComma": "none"
+}
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@ -0,0 +1,8 @@
+{
+  "recommendations": [
+    "Vue.volar",
+    "Vue.vscode-typescript-vue-plugin",
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode"
+  ]
+}
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -0,0 +1,9 @@
+{
+    "editor.codeActionsOnSave": {
+      "source.fixAll.eslint": "explicit",
+      "eslint.autoFixOnSave": "explicit"
+    },
+    "files.eol": "\n" 
+  }
+  
+  
--- a/165
+++ b/165
@ -0,0 +1,165 @@
+                   GNU LESSER GENERAL PUBLIC LICENSE
+                       Version 3, 29 June 2007
+
+ Copyright (C) 2007 Free Software Foundation, Inc. <http://fsf.org/>
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+
+  This version of the GNU Lesser General Public License incorporates
+the terms and conditions of version 3 of the GNU General Public
+License, supplemented by the additional permissions listed below.
+
+  0. Additional Definitions.
+
+  As used herein, "this License" refers to version 3 of the GNU Lesser
+General Public License, and the "GNU GPL" refers to version 3 of the GNU
+General Public License.
+
+  "The Library" refers to a covered work governed by this License,
+other than an Application or a Combined Work as defined below.
+
+  An "Application" is any work that makes use of an interface provided
+by the Library, but which is not otherwise based on the Library.
+Defining a subclass of a class defined by the Library is deemed a mode
+of using an interface provided by the Library.
+
+  A "Combined Work" is a work produced by combining or linking an
+Application with the Library.  The particular version of the Library
+with which the Combined Work was made is also called the "Linked
+Version".
+
+  The "Minimal Corresponding Source" for a Combined Work means the
+Corresponding Source for the Combined Work, excluding any source code
+for portions of the Combined Work that, considered in isolation, are
+based on the Application, and not on the Linked Version.
+
+  The "Corresponding Application Code" for a Combined Work means the
+object code and/or source code for the Application, including any data
+and utility programs needed for reproducing the Combined Work from the
+Application, but excluding the System Libraries of the Combined Work.
+
+  1. Exception to Section 3 of the GNU GPL.
+
+  You may convey a covered work under sections 3 and 4 of this License
+without being bound by section 3 of the GNU GPL.
+
+  2. Conveying Modified Versions.
+
+  If you modify a copy of the Library, and, in your modifications, a
+facility refers to a function or data to be supplied by an Application
+that uses the facility (other than as an argument passed when the
+facility is invoked), then you may convey a copy of the modified
+version:
+
+   a) under this License, provided that you make a good faith effort to
+   ensure that, in the event an Application does not supply the
+   function or data, the facility still operates, and performs
+   whatever part of its purpose remains meaningful, or
+
+   b) under the GNU GPL, with none of the additional permissions of
+   this License applicable to that copy.
+
+  3. Object Code Incorporating Material from Library Header Files.
+
+  The object code form of an Application may incorporate material from
+a header file that is part of the Library.  You may convey such object
+code under terms of your choice, provided that, if the incorporated
+material is not limited to numerical parameters, data structure
+layouts and accessors, or small macros, inline functions and templates
+(ten or fewer lines in length), you do both of the following:
+
+   a) Give prominent notice with each copy of the object code that the
+   Library is used in it and that the Library and its use are
+   covered by this License.
+
+   b) Accompany the object code with a copy of the GNU GPL and this license
+   document.
+
+  4. Combined Works.
+
+  You may convey a Combined Work under terms of your choice that,
+taken together, effectively do not restrict modification of the
+portions of the Library contained in the Combined Work and reverse
+engineering for debugging such modifications, if you also do each of
+the following:
+
+   a) Give prominent notice with each copy of the Combined Work that
+   the Library is used in it and that the Library and its use are
+   covered by this License.
+
+   b) Accompany the Combined Work with a copy of the GNU GPL and this license
+   document.
+
+   c) For a Combined Work that displays copyright notices during
+   execution, include the copyright notice for the Library among
+   these notices, as well as a reference directing the user to the
+   copies of the GNU GPL and this license document.
+
+   d) Do one of the following:
+
+       0) Convey the Minimal Corresponding Source under the terms of this
+       License, and the Corresponding Application Code in a form
+       suitable for, and under terms that permit, the user to
+       recombine or relink the Application with a modified version of
+       the Linked Version to produce a modified Combined Work, in the
+       manner specified by section 6 of the GNU GPL for conveying
+       Corresponding Source.
+
+       1) Use a suitable shared library mechanism for linking with the
+       Library.  A suitable mechanism is one that (a) uses at run time
+       a copy of the Library already present on the user's computer
+       system, and (b) will operate properly with a modified version
+       of the Library that is interface-compatible with the Linked
+       Version.
+
+   e) Provide Installation Information, but only if you would otherwise
+   be required to provide such information under section 6 of the
+   GNU GPL, and only to the extent that such information is
+   necessary to install and execute a modified version of the
+   Combined Work produced by recombining or relinking the
+   Application with a modified version of the Linked Version. (If
+   you use option 4d0, the Installation Information must accompany
+   the Minimal Corresponding Source and Corresponding Application
+   Code. If you use option 4d1, you must provide the Installation
+   Information in the manner specified by section 6 of the GNU GPL
+   for conveying Corresponding Source.)
+
+  5. Combined Libraries.
+
+  You may place library facilities that are a work based on the
+Library side by side in a single library together with other library
+facilities that are not Applications and are not covered by this
+License, and convey such a combined library under terms of your
+choice, if you do both of the following:
+
+   a) Accompany the combined library with a copy of the same work based
+   on the Library, uncombined with any other library facilities,
+   conveyed under the terms of this License.
+
+   b) Give prominent notice with the combined library that part of it
+   is a work based on the Library, and explaining where to find the
+   accompanying uncombined form of the same work.
+
+  6. Revised Versions of the GNU Lesser General Public License.
+
+  The Free Software Foundation may publish revised and/or new versions
+of the GNU Lesser General Public License from time to time. Such new
+versions will be similar in spirit to the present version, but may
+differ in detail to address new problems or concerns.
+
+  Each version is given a distinguishing version number. If the
+Library as you received it specifies that a certain numbered version
+of the GNU Lesser General Public License "or any later version"
+applies to it, you have the option of following the terms and
+conditions either of that published version or of any later version
+published by the Free Software Foundation. If the Library as you
+received it does not specify a version number of the GNU Lesser
+General Public License, you may choose any version of the GNU Lesser
+General Public License ever published by the Free Software Foundation.
+
+  If the Library as you received it specifies that a proxy can decide
+whether future versions of the GNU Lesser General Public License shall
+apply, that proxy's public statement of acceptance of any version is
+permanent authorization for you to choose that version for the
+Library.
--- a/README.md
+++ b/README.md
@ -0,0 +1,70 @@
+# maotu-webtopo
+
+基于 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)
+
--- a/env.d.ts
+++ b/env.d.ts
@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/global.d.ts
+++ b/global.d.ts
@ -0,0 +1,9 @@
+declare global {
+  interface Window {
+    $svgEventCallBack: (type: string, svg_item_id: string, ...args: any[]) => void;
+    $setItemAttrByID: (id: string, key: string, val: any) => Promise<unknown>;
+    $getItemAttrByID: (id: string, key: string, val: any) => any;
+    $previewCompareVal: (val1: any, operator: '>' | '<' | '=' | '!=', val2: any) => boolean;
+  }
+}
+export {};
--- a/index.html
+++ b/index.html
@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>MaoTu</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
--- a/package.json
+++ b/package.json
@ -0,0 +1,68 @@
+{
+  "name": "maotu",
+  "version": "0.3.1",
+  "private": false,
+  "scripts": {
+    "dev": "pnpm run format && vite",
+    "build": "run-p type-check \"build-only {@}\" --",
+    "preview": "vite preview",
+    "test:unit": "vitest",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
+    "format": "prettier --write src/",
+    "lib": "vite build --mode lib",
+    "npm": "vite build --mode npm"
+  },
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/maotu.umd.js",
+  "module": "./dist/maotu.es.js",
+  "exports": {
+    ".": {
+      "import": "./dist/maotu.es.js",
+      "require": "./dist/maotu.umd.js",
+      "types": "./dist/src/export.d.ts"
+    },
+    "./*": "./*"
+  },
+  "typings": "dist/export.d.ts",
+  "dependencies": {
+    "@vueuse/core": "^10.6.1",
+    "ace-builds": "^1.32.0",
+    "animate.css": "^4.1.1",
+    "canvg": "^4.0.1",
+    "echarts": "^5.4.3",
+    "element-plus": "^2.4.2",
+    "html2canvas": "^1.4.1",
+    "less": "^4.2.0",
+    "vue": "^3.3.4",
+    "vue-echarts": "^6.6.5",
+    "vue-router": "^4.2.5",
+    "vue3-ace-editor": "^2.2.4"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-patch": "^1.3.3",
+    "@tsconfig/node18": "^18.2.2",
+    "@types/jsdom": "^21.1.3",
+    "@types/node": "^18.18.5",
+    "@vitejs/plugin-vue": "^4.4.0",
+    "@vue/eslint-config-prettier": "^8.0.0",
+    "@vue/eslint-config-typescript": "^12.0.0",
+    "@vue/test-utils": "^2.4.1",
+    "@vue/tsconfig": "^0.4.0",
+    "eslint": "^8.49.0",
+    "eslint-plugin-vue": "^9.17.0",
+    "jsdom": "^22.1.0",
+    "npm-run-all2": "^6.1.1",
+    "prettier": "^3.0.3",
+    "typescript": "~5.2.0",
+    "unocss": "^0.57.4",
+    "vite": "^4.4.11",
+    "vite-plugin-dts": "^3.6.0",
+    "vite-plugin-svg-icons": "^2.0.1",
+    "vitest": "^0.34.6",
+    "vue-tsc": "^1.8.19"
+  }
+}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/public/favicon.svg
+++ b/public/favicon.svg
@ -0,0 +1,34 @@
+<svg id="组_2" data-name="组 2" xmlns="http://www.w3.org/2000/svg" width="700" height="700" viewBox="0 0 700 700">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+        stroke: #00ccbd;
+        stroke-width: 20px;
+        fill-rule: evenodd;
+      }
+
+      .cls-2 {
+        font-size: 100px;
+      }
+
+      .cls-2, .cls-3 {
+        fill: #deea2e;
+        font-weight: 700;
+      }
+
+      .cls-3 {
+        font-size: 120px;
+      }
+    </style>
+  </defs>
+  <g id="组_1" data-name="组 1">
+    <path id="形状_1" data-name="形状 1" class="cls-1" d="M34.518,406.156S47.789,166,187.922,211.451c0,0,55.156,15.864,91.453,45.448,0,0,67.7-42.655,141.6,0"/>
+    <path id="形状_1_拷贝" data-name="形状 1 拷贝" class="cls-1" d="M665.493,406.156s-13.271-240.373-153.4-194.884c0,0-55.156,15.879-91.452,45.489,0,0-67.7-42.694-141.6,0"/>
+    <path id="形状_2" data-name="形状 2" class="cls-1" d="M117.921,306.109s9.026-64.564,74.891-32.1"/>
+    <path id="形状_2_拷贝" data-name="形状 2 拷贝" class="cls-1" d="M581.357,306.589s-9-65.089-74.668-32.357"/>
+    <text id="ao" class="cls-2" transform="translate(124.132 368.651) scale(0.823)">ao</text>
+    <text id="tu" class="cls-2" transform="translate(482.948 368.651) scale(0.823)">tu</text>
+  </g>
+  <text id="M_A_O_T_U" data-name="M A O T U" class="cls-3" x="45.25" y="537.03">M A O T U</text>
+</svg>
--- a/public/imgs/change-attr.png
+++ b/public/imgs/change-attr.png
--- a/public/imgs/edit-load.png
+++ b/public/imgs/edit-load.png
--- a/public/imgs/edit.png
+++ b/public/imgs/edit.png
--- a/public/imgs/event-callback.png
+++ b/public/imgs/event-callback.png
--- a/public/imgs/set-node-attr.gif
+++ b/public/imgs/set-node-attr.gif
--- a/public/svgs/demo.svg
+++ b/public/svgs/demo.svg
@ -0,0 +1,21 @@
+<svg width="557" height="554" xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
+    <g>
+        <path
+            d="m279,38.19467a238.80533,238.80533 0 1 1 -238.80533,238.80533a238.80533,238.80533 0 0 1 238.80533,-238.80533m0,-38.528a277.33333,277.33333 0 1 0 277.33333,277.33333a277.33333,277.33333 0 0 0 -277.33333,-277.33333z"
+            id="circle1"
+        />
+        <path
+            id="line1"
+            d="m436.15733,143.928a14.67733,14.67733 0 0 0 -12.8,7.44533a96,96 0 0 1 -137.10933,24.66134a125.09867,125.09867 0 0 0 -188.032,24.14933a14.208,14.208 0 0 0 -1.28,2.13333a5.80267,5.80267 0 0 0 -0.66133,1.408a14.656,14.656 0 0 0 24.14933,15.68a6.272,6.272 0 0 0 1.28,-1.49333a96.832,96.832 0 0 1 13.248,-16.49067a95.76533,95.76533 0 0 1 124.62933,-9.30133a125.07733,125.07733 0 0 0 189.26934,-26.176a5.824,5.824 0 0 0 0.68266,-1.49333a14.63467,14.63467 0 0 0 -13.44,-20.43734l0.064,-0.08533z"
+        />
+        <path
+            id="line2"
+            d="m440.15733,239.928a14.67733,14.67733 0 0 0 -12.8,7.44533a96,96 0 0 1 -137.10933,24.66134a125.09867,125.09867 0 0 0 -188.032,24.14933a14.208,14.208 0 0 0 -1.28,2.13333a5.80267,5.80267 0 0 0 -0.66133,1.408a14.656,14.656 0 0 0 24.14933,15.68a6.272,6.272 0 0 0 1.28,-1.49333a96.832,96.832 0 0 1 13.248,-16.49067a95.76533,95.76533 0 0 1 124.62933,-9.30133a125.07733,125.07733 0 0 0 189.26934,-26.176a5.824,5.824 0 0 0 0.68266,-1.49333a14.63467,14.63467 0 0 0 -13.44,-20.43734l0.064,-0.08533z"
+        />
+        <path
+            id="line3"
+            d="m444.15733,336.928a14.67733,14.67733 0 0 0 -12.8,7.44533a96,96 0 0 1 -137.10933,24.66134a125.09867,125.09867 0 0 0 -188.032,24.14933a14.208,14.208 0 0 0 -1.28,2.13333a5.80267,5.80267 0 0 0 -0.66133,1.408a14.656,14.656 0 0 0 24.14933,15.68a6.272,6.272 0 0 0 1.28,-1.49333a96.832,96.832 0 0 1 13.248,-16.49067a95.76533,95.76533 0 0 1 124.62933,-9.30133a125.07733,125.07733 0 0 0 189.26934,-26.176a5.824,5.824 0 0 0 0.68266,-1.49333a14.63467,14.63467 0 0 0 -13.44,-20.43734l0.064,-0.08533z"
+        />
+    </g>
+</svg>
--- a/public/svgs/my-button.svg
+++ b/public/svgs/my-button.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path fill="currentColor" d="M2 8a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v3a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V8Zm7 1.5a.5.5 0 0 0 .5.5H14a.5.5 0 0 0 0-1H9.5a.5.5 0 0 0-.5.5Zm-1 0a1.5 1.5 0 1 0-3 0a1.5 1.5 0 0 0 3 0Z"/></svg>
--- a/public/svgs/my-input.svg
+++ b/public/svgs/my-input.svg
@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 15 15">
+    <path fill="currentColor" fill-rule="evenodd"
+        d="M6.5 1a.5.5 0 0 0 0 1c.627 0 .957.2 1.156.478C7.878 2.79 8 3.288 8 4v7c0 .712-.122 1.21-.344 1.522c-.199.278-.53.478-1.156.478a.5.5 0 0 0 0 1c.873 0 1.543-.3 1.97-.897l.03-.044l.03.044c.427.597 1.097.897 1.97.897a.5.5 0 0 0 0-1c-.627 0-.957-.2-1.156-.478C9.122 12.21 9 11.712 9 11V4c0-.712.122-1.21.344-1.522C9.543 2.2 9.874 2 10.5 2a.5.5 0 0 0 0-1c-.873 0-1.543.3-1.97.897l-.03.044l-.03-.044C8.042 1.3 7.372 1 6.5 1M14 5h-3V4h3a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1h-3v-1h3zM6 4v1H1v5h5v1H1a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1z"
+        clip-rule="evenodd" />
+</svg>
--- a/public/svgs/pie-charts.svg
+++ b/public/svgs/pie-charts.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M13.45 8.75a5.501 5.501 0 1 1-6.2-6.2V8c0 .414.336.75.75.75zm0-1.5h-4.7v-4.7a5.503 5.503 0 0 1 4.7 4.7M15 8A7 7 0 1 1 1 8a7 7 0 0 1 14 0" clip-rule="evenodd"/></svg>
--- a/src/App.vue
+++ b/src/App.vue
@ -0,0 +1,196 @@
+<script setup lang="ts">
+import { leftAsideStore } from '@/export';
+import demo from '/svgs/demo.svg?raw';
+const electrical_modules_files = import.meta.glob('./assets/svgs/electrical/**.svg', {
+  eager: true,
+  as: 'raw'
+});
+const electrical_stroke_modules_files = import.meta.glob('./assets/svgs/electrical/stroke/**.svg', {
+  eager: true,
+  as: 'raw'
+});
+const electrical_register_config: any = [];
+for (const key in electrical_modules_files) {
+  //根据路径获取svg文件名
+  const name = key.split('/').pop()!.split('.')[0];
+  electrical_register_config.push({
+    id: name,
+    title: name,
+    type: 'svg',
+    thumbnail: 'data:image/svg+xml;utf8,' + encodeURIComponent(electrical_modules_files[key]),
+    svg: electrical_modules_files[key],
+    props: {
+      fill: {
+        type: 'color',
+        val: '#FF0000',
+        title: '填充色'
+      }
+    }
+  });
+}
+for (const key in electrical_stroke_modules_files) {
+  //根据路径获取svg文件名
+  const name = key.split('/').pop()!.split('.')[0];
+  electrical_register_config.push({
+    id: name,
+    title: name,
+    type: 'svg',
+    thumbnail:
+      'data:image/svg+xml;utf8,' + encodeURIComponent(electrical_stroke_modules_files[key]),
+    svg: electrical_stroke_modules_files[key],
+    props: {
+      stroke: {
+        type: 'color',
+        val: '#00ff00',
+        title: '边框色'
+      }
+    }
+  });
+}
+leftAsideStore.registerConfig('电气符号', electrical_register_config);
+leftAsideStore.registerConfig('开发测试用', [
+  {
+    id: 'demo',
+    title: '演示svg文件',
+    type: 'svg',
+    thumbnail: '/svgs/demo.svg',
+    svg: demo,
+    props: {
+      fill: {
+        type: 'color',
+        val: '#FF0000',
+        title: '填充色'
+      }
+    }
+  },
+  {
+    id: 'my-button',
+    title: '我的按钮',
+    type: 'vue',
+    thumbnail: '/svgs/my-button.svg',
+    props: {
+      text: {
+        type: 'input',
+        val: '按钮',
+        title: '文本'
+      },
+      bgColor: {
+        type: 'color',
+        val: '#44B6E7',
+        title: '背景色'
+      },
+      fontFamily: {
+        title: '字体',
+        type: 'select',
+        val: '黑体',
+        options: [
+          {
+            value: '黑体',
+            label: '黑体'
+          },
+          {
+            value: '宋体',
+            label: '宋体'
+          }
+        ]
+      }
+    }
+  },
+  {
+    id: 'my-input',
+    title: '我的输入框',
+    type: 'vue',
+    thumbnail: '/svgs/my-input.svg',
+    props: {
+      modelValue: {
+        type: 'input',
+        val: '输入框',
+        title: '文本'
+      }
+    }
+  },
+  {
+    id: 'custom-demo',
+    title: '自定义svg',
+    type: 'custom-svg',
+    thumbnail: '/svgs/demo.svg',
+    props: {
+      circleFill: {
+        type: 'color',
+        val: '#FF0000',
+        title: '圆颜色'
+      },
+      pathFill1: {
+        type: 'color',
+        val: '#00FF00',
+        title: '线1颜色'
+      },
+      pathFill2: {
+        type: 'color',
+        val: '#0000FF',
+        title: '线2颜色'
+      },
+      pathFill3: {
+        type: 'color',
+        val: '#FFFF00',
+        title: '线3颜色'
+      },
+      showLine2: {
+        type: 'switch',
+        val: true,
+        title: '显示线2'
+      }
+    }
+  },
+  {
+    id: 'pie-charts',
+    title: 'echarts饼图',
+    type: 'vue',
+    thumbnail: '/svgs/pie-charts.svg',
+    props: {
+      title: {
+        title: '标题',
+        type: 'input',
+        val: '默认标题'
+      },
+      seriesName: {
+        title: '详情',
+        type: 'input',
+        val: '详情标题'
+      },
+      seriesData: {
+        title: '数据',
+        type: 'jsonEdit',
+        val: [
+          {
+            value: 1048,
+            name: '办公楼A'
+          },
+          {
+            value: 735,
+            name: '办公楼B'
+          },
+          {
+            value: 580,
+            name: '保安室'
+          },
+          {
+            value: 484,
+            name: '地下车库'
+          },
+          {
+            value: 300,
+            name: '食堂'
+          }
+        ]
+      }
+    }
+  }
+]);
+</script>
+
+<template>
+  <router-view></router-view>
+</template>
+
+<style scoped></style>
--- a/src/assets/css-vars.css
+++ b/src/assets/css-vars.css
@ -0,0 +1,92 @@
+#mt-edit.dark {
+  color-scheme: dark;
+  --el-color-primary: #409eff;
+  --el-color-primary-light-3: #3375b9;
+  --el-color-primary-light-5: #2a598a;
+  --el-color-primary-light-7: #213d5b;
+  --el-color-primary-light-8: #1d3043;
+  --el-color-primary-light-9: #18222c;
+  --el-color-primary-dark-2: #66b1ff;
+  --el-color-success: #67c23a;
+  --el-color-success-light-3: #4e8e2f;
+  --el-color-success-light-5: #3e6b27;
+  --el-color-success-light-7: #2d481f;
+  --el-color-success-light-8: #25371c;
+  --el-color-success-light-9: #1c2518;
+  --el-color-success-dark-2: #85ce61;
+  --el-color-warning: #e6a23c;
+  --el-color-warning-light-3: #a77730;
+  --el-color-warning-light-5: #7d5b28;
+  --el-color-warning-light-7: #533f20;
+  --el-color-warning-light-8: #3e301c;
+  --el-color-warning-light-9: #292218;
+  --el-color-warning-dark-2: #ebb563;
+  --el-color-danger: #f56c6c;
+  --el-color-danger-light-3: #b25252;
+  --el-color-danger-light-5: #854040;
+  --el-color-danger-light-7: #582e2e;
+  --el-color-danger-light-8: #412626;
+  --el-color-danger-light-9: #2b1d1d;
+  --el-color-danger-dark-2: #f78989;
+  --el-color-error: #f56c6c;
+  --el-color-error-light-3: #b25252;
+  --el-color-error-light-5: #854040;
+  --el-color-error-light-7: #582e2e;
+  --el-color-error-light-8: #412626;
+  --el-color-error-light-9: #2b1d1d;
+  --el-color-error-dark-2: #f78989;
+  --el-color-info: #909399;
+  --el-color-info-light-3: #6b6d71;
+  --el-color-info-light-5: #525457;
+  --el-color-info-light-7: #393a3c;
+  --el-color-info-light-8: #2d2d2f;
+  --el-color-info-light-9: #202121;
+  --el-color-info-dark-2: #a6a9ad;
+  --el-box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.36), 0px 8px 20px rgba(0, 0, 0, 0.72);
+  --el-box-shadow-light: 0px 0px 12px rgba(0, 0, 0, 0.72);
+  --el-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, 0.72);
+  --el-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, 0.72), 0px 12px 32px #000000,
+    0px 8px 16px -8px #000000;
+  --el-bg-color-page: #0a0a0a;
+  --el-bg-color: #141414;
+  --el-bg-color-overlay: #1d1e1f;
+  --el-text-color-primary: #e5eaf3;
+  --el-text-color-regular: #cfd3dc;
+  --el-text-color-secondary: #a3a6ad;
+  --el-text-color-placeholder: #8d9095;
+  --el-text-color-disabled: #6c6e72;
+  --el-border-color-darker: #636466;
+  --el-border-color-dark: #58585b;
+  --el-border-color: #4c4d4f;
+  --el-border-color-light: #414243;
+  --el-border-color-lighter: #363637;
+  --el-border-color-extra-light: #2b2b2c;
+  --el-fill-color-darker: #424243;
+  --el-fill-color-dark: #39393a;
+  --el-fill-color: #303030;
+  --el-fill-color-light: #262727;
+  --el-fill-color-lighter: #1d1d1d;
+  --el-fill-color-extra-light: #191919;
+  --el-fill-color-blank: transparent;
+  --el-mask-color: rgba(0, 0, 0, 0.8);
+  --el-mask-color-extra-light: rgba(0, 0, 0, 0.3);
+  transition: all 5s;
+}
+#mt-edit.dark .el-button {
+  --el-button-disabled-text-color: rgba(255, 255, 255, 0.5);
+}
+#mt-edit.dark .el-card {
+  --el-card-bg-color: var(--el-bg-color-overlay);
+}
+#mt-edit.dark .el-empty {
+  --el-empty-fill-color-0: var(--el-color-black);
+  --el-empty-fill-color-1: #4b4b52;
+  --el-empty-fill-color-2: #36383d;
+  --el-empty-fill-color-3: #1e1e20;
+  --el-empty-fill-color-4: #262629;
+  --el-empty-fill-color-5: #202124;
+  --el-empty-fill-color-6: #212224;
+  --el-empty-fill-color-7: #1b1c1f;
+  --el-empty-fill-color-8: #1c1d1f;
+  --el-empty-fill-color-9: #18181a;
+}
--- a/src/assets/icons/add.svg
+++ b/src/assets/icons/add.svg
@ -0,0 +1,6 @@
+<svg class="icon" viewBox="0 0 1024 1024" version="1.1"
+    xmlns="http://www.w3.org/2000/svg" width="200" height="200">
+    <path
+        d="M801.171 483.589H544V226.418c0-17.673-14.327-32-32-32s-32 14.327-32 32v257.171H222.83c-17.673 0-32 14.327-32 32s14.327 32 32 32H480v257.17c0 17.673 14.327 32 32 32s32-14.327 32-32v-257.17h257.171c17.673 0 32-14.327 32-32s-14.327-32-32-32z"
+        fill=""></path>
+</svg>
--- a/src/assets/icons/align-bottom.svg
+++ b/src/assets/icons/align-bottom.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M228 216a12 12 0 0 1-12 12H40a12 12 0 0 1 0-24h176a12 12 0 0 1 12 12m-92-48V80a20 20 0 0 1 20-20h36a20 20 0 0 1 20 20v88a20 20 0 0 1-20 20h-36a20 20 0 0 1-20-20m24-4h28V84h-28Zm-116 4V40a20 20 0 0 1 20-20h36a20 20 0 0 1 20 20v128a20 20 0 0 1-20 20H64a20 20 0 0 1-20-20m24-4h28V44H68Z"/></svg>
--- a/src/assets/icons/align-horizontally.svg
+++ b/src/assets/icons/align-horizontally.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M208 136h-68v-16h44a20 20 0 0 0 20-20V60a20 20 0 0 0-20-20h-44v-8a12 12 0 0 0-24 0v8H72a20 20 0 0 0-20 20v40a20 20 0 0 0 20 20h44v16H48a20 20 0 0 0-20 20v40a20 20 0 0 0 20 20h68v8a12 12 0 0 0 24 0v-8h68a20 20 0 0 0 20-20v-40a20 20 0 0 0-20-20M76 64h104v32H76Zm128 128H52v-32h152Z"/></svg>
--- a/src/assets/icons/align-left.svg
+++ b/src/assets/icons/align-left.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M52 40v176a12 12 0 0 1-24 0V40a12 12 0 0 1 24 0m16 60V64a20 20 0 0 1 20-20h88a20 20 0 0 1 20 20v36a20 20 0 0 1-20 20H88a20 20 0 0 1-20-20m24-4h80V68H92Zm144 60v36a20 20 0 0 1-20 20H88a20 20 0 0 1-20-20v-36a20 20 0 0 1 20-20h128a20 20 0 0 1 20 20m-24 4H92v28h120Z"/></svg>
--- a/src/assets/icons/align-right.svg
+++ b/src/assets/icons/align-right.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M228 40v176a12 12 0 0 1-24 0V40a12 12 0 0 1 24 0m-40 24v36a20 20 0 0 1-20 20H80a20 20 0 0 1-20-20V64a20 20 0 0 1 20-20h88a20 20 0 0 1 20 20m-24 4H84v28h80Zm24 88v36a20 20 0 0 1-20 20H40a20 20 0 0 1-20-20v-36a20 20 0 0 1 20-20h128a20 20 0 0 1 20 20m-24 4H44v28h120Z"/></svg>
--- a/src/assets/icons/align-top.svg
+++ b/src/assets/icons/align-top.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M228 40a12 12 0 0 1-12 12H40a12 12 0 0 1 0-24h176a12 12 0 0 1 12 12m-16 48v88a20 20 0 0 1-20 20h-36a20 20 0 0 1-20-20V88a20 20 0 0 1 20-20h36a20 20 0 0 1 20 20m-24 4h-28v80h28Zm-68-4v128a20 20 0 0 1-20 20H64a20 20 0 0 1-20-20V88a20 20 0 0 1 20-20h36a20 20 0 0 1 20 20m-24 4H68v120h28Z"/></svg>
--- a/src/assets/icons/align-vertical.svg
+++ b/src/assets/icons/align-vertical.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M224 116h-8V72a20 20 0 0 0-20-20h-40a20 20 0 0 0-20 20v44h-16V48a20 20 0 0 0-20-20H60a20 20 0 0 0-20 20v68h-8a12 12 0 0 0 0 24h8v68a20 20 0 0 0 20 20h40a20 20 0 0 0 20-20v-68h16v44a20 20 0 0 0 20 20h40a20 20 0 0 0 20-20v-44h8a12 12 0 0 0 0-24M96 204H64V52h32Zm96-24h-32V76h32Z"/></svg>
--- a/src/assets/icons/align.svg
+++ b/src/assets/icons/align.svg
@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 15 15">
+    <path fill="currentColor" fill-rule="evenodd"
+        d="M3.5 14.9a.4.4 0 0 0 .4-.4v-4.034l1.317 1.317a.4.4 0 0 0 .565-.566l-2-2a.4.4 0 0 0-.565 0l-2 2a.4.4 0 0 0 .565.566L3.1 10.466V14.5c0 .22.18.4.4.4ZM8 10.5a.5.5 0 0 0 .5.5h6a.5.5 0 1 0 0-1h-6a.5.5 0 0 0-.5.5Zm0-3a.5.5 0 0 0 .5.5h6a.5.5 0 0 0 0-1h-6a.5.5 0 0 0-.5.5ZM8.5 5a.5.5 0 1 1 0-1h6a.5.5 0 0 1 0 1h-6ZM3.9.5a.4.4 0 0 0-.8 0v4.034L1.781 3.217a.4.4 0 0 0-.565.566l2 2a.4.4 0 0 0 .565 0l2-2a.4.4 0 0 0-.565-.566L3.899 4.534V.5Z"
+        clip-rule="evenodd" />
+</svg>
--- a/src/assets/icons/dark.svg
+++ b/src/assets/icons/dark.svg
@ -0,0 +1,6 @@
+<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="M513.173333 128A255.061333 255.061333 0 0 0 448 298.666667c0 141.376 114.624 256 256 256a255.36 255.36 0 0 0 189.802667-84.202667c1.450667 13.653333 2.197333 27.498667 2.197333 41.536 0 212.074667-171.925333 384-384 384S128 724.074667 128 512c0-209.706667 168.106667-380.16 376.96-383.936L513.152 128z m-117.824 85.930667l-3.52 1.408C274.645333 262.826667 192 377.770667 192 512c0 176.725333 143.274667 320 320 320 145.408 0 268.16-96.981333 307.114667-229.802667l1.536-5.504-1.6 0.64a319.509333 319.509333 0 0 1-106.496 21.226667L704 618.666667c-176.725333 0-320-143.274667-320-320 0-28.48 3.754667-56.405333 10.944-83.2l0.405333-1.536z"></path>
+</svg>
--- a/src/assets/icons/delete.svg
+++ b/src/assets/icons/delete.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M7.5 1h9v3H22v2h-2.029l-.5 17H4.529l-.5-17H2V4h5.5V1Zm2 3h5V3h-5v1ZM6.03 6l.441 15h11.058l.441-15H6.03ZM13 8v11h-2V8h2Z"/></svg>
--- a/src/assets/icons/exit-full-screen.svg
+++ b/src/assets/icons/exit-full-screen.svg
@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 15 15">
+    <path fill="currentColor" fill-rule="evenodd"
+        d="M5.5 2a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1 0-1H5V2.5a.5.5 0 0 1 .5-.5Zm4 0a.5.5 0 0 1 .5.5V5h2.5a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5v-3a.5.5 0 0 1 .5-.5ZM2 9.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0V10H2.5a.5.5 0 0 1-.5-.5Zm7 0a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1H10v2.5a.5.5 0 0 1-1 0v-3Z"
+        clip-rule="evenodd" />
+</svg>
--- a/src/assets/icons/export-json.svg
+++ b/src/assets/icons/export-json.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M3 1h12.414L21 6.586V12h-2V9h-6V3H5v18h6v2H3V1Zm12 2.414V7h3.586L15 3.414Zm4.05 10.674l4.858 4.914l-4.858 4.914l-1.422-1.406l2.48-2.508h-7.11v-2h7.11l-2.48-2.508l1.422-1.406Z"/></svg>
--- a/src/assets/icons/full-screen.svg
+++ b/src/assets/icons/full-screen.svg
@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 2048 2048">
+    <path fill="currentColor"
+        d="M1664 1664v-384h128v512h-512v-128h384zM1280 256h512v512h-128V384h-384V256zM256 768V256h512v128H384v384H256zm128 512v384h384v128H256v-512h128z" />
+</svg>
--- a/src/assets/icons/group.svg
+++ b/src/assets/icons/group.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 1024 1024"><path fill="currentColor" d="M912 820.1V203.9c28-9.9 48-36.6 48-67.9c0-39.8-32.2-72-72-72c-31.3 0-58 20-67.9 48H203.9C194 84 167.3 64 136 64c-39.8 0-72 32.2-72 72c0 31.3 20 58 48 67.9v616.2C84 830 64 856.7 64 888c0 39.8 32.2 72 72 72c31.3 0 58-20 67.9-48h616.2c9.9 28 36.6 48 67.9 48c39.8 0 72-32.2 72-72c0-31.3-20-58-48-67.9zM888 112c13.3 0 24 10.7 24 24s-10.7 24-24 24s-24-10.7-24-24s10.7-24 24-24zM136 912c-13.3 0-24-10.7-24-24s10.7-24 24-24s24 10.7 24 24s-10.7 24-24 24zm0-752c-13.3 0-24-10.7-24-24s10.7-24 24-24s24 10.7 24 24s-10.7 24-24 24zm704 680H184V184h656v656zm48 72c-13.3 0-24-10.7-24-24s10.7-24 24-24s24 10.7 24 24s-10.7 24-24 24z"/><path fill="currentColor" d="M288 474h448c8.8 0 16-7.2 16-16V282c0-8.8-7.2-16-16-16H288c-8.8 0-16 7.2-16 16v176c0 8.8 7.2 16 16 16zm56-136h336v64H344v-64zm-56 420h448c8.8 0 16-7.2 16-16V566c0-8.8-7.2-16-16-16H288c-8.8 0-16 7.2-16 16v176c0 8.8 7.2 16 16 16zm56-136h336v64H344v-64z"/></svg>
--- a/src/assets/icons/help.svg
+++ b/src/assets/icons/help.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 21a9 9 0 1 0 0-18a9 9 0 0 0 0 18m11-9c0 6.075-4.925 11-11 11S1 18.075 1 12S5.925 1 12 1s11 4.925 11 11m-9.996 6.254H11V16.25h2.004zM11 15.25V14c0-.867.39-1.573.826-2.11c.432-.53.974-.974 1.41-1.318a2 2 0 1 0-3.123-2.24l-.333.944l-1.885-.666l.333-.943a4.001 4.001 0 1 1 6.246 4.476c-.431.34-.817.666-1.096 1.009c-.274.338-.378.61-.378.848v1.25z"/></svg>
--- a/src/assets/icons/horizontal-distribution.svg
+++ b/src/assets/icons/horizontal-distribution.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><path fill="currentColor" d="M3.5 18a.5.5 0 0 1-.5-.5v-15a.5.5 0 0 1 1 0v15a.5.5 0 0 1-.5.5m12.5-.5a.5.5 0 0 0 1 0v-15a.5.5 0 0 0-1 0zM9 4a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2z"/></svg>
--- a/src/assets/icons/import-json.svg
+++ b/src/assets/icons/import-json.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M3 1h12.414L21 6.586V23h-9v-2h7V9h-6V3H5v10H3V1Zm12 2.414V7h3.586L15 3.414ZM7.05 14.088l4.858 4.914l-4.858 4.914l-1.422-1.406l2.48-2.508H.997v-2h7.11l-2.48-2.508l1.422-1.406Z"/></svg>
--- a/src/assets/icons/light.svg
+++ b/src/assets/icons/light.svg
@ -0,0 +1,7 @@
+<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="M522.88 874.666667a21.333333 21.333333 0 0 1 21.333333 21.333333v85.333333a21.333333 21.333333 0 0 1-21.333333 21.333334h-21.333333a21.333333 21.333333 0 0 1-21.333334-21.333334v-85.333333a21.333333 21.333333 0 0 1 21.333334-21.333333h21.333333z m268.416-107.52l60.352 60.352a21.333333 21.333333 0 0 1 0 30.165333l-15.082667 15.082667a21.333333 21.333333 0 0 1-30.186666 0l-60.330667-60.352a21.333333 21.333333 0 0 1 0-30.165334l15.082667-15.082666a21.333333 21.333333 0 0 1 30.165333 0z m-527.957333 0l15.082666 15.082666a21.333333 21.333333 0 0 1 0 30.165334l-60.352 60.352a21.333333 21.333333 0 0 1-30.165333 0l-15.082667-15.082667a21.333333 21.333333 0 0 1 0-30.165333l60.330667-60.352a21.333333 21.333333 0 0 1 30.186667 0zM512 277.333333c141.376 0 256 114.624 256 256s-114.624 256-256 256-256-114.624-256-256 114.624-256 256-256z m0 64a192 192 0 1 0 0 384 192 192 0 0 0 0-384z m448.213333 160a21.333333 21.333333 0 0 1 21.333334 21.333334v21.333333a21.333333 21.333333 0 0 1-21.333334 21.333333h-85.333333a21.333333 21.333333 0 0 1-21.333333-21.333333v-21.333333a21.333333 21.333333 0 0 1 21.333333-21.333334h85.333333z m-810.666666 0a21.333333 21.333333 0 0 1 21.333333 21.333334v21.333333a21.333333 21.333333 0 0 1-21.333333 21.333333h-85.333334a21.333333 21.333333 0 0 1-21.333333-21.333333v-21.333333a21.333333 21.333333 0 0 1 21.333333-21.333334h85.333334zM836.586667 193.92l15.082666 15.082667a21.333333 21.333333 0 0 1 0 30.165333l-60.352 60.352a21.333333 21.333333 0 0 1-30.165333 0l-15.082667-15.082667a21.333333 21.333333 0 0 1 0-30.165333l60.330667-60.352a21.333333 21.333333 0 0 1 30.186667 0z m-618.496 0l60.352 60.352a21.333333 21.333333 0 0 1 0 30.165333l-15.082667 15.082667a21.333333 21.333333 0 0 1-30.186667 0L172.821333 239.146667a21.333333 21.333333 0 0 1 0-30.165334l15.082667-15.082666a21.333333 21.333333 0 0 1 30.165333 0zM522.901333 64a21.333333 21.333333 0 0 1 21.333334 21.333333v85.333334a21.333333 21.333333 0 0 1-21.333334 21.333333h-21.333333a21.333333 21.333333 0 0 1-21.333333-21.333333V85.333333a21.333333 21.333333 0 0 1 21.333333-21.333333h21.333333z"
+    ></path>
+</svg>
--- a/src/assets/icons/line.svg
+++ b/src/assets/icons/line.svg
@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1676518938084" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2193" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M893.60324 384c-54.7 1-101.1 36.4-118.4 85.4-2.2 6.4-8.3 10.6-15 10.6H263.80324c-6.7 0-12.8-4.2-15-10.6-17.3-49.1-63.6-84.4-118.4-85.4C59.90324 382.7 0.50324 440.6 0.00324 511.1-0.49676 582.2 57.00324 640 128.00324 640c55.7 0 103.1-35.6 120.7-85.3 2.3-6.4 8.3-10.7 15.1-10.7h496.4c6.8 0 12.8 4.3 15.1 10.7 17.6 49.7 65 85.3 120.7 85.3 71 0 128.5-57.8 128-128.9-0.5-70.5-59.9-128.4-130.4-127.1zM128.00324 576c-35.3 0-64-28.7-64-64s28.7-64 64-64 64 28.7 64 64-28.7 64-64 64z m768 0c-35.3 0-64-28.7-64-64s28.7-64 64-64 64 28.7 64 64-28.7 64-64 64z" p-id="2194"></path></svg>
--- a/src/assets/icons/lock.svg
+++ b/src/assets/icons/lock.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 36 36"><path fill="currentColor" d="M18.09 20.59A2.41 2.41 0 0 0 17 25.14V28h2v-2.77a2.41 2.41 0 0 0-.91-4.64" class="clr-i-outline clr-i-outline-path-1"/><path fill="currentColor" d="M26 15v-4.28a8.2 8.2 0 0 0-8-8.36a8.2 8.2 0 0 0-8 8.36V15H7v17a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V15Zm-14-4.28a6.2 6.2 0 0 1 6-6.36a6.2 6.2 0 0 1 6 6.36V15H12ZM9 32V17h18v15Z" class="clr-i-outline clr-i-outline-path-2"/><path fill="none" d="M0 0h36v36H0z"/></svg>
--- a/src/assets/icons/menu-fold.svg
+++ b/src/assets/icons/menu-fold.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M2 4h20v2H2V4Zm20 5.57v4.86L18.113 12L22 9.57ZM2 13v-2h15v2H2Zm0 7v-2h20v2H2Z"/></svg>
--- a/src/assets/icons/menu-unfold.svg
+++ b/src/assets/icons/menu-unfold.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M2 4h20v2H2V4Zm0 5.57L5.887 12L2 14.43V9.57ZM7 11h15v2H7v-2Zm-5 7h20v2H2v-2Z"/></svg>
--- a/src/assets/icons/pen-line.svg
+++ b/src/assets/icons/pen-line.svg
@ -0,0 +1,6 @@
+<svg width="256" height="256" xmlns="http://www.w3.org/2000/svg">
+ <g>
+  <path d="m227.32,73.37l-44.69,-44.68a16,16 0 0 0 -22.63,0l-123.31,123.31a15.86,15.86 0 0 0 -4.69,11.31l0,44.69a16,16 0 0 0 16,16l44.69,0a15.86,15.86 0 0 0 11.31,-4.69l83.67,-83.66l3.48,13.9l-36.8,36.79a8,8 0 0 0 11.31,11.32l40,-40a8,8 0 0 0 2.11,-7.6l-6.9,-27.61l26.45,-26.45a16,16 0 0 0 0,-22.63m-179.32,105.94l28.69,28.69l-28.69,0l0,-28.69zm48,25.38l-44.69,-44.69l84.69,-84.69l44.69,44.69l-84.69,84.69zm96,-96l-44.68,-44.69l24,-24l44.68,44.69l-24,24z" fill="currentColor"/>
+  <line stroke-width="10" y2="234" x2="245" y1="234" x1="47" stroke="#000" fill="none"/>
+ </g>
+</svg>
--- a/src/assets/icons/preview.svg
+++ b/src/assets/icons/preview.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 3a9 9 0 1 0 0 18a9 9 0 0 0 0-18ZM1 12C1 5.925 5.925 1 12 1s11 4.925 11 11s-4.925 11-11 11S1 18.075 1 12Zm7.5-5.63L18.25 12L8.5 17.63V6.37Zm2 3.465v4.33L14.25 12L10.5 9.835Z"/></svg>
--- a/src/assets/icons/question.svg
+++ b/src/assets/icons/question.svg
@ -0,0 +1,10 @@
+<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="200"
+    height="200">
+    <path
+        d="M512 65.984C266.08 65.984 65.984 266.08 65.984 512c0 245.952 200.064 446.016 446.016 446.016 245.952 0 446.016-200.064 446.016-446.016C958.016 266.08 757.952 65.984 512 65.984zM512 894.016C301.344 894.016 129.984 722.624 129.984 512 129.984 301.344 301.344 129.984 512 129.984c210.624 0 382.016 171.36 382.016 382.016C894.016 722.624 722.624 894.016 512 894.016z"
+        fill="#5C636E"></path>
+    <path
+        d="M512 255.2c-77.216 0-140.032 62.272-140.032 138.816 0 17.664 14.336 32 32 32s32-14.336 32-32c0-41.952 33.376-74.816 76.032-74.816 41.952 0 76.032 34.368 76.032 76.64 0 15.968-22.848 38.784-43.008 58.944C514.56 485.216 480 519.744 480 566.016l0 45.696c0 17.696 14.336 32 32 32s32-14.304 32-32l0-45.696c0-19.744 23.52-43.264 46.272-65.984 28.928-28.928 61.76-61.728 61.76-104.192C652.032 318.272 589.216 255.2 512 255.2z"
+        fill="#5C636E"></path>
+    <path d="M512 753.92m-48 0a1.5 1.5 0 1 0 96 0 1.5 1.5 0 1 0-96 0Z" fill="#5C636E"></path>
+</svg>
--- a/src/assets/icons/redo.svg
+++ b/src/assets/icons/redo.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="-1 -2 24 24"><path fill="currentColor" d="m19.347 7.24l.847-1.266a.984.984 0 0 1 1.375-.259c.456.31.58.93.277 1.383L19.65 10.38a.984.984 0 0 1-1.375.259L14.97 8.393a1.002 1.002 0 0 1-.277-1.382a.984.984 0 0 1 1.375-.26l1.344.915C16.428 4.386 13.42 2 9.863 2c-4.357 0-7.89 3.582-7.89 8s3.533 8 7.89 8c.545 0 .987.448.987 1s-.442 1-.987 1C4.416 20 0 15.523 0 10S4.416 0 9.863 0c4.504 0 8.302 3.06 9.484 7.24z"/></svg>
--- a/src/assets/icons/return.svg
+++ b/src/assets/icons/return.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 2048 2048"><path fill="currentColor" d="M1792 1152H475l466 467l-90 90l-621-621l621-621l90 90l-466 467h1189V384h128v768z"/></svg>
--- a/src/assets/icons/rotate.svg
+++ b/src/assets/icons/rotate.svg
@ -0,0 +1 @@
+<?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>
--- a/src/assets/icons/save.svg
+++ b/src/assets/icons/save.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 2048 2048"><path fill="currentColor" d="M1792 128q27 0 50 10t40 27t28 41t10 50v1664H357l-229-230V256q0-27 10-50t27-40t41-28t50-10h1536zM512 896h1024V256H512v640zm768 512H640v384h128v-256h128v256h384v-384zm512-1152h-128v768H384V256H256v1381l154 155h102v-512h896v512h384V256z"/></svg>
--- a/src/assets/icons/search.svg
+++ b/src/assets/icons/search.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 1024 1024"><path fill="currentColor" d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1c-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"/></svg>
--- a/src/assets/icons/setting.svg
+++ b/src/assets/icons/setting.svg
@ -0,0 +1,6 @@
+<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>
--- a/src/assets/icons/thumbnail.svg
+++ b/src/assets/icons/thumbnail.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><path fill="currentColor" d="M3 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2zm0 15a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1z"/><path fill="currentColor" d="M17 4H3v10h14zM5 12l2.5-3l2 2L12 8l3 4zm-1 3h12v1H4z"/></svg>
--- a/src/assets/icons/tree-list.svg
+++ b/src/assets/icons/tree-list.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M6 22a4 4 0 0 1-1-7.874V9.874A4.002 4.002 0 0 1 6 2a4 4 0 0 1 1 7.874v4.252A4.002 4.002 0 0 1 6 22Zm-2-4a2 2 0 1 0 4 0a2 2 0 0 0-4 0ZM4 6a2 2 0 1 0 4 0a2 2 0 0 0-4 0Zm8 12h7v2h-7v-2Zm0-7h10v2H12v-2Zm0-7h7v2h-7V4Z"/></svg>
--- a/src/assets/icons/undo.svg
+++ b/src/assets/icons/undo.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="-0.5 -2 24 24"><path fill="currentColor" d="m5.308 7.612l1.352-.923a.981.981 0 0 1 1.372.27a1.008 1.008 0 0 1-.266 1.388l-3.277 2.237a.981.981 0 0 1-1.372-.27L.907 6.998a1.007 1.007 0 0 1 .266-1.389a.981.981 0 0 1 1.372.27l.839 1.259C4.6 3.01 8.38 0 12.855 0c5.458 0 9.882 4.477 9.882 10s-4.424 10-9.882 10a.994.994 0 0 1-.988-1c0-.552.443-1 .988-1c4.366 0 7.906-3.582 7.906-8s-3.54-8-7.906-8C9.311 2 6.312 4.36 5.308 7.612z"/></svg>
--- a/src/assets/icons/ungroup.svg
+++ b/src/assets/icons/ungroup.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 1024 1024"><path fill="currentColor" d="M736 550H288c-8.8 0-16 7.2-16 16v176c0 8.8 7.2 16 16 16h448c8.8 0 16-7.2 16-16V566c0-8.8-7.2-16-16-16zm-56 136H344v-64h336v64zm208 130c-39.8 0-72 32.2-72 72s32.2 72 72 72s72-32.2 72-72s-32.2-72-72-72zm0 96c-13.3 0-24-10.7-24-24s10.7-24 24-24s24 10.7 24 24s-10.7 24-24 24zM736 266H288c-8.8 0-16 7.2-16 16v176c0 8.8 7.2 16 16 16h448c8.8 0 16-7.2 16-16V282c0-8.8-7.2-16-16-16zm-56 136H344v-64h336v64zm208-194c39.8 0 72-32.2 72-72s-32.2-72-72-72s-72 32.2-72 72s32.2 72 72 72zm0-96c13.3 0 24 10.7 24 24s-10.7 24-24 24s-24-10.7-24-24s10.7-24 24-24zM136 64c-39.8 0-72 32.2-72 72s32.2 72 72 72s72-32.2 72-72s-32.2-72-72-72zm0 96c-13.3 0-24-10.7-24-24s10.7-24 24-24s24 10.7 24 24s-10.7 24-24 24zm0 656c-39.8 0-72 32.2-72 72s32.2 72 72 72s72-32.2 72-72s-32.2-72-72-72zm0 96c-13.3 0-24-10.7-24-24s10.7-24 24-24s24 10.7 24 24s-10.7 24-24 24z"/></svg>
--- a/src/assets/icons/unlock.svg
+++ b/src/assets/icons/unlock.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 36 36"><path fill="currentColor" d="M12 25.14V28h2v-2.77a2.42 2.42 0 1 0-2-.09" class="clr-i-outline clr-i-outline-path-1"/><path fill="currentColor" d="M26 2a8.2 8.2 0 0 0-8 8.36V15H2v17a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V15h-4v-4.64A6.2 6.2 0 0 1 26 4a6.2 6.2 0 0 1 6 6.36v6.83a1 1 0 0 0 2 0v-6.83A8.2 8.2 0 0 0 26 2m-4 15v15H4V17Z" class="clr-i-outline clr-i-outline-path-2"/><path fill="none" d="M0 0h36v36H0z"/></svg>
--- a/src/assets/icons/upload.svg
+++ b/src/assets/icons/upload.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2M7 9l5-5l5 5m-5-5v12"/></svg>
--- a/src/assets/icons/vertical-distribution.svg
+++ b/src/assets/icons/vertical-distribution.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><path fill="currentColor" d="M2.5 3a.5.5 0 0 0 0 1h15a.5.5 0 0 0 0-1zM2 16.5a.5.5 0 0 1 .5-.5h15a.5.5 0 0 1 0 1h-15a.5.5 0 0 1-.5-.5M6 7a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z"/></svg>
--- a/src/assets/icons/view-hide.svg
+++ b/src/assets/icons/view-hide.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><path fill="currentColor" d="m12.81 4.36l-1.77 1.78a4 4 0 0 0-4.9 4.9l-2.76 2.75C2.06 12.79.96 11.49.2 10a11 11 0 0 1 12.6-5.64zm3.8 1.85c1.33 1 2.43 2.3 3.2 3.79a11 11 0 0 1-12.62 5.64l1.77-1.78a4 4 0 0 0 4.9-4.9l2.76-2.75zm-.25-3.99l1.42 1.42L3.64 17.78l-1.42-1.42z"/></svg>
--- a/src/assets/icons/view-show.svg
+++ b/src/assets/icons/view-show.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><path fill="currentColor" d="M.2 10a11 11 0 0 1 19.6 0A11 11 0 0 1 .2 10m9.8 4a4 4 0 1 0 0-8a4 4 0 0 0 0 8m0-2a2 2 0 1 1 0-4a2 2 0 0 1 0 4"/></svg>
--- a/src/assets/imgs/test/my-img.png
+++ b/src/assets/imgs/test/my-img.png
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/assets/main.css
+++ b/src/assets/main.css
@ -0,0 +1,4 @@
+body {
+  margin: 0;
+  padding: 0;
+}
--- a/src/assets/svgs/electrical/fs/故障.svg
+++ b/src/assets/svgs/electrical/fs/故障.svg
@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="_图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 218 364">
+  <line x1="210.89" y1="6.61" x2="63.11" y2="154.39"
+    style="fill: none; stroke: currentColor; stroke-miterlimit: 10; stroke-width: 20px;" />
+  <line x1="56" y1="157" x2="201" y2="157"
+    style="fill: none; stroke: currentColor; stroke-miterlimit: 10; stroke-width: 20px;" />
+  <line x1="208.45" y1="154.2" x2="60.66" y2="301.98"
+    style="fill: none; stroke: currentColor; stroke-miterlimit: 10; stroke-width: 20px;" />
+  <polygon points="2.42 360.3 94.44 307.69 55.03 268.28 2.42 360.3" />
+</svg>
--- a/src/assets/svgs/electrical/fs/火花间隙.svg
+++ b/src/assets/svgs/electrical/fs/火花间隙.svg
@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="_图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 492">
+  <polygon points="28.14 226 56 123.72 .27 123.72 28.14 226" stroke="none"/>
+  <line x1="28.14" y1=".6" x2="28.14" y2="126.7" style="stroke: currentColor; stroke-miterlimit: 10; stroke-width: 16px;"/>
+  <polygon points="28.38 266.54 .51 368.81 56.24 368.81 28.38 266.54" stroke="none"/>
+  <line x1="28.38" y1="491.94" x2="28.38" y2="365.83" style="stroke: currentColor; stroke-miterlimit: 10; stroke-width: 16px;"/>
+</svg>
--- a/src/assets/svgs/electrical/fs/电阻(阻抗).svg
+++ b/src/assets/svgs/electrical/fs/电阻(阻抗).svg
@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="_图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 259 158">
+  <rect x="10" y="50" width="239" height="99" style="fill: none; stroke: currentColor; stroke-miterlimit: 10; stroke-width: 20px;"/>
+  <text transform="translate(114.5 40.88)" style="font-size: 60px;">R</text>
+</svg>
--- a/src/assets/svgs/electrical/fs/避雷器.svg
+++ b/src/assets/svgs/electrical/fs/避雷器.svg
@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: $$$/GeneralStr/196=Adobe Illustrator 27.6.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 134 337" style="enable-background:new 0 0 134 337;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:currentColor;stroke-width:20;stroke-miterlimit:10;}
+	.st1{fill:none;stroke:currentColor;stroke-width:4;stroke-miterlimit:10;}
+	.st2{fill:none;stroke:currentColor;stroke-width:10;stroke-miterlimit:10;}
+	.st3{fill:none;stroke:currentColor;stroke-width:16;stroke-miterlimit:10;}
+</style>
+<polygon points="67,227 92.72,124 41.28,124 " fill="none"/>
+<line class="st3" x1="67" y1="0" x2="67" y2="127"/>
+<line class="st3" x1="67" y1="243" x2="67" y2="337.05"/>
+<rect x="8" y="83" class="st3" width="118" height="163"/>
+</svg>
--- a/src/assets/svgs/electrical/stroke/三绕组自耦变压器.svg
+++ b/src/assets/svgs/electrical/stroke/三绕组自耦变压器.svg
@ -0,0 +1,5 @@
+<svg id="_图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 258 499">
+  <circle cx="129.5" cy="370" r="119" style="fill: none; stroke: currentColor; stroke-miterlimit: 10; stroke-width: 20px;"/>
+  <circle cx="129.5" cy="179" r="119" style="fill: none; stroke: currentColor; stroke-miterlimit: 10; stroke-width: 20px;"/>
+  <path d="m248.5,180c0-93.19-52.48-168.86-117.53-169.99-.69.68-2.08,1.07-2.77,1.75" style="fill: none; stroke: currentColor; stroke-miterlimit: 10; stroke-width: 20px;"/>
+</svg>
--- a/src/assets/svgs/electrical/stroke/手车01.svg
+++ b/src/assets/svgs/electrical/stroke/手车01.svg
@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="_图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 158 286">
+  <polyline points="6.88 87 79 14.88 151.12 87" style="fill: none; stroke: currentColor; stroke-miterlimit: 10; stroke-width: 20px;"/>
+  <polyline points="6.6 155.52 78.73 83.39 150.85 155.52" style="fill: none; stroke: currentColor; stroke-miterlimit: 10; stroke-width: 20px;"/>
+  <line x1="79" y1="94" x2="79" y2="286" style="fill: none; stroke: currentColor; stroke-miterlimit: 10; stroke-width: 20px;"/>
+</svg>
--- a/src/assets/svgs/electrical/stroke/接地.svg
+++ b/src/assets/svgs/electrical/stroke/接地.svg
@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="_图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 210 392">
+  <line y1="284" x2="210" y2="284" style="fill: none; stroke: currentColor; stroke-miterlimit: 10; stroke-width: 20px;"/>
+  <line x1="25" y1="333" x2="185" y2="333" style="fill: none; stroke: currentColor; stroke-miterlimit: 10; stroke-width: 20px;"/>
+  <line x1="45" y1="382" x2="165" y2="382" style="fill: none; stroke: currentColor; stroke-miterlimit: 10; stroke-width: 20px;"/>
+  <line x1="105" x2="105" y2="275" style="fill: none; stroke: currentColor; stroke-miterlimit: 10; stroke-width: 20px;"/>
+</svg>
--- a/src/assets/svgs/electrical/stroke/断路器-开关.svg
+++ b/src/assets/svgs/electrical/stroke/断路器-开关.svg
@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: $$$/GeneralStr/196=Adobe Illustrator 27.6.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 125.5 318" style="enable-background:new 0 0 125.5 318;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:currentColor;stroke-width:20;stroke-miterlimit:10;}
+	.st1{fill:none;stroke:currentColor;stroke-width:4;stroke-miterlimit:10;}
+	.st2{fill:none;stroke:currentColor;stroke-width:10;stroke-miterlimit:10;}
+	.st3{fill:none;stroke:currentColor;stroke-width:16;stroke-miterlimit:10;}
+</style>
+<line class="st0" x1="111" y1="0" x2="111" y2="76"/>
+<line class="st0" x1="111" y1="242" x2="111" y2="318"/>
+<line class="st1" x1="96" y1="74" x2="124" y2="102"/>
+<line class="st1" x1="96" y1="102" x2="124" y2="74"/>
+<line class="st0" x1="110.5" y1="251.47" x2="9.5" y2="76.53"/>
+</svg>
--- a/src/assets/svgs/electrical/stroke/消弧线圈.svg
+++ b/src/assets/svgs/electrical/stroke/消弧线圈.svg
@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="_图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 146 648">
+  <path d="m66,78c37,0,67,30,67,67s-30,67-67,67" style="fill: none; stroke: currentColor; stroke-miterlimit: 10; stroke-width: 16px;"/>
+  <path d="m65.91,211.53c37,0,67,30,67,67s-30,67-67,67" style="fill: none; stroke: currentColor; stroke-miterlimit: 10; stroke-width: 16px;"/>
+  <path d="m65.91,345.53c37,0,67,30,67,67s-30,67-67,67" style="fill: none; stroke: currentColor; stroke-miterlimit: 10; stroke-width: 16px;"/>
+  <line x1="62" y1=".5" x2="62" y2="86.5" style="fill: none; stroke: currentColor; stroke-miterlimit: 10; stroke-width: 16px;"/>
+  <line x1="74" y1="474" x2="74" y2="560" style="fill: none; stroke: currentColor; stroke-miterlimit: 10; stroke-width: 16px;"/>
+  <line x1=".14" y1="570" x2="145.86" y2="570" style="fill: none; stroke: currentColor; stroke-miterlimit: 10; stroke-width: 20px;"/>
+  <line x1="17.49" y1="604" x2="128.51" y2="604" style="fill: none; stroke: currentColor; stroke-miterlimit: 10; stroke-width: 20px;"/>
+  <line x1="33" y1="638" x2="113" y2="638" style="fill: none; stroke: currentColor; stroke-miterlimit: 10; stroke-width: 20px;"/>
+</svg>
--- a/src/assets/svgs/electrical/stroke/熔断器.svg
+++ b/src/assets/svgs/electrical/stroke/熔断器.svg
@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="_图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 190 469">
+  <rect x="10" y="98.5" width="170" height="272" style="fill: none; stroke: currentColor; stroke-miterlimit: 10; stroke-width: 20px;"/>
+  <line x1="95" y1="1" x2="95" y2="469" style="fill: none; stroke: currentColor; stroke-miterlimit: 10; stroke-width: 20px;"/>
+</svg>
--- a/src/assets/svgs/electrical/stroke/电动机.svg
+++ b/src/assets/svgs/electrical/stroke/电动机.svg
@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="_图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 465.5 465">
+  <circle cx="233" cy="233" r="222" stroke="currentColor" style="fill: none; stroke-miterlimit: 10; stroke-width: 20px;"/>
+</svg>
--- a/src/assets/svgs/electrical/stroke/电容器.svg
+++ b/src/assets/svgs/electrical/stroke/电容器.svg
@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="_图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 345 151">
+  <line y1="74" x2="129" y2="74" style="fill: none; stroke: currentColor; stroke-miterlimit: 10; stroke-width: 20px;"/>
+  <line x1="135" x2="135" y2="151" style="fill: none; stroke: currentColor; stroke-miterlimit: 10; stroke-width: 20px;"/>
+  <line x1="345" y1="77" x2="216" y2="77" style="fill: none; stroke: currentColor; stroke-miterlimit: 10; stroke-width: 20px;"/>
+  <line x1="210" y1="151" x2="210" y2="0" style="fill: none; stroke: currentColor; stroke-miterlimit: 10; stroke-width: 20px;"/>
+</svg>
--- a/src/assets/svgs/electrical/stroke/电抗器.svg
+++ b/src/assets/svgs/electrical/stroke/电抗器.svg
@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: $$$/GeneralStr/196=Adobe Illustrator 27.6.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 120 282" style="enable-background:new 0 0 120 282;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:currentColor;stroke-width:20;stroke-miterlimit:10;}
+	.st1{fill:none;stroke:currentColor;stroke-width:4;stroke-miterlimit:10;}
+	.st2{fill:none;stroke-width:10;stroke-miterlimit:10;}
+	.st3{fill:none;stroke-width:16;stroke-miterlimit:10;}
+</style>
+<path class="st0" d="M60,215c-28.17,0-51-22.83-51-51s22.83-51,51-51s51,22.83,51,51"/>
+<line class="st0" x1="60" y1="0" x2="60" y2="159"/>
+<line class="st0" x1="60" y1="205" x2="60" y2="283"/>
+<line class="st0" x1="120" y1="163" x2="50" y2="163"/>
+</svg>
--- a/src/assets/svgs/electrical/stroke/电缆终端头.svg
+++ b/src/assets/svgs/electrical/stroke/电缆终端头.svg
@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: $$$/GeneralStr/196=Adobe Illustrator 27.6.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 222 336" style="enable-background:new 0 0 222 336;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:currentColor;stroke-width:20;stroke-miterlimit:10;}
+	.st1{fill:none;stroke:currentColor;stroke-width:4;stroke-miterlimit:10;}
+	.st2{fill:none;stroke:currentColor;stroke-width:10;stroke-miterlimit:10;}
+	.st3{fill:none;stroke:currentColor;stroke-width:16;stroke-miterlimit:10;}
+</style>
+<line class="st0" x1="111" y1="0" x2="111" y2="336"/>
+<polygon class="st0" points="111,269 204.92,106.33 17.08,106.33 "/>
+</svg>
--- a/src/assets/svgs/electrical/stroke/自动空气断路器.svg
+++ b/src/assets/svgs/electrical/stroke/自动空气断路器.svg
@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: $$$/GeneralStr/196=Adobe Illustrator 27.6.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 160 318" style="enable-background:new 0 0 160 318;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:currentColor;stroke-width:20;stroke-miterlimit:10;}
+	.st1{fill:none;stroke:currentColor;stroke-width:4;stroke-miterlimit:10;}
+	.st2{fill:none;stroke:currentColor;stroke-width:10;stroke-miterlimit:10;}
+	.st3{fill:none;stroke:currentColor;stroke-width:16;stroke-miterlimit:10;}
+</style>
+<line class="st0" x1="149.81" y1="-0.48" x2="149.81" y2="75.52"/>
+<line class="st0" x1="149.81" y1="241.52" x2="149.81" y2="317.52"/>
+<line class="st0" x1="149.31" y1="250.99" x2="48.31" y2="76.05"/>
+<line class="st2" x1="50" y1="185" x2="108" y2="185"/>
+</svg>
--- a/src/assets/svgs/electrical/stroke/跌落式熔断器.svg
+++ b/src/assets/svgs/electrical/stroke/跌落式熔断器.svg
@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: $$$/GeneralStr/196=Adobe Illustrator 27.6.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 179 319" style="enable-background:new 0 0 179 319;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:currentColor;stroke-width:20;stroke-miterlimit:10;}
+	.st1{fill:none;stroke:currentColor;stroke-width:4;stroke-miterlimit:10;}
+	.st2{fill:none;stroke:currentColor;stroke-width:10;stroke-miterlimit:10;}
+	.st3{fill:none;stroke:currentColor;stroke-width:16;stroke-miterlimit:10;}
+</style>
+<line class="st0" x1="168.6" y1="0.58" x2="168.6" y2="76.58"/>
+<line class="st0" x1="168.6" y1="242.58" x2="168.6" y2="318.58"/>
+<line class="st0" x1="168.1" y1="252.05" x2="67.1" y2="77.11"/>
+<rect x="82" y="107" transform="matrix(0.866 -0.5 0.5 0.866 -64.4769 78.3689)" class="st3" width="64" height="105"/>
+<line class="st2" x1="45.05" y1="190.18" x2="87" y2="169"/>
+</svg>
--- a/src/assets/svgs/electrical/stroke/隔离开关-刀闸.svg
+++ b/src/assets/svgs/electrical/stroke/隔离开关-刀闸.svg
@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: $$$/GeneralStr/196=Adobe Illustrator 27.6.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 133 318" style="enable-background:new 0 0 133 318;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:currentColor;stroke-width:20;stroke-miterlimit:10;}
+	.st1{fill:none;stroke:currentColor;stroke-width:4;stroke-miterlimit:10;}
+	.st2{fill:none;stroke:currentColor;stroke-width:10;stroke-miterlimit:10;}
+	.st3{fill:none;stroke:currentColor;stroke-width:16;stroke-miterlimit:10;}
+</style>
+<line class="st0" x1="109.27" y1="0.58" x2="109.27" y2="76.58"/>
+<line class="st0" x1="109.27" y1="242.58" x2="109.27" y2="318.58"/>
+<line class="st0" x1="108.77" y1="252.05" x2="7.77" y2="77.11"/>
+<line class="st0" x1="82" y1="79" x2="133" y2="79"/>
+</svg>
--- a/src/assets/svgs/electrical/三绕组变压器.svg
+++ b/src/assets/svgs/electrical/三绕组变压器.svg
@ -0,0 +1,5 @@
+<svg id="_图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 454 488.5">
+  <path d="m134.5,20c30.58,0,59.34,11.91,80.96,33.54,21.63,21.63,33.54,50.38,33.54,80.96s-11.91,59.34-33.54,80.96c-21.63,21.63-50.38,33.54-80.96,33.54s-59.34-11.91-80.96-33.54c-21.63-21.63-33.54-50.38-33.54-80.96s11.91-59.34,33.54-80.96c21.63-21.63,50.38-33.54,80.96-33.54m0-20C60.22,0,0,60.22,0,134.5s60.22,134.5,134.5,134.5,134.5-60.22,134.5-134.5S208.78,0,134.5,0h0Z"/>
+  <path d="m134.5,240c30.58,0,59.34,11.91,80.96,33.54,21.63,21.63,33.54,50.38,33.54,80.96s-11.91,59.34-33.54,80.96c-21.63,21.63-50.38,33.54-80.96,33.54s-59.34-11.91-80.96-33.54c-21.63-21.63-33.54-50.38-33.54-80.96s11.91-59.34,33.54-80.96c21.63-21.63,50.38-33.54,80.96-33.54m0-20C60.22,220,0,280.22,0,354.5s60.22,134.5,134.5,134.5,134.5-60.22,134.5-134.5-60.22-134.5-134.5-134.5h0Z"/>
+  <path d="m319.5,129.75c30.58,0,59.34,11.91,80.96,33.54,21.63,21.63,33.54,50.38,33.54,80.96s-11.91,59.34-33.54,80.96c-21.63,21.63-50.38,33.54-80.96,33.54s-59.34-11.91-80.96-33.54c-21.63-21.63-33.54-50.38-33.54-80.96s11.91-59.34,33.54-80.96c21.63-21.63,50.38-33.54,80.96-33.54m0-20c-74.28,0-134.5,60.22-134.5,134.5s60.22,134.5,134.5,134.5,134.5-60.22,134.5-134.5-60.22-134.5-134.5-134.5h0Z"/>
+</svg>
--- a/src/assets/svgs/electrical/交流发电机.svg
+++ b/src/assets/svgs/electrical/交流发电机.svg
@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="_图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
+  <path d="m250,20c31.06,0,61.18,6.08,89.52,18.07,27.39,11.58,51.99,28.17,73.11,49.3,21.13,21.13,37.72,45.73,49.3,73.11,11.99,28.34,18.07,58.46,18.07,89.52s-6.08,61.18-18.07,89.52c-11.58,27.39-28.17,51.99-49.3,73.11s-45.73,37.72-73.11,49.3c-28.34,11.99-58.46,18.07-89.52,18.07s-61.18-6.08-89.52-18.07c-27.39-11.58-51.99-28.17-73.11-49.3-21.13-21.13-37.72-45.73-49.3-73.11-11.99-28.34-18.07-58.46-18.07-89.52s6.08-61.18,18.07-89.52c11.58-27.39,28.17-51.99,49.3-73.11,21.13-21.13,45.73-37.72,73.11-49.3,28.34-11.99,58.46-18.07,89.52-18.07m0-20C111.93,0,0,111.93,0,250s111.93,250,250,250,250-111.93,250-250S388.07,0,250,0h0Z"/>
+  <text transform="translate(193.93 213.75) scale(1.35 1)" style="font-family: SimHei, SimHei; font-size: 161.58px;"><tspan x="0" y="0">G</tspan></text>
+  <text transform="translate(145.34 570.94) scale(1.24 1)" style="font-family: SimHei, SimHei; font-size: 327.63px;"><tspan x="0" y="0">~</tspan></text>
+</svg>
--- a/src/assets/svgs/electrical/双绕组变压器.svg
+++ b/src/assets/svgs/electrical/双绕组变压器.svg
@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="_图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 278 500">
+  <path d="m139,21c31.79,0,61.67,12.38,84.15,34.85,22.48,22.48,34.85,52.36,34.85,84.15s-12.38,61.67-34.85,84.15c-22.48,22.48-52.36,34.85-84.15,34.85s-61.67-12.38-84.15-34.85c-22.48-22.48-34.85-52.36-34.85-84.15s12.38-61.67,34.85-84.15c22.48-22.48,52.36-34.85,84.15-34.85m0-20C62.23,1,0,63.23,0,140s62.23,139,139,139,139-62.23,139-139S215.77,1,139,1h0Z"/>
+  <path d="m139,242c31.79,0,61.67,12.38,84.15,34.85,22.48,22.48,34.85,52.36,34.85,84.15s-12.38,61.67-34.85,84.15c-22.48,22.48-52.36,34.85-84.15,34.85s-61.67-12.38-84.15-34.85c-22.48-22.48-34.85-52.36-34.85-84.15s12.38-61.67,34.85-84.15c22.48-22.48,52.36-34.85,84.15-34.85m0-20C62.23,222,0,284.23,0,361s62.23,139,139,139,139-62.23,139-139-62.23-139-139-139h0Z"/>
+</svg>
--- a/src/assets/svgs/electrical/手车02.svg
+++ b/src/assets/svgs/electrical/手车02.svg
@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="_图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 180">
+  <rect y="0" width="180" height="180" rx="18.7" ry="18.7"/>
+</svg>
--- a/src/components/custom-components/card-vue/index.vue
+++ b/src/components/custom-components/card-vue/index.vue
@ -0,0 +1,39 @@
+<!-- eslint-disable vue/html-indent -->
+<template>
+  <div class="w-1/1 h-1/1 flex justify-center items-center custom-card">
+    <el-card
+      class="w-95/100 h-95/100"
+      :shadow="props.shadow as any"
+      :style="{
+        'background-color': props.backGroundColor
+      }"
+    ></el-card>
+  </div>
+</template>
+<script setup lang="ts">
+import { ElCard } from 'element-plus';
+const props = defineProps({
+  shadow: {
+    type: String,
+    default: ''
+  },
+  backGroundColor: {
+    type: String,
+    default: '#ffffff'
+  },
+  boxShadow: {
+    type: String,
+    default: '#ffffff'
+  }
+});
+</script>
+<style lang="less">
+.custom-card {
+  .el-card.is-always-shadow {
+    box-shadow: v-bind('`0px 0px 12px ${$props.boxShadow}`') !important;
+  }
+  .el-card.is-hover-shadow:hover {
+    box-shadow: v-bind('`0px 0px 12px ${$props.boxShadow}`') !important;
+  }
+}
+</style>
--- a/src/components/custom-components/kv-vue/index.vue
+++ b/src/components/custom-components/kv-vue/index.vue
@ -0,0 +1,71 @@
+<template>
+  <table class="w-1/1 h-1/1 kvTable">
+    <tbody>
+      <tr>
+        <td class="kvKey kvKeyValue" colspan="1">{{ props.label }}</td>
+        <td class="kvValue kvKeyValue" colspan="1">{{ props.value }}</td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+<script setup lang="ts">
+import { ElDescriptions, ElDescriptionsItem } from 'element-plus';
+import type { PropType } from 'vue';
+const props = defineProps({
+  fontFamily: {
+    type: String,
+    default: ''
+  },
+  fontSize: {
+    type: Number,
+    default: 15
+  },
+  label: {
+    type: String,
+    default: ''
+  },
+  labelWidth: {
+    type: Number,
+    default: 50
+  },
+  value: {
+    type: String,
+    default: ''
+  },
+  valueWidth: {
+    type: Number,
+    default: 50
+  },
+  color: {
+    type: String,
+    default: ''
+  },
+  border: {
+    type: Boolean,
+    default: true
+  },
+  borderColor: {
+    type: String,
+    default: ''
+  }
+});
+</script>
+<style scroped>
+.kvTable {
+  border: v-bind('`${props.border?1:0}px solid ${props.borderColor}`');
+}
+.kvKeyValue {
+  font-size: v-bind('`${props.fontSize}px`');
+  font-family: v-bind('`${props.fontFamily}`');
+  color: v-bind('`${props.color}`');
+}
+.kvKey {
+  width: v-bind('`${props.labelWidth}px`');
+  border-right-width: v-bind('`${props.border?1:0}px`');
+  border-right-style: solid;
+  border-right-color: v-bind('`${props.borderColor}`') !important;
+}
+.kvValue {
+  width: v-bind('`${props.valueWidth}px`');
+}
+</style>
--- a/src/components/custom-components/now-time-vue/index.vue
+++ b/src/components/custom-components/now-time-vue/index.vue
@ -0,0 +1,78 @@
+<!-- eslint-disable vue/html-indent -->
+<template>
+  <div>
+    <div class="flex">
+      <div class="font-bold" :style="{ color: props.fontColor, fontSize: `${props.dateSize}px` }">
+        {{ date }}
+      </div>
+      <div
+        class="font-bold ml-5px"
+        :style="{ color: props.fontColor, fontSize: `${props.weekSize}px ` }"
+      >
+        {{ week }}
+      </div>
+    </div>
+    <div
+      class="font-bold mt-5px ml-5px"
+      :style="{ color: props.fontColor, fontSize: `${props.timeSize}px ` }"
+    >
+      {{ time }}
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { computed, onMounted, ref, onUnmounted } from 'vue';
+const props = defineProps({
+  fontColor: {
+    type: String,
+    default: '#000000'
+  },
+  dateSize: {
+    type: Number,
+    default: 12
+  },
+  weekSize: {
+    type: Number,
+    default: 12
+  },
+  timeSize: {
+    type: Number,
+    default: 24
+  }
+});
+const now_date = ref(new Date());
+const timer = ref();
+const date = computed(() => {
+  const year = now_date.value.getFullYear();
+  const month = now_date.value.getMonth() + 1;
+  const day = now_date.value.getDate();
+  const time = year.toString() + '年' + month.toString() + '月' + day.toString() + '日';
+  return time;
+});
+const week = computed(() => {
+  const d = now_date.value.getDay();
+  const weekday = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
+  const time = weekday[d];
+  return time;
+});
+const time = computed(() => {
+  const hour = now_date.value.getHours();
+  const minute = now_date.value.getMinutes();
+  const second = now_date.value.getSeconds();
+  const time =
+    (hour < 10 ? '0' + hour.toString() : hour.toString()) +
+    ':' +
+    (minute < 10 ? '0' + minute.toString() : minute.toString()) +
+    ':' +
+    (second < 10 ? '0' + second.toString() : second.toString());
+  return time;
+});
+onMounted(() => {
+  timer.value = setInterval(() => {
+    now_date.value = new Date(); // 修改数据date
+  }, 500);
+});
+onUnmounted(() => {
+  clearInterval(timer.value);
+});
+</script>
--- a/src/components/custom-components/sys-button-vue/index.vue
+++ b/src/components/custom-components/sys-button-vue/index.vue
@ -0,0 +1,48 @@
+<template>
+  <div style="width: 100%; height: 100%">
+    <button class="w-1/1 h-1/1" :style="getStyle(props.type, props.round)">
+      <el-text>{{ props.text }}</el-text>
+    </button>
+  </div>
+</template>
+<script setup lang="ts">
+import { ElText } from 'element-plus';
+import type { PropType } from 'vue';
+type ButtonType = '' | 'default' | 'success' | 'warning' | 'info' | 'primary' | 'danger';
+const props = defineProps({
+  text: {
+    type: String,
+    default: '按钮文本'
+  },
+  type: {
+    type: String as PropType<ButtonType>,
+    default: ''
+  },
+  round: {
+    type: Boolean,
+    default: false
+  }
+});
+const getStyle = (type: ButtonType, round: boolean) => {
+  let bg_color = '';
+  let border_radius = '4px';
+  if (type == 'primary') {
+    bg_color = '#409eff';
+  } else if (type == 'success') {
+    bg_color = '#67c23a';
+  } else if (type == 'warning') {
+    bg_color = '#e6a23c';
+  } else if (type == 'danger') {
+    bg_color = '#f56c6c';
+  } else if (type == 'info') {
+    bg_color = '#909399';
+  }
+  if (round) {
+    border_radius = '20px';
+  }
+  return {
+    backgroundColor: bg_color,
+    borderRadius: border_radius
+  };
+};
+</script>
--- a/src/components/custom-components/text-vue/index.vue
+++ b/src/components/custom-components/text-vue/index.vue
@ -0,0 +1,39 @@
+<template>
+  <p
+    class="break-words w-1/1 h-1/1"
+    :class="props.vertical ? 'text-vertical' : ''"
+    :style="{ fontFamily: props.fontFamily, fontSize: props.fontSize + 'px', color: props.fill }"
+  >
+    {{ props.text }}
+  </p>
+</template>
+<script setup lang="ts">
+const props = defineProps({
+  fontFamily: {
+    type: String,
+    default: ''
+  },
+  fontSize: {
+    type: Number,
+    default: 15
+  },
+  text: {
+    type: String,
+    default: ''
+  },
+  fill: {
+    type: String,
+    default: ''
+  },
+  vertical: {
+    type: Boolean,
+    default: false
+  }
+});
+</script>
+<style scoped>
+.text-vertical {
+  writing-mode: tb;
+  letter-spacing: 5px;
+}
+</style>
--- a/src/components/mt-dzr/tests/mt-dzr.spec.ts
+++ b/src/components/mt-dzr/tests/mt-dzr.spec.ts
@ -0,0 +1,11 @@
+import { describe, it, expect } from 'vitest';
+
+import { mount } from '@vue/test-utils';
+import HelloWorld from '../index.vue';
+
+describe('HelloWorld', () => {
+  it('renders properly', () => {
+    const wrapper = mount(HelloWorld, { props: { msg: 'Hello Vitest' } });
+    expect(wrapper.text()).toContain('Hello Vitest');
+  });
+});
--- a/src/components/mt-dzr/components/render-item.vue
+++ b/src/components/mt-dzr/components/render-item.vue
@ -0,0 +1,5 @@
+<template>
+  <div class="w-1/1 h-1/1 select-none">
+    <slot></slot>
+  </div>
+</template>
--- a/src/components/mt-dzr/components/resize-handle.vue
+++ b/src/components/mt-dzr/components/resize-handle.vue
@ -0,0 +1,196 @@
+<template>
+  <div>
+    <div
+      v-for="(item, key) in points"
+      :key="key"
+      :id="`resize_${key}`"
+      :style="item"
+      class="mt-dzr-resize mt-dzr-resize-point touch-none"
+      @mousedown="(e) => onMouseDown(e, key)"
+      @touchstart.passive="(e) => onMouseDown(e, key)"
+    ></div>
+  </div>
+</template>
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import type { IDzrPropsModelValue } from '../types';
+import { dzrStore } from '../store';
+import {
+  autoDestroyMouseMove,
+  calcGrid,
+  centerToTL,
+  degToRadian,
+  formatData,
+  getLength,
+  getNewStyle,
+  getXY
+} from '../utils';
+import type { MouseTouchEvent } from '../utils/types';
+type ResizeProps = {
+  itemInfo: IDzrPropsModelValue;
+  targetDom: HTMLElement | null;
+  scaleRatio: number;
+  gridAlignSize: number;
+  genId: string;
+  useProportionalScaling?: boolean;
+};
+const resizeProps = withDefaults(defineProps<ResizeProps>(), {
+  scaleRatio: 1,
+  gridAlignSize: 1,
+  useProportionalScaling: false
+});
+const points = computed(() => {
+  return {
+    tl: {
+      left: '0px',
+      top: '0px',
+      cursor: getCursor(0)
+    },
+    tc: {
+      left: resizeProps.itemInfo.width / 2 + 'px',
+      top: '0px',
+      cursor: getCursor(45)
+    },
+    tr: {
+      left: resizeProps.itemInfo.width + 'px',
+      top: '0px',
+      cursor: getCursor(90)
+    },
+    l: {
+      left: '0px',
+      top: resizeProps.itemInfo.height / 2 + 'px',
+      cursor: getCursor(315)
+    },
+    r: {
+      left: resizeProps.itemInfo.width + 'px',
+      top: resizeProps.itemInfo.height / 2 + 'px',
+      cursor: getCursor(135)
+    },
+    bl: {
+      left: '0px',
+      top: resizeProps.itemInfo.height + 'px',
+      cursor: getCursor(270)
+    },
+    bc: {
+      left: resizeProps.itemInfo.width / 2 + 'px',
+      top: resizeProps.itemInfo.height + 'px',
+      cursor: getCursor(225)
+    },
+    br: {
+      left: resizeProps.itemInfo.width + 'px',
+      top: resizeProps.itemInfo.height + 'px',
+      cursor: getCursor(180)
+    }
+  };
+});
+const angle_to_cursor = [
+  { start: 338, end: 23, cursor: 'nw' },
+  { start: 23, end: 68, cursor: 'n' },
+  { start: 68, end: 113, cursor: 'ne' },
+  { start: 293, end: 338, cursor: 'w' },
+  { start: 113, end: 158, cursor: 'e' },
+  { start: 248, end: 293, cursor: 'sw' },
+  { start: 203, end: 248, cursor: 's' },
+  { start: 158, end: 203, cursor: 'se' }
+];
+/**
+ * 获取旋转之后的光标样式
+ * @param init_angle 初始角度 360/8=45
+ */
+const getCursor = (init_angle: number) => {
+  const now_init_angle = (init_angle + resizeProps.itemInfo.angle) % 360;
+  const find_cursor = angle_to_cursor.find(
+    (f) => f.start <= now_init_angle && f.end > now_init_angle
+  );
+  if (!find_cursor) {
+    return 'nw-resize';
+  }
+  return find_cursor.cursor + '-resize';
+};
+const emits = defineEmits(['update:itemInfo', 'onResizeDone', 'onResizeMove']);
+//记录原始位置
+const dzr_copy_info_value = ref({ ...resizeProps.itemInfo });
+const onMouseDown = (
+  de: MouseTouchEvent,
+  type: 'tl' | 'tc' | 'tr' | 'l' | 'r' | 'bl' | 'bc' | 'br'
+) => {
+  de.stopPropagation();
+  dzr_copy_info_value.value = { ...resizeProps.itemInfo };
+  const { clientX: de_client_x, clientY: de_client_y } = getXY(de);
+  //计算组件中心点
+  const { width, height, left, top } = resizeProps.itemInfo;
+  const centerX = left + width / 2;
+  const centerY = top + height / 2;
+  //记录原始信息和中心点
+  const rect = {
+    width,
+    height,
+    centerX,
+    centerY,
+    rotateAngle: resizeProps.itemInfo.angle
+  };
+  const onMouseMove = (me: MouseTouchEvent) => {
+    me.preventDefault();
+    dzrStore.showDzrCopy({ ...dzr_copy_info_value.value }, resizeProps.genId);
+    const { clientX: me_client_x, clientY: me_client_y } = getXY(me);
+    // 距离 网格对齐
+    const delta_x = (me_client_x - de_client_x) / resizeProps.scaleRatio;
+    const delta_y = (me_client_y - de_client_y) / resizeProps.scaleRatio;
+    const alpha = Math.atan2(delta_y, delta_x);
+    const delta_l = getLength(delta_x, delta_y);
+    const beta = alpha - degToRadian(rect.rotateAngle);
+    const deltaW = delta_l * Math.cos(beta);
+    const deltaH = delta_l * Math.sin(beta);
+    // 如果按shift键则等比缩放
+    const ratio =
+      resizeProps.useProportionalScaling || me.shiftKey ? rect.width / rect.height : undefined;
+    const {
+      position: { centerX, centerY },
+      size: { width, height }
+    } = getNewStyle(type, { ...rect, rotateAngle: rect.rotateAngle }, deltaW, deltaH, ratio, 1, 1);
+    const pData = centerToTL({
+      centerX,
+      centerY,
+      width,
+      height,
+      angle: resizeProps.itemInfo.angle
+    });
+    const format_data = formatData(pData, centerX, centerY);
+    const new_width = calcGrid(format_data.width, resizeProps.gridAlignSize);
+    const new_height = calcGrid(format_data.height, resizeProps.gridAlignSize);
+    emits('update:itemInfo', {
+      ...resizeProps.itemInfo,
+      ...format_data,
+      left: calcGrid(format_data.left, resizeProps.gridAlignSize),
+      top: calcGrid(format_data.top, resizeProps.gridAlignSize),
+      width: new_width,
+      height: new_height
+    });
+    emits('onResizeMove', {
+      width: new_width,
+      height: new_height
+    });
+  };
+  autoDestroyMouseMove(onMouseMove, () => {
+    dzrStore.hideDzrCopy();
+    emits('onResizeDone');
+  });
+};
+</script>
+<style scoped lang="less">
+.mt-dzr-resize {
+  position: absolute;
+}
+
+.mt-dzr-resize-point {
+  position: absolute;
+  background: #fff;
+  border: 1px solid #59c7f9;
+  width: 8px;
+  height: 8px;
+  margin-left: -4px;
+  margin-top: -4px;
+  border-radius: 50%;
+  z-index: 1;
+}
+</style>
--- a/src/components/mt-dzr/components/rotate-handle.vue
+++ b/src/components/mt-dzr/components/rotate-handle.vue
@ -0,0 +1,88 @@
+<template>
+  <div class="mt-dzr-rotate touch-none" @mousedown="onMouseDown" @touchstart.passive="onMouseDown">
+    <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M929 849a30 30 0 0 1-30-30v-83.137a447.514 447.514 0 0 1-70.921 92.209C722.935 933.225 578.442 975.008 442 953.482a444.917 444.917 0 0 1-241.139-120.591 30 30 0 1 1 37.258-47.01l0.231-0.231A385.175 385.175 0 0 0 442 892.625v-0.006c120.855 22.123 250.206-13.519 343.656-106.975a386.646 386.646 0 0 0 70.6-96.653h-87.247a30 30 0 0 1 0-60H929a30 30 0 0 1 30 30V819a30 30 0 0 1-30 30zM512 392a120 120 0 1 1-120 120 120 120 0 0 1 120-120z m293.005-147.025a29.87 29.87 0 0 1-19.117-6.882l-0.232 0.231A386.5 386.5 0 0 0 689.478 168h-0.011c-145.646-75.182-329.021-51.747-451.117 70.35a386.615 386.615 0 0 0-70.6 96.65H255a30 30 0 0 1 0 60H95a30 30 0 0 1-30-30V205a30 30 0 0 1 60 0v83.129a447.534 447.534 0 0 1 70.923-92.206C317.981 73.866 493.048 37.2 647 85.836v-0.045a444.883 444.883 0 0 1 176.143 105.291 30 30 0 0 1-18.138 53.893z"
+        fill="#06B7FF"
+      ></path>
+    </svg>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+import { dzrStore } from '../store';
+import type { IDzrPropsModelValue } from '../types';
+import { alignToGrid, autoDestroyMouseMove, getXY } from '../utils';
+import type { MouseTouchEvent } from '../utils/types';
+type RotateProps = {
+  itemInfo: IDzrPropsModelValue;
+  targetDom: HTMLElement | null;
+  genId: string;
+};
+const rotateProps = withDefaults(defineProps<RotateProps>(), {});
+const emits = defineEmits(['update:itemInfo', 'onRotateDone', 'onRotateMove']);
+//记录原始位置
+const dzr_copy_info_value = ref({ ...rotateProps.itemInfo });
+const is_mouse_down = ref(false);
+const onMouseDown = (de: MouseTouchEvent) => {
+  de.stopPropagation();
+  if (!rotateProps.targetDom) {
+    console.error('target_dom is null');
+    return;
+  }
+  const target_dom_rect = rotateProps.targetDom.getBoundingClientRect();
+  if (!target_dom_rect) {
+    console.error('boundingClientRect is null');
+    return;
+  }
+  const { clientX: de_client_x, clientY: de_client_y } = getXY(de);
+  dzr_copy_info_value.value = { ...rotateProps.itemInfo };
+  dzrStore.hideDzrCopy();
+  //记录旋转前的初始值
+  const init_angle = rotateProps.itemInfo.angle;
+  //计算组件中心点位置
+  const center_x = target_dom_rect.left + target_dom_rect.width / 2;
+  const center_y = target_dom_rect.top + target_dom_rect.height / 2;
+  is_mouse_down.value = true;
+  const onMouseMove = (me: MouseTouchEvent) => {
+    if (!is_mouse_down.value) {
+      return;
+    }
+    const { clientX: me_client_x, clientY: me_client_y } = getXY(me);
+    dzrStore.showDzrCopy({ ...dzr_copy_info_value.value }, rotateProps.genId);
+    // 旋转前的角度
+    const rotate_before =
+      Math.atan2(de_client_y - center_y, de_client_x - center_x) / (Math.PI / 180);
+    // 旋转后的角度
+    const rotate_after =
+      Math.atan2(me_client_y - center_y, me_client_x - center_x) / (Math.PI / 180);
+    const new_angle = alignToGrid(init_angle + rotate_after - rotate_before);
+    emits('update:itemInfo', {
+      ...rotateProps.itemInfo,
+      left: alignToGrid(rotateProps.itemInfo.left),
+      top: alignToGrid(rotateProps.itemInfo.top),
+      angle: new_angle
+    });
+    emits('onRotateMove', {
+      angle: new_angle
+    });
+  };
+  autoDestroyMouseMove(onMouseMove, () => {
+    dzrStore.hideDzrCopy();
+    is_mouse_down.value = false;
+    emits('onRotateDone');
+  });
+};
+</script>
+<style scoped lang="less">
+.mt-dzr-rotate {
+  position: absolute;
+  cursor: grab;
+  left: 50%;
+  top: 0;
+  transform: translate(-50%, -160%);
+  width: 16px;
+  height: 16px;
+  font-size: 20px;
+}
+</style>
--- a/src/components/mt-dzr/composables/mouse.ts
+++ b/src/components/mt-dzr/composables/mouse.ts
--- a/src/components/mt-dzr/index.ts
+++ b/src/components/mt-dzr/index.ts
@ -0,0 +1,3 @@
+import MtDzr from './index.vue';
+
+export default MtDzr;
--- a/src/components/mt-dzr/index.vue
+++ b/src/components/mt-dzr/index.vue
@ -0,0 +1,284 @@
+<template>
+  <div
+    class="absolute select-none opacity-30"
+    v-if="
+      dzrStore.dzr_copy_info.show &&
+      dzrStore.dzr_copy_info.gen_id == gen_id &&
+      MtDzrProps.showGhostDom
+    "
+    style="outline: 1px solid #06b7ff"
+    :style="getStyle(dzrStore.dzr_copy_info.value)"
+  >
+    <render-item>
+      <slot></slot>
+    </render-item>
+  </div>
+  <div
+    v-if="!MtDzrProps.hide"
+    :id="MtDzrProps.id"
+    ref="dzrRef"
+    :class="`${MtDzrProps.class} absolute select-none touch-none ${
+      MtDzrProps.lock ? 'opacity-50' : ''
+    } ${
+      MtDzrProps.active && MtDzrProps.modelValue.width != 0 && MtDzrProps.modelValue.height != 0
+        ? 'dzr-active'
+        : ''
+    }`"
+    @mousedown="onMouseDown"
+    @touchstart.passive="onMouseDown"
+    @mouseenter="onMouseEnter"
+    @mouseleave="onMouseLeave"
+    @click.right.prevent="onRightClick"
+    :style="getStyle(drag_data_info)"
+  >
+    <render-item>
+      <slot></slot>
+    </render-item>
+    <div v-if="MtDzrProps.resize && !MtDzrProps.lock && MtDzrProps.active && !MtDzrProps.disabled">
+      <resize-handle
+        v-model:item-info="mt_dzr_vmodel"
+        :target-dom="dzrRef"
+        :scale-ratio="MtDzrProps.scaleRatio"
+        :grid-align-size="grid_align_size"
+        :gen-id="gen_id"
+        :use-proportional-scaling="MtDzrProps.useProportionalScaling"
+        @on-resize-done="onResizeDone"
+        @on-resize-move="(val) => onResizeMove(val)"
+      ></resize-handle>
+    </div>
+    <rotate-handle
+      v-if="MtDzrProps.rotate && !MtDzrProps.lock && MtDzrProps.active && !MtDzrProps.disabled"
+      v-model:item-info="mt_dzr_vmodel"
+      :target-dom="dzrRef"
+      :gen-id="gen_id"
+      @on-rotate-done="onRotateDone"
+      @on-rotate-move="(val) => onRotateMove(val)"
+    ></rotate-handle>
+  </div>
+</template>
+<script setup lang="ts">
+import { computed, nextTick, ref, watch } from 'vue';
+import { type IDzrProps, type IDzrPropsModelValue } from './types';
+import { alignToGrid, autoDestroyMouseMove, getXY, randomString } from './utils/index';
+import ResizeHandle from './components/resize-handle.vue';
+import RotateHandle from './components/rotate-handle.vue';
+import renderItem from './components/render-item.vue';
+import { dzrStore } from './store/index';
+import type { MouseTouchEvent } from './utils/types';
+const MtDzrProps = withDefaults(defineProps<IDzrProps>(), {
+  id: randomString(16),
+  modelValue: () => {
+    return {
+      left: 0,
+      top: 0,
+      width: 0,
+      height: 0,
+      angle: 0
+    };
+  },
+  scaleRatio: 1,
+  grid: () => {
+    return {
+      enabled: false,
+      align: false,
+      size: 10
+    };
+  },
+  resize: true,
+  rotate: true,
+  lock: false,
+  active: false,
+  useProportionalScaling: false,
+  showGhostDom: true,
+  hide: false,
+  disabled: false,
+  adsorp_diff: () => {
+    return {
+      x: 0,
+      y: 0
+    };
+  }
+});
+const MtDzrEmits = defineEmits([
+  'update:modelValue',
+  'mousedown',
+  'onItemMove',
+  'moveMouseUp',
+  'onMouseEnter',
+  'onMouseLeave',
+  'onResizeMove',
+  'onResizeDone',
+  'onRotateDone',
+  'onRightClick',
+  'onRotateMove'
+]);
+const dzrRef = ref();
+//
+const gen_id = randomString(16);
+
+//记录原始位置
+const dzr_copy_info_value = ref({ ...MtDzrProps.modelValue });
+// 拖拽数据
+const drag_data_info = ref({
+  ...MtDzrProps.modelValue
+});
+const getStyle = (data: IDzrPropsModelValue) => {
+  const { width, height, left, top, angle } = data;
+  return {
+    width: width + 'px',
+    height: height + 'px',
+    left: left + 'px',
+    top: top + 'px',
+    transform: `rotate(${angle}deg)`
+  };
+};
+
+//如果网格关闭或者没有开启网格对齐，网格大小为1
+const grid_align_size = computed(() =>
+  !MtDzrProps.grid.align || !MtDzrProps.grid.enabled ? 1 : MtDzrProps.grid.size
+);
+const mt_dzr_vmodel = computed({
+  get: () => drag_data_info.value,
+  set: (value) => {
+    drag_data_info.value = value;
+    MtDzrEmits('update:modelValue', value);
+  }
+});
+const onMouseDown = (de: MouseTouchEvent) => {
+  MtDzrEmits('mousedown', de);
+  if (MtDzrProps.lock || MtDzrProps.disabled) {
+    return;
+  }
+  //记录最开始点击时鼠标位置和组件的位置
+  const { clientX: de_client_x, clientY: de_client_y } = getXY(de);
+  dzr_copy_info_value.value = { ...MtDzrProps.modelValue };
+  drag_data_info.value = {
+    ...MtDzrProps.modelValue
+  };
+  dzrStore.hideDzrCopy();
+  const { left: init_x, top: init_y } = MtDzrProps.modelValue;
+  //计算xy轴最小坐标和最大坐标，不要超出父元素
+  const { clientWidth, clientHeight } = dzrRef.value.parentElement;
+  const min_left = 0;
+  const min_top = 0;
+  const max_left = clientWidth - MtDzrProps.modelValue.width;
+  const max_top = clientHeight - MtDzrProps.modelValue.height;
+  let set_new_left = init_x;
+  let set_new_top = init_y;
+  const onMouseMove = (me: MouseTouchEvent) => {
+    dzrStore.showDzrCopy({ ...dzr_copy_info_value.value }, gen_id);
+    const { clientX: me_client_x, clientY: me_client_y } = getXY(me);
+    const move_x = (me_client_x - de_client_x) / MtDzrProps.scaleRatio;
+    const move_y = (me_client_y - de_client_y) / MtDzrProps.scaleRatio;
+
+    const new_left = alignToGrid(init_x + move_x, grid_align_size.value);
+    const new_top = alignToGrid(init_y + move_y, grid_align_size.value);
+    set_new_left = new_left < min_left ? min_left : new_left > max_left ? max_left : new_left;
+    set_new_top = new_top < min_top ? min_top : new_top > max_top ? max_top : new_top;
+    drag_data_info.value = {
+      ...drag_data_info.value,
+      left: set_new_left,
+      top: set_new_top
+    };
+    MtDzrEmits('onItemMove', {
+      move_length: {
+        x: new_left - init_x,
+        y: new_top - init_y
+      },
+      new_lt: {
+        left: set_new_left,
+        top: set_new_top
+      },
+      // 因为是鼠标松开的时候才更新组件数据，所以这里需要把组件的实时binfo返回回去
+      move_binfo: {
+        id: MtDzrProps.id,
+        left: set_new_left,
+        top: set_new_top,
+        width: drag_data_info.value.width,
+        height: drag_data_info.value.height,
+        angle: drag_data_info.value.angle
+      }
+    });
+    nextTick(() => {
+      const adsorp_diff_x = MtDzrProps.adsorp_diff?.x ?? 0;
+      const adsorp_diff_y = MtDzrProps.adsorp_diff?.y ?? 0;
+      // 当视图渲染之后 根据需要吸附的距离更新数据
+      if (adsorp_diff_x == 0 && adsorp_diff_y == 0) {
+        return;
+      }
+      set_new_left += adsorp_diff_x;
+      set_new_top += adsorp_diff_y;
+      drag_data_info.value = {
+        ...drag_data_info.value,
+        left: set_new_left,
+        top: set_new_top
+      };
+      MtDzrEmits('onItemMove', {
+        new_lt: {
+          left: set_new_left,
+          top: set_new_top
+        },
+        // 因为是鼠标松开的时候才更新组件数据，所以这里需要把组件的实时binfo返回回去
+        move_binfo: {
+          id: MtDzrProps.id,
+          left: set_new_left,
+          top: set_new_top,
+          width: drag_data_info.value.width,
+          height: drag_data_info.value.height,
+          angle: drag_data_info.value.angle
+        }
+      });
+    });
+  };
+  autoDestroyMouseMove(onMouseMove, () => {
+    nextTick(() => {
+      dzrStore.hideDzrCopy();
+      MtDzrEmits('moveMouseUp');
+      MtDzrEmits('update:modelValue', {
+        ...MtDzrProps.modelValue,
+        left: set_new_left,
+        top: set_new_top
+      });
+    });
+  });
+};
+const onMouseEnter = (e: MouseEvent) => {
+  MtDzrEmits('onMouseEnter', e);
+};
+const onMouseLeave = (e: MouseEvent) => {
+  MtDzrEmits('onMouseLeave', e);
+};
+const onResizeMove = (val: any) => {
+  MtDzrEmits('onResizeMove', val);
+};
+const onResizeDone = () => {
+  MtDzrEmits('onResizeDone');
+};
+const onRotateDone = () => {
+  MtDzrEmits('onRotateDone');
+};
+const onRotateMove = (val: any) => {
+  MtDzrEmits('onRotateMove', val);
+};
+const onRightClick = (e: MouseEvent) => {
+  MtDzrEmits('onRightClick', e);
+};
+watch(
+  () => MtDzrProps.modelValue,
+  (value) => {
+    drag_data_info.value = value;
+  },
+  {
+    deep: true
+  }
+);
+</script>
+<style scoped>
+.dzr {
+  position: absolute;
+  user-select: none;
+}
+.dzr-active {
+  outline: 1px solid #06b7ff;
+}
+</style>
--- a/Show More
+++ b/Show More
				`@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path fill="currentColor" d="M2 8a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v3a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V8Zm7 1.5a.5.5 0 0 0 .5.5H14a.5.5 0 0 0 0-1H9.5a.5.5 0 0 0-.5.5Zm-1 0a1.5 1.5 0 1 0-3 0a1.5 1.5 0 0 0 3 0Z"/></svg>`
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 1024 1024"><path fill="currentColor" d="M912 820.1V203.9c28-9.9 48-36.6 48-67.9c0-39.8-32.2-72-72-72c-31.3 0-58 20-67.9 48H203.9C194 84 167.3 64 136 64c-39.8 0-72 32.2-72 72c0 31.3 20 58 48 67.9v616.2C84 830 64 856.7 64 888c0 39.8 32.2 72 72 72c31.3 0 58-20 67.9-48h616.2c9.9 28 36.6 48 67.9 48c39.8 0 72-32.2 72-72c0-31.3-20-58-48-67.9zM888 112c13.3 0 24 10.7 24 24s-10.7 24-24 24s-24-10.7-24-24s10.7-24 24-24zM136 912c-13.3 0-24-10.7-24-24s10.7-24 24-24s24 10.7 24 24s-10.7 24-24 24zm0-752c-13.3 0-24-10.7-24-24s10.7-24 24-24s24 10.7 24 24s-10.7 24-24 24zm704 680H184V184h656v656zm48 72c-13.3 0-24-10.7-24-24s10.7-24 24-24s24 10.7 24 24s-10.7 24-24 24z"/><path fill="currentColor" d="M288 474h448c8.8 0 16-7.2 16-16V282c0-8.8-7.2-16-16-16H288c-8.8 0-16 7.2-16 16v176c0 8.8 7.2 16 16 16zm56-136h336v64H344v-64zm-56 420h448c8.8 0 16-7.2 16-16V566c0-8.8-7.2-16-16-16H288c-8.8 0-16 7.2-16 16v176c0 8.8 7.2 16 16 16zm56-136h336v64H344v-64z"/></svg>
				`@ -0,0 +1 @@`
				<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1676518938084" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2193" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M893.60324 384c-54.7 1-101.1 36.4-118.4 85.4-2.2 6.4-8.3 10.6-15 10.6H263.80324c-6.7 0-12.8-4.2-15-10.6-17.3-49.1-63.6-84.4-118.4-85.4C59.90324 382.7 0.50324 440.6 0.00324 511.1-0.49676 582.2 57.00324 640 128.00324 640c55.7 0 103.1-35.6 120.7-85.3 2.3-6.4 8.3-10.7 15.1-10.7h496.4c6.8 0 12.8 4.3 15.1 10.7 17.6 49.7 65 85.3 120.7 85.3 71 0 128.5-57.8 128-128.9-0.5-70.5-59.9-128.4-130.4-127.1zM128.00324 576c-35.3 0-64-28.7-64-64s28.7-64 64-64 64 28.7 64 64-28.7 64-64 64z m768 0c-35.3 0-64-28.7-64-64s28.7-64 64-64 64 28.7 64 64-28.7 64-64 64z" p-id="2194"></path></svg>
				`@ -0,0 +1 @@`
				`<?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>`