commit 448b8df85b679ff91298c2a48be82060817c0b5e
Author: guanj <guan0550>
Date:   Thu Sep 25 11:34:55 2025 +0800

    提交代码

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
new file mode 100644
index 0000000..4895ec4
--- /dev/null
+++ 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']
+      }
+    ]
+  }
+};
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..771e674
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,28 @@
+# 依赖
+node_modules/
+.pnp/
+.pnp.js
+
+# 测试
+coverage/
+
+# 生产构建
+dist/
+build/
+
+# 环境变量
+.env.local
+.env.*.local
+
+# 日志
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# 编辑器配置
+.idea/
+.vscode/
+*.swp
+*.zip*
+*.swo
+.DS_Store
\ No newline at end of file
diff --git a/.prettierrc.json b/.prettierrc.json
new file mode 100644
index 0000000..f51155b
--- /dev/null
+++ b/.prettierrc.json
@@ -0,0 +1,11 @@
+{
+  "singleQuote": true,
+  "trailingComma": "none",
+  "tabWidth": 4,
+  "printWidth": 120,
+  "useTabs": false,
+  "semi": false,
+  "arrowParens": "avoid",
+  "endOfLine": "lf",
+  "htmlWhitespaceSensitivity": "ignore"
+}
\ No newline at end of file
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..65c5ca8
--- /dev/null
+++ b/LICENSE
@@ -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.
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..f784fdc
--- /dev/null
+++ b/README.md
@@ -0,0 +1,72 @@
+# 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)
+
diff --git a/env.d.ts b/env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/global.d.ts b/global.d.ts
new file mode 100644
index 0000000..30d8317
--- /dev/null
+++ 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 {};
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..8c09271
--- /dev/null
+++ b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico" type="image/svg+xml" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>南京灿能web组态编辑器</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..e9bfe39
--- /dev/null
+++ b/package.json
@@ -0,0 +1,75 @@
+{
+  "name": "maotu",
+  "version": "0.3.1",
+  "private": false,
+  "scripts": {
+    "dev": "pnpm run format && vite --port 4001",
+    "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": {
+    "@element-plus/icons-vue": "^2.3.1",
+    "@types/sortablejs": "^1.15.8",
+    "@vueuse/core": "^10.6.1",
+    "ace-builds": "^1.32.0",
+    "animate.css": "^4.1.1",
+    "axios": "^1.11.0",
+    "canvg": "^4.0.1",
+    "echarts": "^5.4.3",
+    "element-plus": "^2.4.2",
+    "html2canvas": "^1.4.1",
+    "less": "^4.2.0",
+    "mqtt": "^5.13.3",
+    "pinia": "^3.0.3",
+    "sortablejs": "^1.15.6",
+    "vue": "^3.3.4",
+    "vue-draggable-plus": "^0.6.0",
+    "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"
+  }
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
new file mode 100644
index 0000000..99febd0
--- /dev/null
+++ b/pnpm-lock.yaml
@@ -0,0 +1,6420 @@
+lockfileVersion: '6.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+dependencies:
+  '@element-plus/icons-vue':
+    specifier: ^2.3.1
+    version: 2.3.2(vue@3.5.18)
+  '@types/sortablejs':
+    specifier: ^1.15.8
+    version: 1.15.8
+  '@vueuse/core':
+    specifier: ^10.6.1
+    version: 10.11.1(vue@3.5.18)
+  ace-builds:
+    specifier: ^1.32.0
+    version: 1.43.2
+  animate.css:
+    specifier: ^4.1.1
+    version: 4.1.1
+  axios:
+    specifier: ^1.11.0
+    version: 1.11.0
+  canvg:
+    specifier: ^4.0.1
+    version: 4.0.3
+  echarts:
+    specifier: ^5.4.3
+    version: 5.6.0
+  element-plus:
+    specifier: ^2.4.2
+    version: 2.10.7(vue@3.5.18)
+  html2canvas:
+    specifier: ^1.4.1
+    version: 1.4.1
+  less:
+    specifier: ^4.2.0
+    version: 4.4.0
+  mqtt:
+    specifier: ^5.13.3
+    version: 5.14.0
+  pinia:
+    specifier: ^3.0.3
+    version: 3.0.3(typescript@5.2.2)(vue@3.5.18)
+  sortablejs:
+    specifier: ^1.15.6
+    version: 1.15.6
+  vue:
+    specifier: ^3.3.4
+    version: 3.5.18(typescript@5.2.2)
+  vue-draggable-plus:
+    specifier: ^0.6.0
+    version: 0.6.0(@types/sortablejs@1.15.8)
+  vue-echarts:
+    specifier: ^6.6.5
+    version: 6.7.3(echarts@5.6.0)(vue@3.5.18)
+  vue-router:
+    specifier: ^4.2.5
+    version: 4.5.1(vue@3.5.18)
+  vue3-ace-editor:
+    specifier: ^2.2.4
+    version: 2.2.4(ace-builds@1.43.2)(vue@3.5.18)
+
+devDependencies:
+  '@rushstack/eslint-patch':
+    specifier: ^1.3.3
+    version: 1.12.0
+  '@tsconfig/node18':
+    specifier: ^18.2.2
+    version: 18.2.4
+  '@types/jsdom':
+    specifier: ^21.1.3
+    version: 21.1.7
+  '@types/node':
+    specifier: ^18.18.5
+    version: 18.19.122
+  '@vitejs/plugin-vue':
+    specifier: ^4.4.0
+    version: 4.6.2(vite@4.5.14)(vue@3.5.18)
+  '@vue/eslint-config-prettier':
+    specifier: ^8.0.0
+    version: 8.0.0(eslint@8.57.1)(prettier@3.6.2)
+  '@vue/eslint-config-typescript':
+    specifier: ^12.0.0
+    version: 12.0.0(eslint-plugin-vue@9.33.0)(eslint@8.57.1)(typescript@5.2.2)
+  '@vue/test-utils':
+    specifier: ^2.4.1
+    version: 2.4.6
+  '@vue/tsconfig':
+    specifier: ^0.4.0
+    version: 0.4.0
+  eslint:
+    specifier: ^8.49.0
+    version: 8.57.1
+  eslint-plugin-vue:
+    specifier: ^9.17.0
+    version: 9.33.0(eslint@8.57.1)
+  jsdom:
+    specifier: ^22.1.0
+    version: 22.1.0
+  npm-run-all2:
+    specifier: ^6.1.1
+    version: 6.2.6
+  prettier:
+    specifier: ^3.0.3
+    version: 3.6.2
+  typescript:
+    specifier: ~5.2.0
+    version: 5.2.2
+  unocss:
+    specifier: ^0.57.4
+    version: 0.57.7(postcss@8.5.6)(vite@4.5.14)
+  vite:
+    specifier: ^4.4.11
+    version: 4.5.14(@types/node@18.19.122)(less@4.4.0)
+  vite-plugin-dts:
+    specifier: ^3.6.0
+    version: 3.9.1(@types/node@18.19.122)(typescript@5.2.2)(vite@4.5.14)
+  vite-plugin-svg-icons:
+    specifier: ^2.0.1
+    version: 2.0.1(vite@4.5.14)
+  vitest:
+    specifier: ^0.34.6
+    version: 0.34.6(jsdom@22.1.0)(less@4.4.0)
+  vue-tsc:
+    specifier: ^1.8.19
+    version: 1.8.27(typescript@5.2.2)
+
+packages:
+
+  /@ampproject/remapping@2.3.0:
+    resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
+    engines: {node: '>=6.0.0'}
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.30
+    dev: true
+
+  /@antfu/install-pkg@1.1.0:
+    resolution: {integrity: sha512-MGQsmw10ZyI+EJo45CdSER4zEb+p31LpDAFp2Z3gkSd1yqVZGi0Ebx++YTEMonJy4oChEMLsxZ64j8FH6sSqtQ==}
+    dependencies:
+      package-manager-detector: 1.3.0
+      tinyexec: 1.0.1
+    dev: true
+
+  /@antfu/utils@0.7.10:
+    resolution: {integrity: sha512-+562v9k4aI80m1+VuMHehNJWLOFjBnXn3tdOitzD0il5b7smkSBal4+a3oKiQTbrwMmN/TBUMDvbdoWDehgOww==}
+    dev: true
+
+  /@antfu/utils@8.1.1:
+    resolution: {integrity: sha512-Mex9nXf9vR6AhcXmMrlz/HVgYYZpVGJ6YlPgwl7UnaFpnshXs6EK/oa5Gpf3CzENMjkvEx2tQtntGnb7UtSTOQ==}
+    dev: true
+
+  /@babel/code-frame@7.27.1:
+    resolution: {integrity: sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-validator-identifier': 7.27.1
+      js-tokens: 4.0.0
+      picocolors: 1.1.1
+    dev: true
+
+  /@babel/compat-data@7.28.0:
+    resolution: {integrity: sha512-60X7qkglvrap8mn1lh2ebxXdZYtUcpd7gsmy9kLaBJ4i/WdY8PqTSdxyA8qraikqKQK5C1KRBKXqznrVapyNaw==}
+    engines: {node: '>=6.9.0'}
+    dev: true
+
+  /@babel/core@7.28.0:
+    resolution: {integrity: sha512-UlLAnTPrFdNGoFtbSXwcGFQBtQZJCNjaN6hQNP3UPvuNXT1i82N26KL3dZeIpNalWywr9IuQuncaAfUaS1g6sQ==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@ampproject/remapping': 2.3.0
+      '@babel/code-frame': 7.27.1
+      '@babel/generator': 7.28.0
+      '@babel/helper-compilation-targets': 7.27.2
+      '@babel/helper-module-transforms': 7.27.3(@babel/core@7.28.0)
+      '@babel/helpers': 7.28.2
+      '@babel/parser': 7.28.0
+      '@babel/template': 7.27.2
+      '@babel/traverse': 7.28.0
+      '@babel/types': 7.28.2
+      convert-source-map: 2.0.0
+      debug: 4.4.1
+      gensync: 1.0.0-beta.2
+      json5: 2.2.3
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/generator@7.28.0:
+    resolution: {integrity: sha512-lJjzvrbEeWrhB4P3QBsH7tey117PjLZnDbLiQEKjQ/fNJTjuq4HSqgFA+UNSwZT8D7dxxbnuSBMsa1lrWzKlQg==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/parser': 7.28.0
+      '@babel/types': 7.28.2
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.30
+      jsesc: 3.1.0
+    dev: true
+
+  /@babel/helper-annotate-as-pure@7.27.3:
+    resolution: {integrity: sha512-fXSwMQqitTGeHLBC08Eq5yXz2m37E4pJX1qAU1+2cNedz/ifv/bVXft90VeSav5nFO61EcNgwr0aJxbyPaWBPg==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.28.2
+    dev: true
+
+  /@babel/helper-compilation-targets@7.27.2:
+    resolution: {integrity: sha512-2+1thGUUWWjLTYTHZWK1n8Yga0ijBz1XAhUXcKy81rd5g6yh7hGqMp45v7cadSbEHc9G3OTv45SyneRN3ps4DQ==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/compat-data': 7.28.0
+      '@babel/helper-validator-option': 7.27.1
+      browserslist: 4.25.2
+      lru-cache: 5.1.1
+      semver: 6.3.1
+    dev: true
+
+  /@babel/helper-create-class-features-plugin@7.27.1(@babel/core@7.28.0):
+    resolution: {integrity: sha512-QwGAmuvM17btKU5VqXfb+Giw4JcN0hjuufz3DYnpeVDvZLAObloM77bhMXiqry3Iio+Ai4phVRDwl6WU10+r5A==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    dependencies:
+      '@babel/core': 7.28.0
+      '@babel/helper-annotate-as-pure': 7.27.3
+      '@babel/helper-member-expression-to-functions': 7.27.1
+      '@babel/helper-optimise-call-expression': 7.27.1
+      '@babel/helper-replace-supers': 7.27.1(@babel/core@7.28.0)
+      '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
+      '@babel/traverse': 7.28.0
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/helper-globals@7.28.0:
+    resolution: {integrity: sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==}
+    engines: {node: '>=6.9.0'}
+    dev: true
+
+  /@babel/helper-member-expression-to-functions@7.27.1:
+    resolution: {integrity: sha512-E5chM8eWjTp/aNoVpcbfM7mLxu9XGLWYise2eBKGQomAk/Mb4XoxyqXTZbuTohbsl8EKqdlMhnDI2CCLfcs9wA==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/traverse': 7.28.0
+      '@babel/types': 7.28.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/helper-module-imports@7.27.1:
+    resolution: {integrity: sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/traverse': 7.28.0
+      '@babel/types': 7.28.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/helper-module-transforms@7.27.3(@babel/core@7.28.0):
+    resolution: {integrity: sha512-dSOvYwvyLsWBeIRyOeHXp5vPj5l1I011r52FM1+r1jCERv+aFXYk4whgQccYEGYxK2H3ZAIA8nuPkQ0HaUo3qg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    dependencies:
+      '@babel/core': 7.28.0
+      '@babel/helper-module-imports': 7.27.1
+      '@babel/helper-validator-identifier': 7.27.1
+      '@babel/traverse': 7.28.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/helper-optimise-call-expression@7.27.1:
+    resolution: {integrity: sha512-URMGH08NzYFhubNSGJrpUEphGKQwMQYBySzat5cAByY1/YgIRkULnIy3tAMeszlL/so2HbeilYloUmSpd7GdVw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.28.2
+    dev: true
+
+  /@babel/helper-plugin-utils@7.27.1:
+    resolution: {integrity: sha512-1gn1Up5YXka3YYAHGKpbideQ5Yjf1tDa9qYcgysz+cNCXukyLl6DjPXhD3VRwSb8c0J9tA4b2+rHEZtc6R0tlw==}
+    engines: {node: '>=6.9.0'}
+    dev: true
+
+  /@babel/helper-replace-supers@7.27.1(@babel/core@7.28.0):
+    resolution: {integrity: sha512-7EHz6qDZc8RYS5ElPoShMheWvEgERonFCs7IAonWLLUTXW59DP14bCZt89/GKyreYn8g3S83m21FelHKbeDCKA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    dependencies:
+      '@babel/core': 7.28.0
+      '@babel/helper-member-expression-to-functions': 7.27.1
+      '@babel/helper-optimise-call-expression': 7.27.1
+      '@babel/traverse': 7.28.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/helper-skip-transparent-expression-wrappers@7.27.1:
+    resolution: {integrity: sha512-Tub4ZKEXqbPjXgWLl2+3JpQAYBJ8+ikpQ2Ocj/q/r0LwE3UhENh7EUabyHjz2kCEsrRY83ew2DQdHluuiDQFzg==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/traverse': 7.28.0
+      '@babel/types': 7.28.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/helper-string-parser@7.27.1:
+    resolution: {integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==}
+    engines: {node: '>=6.9.0'}
+
+  /@babel/helper-validator-identifier@7.27.1:
+    resolution: {integrity: sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==}
+    engines: {node: '>=6.9.0'}
+
+  /@babel/helper-validator-option@7.27.1:
+    resolution: {integrity: sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==}
+    engines: {node: '>=6.9.0'}
+    dev: true
+
+  /@babel/helpers@7.28.2:
+    resolution: {integrity: sha512-/V9771t+EgXz62aCcyofnQhGM8DQACbRhvzKFsXKC9QM+5MadF8ZmIm0crDMaz3+o0h0zXfJnd4EhbYbxsrcFw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/template': 7.27.2
+      '@babel/types': 7.28.2
+    dev: true
+
+  /@babel/parser@7.28.0:
+    resolution: {integrity: sha512-jVZGvOxOuNSsuQuLRTh13nU0AogFlw32w/MT+LV6D3sP5WdbW61E77RnkbaO2dUvmPAYrBDJXGn5gGS6tH4j8g==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+    dependencies:
+      '@babel/types': 7.28.2
+
+  /@babel/plugin-syntax-jsx@7.27.1(@babel/core@7.28.0):
+    resolution: {integrity: sha512-y8YTNIeKoyhGd9O0Jiyzyyqk8gdjnumGTQPsz0xOZOQ2RmkVJeZ1vmmfIvFEKqucBG6axJGBZDE/7iI5suUI/w==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.28.0
+      '@babel/helper-plugin-utils': 7.27.1
+    dev: true
+
+  /@babel/plugin-syntax-typescript@7.27.1(@babel/core@7.28.0):
+    resolution: {integrity: sha512-xfYCBMxveHrRMnAWl1ZlPXOZjzkN82THFvLhQhFXFt81Z5HnN+EtUkZhv/zcKpmT3fzmWZB0ywiBrbC3vogbwQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.28.0
+      '@babel/helper-plugin-utils': 7.27.1
+    dev: true
+
+  /@babel/plugin-transform-modules-commonjs@7.27.1(@babel/core@7.28.0):
+    resolution: {integrity: sha512-OJguuwlTYlN0gBZFRPqwOGNWssZjfIUdS7HMYtN8c1KmwpwHFBwTeFZrg9XZa+DFTitWOW5iTAG7tyCUPsCCyw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.28.0
+      '@babel/helper-module-transforms': 7.27.3(@babel/core@7.28.0)
+      '@babel/helper-plugin-utils': 7.27.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/plugin-transform-typescript@7.28.0(@babel/core@7.28.0):
+    resolution: {integrity: sha512-4AEiDEBPIZvLQaWlc9liCavE0xRM0dNca41WtBeM3jgFptfUOSG9z0uteLhq6+3rq+WB6jIvUwKDTpXEHPJ2Vg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.28.0
+      '@babel/helper-annotate-as-pure': 7.27.3
+      '@babel/helper-create-class-features-plugin': 7.27.1(@babel/core@7.28.0)
+      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
+      '@babel/plugin-syntax-typescript': 7.27.1(@babel/core@7.28.0)
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/preset-typescript@7.27.1(@babel/core@7.28.0):
+    resolution: {integrity: sha512-l7WfQfX0WK4M0v2RudjuQK4u99BS6yLHYEmdtVPP7lKV013zr9DygFuWNlnbvQ9LR+LS0Egz/XAvGx5U9MX0fQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.28.0
+      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/helper-validator-option': 7.27.1
+      '@babel/plugin-syntax-jsx': 7.27.1(@babel/core@7.28.0)
+      '@babel/plugin-transform-modules-commonjs': 7.27.1(@babel/core@7.28.0)
+      '@babel/plugin-transform-typescript': 7.28.0(@babel/core@7.28.0)
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/runtime@7.28.2:
+    resolution: {integrity: sha512-KHp2IflsnGywDjBWDkR9iEqiWSpc8GIi0lgTT3mOElT0PP1tG26P4tmFI2YvAdzgq9RGyoHZQEIEdZy6Ec5xCA==}
+    engines: {node: '>=6.9.0'}
+    dev: false
+
+  /@babel/template@7.27.2:
+    resolution: {integrity: sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/code-frame': 7.27.1
+      '@babel/parser': 7.28.0
+      '@babel/types': 7.28.2
+    dev: true
+
+  /@babel/traverse@7.28.0:
+    resolution: {integrity: sha512-mGe7UK5wWyh0bKRfupsUchrQGqvDbZDbKJw+kcRGSmdHVYrv+ltd0pnpDTVpiTqnaBru9iEvA8pz8W46v0Amwg==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/code-frame': 7.27.1
+      '@babel/generator': 7.28.0
+      '@babel/helper-globals': 7.28.0
+      '@babel/parser': 7.28.0
+      '@babel/template': 7.27.2
+      '@babel/types': 7.28.2
+      debug: 4.4.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/types@7.28.2:
+    resolution: {integrity: sha512-ruv7Ae4J5dUYULmeXw1gmb7rYRz57OWCPM57pHojnLq/3Z1CK2lNSLTCVjxVk1F/TZHwOZZrOWi0ur95BbLxNQ==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-string-parser': 7.27.1
+      '@babel/helper-validator-identifier': 7.27.1
+
+  /@ctrl/tinycolor@3.6.1:
+    resolution: {integrity: sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==}
+    engines: {node: '>=10'}
+    dev: false
+
+  /@element-plus/icons-vue@2.3.2(vue@3.5.18):
+    resolution: {integrity: sha512-OzIuTaIfC8QXEPmJvB4Y4kw34rSXdCJzxcD1kFStBvr8bK6X1zQAYDo0CNMjojnfTqRQCJ0I7prlErcoRiET2A==}
+    peerDependencies:
+      vue: ^3.2.0
+    dependencies:
+      vue: 3.5.18(typescript@5.2.2)
+    dev: false
+
+  /@esbuild/android-arm64@0.18.20:
+    resolution: {integrity: sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/android-arm@0.18.20:
+    resolution: {integrity: sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/android-x64@0.18.20:
+    resolution: {integrity: sha512-8GDdlePJA8D6zlZYJV/jnrRAi6rOiNaCC/JclcXpB+KIuvfBN4owLtgzY2bsxnx666XjJx2kDPUmnTtR8qKQUg==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/darwin-arm64@0.18.20:
+    resolution: {integrity: sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/darwin-x64@0.18.20:
+    resolution: {integrity: sha512-pc5gxlMDxzm513qPGbCbDukOdsGtKhfxD1zJKXjCCcU7ju50O7MeAZ8c4krSJcOIJGFR+qx21yMMVYwiQvyTyQ==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/freebsd-arm64@0.18.20:
+    resolution: {integrity: sha512-yqDQHy4QHevpMAaxhhIwYPMv1NECwOvIpGCZkECn8w2WFHXjEwrBn3CeNIYsibZ/iZEUemj++M26W3cNR5h+Tw==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [freebsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/freebsd-x64@0.18.20:
+    resolution: {integrity: sha512-tgWRPPuQsd3RmBZwarGVHZQvtzfEBOreNuxEMKFcd5DaDn2PbBxfwLcj4+aenoh7ctXcbXmOQIn8HI6mCSw5MQ==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [freebsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-arm64@0.18.20:
+    resolution: {integrity: sha512-2YbscF+UL7SQAVIpnWvYwM+3LskyDmPhe31pE7/aoTMFKKzIc9lLbyGUpmmb8a8AixOL61sQ/mFh3jEjHYFvdA==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-arm@0.18.20:
+    resolution: {integrity: sha512-/5bHkMWnq1EgKr1V+Ybz3s1hWXok7mDFUMQ4cG10AfW3wL02PSZi5kFpYKrptDsgb2WAJIvRcDm+qIvXf/apvg==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-ia32@0.18.20:
+    resolution: {integrity: sha512-P4etWwq6IsReT0E1KHU40bOnzMHoH73aXp96Fs8TIT6z9Hu8G6+0SHSw9i2isWrD2nbx2qo5yUqACgdfVGx7TA==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-loong64@0.18.20:
+    resolution: {integrity: sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg==}
+    engines: {node: '>=12'}
+    cpu: [loong64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-mips64el@0.18.20:
+    resolution: {integrity: sha512-d5NeaXZcHp8PzYy5VnXV3VSd2D328Zb+9dEq5HE6bw6+N86JVPExrA6O68OPwobntbNJ0pzCpUFZTo3w0GyetQ==}
+    engines: {node: '>=12'}
+    cpu: [mips64el]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-ppc64@0.18.20:
+    resolution: {integrity: sha512-WHPyeScRNcmANnLQkq6AfyXRFr5D6N2sKgkFo2FqguP44Nw2eyDlbTdZwd9GYk98DZG9QItIiTlFLHJHjxP3FA==}
+    engines: {node: '>=12'}
+    cpu: [ppc64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-riscv64@0.18.20:
+    resolution: {integrity: sha512-WSxo6h5ecI5XH34KC7w5veNnKkju3zBRLEQNY7mv5mtBmrP/MjNBCAlsM2u5hDBlS3NGcTQpoBvRzqBcRtpq1A==}
+    engines: {node: '>=12'}
+    cpu: [riscv64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-s390x@0.18.20:
+    resolution: {integrity: sha512-+8231GMs3mAEth6Ja1iK0a1sQ3ohfcpzpRLH8uuc5/KVDFneH6jtAJLFGafpzpMRO6DzJ6AvXKze9LfFMrIHVQ==}
+    engines: {node: '>=12'}
+    cpu: [s390x]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-x64@0.18.20:
+    resolution: {integrity: sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/netbsd-x64@0.18.20:
+    resolution: {integrity: sha512-iO1c++VP6xUBUmltHZoMtCUdPlnPGdBom6IrO4gyKPFFVBKioIImVooR5I83nTew5UOYrk3gIJhbZh8X44y06A==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [netbsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/openbsd-x64@0.18.20:
+    resolution: {integrity: sha512-e5e4YSsuQfX4cxcygw/UCPIEP6wbIL+se3sxPdCiMbFLBWu0eiZOJ7WoD+ptCLrmjZBK1Wk7I6D/I3NglUGOxg==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [openbsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/sunos-x64@0.18.20:
+    resolution: {integrity: sha512-kDbFRFp0YpTQVVrqUd5FTYmWo45zGaXe0X8E1G/LKFC0v8x0vWrhOWSLITcCn63lmZIxfOMXtCfti/RxN/0wnQ==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [sunos]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/win32-arm64@0.18.20:
+    resolution: {integrity: sha512-ddYFR6ItYgoaq4v4JmQQaAI5s7npztfV4Ag6NrhiaW0RrnOXqBkgwZLofVTlq1daVTQNhtI5oieTvkRPfZrePg==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/win32-ia32@0.18.20:
+    resolution: {integrity: sha512-Wv7QBi3ID/rROT08SABTS7eV4hX26sVduqDOTe1MvGMjNd3EjOz4b7zeexIR62GTIEKrfJXKL9LFxTYgkyeu7g==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/win32-x64@0.18.20:
+    resolution: {integrity: sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@eslint-community/eslint-utils@4.7.0(eslint@8.57.1):
+    resolution: {integrity: sha512-dyybb3AcajC7uha6CvhdVRJqaKyn7w2YKqKyAN37NKYgZT36w+iRb0Dymmc5qEJ549c/S31cMMSFd75bteCpCw==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
+    dependencies:
+      eslint: 8.57.1
+      eslint-visitor-keys: 3.4.3
+    dev: true
+
+  /@eslint-community/regexpp@4.12.1:
+    resolution: {integrity: sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==}
+    engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
+    dev: true
+
+  /@eslint/eslintrc@2.1.4:
+    resolution: {integrity: sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dependencies:
+      ajv: 6.12.6
+      debug: 4.4.1
+      espree: 9.6.1
+      globals: 13.24.0
+      ignore: 5.3.2
+      import-fresh: 3.3.1
+      js-yaml: 4.1.0
+      minimatch: 3.1.2
+      strip-json-comments: 3.1.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@eslint/js@8.57.1:
+    resolution: {integrity: sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dev: true
+
+  /@floating-ui/core@1.7.3:
+    resolution: {integrity: sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==}
+    dependencies:
+      '@floating-ui/utils': 0.2.10
+    dev: false
+
+  /@floating-ui/dom@1.7.3:
+    resolution: {integrity: sha512-uZA413QEpNuhtb3/iIKoYMSK07keHPYeXF02Zhd6e213j+d1NamLix/mCLxBUDW/Gx52sPH2m+chlUsyaBs/Ag==}
+    dependencies:
+      '@floating-ui/core': 1.7.3
+      '@floating-ui/utils': 0.2.10
+    dev: false
+
+  /@floating-ui/utils@0.2.10:
+    resolution: {integrity: sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==}
+    dev: false
+
+  /@humanwhocodes/config-array@0.13.0:
+    resolution: {integrity: sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==}
+    engines: {node: '>=10.10.0'}
+    deprecated: Use @eslint/config-array instead
+    dependencies:
+      '@humanwhocodes/object-schema': 2.0.3
+      debug: 4.4.1
+      minimatch: 3.1.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@humanwhocodes/module-importer@1.0.1:
+    resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==}
+    engines: {node: '>=12.22'}
+    dev: true
+
+  /@humanwhocodes/object-schema@2.0.3:
+    resolution: {integrity: sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==}
+    deprecated: Use @eslint/object-schema instead
+    dev: true
+
+  /@iconify/types@2.0.0:
+    resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
+    dev: true
+
+  /@iconify/utils@2.3.0:
+    resolution: {integrity: sha512-GmQ78prtwYW6EtzXRU1rY+KwOKfz32PD7iJh6Iyqw68GiKuoZ2A6pRtzWONz5VQJbp50mEjXh/7NkumtrAgRKA==}
+    dependencies:
+      '@antfu/install-pkg': 1.1.0
+      '@antfu/utils': 8.1.1
+      '@iconify/types': 2.0.0
+      debug: 4.4.1
+      globals: 15.15.0
+      kolorist: 1.8.0
+      local-pkg: 1.1.1
+      mlly: 1.7.4
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@isaacs/cliui@8.0.2:
+    resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
+    engines: {node: '>=12'}
+    dependencies:
+      string-width: 5.1.2
+      string-width-cjs: /string-width@4.2.3
+      strip-ansi: 7.1.0
+      strip-ansi-cjs: /strip-ansi@6.0.1
+      wrap-ansi: 8.1.0
+      wrap-ansi-cjs: /wrap-ansi@7.0.0
+    dev: true
+
+  /@jest/schemas@29.6.3:
+    resolution: {integrity: sha512-mo5j5X+jIZmJQveBKeS/clAueipV7KgiX1vMgCxam1RNYiqE1w62n0/tJJnHtjW8ZHcQco5gY85jA3mi0L+nSA==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+    dependencies:
+      '@sinclair/typebox': 0.27.8
+    dev: true
+
+  /@jridgewell/gen-mapping@0.3.13:
+    resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+      '@jridgewell/trace-mapping': 0.3.30
+    dev: true
+
+  /@jridgewell/resolve-uri@3.1.2:
+    resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
+    engines: {node: '>=6.0.0'}
+    dev: true
+
+  /@jridgewell/sourcemap-codec@1.5.5:
+    resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
+
+  /@jridgewell/trace-mapping@0.3.30:
+    resolution: {integrity: sha512-GQ7Nw5G2lTu/BtHTKfXhKHok2WGetd4XYcVKGx00SjAk8GMwgJM3zr6zORiPGuOE+/vkc90KtTosSSvaCjKb2Q==}
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.5.5
+    dev: true
+
+  /@microsoft/api-extractor-model@7.28.13(@types/node@18.19.122):
+    resolution: {integrity: sha512-39v/JyldX4MS9uzHcdfmjjfS6cYGAoXV+io8B5a338pkHiSt+gy2eXQ0Q7cGFJ7quSa1VqqlMdlPrB6sLR/cAw==}
+    dependencies:
+      '@microsoft/tsdoc': 0.14.2
+      '@microsoft/tsdoc-config': 0.16.2
+      '@rushstack/node-core-library': 4.0.2(@types/node@18.19.122)
+    transitivePeerDependencies:
+      - '@types/node'
+    dev: true
+
+  /@microsoft/api-extractor@7.43.0(@types/node@18.19.122):
+    resolution: {integrity: sha512-GFhTcJpB+MI6FhvXEI9b2K0snulNLWHqC/BbcJtyNYcKUiw7l3Lgis5ApsYncJ0leALX7/of4XfmXk+maT111w==}
+    hasBin: true
+    dependencies:
+      '@microsoft/api-extractor-model': 7.28.13(@types/node@18.19.122)
+      '@microsoft/tsdoc': 0.14.2
+      '@microsoft/tsdoc-config': 0.16.2
+      '@rushstack/node-core-library': 4.0.2(@types/node@18.19.122)
+      '@rushstack/rig-package': 0.5.2
+      '@rushstack/terminal': 0.10.0(@types/node@18.19.122)
+      '@rushstack/ts-command-line': 4.19.1(@types/node@18.19.122)
+      lodash: 4.17.21
+      minimatch: 3.0.8
+      resolve: 1.22.10
+      semver: 7.5.4
+      source-map: 0.6.1
+      typescript: 5.4.2
+    transitivePeerDependencies:
+      - '@types/node'
+    dev: true
+
+  /@microsoft/tsdoc-config@0.16.2:
+    resolution: {integrity: sha512-OGiIzzoBLgWWR0UdRJX98oYO+XKGf7tiK4Zk6tQ/E4IJqGCe7dvkTvgDZV5cFJUzLGDOjeAXrnZoA6QkVySuxw==}
+    dependencies:
+      '@microsoft/tsdoc': 0.14.2
+      ajv: 6.12.6
+      jju: 1.4.0
+      resolve: 1.19.0
+    dev: true
+
+  /@microsoft/tsdoc@0.14.2:
+    resolution: {integrity: sha512-9b8mPpKrfeGRuhFH5iO1iwCLeIIsV6+H1sRfxbkoGXIyQE2BTsPd9zqSqQJ+pv5sJ/hT5M1zvOFL02MnEezFug==}
+    dev: true
+
+  /@nodelib/fs.scandir@2.1.5:
+    resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
+    engines: {node: '>= 8'}
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      run-parallel: 1.2.0
+    dev: true
+
+  /@nodelib/fs.stat@2.0.5:
+    resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==}
+    engines: {node: '>= 8'}
+    dev: true
+
+  /@nodelib/fs.walk@1.2.8:
+    resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
+    engines: {node: '>= 8'}
+    dependencies:
+      '@nodelib/fs.scandir': 2.1.5
+      fastq: 1.19.1
+    dev: true
+
+  /@one-ini/wasm@0.1.1:
+    resolution: {integrity: sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw==}
+    dev: true
+
+  /@pkgjs/parseargs@0.11.0:
+    resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
+    engines: {node: '>=14'}
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@pkgr/core@0.2.9:
+    resolution: {integrity: sha512-QNqXyfVS2wm9hweSYD2O7F0G06uurj9kZ96TRQE5Y9hU7+tgdZwIkbAKc5Ocy1HxEY2kuDQa6cQ1WRs/O5LFKA==}
+    engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
+    dev: true
+
+  /@polka/url@1.0.0-next.29:
+    resolution: {integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==}
+    dev: true
+
+  /@rollup/pluginutils@5.2.0:
+    resolution: {integrity: sha512-qWJ2ZTbmumwiLFomfzTyt5Kng4hwPi9rwCYN4SHb6eaRU1KNO4ccxINHr/VhH4GgPlt1XfSTLX2LBTme8ne4Zw==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+    dependencies:
+      '@types/estree': 1.0.8
+      estree-walker: 2.0.2
+      picomatch: 4.0.3
+    dev: true
+
+  /@rushstack/eslint-patch@1.12.0:
+    resolution: {integrity: sha512-5EwMtOqvJMMa3HbmxLlF74e+3/HhwBTMcvt3nqVJgGCozO6hzIPOBlwm8mGVNR9SN2IJpxSnlxczyDjcn7qIyw==}
+    dev: true
+
+  /@rushstack/node-core-library@4.0.2(@types/node@18.19.122):
+    resolution: {integrity: sha512-hyES82QVpkfQMeBMteQUnrhASL/KHPhd7iJ8euduwNJG4mu2GSOKybf0rOEjOm1Wz7CwJEUm9y0yD7jg2C1bfg==}
+    peerDependencies:
+      '@types/node': '*'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+    dependencies:
+      '@types/node': 18.19.122
+      fs-extra: 7.0.1
+      import-lazy: 4.0.0
+      jju: 1.4.0
+      resolve: 1.22.10
+      semver: 7.5.4
+      z-schema: 5.0.5
+    dev: true
+
+  /@rushstack/rig-package@0.5.2:
+    resolution: {integrity: sha512-mUDecIJeH3yYGZs2a48k+pbhM6JYwWlgjs2Ca5f2n1G2/kgdgP9D/07oglEGf6mRyXEnazhEENeYTSNDRCwdqA==}
+    dependencies:
+      resolve: 1.22.10
+      strip-json-comments: 3.1.1
+    dev: true
+
+  /@rushstack/terminal@0.10.0(@types/node@18.19.122):
+    resolution: {integrity: sha512-UbELbXnUdc7EKwfH2sb8ChqNgapUOdqcCIdQP4NGxBpTZV2sQyeekuK3zmfQSa/MN+/7b4kBogl2wq0vpkpYGw==}
+    peerDependencies:
+      '@types/node': '*'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+    dependencies:
+      '@rushstack/node-core-library': 4.0.2(@types/node@18.19.122)
+      '@types/node': 18.19.122
+      supports-color: 8.1.1
+    dev: true
+
+  /@rushstack/ts-command-line@4.19.1(@types/node@18.19.122):
+    resolution: {integrity: sha512-J7H768dgcpG60d7skZ5uSSwyCZs/S2HrWP1Ds8d1qYAyaaeJmpmmLr9BVw97RjFzmQPOYnoXcKA4GkqDCkduQg==}
+    dependencies:
+      '@rushstack/terminal': 0.10.0(@types/node@18.19.122)
+      '@types/argparse': 1.0.38
+      argparse: 1.0.10
+      string-argv: 0.3.2
+    transitivePeerDependencies:
+      - '@types/node'
+    dev: true
+
+  /@sinclair/typebox@0.27.8:
+    resolution: {integrity: sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==}
+    dev: true
+
+  /@sxzz/popperjs-es@2.11.7:
+    resolution: {integrity: sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ==}
+    dev: false
+
+  /@tootallnate/once@2.0.0:
+    resolution: {integrity: sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==}
+    engines: {node: '>= 10'}
+    dev: true
+
+  /@trysound/sax@0.2.0:
+    resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==}
+    engines: {node: '>=10.13.0'}
+    dev: true
+
+  /@tsconfig/node18@18.2.4:
+    resolution: {integrity: sha512-5xxU8vVs9/FNcvm3gE07fPbn9tl6tqGGWA9tSlwsUEkBxtRnTsNmwrV8gasZ9F/EobaSv9+nu8AxUKccw77JpQ==}
+    dev: true
+
+  /@types/argparse@1.0.38:
+    resolution: {integrity: sha512-ebDJ9b0e702Yr7pWgB0jzm+CX4Srzz8RcXtLJDJB+BSccqMa36uyH/zUsSYao5+BD1ytv3k3rPYCq4mAE1hsXA==}
+    dev: true
+
+  /@types/chai-subset@1.3.6(@types/chai@4.3.20):
+    resolution: {integrity: sha512-m8lERkkQj+uek18hXOZuec3W/fCRTrU4hrnXjH3qhHy96ytuPaPiWGgu7sJb7tZxZonO75vYAjCvpe/e4VUwRw==}
+    peerDependencies:
+      '@types/chai': <5.2.0
+    dependencies:
+      '@types/chai': 4.3.20
+    dev: true
+
+  /@types/chai@4.3.20:
+    resolution: {integrity: sha512-/pC9HAB5I/xMlc5FP77qjCnI16ChlJfW0tGa0IUcFn38VJrTV6DeZ60NU5KZBtaOZqjdpwTWohz5HU1RrhiYxQ==}
+    dev: true
+
+  /@types/estree@1.0.8:
+    resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
+    dev: true
+
+  /@types/jsdom@21.1.7:
+    resolution: {integrity: sha512-yOriVnggzrnQ3a9OKOCxaVuSug3w3/SbOj5i7VwXWZEyUNl3bLF9V3MfxGbZKuwqJOQyRfqXyROBB1CoZLFWzA==}
+    dependencies:
+      '@types/node': 18.19.122
+      '@types/tough-cookie': 4.0.5
+      parse5: 7.3.0
+    dev: true
+
+  /@types/json-schema@7.0.15:
+    resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
+    dev: true
+
+  /@types/lodash-es@4.17.12:
+    resolution: {integrity: sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==}
+    dependencies:
+      '@types/lodash': 4.17.20
+    dev: false
+
+  /@types/lodash@4.17.20:
+    resolution: {integrity: sha512-H3MHACvFUEiujabxhaI/ImO6gUrd8oOurg7LQtS7mbwIXA/cUqWrvBsaeJ23aZEPk1TAYkurjfMbSELfoCXlGA==}
+    dev: false
+
+  /@types/node@18.19.122:
+    resolution: {integrity: sha512-yzegtT82dwTNEe/9y+CM8cgb42WrUfMMCg2QqSddzO1J6uPmBD7qKCZ7dOHZP2Yrpm/kb0eqdNMn2MUyEiqBmA==}
+    dependencies:
+      undici-types: 5.26.5
+
+  /@types/raf@3.4.3:
+    resolution: {integrity: sha512-c4YAvMedbPZ5tEyxzQdMoOhhJ4RD3rngZIdwC2/qDN3d7JpEhB6fiBRKVY1lg5B7Wk+uPBjn5f39j1/2MY1oOw==}
+    dev: false
+
+  /@types/readable-stream@4.0.21:
+    resolution: {integrity: sha512-19eKVv9tugr03IgfXlA9UVUVRbW6IuqRO5B92Dl4a6pT7K8uaGrNS0GkxiZD0BOk6PLuXl5FhWl//eX/pzYdTQ==}
+    dependencies:
+      '@types/node': 18.19.122
+    dev: false
+
+  /@types/semver@7.7.0:
+    resolution: {integrity: sha512-k107IF4+Xr7UHjwDc7Cfd6PRQfbdkiRabXGRjo07b4WyPahFBZCZ1sE+BNxYIJPPg73UkfOsVOLwqVc/6ETrIA==}
+    dev: true
+
+  /@types/sortablejs@1.15.8:
+    resolution: {integrity: sha512-b79830lW+RZfwaztgs1aVPgbasJ8e7AXtZYHTELNXZPsERt4ymJdjV4OccDbHQAvHrCcFpbF78jkm0R6h/pZVg==}
+    dev: false
+
+  /@types/svgo@2.6.4:
+    resolution: {integrity: sha512-l4cmyPEckf8moNYHdJ+4wkHvFxjyW6ulm9l4YGaOxeyBWPhBOT0gvni1InpFPdzx1dKf/2s62qGITwxNWnPQng==}
+    dependencies:
+      '@types/node': 18.19.122
+    dev: true
+
+  /@types/tough-cookie@4.0.5:
+    resolution: {integrity: sha512-/Ad8+nIOV7Rl++6f1BdKxFSMgmoqEoYbHRpPcx3JEfv8VRsQe9Z4mCXeJBzxs7mbHY/XOZZuXlRNfhpVPbs6ZA==}
+    dev: true
+
+  /@types/web-bluetooth@0.0.16:
+    resolution: {integrity: sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==}
+    dev: false
+
+  /@types/web-bluetooth@0.0.20:
+    resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==}
+    dev: false
+
+  /@types/ws@8.18.1:
+    resolution: {integrity: sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==}
+    dependencies:
+      '@types/node': 18.19.122
+    dev: false
+
+  /@typescript-eslint/eslint-plugin@6.21.0(@typescript-eslint/parser@6.21.0)(eslint@8.57.1)(typescript@5.2.2):
+    resolution: {integrity: sha512-oy9+hTPCUFpngkEZUSzbf9MxI65wbKFoQYsgPdILTfbUldp5ovUuphZVe4i30emU9M/kP+T64Di0mxl7dSw3MA==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    peerDependencies:
+      '@typescript-eslint/parser': ^6.0.0 || ^6.0.0-alpha
+      eslint: ^7.0.0 || ^8.0.0
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@eslint-community/regexpp': 4.12.1
+      '@typescript-eslint/parser': 6.21.0(eslint@8.57.1)(typescript@5.2.2)
+      '@typescript-eslint/scope-manager': 6.21.0
+      '@typescript-eslint/type-utils': 6.21.0(eslint@8.57.1)(typescript@5.2.2)
+      '@typescript-eslint/utils': 6.21.0(eslint@8.57.1)(typescript@5.2.2)
+      '@typescript-eslint/visitor-keys': 6.21.0
+      debug: 4.4.1
+      eslint: 8.57.1
+      graphemer: 1.4.0
+      ignore: 5.3.2
+      natural-compare: 1.4.0
+      semver: 7.7.2
+      ts-api-utils: 1.4.3(typescript@5.2.2)
+      typescript: 5.2.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.2.2):
+    resolution: {integrity: sha512-tbsV1jPne5CkFQCgPBcDOt30ItF7aJoZL997JSF7MhGQqOeT3svWRYxiqlfA5RUdlHN6Fi+EI9bxqbdyAUZjYQ==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    peerDependencies:
+      eslint: ^7.0.0 || ^8.0.0
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@typescript-eslint/scope-manager': 6.21.0
+      '@typescript-eslint/types': 6.21.0
+      '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.2.2)
+      '@typescript-eslint/visitor-keys': 6.21.0
+      debug: 4.4.1
+      eslint: 8.57.1
+      typescript: 5.2.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@typescript-eslint/scope-manager@6.21.0:
+    resolution: {integrity: sha512-OwLUIWZJry80O99zvqXVEioyniJMa+d2GrqpUTqi5/v5D5rOrppJVBPa0yKCblcigC0/aYAzxxqQ1B+DS2RYsg==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    dependencies:
+      '@typescript-eslint/types': 6.21.0
+      '@typescript-eslint/visitor-keys': 6.21.0
+    dev: true
+
+  /@typescript-eslint/type-utils@6.21.0(eslint@8.57.1)(typescript@5.2.2):
+    resolution: {integrity: sha512-rZQI7wHfao8qMX3Rd3xqeYSMCL3SoiSQLBATSiVKARdFGCYSRvmViieZjqc58jKgs8Y8i9YvVVhRbHSTA4VBag==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    peerDependencies:
+      eslint: ^7.0.0 || ^8.0.0
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.2.2)
+      '@typescript-eslint/utils': 6.21.0(eslint@8.57.1)(typescript@5.2.2)
+      debug: 4.4.1
+      eslint: 8.57.1
+      ts-api-utils: 1.4.3(typescript@5.2.2)
+      typescript: 5.2.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@typescript-eslint/types@6.21.0:
+    resolution: {integrity: sha512-1kFmZ1rOm5epu9NZEZm1kckCDGj5UJEf7P1kliH4LKu/RkwpsfqqGmY2OOcUs18lSlQBKLDYBOGxRVtrMN5lpg==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    dev: true
+
+  /@typescript-eslint/typescript-estree@6.21.0(typescript@5.2.2):
+    resolution: {integrity: sha512-6npJTkZcO+y2/kr+z0hc4HwNfrrP4kNYh57ek7yCNlrBjWQ1Y0OS7jiZTkgumrvkX5HkEKXFZkkdFNkaW2wmUQ==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@typescript-eslint/types': 6.21.0
+      '@typescript-eslint/visitor-keys': 6.21.0
+      debug: 4.4.1
+      globby: 11.1.0
+      is-glob: 4.0.3
+      minimatch: 9.0.3
+      semver: 7.7.2
+      ts-api-utils: 1.4.3(typescript@5.2.2)
+      typescript: 5.2.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@typescript-eslint/utils@6.21.0(eslint@8.57.1)(typescript@5.2.2):
+    resolution: {integrity: sha512-NfWVaC8HP9T8cbKQxHcsJBY5YE1O33+jpMwN45qzWWaPDZgLIbo12toGMWnmhvCpd3sIxkpDw3Wv1B3dYrbDQQ==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    peerDependencies:
+      eslint: ^7.0.0 || ^8.0.0
+    dependencies:
+      '@eslint-community/eslint-utils': 4.7.0(eslint@8.57.1)
+      '@types/json-schema': 7.0.15
+      '@types/semver': 7.7.0
+      '@typescript-eslint/scope-manager': 6.21.0
+      '@typescript-eslint/types': 6.21.0
+      '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.2.2)
+      eslint: 8.57.1
+      semver: 7.7.2
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+    dev: true
+
+  /@typescript-eslint/visitor-keys@6.21.0:
+    resolution: {integrity: sha512-JJtkDduxLi9bivAB+cYOVMtbkqdPOhZ+ZI5LC47MIRrDV4Yn2o+ZnW10Nkmr28xRpSpdJ6Sm42Hjf2+REYXm0A==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    dependencies:
+      '@typescript-eslint/types': 6.21.0
+      eslint-visitor-keys: 3.4.3
+    dev: true
+
+  /@ungap/structured-clone@1.3.0:
+    resolution: {integrity: sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==}
+    dev: true
+
+  /@unocss/astro@0.57.7(vite@4.5.14):
+    resolution: {integrity: sha512-X4KSBdrAADdtS4x7xz02b016xpRDt9mD/d/oq23HyZAZ+sZc4oZs8el9MLSUJgu2okdWzAE62lRRV/oc4HWI1A==}
+    peerDependencies:
+      vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0 || ^5.0.0-0
+    peerDependenciesMeta:
+      vite:
+        optional: true
+    dependencies:
+      '@unocss/core': 0.57.7
+      '@unocss/reset': 0.57.7
+      '@unocss/vite': 0.57.7(vite@4.5.14)
+      vite: 4.5.14(@types/node@18.19.122)(less@4.4.0)
+    transitivePeerDependencies:
+      - rollup
+    dev: true
+
+  /@unocss/cli@0.57.7:
+    resolution: {integrity: sha512-FZHTTBYyibySpBEPbA/ilDzI4v4Uy/bROItEYogZkpXNoCLzlclX+UcuFBXXLt6VFJk4WjLNFLRSQlVcCUUOLA==}
+    engines: {node: '>=14'}
+    hasBin: true
+    dependencies:
+      '@ampproject/remapping': 2.3.0
+      '@rollup/pluginutils': 5.2.0
+      '@unocss/config': 0.57.7
+      '@unocss/core': 0.57.7
+      '@unocss/preset-uno': 0.57.7
+      cac: 6.7.14
+      chokidar: 3.6.0
+      colorette: 2.0.20
+      consola: 3.4.2
+      fast-glob: 3.3.3
+      magic-string: 0.30.17
+      pathe: 1.1.2
+      perfect-debounce: 1.0.0
+    transitivePeerDependencies:
+      - rollup
+    dev: true
+
+  /@unocss/config@0.57.7:
+    resolution: {integrity: sha512-UG8G9orWEdk/vyDvGUToXYn/RZy/Qjpx66pLsaf5wQK37hkYsBoReAU5v8Ia/6PL1ueJlkcNXLaNpN6/yVoJvg==}
+    engines: {node: '>=14'}
+    dependencies:
+      '@unocss/core': 0.57.7
+      unconfig: 0.3.13
+    dev: true
+
+  /@unocss/core@0.57.7:
+    resolution: {integrity: sha512-1d36M0CV3yC80J0pqOa5rH1BX6g2iZdtKmIb3oSBN4AWnMCSrrJEPBrUikyMq2TEQTrYWJIVDzv5A9hBUat3TA==}
+    dev: true
+
+  /@unocss/extractor-arbitrary-variants@0.57.7:
+    resolution: {integrity: sha512-JdyhPlsgS0x4zoF8WYXDcusPcpU4ysE6Rkkit4a9+xUZEvg7vy7InH6PQ8dL8B9oY7pbxF7G6eFguUDpv9xx4Q==}
+    dependencies:
+      '@unocss/core': 0.57.7
+    dev: true
+
+  /@unocss/inspector@0.57.7:
+    resolution: {integrity: sha512-b9ckqn5aRsmhTdXJ5cPMKDKuNRe+825M+s9NbYcTjENnP6ellUFZo91sYF5S+LeATmU12TcwJZ83NChF4HpBSA==}
+    dependencies:
+      '@unocss/core': 0.57.7
+      '@unocss/rule-utils': 0.57.7
+      gzip-size: 6.0.0
+      sirv: 2.0.4
+    dev: true
+
+  /@unocss/postcss@0.57.7(postcss@8.5.6):
+    resolution: {integrity: sha512-13c9p5ecTvYa6inDky++8dlVuxQ0JuKaKW5A0NW3XuJ3Uz1t8Pguji+NAUddfTYEFF6GHu47L3Aac7vpI8pMcQ==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      postcss: ^8.4.21
+    dependencies:
+      '@unocss/config': 0.57.7
+      '@unocss/core': 0.57.7
+      '@unocss/rule-utils': 0.57.7
+      css-tree: 2.3.1
+      fast-glob: 3.3.3
+      magic-string: 0.30.17
+      postcss: 8.5.6
+    dev: true
+
+  /@unocss/preset-attributify@0.57.7:
+    resolution: {integrity: sha512-vUqfwUokNHt1FJXIuVyj2Xze9LfJdLAy62h79lNyyEISZmiDF4a4hWTKLBe0d6Kyfr33DyXMmkLp57t5YW0V3A==}
+    dependencies:
+      '@unocss/core': 0.57.7
+    dev: true
+
+  /@unocss/preset-icons@0.57.7:
+    resolution: {integrity: sha512-s3AelKCS9CL1ArP1GanYv0XxxPrcFi+XOuQoQCwCRHDo2CiBEq3fLLMIhaUCFEWGtIy7o7wLeL5BRjMvJ2QnMg==}
+    dependencies:
+      '@iconify/utils': 2.3.0
+      '@unocss/core': 0.57.7
+      ofetch: 1.4.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@unocss/preset-mini@0.57.7:
+    resolution: {integrity: sha512-YPmmh+ZIg4J7/nPMfvzD1tOfUFD+8KEFXX9ISRteooflYeosn2YytGW66d/sq97AZos9N630FJ//DvPD2wfGwA==}
+    dependencies:
+      '@unocss/core': 0.57.7
+      '@unocss/extractor-arbitrary-variants': 0.57.7
+      '@unocss/rule-utils': 0.57.7
+    dev: true
+
+  /@unocss/preset-tagify@0.57.7:
+    resolution: {integrity: sha512-va25pTJ5OtbqCHFBIj8myVk0PwuSucUqTx840r/YSHka0P9th6UGRS1LU30OUgjgr7FhLaWXtJMN4gkCUtQSoA==}
+    dependencies:
+      '@unocss/core': 0.57.7
+    dev: true
+
+  /@unocss/preset-typography@0.57.7:
+    resolution: {integrity: sha512-1QuoLhqHVRs+baaVvfH54JxmJhVuBp5jdVw3HCN/vXs1CSnq2Rm/C/+PahcnQg/KLtoW6MgK5S+/hU9TCxGRVQ==}
+    dependencies:
+      '@unocss/core': 0.57.7
+      '@unocss/preset-mini': 0.57.7
+    dev: true
+
+  /@unocss/preset-uno@0.57.7:
+    resolution: {integrity: sha512-yRKvRBaPLmDSUZet5WnV1WNb3BV4EFwvB1Zbvlc3lyVp6uCksP/SYlxuUwht7JefOrfiY2sGugoBxZTyGmj/kQ==}
+    dependencies:
+      '@unocss/core': 0.57.7
+      '@unocss/preset-mini': 0.57.7
+      '@unocss/preset-wind': 0.57.7
+      '@unocss/rule-utils': 0.57.7
+    dev: true
+
+  /@unocss/preset-web-fonts@0.57.7:
+    resolution: {integrity: sha512-wBPej5GeYb0D/xjMdMmpH6k/3Oe1ujx9DJys2/gtvl/rsBZpSkoWcnl+8Z3bAhooDnwL2gkJCIlpuDiRNtKvGA==}
+    dependencies:
+      '@unocss/core': 0.57.7
+      ofetch: 1.4.1
+    dev: true
+
+  /@unocss/preset-wind@0.57.7:
+    resolution: {integrity: sha512-olQ6+w0fQ84eEC1t7SF4vJyKcyawkDWSRF5YufOqeQZL3zjqBzMQi+3PUlKCstrDO1DNZ3qdcwg1vPHRmuX9VA==}
+    dependencies:
+      '@unocss/core': 0.57.7
+      '@unocss/preset-mini': 0.57.7
+      '@unocss/rule-utils': 0.57.7
+    dev: true
+
+  /@unocss/reset@0.57.7:
+    resolution: {integrity: sha512-oN9024WVrMewGbornnAPIpzHeKPIfVmZ5IsZGilWR761TnI5jTjHUkswsVoFx7tZdpCN2/bqS3JK/Ah0aot3NQ==}
+    dev: true
+
+  /@unocss/rule-utils@0.57.7:
+    resolution: {integrity: sha512-gLqbKTIetvRynLkhonu1znr+bmWnw+Cl3dFVNgZPGjiqGHd78PGS0gXQKvzuyN0iO2ADub1A7GlCWs826iEHjA==}
+    engines: {node: '>=14'}
+    dependencies:
+      '@unocss/core': 0.57.7
+      magic-string: 0.30.17
+    dev: true
+
+  /@unocss/scope@0.57.7:
+    resolution: {integrity: sha512-pqWbKXcrTJ2ovVRTYFLnUX5ryEhdSXp7YfyBQT3zLtQb4nQ2XZcLTvGdWo7F+9jZ09yP7NdHscBLkeWgx+mVgw==}
+    dev: true
+
+  /@unocss/transformer-attributify-jsx-babel@0.57.7:
+    resolution: {integrity: sha512-CqxTiT5ikOC6R/HNyBcCIVYUfeazqRbsw7X4hYKmGHO7QsnaKQFWZTpj+sSDRh3oHq+IDtcD6KB2anTEffEQNA==}
+    dependencies:
+      '@babel/core': 7.28.0
+      '@babel/plugin-syntax-jsx': 7.27.1(@babel/core@7.28.0)
+      '@babel/preset-typescript': 7.27.1(@babel/core@7.28.0)
+      '@unocss/core': 0.57.7
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@unocss/transformer-attributify-jsx@0.57.7:
+    resolution: {integrity: sha512-FpCJM+jDN4Kyp7mMMN41tTWEq6pHKAXAyJoW1GwhYw6lLu9cwyXnne6t7rQ11EPU95Z2cIEMpIJo8reDkDaiPg==}
+    dependencies:
+      '@unocss/core': 0.57.7
+    dev: true
+
+  /@unocss/transformer-compile-class@0.57.7:
+    resolution: {integrity: sha512-D+PyD7IOXUm/lzzoCt/yon0Gh1fIK9iKeSBvB6/BREF/ejscNzQ/ia0Pq0pid2cVvOULCSo0z2sO9zljsQtv9A==}
+    dependencies:
+      '@unocss/core': 0.57.7
+    dev: true
+
+  /@unocss/transformer-directives@0.57.7:
+    resolution: {integrity: sha512-m0n7WqU3o+1Vyh1uaeU7H4u5gJqakkRqZqTq3MR3xLCSVfORJ/5XO8r+t6VUkJtaLxcIrtYE2geAbwmGV3zSKA==}
+    dependencies:
+      '@unocss/core': 0.57.7
+      '@unocss/rule-utils': 0.57.7
+      css-tree: 2.3.1
+    dev: true
+
+  /@unocss/transformer-variant-group@0.57.7:
+    resolution: {integrity: sha512-O5L5Za0IZtOWd2R66vy0k07pLlB9rCIybmUommUqKWpvd1n/pg8czQ5EkmNDprINvinKObVlGVuY4Uq/JsLM0A==}
+    dependencies:
+      '@unocss/core': 0.57.7
+    dev: true
+
+  /@unocss/vite@0.57.7(vite@4.5.14):
+    resolution: {integrity: sha512-SbJrRgfc35MmgMBlHaEK4YpJVD2B0bmxH9PVgHRuDae/hOEOG0VqNP0f2ijJtX9HG3jOpQVlbEoGnUo8jsZtsw==}
+    peerDependencies:
+      vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0 || ^5.0.0-0
+    dependencies:
+      '@ampproject/remapping': 2.3.0
+      '@rollup/pluginutils': 5.2.0
+      '@unocss/config': 0.57.7
+      '@unocss/core': 0.57.7
+      '@unocss/inspector': 0.57.7
+      '@unocss/scope': 0.57.7
+      '@unocss/transformer-directives': 0.57.7
+      chokidar: 3.6.0
+      fast-glob: 3.3.3
+      magic-string: 0.30.17
+      vite: 4.5.14(@types/node@18.19.122)(less@4.4.0)
+    transitivePeerDependencies:
+      - rollup
+    dev: true
+
+  /@vitejs/plugin-vue@4.6.2(vite@4.5.14)(vue@3.5.18):
+    resolution: {integrity: sha512-kqf7SGFoG+80aZG6Pf+gsZIVvGSCKE98JbiWqcCV9cThtg91Jav0yvYFC9Zb+jKetNGF6ZKeoaxgZfND21fWKw==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    peerDependencies:
+      vite: ^4.0.0 || ^5.0.0
+      vue: ^3.2.25
+    dependencies:
+      vite: 4.5.14(@types/node@18.19.122)(less@4.4.0)
+      vue: 3.5.18(typescript@5.2.2)
+    dev: true
+
+  /@vitest/expect@0.34.6:
+    resolution: {integrity: sha512-QUzKpUQRc1qC7qdGo7rMK3AkETI7w18gTCUrsNnyjjJKYiuUB9+TQK3QnR1unhCnWRC0AbKv2omLGQDF/mIjOw==}
+    dependencies:
+      '@vitest/spy': 0.34.6
+      '@vitest/utils': 0.34.6
+      chai: 4.5.0
+    dev: true
+
+  /@vitest/runner@0.34.6:
+    resolution: {integrity: sha512-1CUQgtJSLF47NnhN+F9X2ycxUP0kLHQ/JWvNHbeBfwW8CzEGgeskzNnHDyv1ieKTltuR6sdIHV+nmR6kPxQqzQ==}
+    dependencies:
+      '@vitest/utils': 0.34.6
+      p-limit: 4.0.0
+      pathe: 1.1.2
+    dev: true
+
+  /@vitest/snapshot@0.34.6:
+    resolution: {integrity: sha512-B3OZqYn6k4VaN011D+ve+AA4whM4QkcwcrwaKwAbyyvS/NB1hCWjFIBQxAQQSQir9/RtyAAGuq+4RJmbn2dH4w==}
+    dependencies:
+      magic-string: 0.30.17
+      pathe: 1.1.2
+      pretty-format: 29.7.0
+    dev: true
+
+  /@vitest/spy@0.34.6:
+    resolution: {integrity: sha512-xaCvneSaeBw/cz8ySmF7ZwGvL0lBjfvqc1LpQ/vcdHEvpLn3Ff1vAvjw+CoGn0802l++5L/pxb7whwcWAw+DUQ==}
+    dependencies:
+      tinyspy: 2.2.1
+    dev: true
+
+  /@vitest/utils@0.34.6:
+    resolution: {integrity: sha512-IG5aDD8S6zlvloDsnzHw0Ut5xczlF+kv2BOTo+iXfPr54Yhi5qbVOgGB1hZaVq4iJ4C/MZ2J0y15IlsV/ZcI0A==}
+    dependencies:
+      diff-sequences: 29.6.3
+      loupe: 2.3.7
+      pretty-format: 29.7.0
+    dev: true
+
+  /@volar/language-core@1.11.1:
+    resolution: {integrity: sha512-dOcNn3i9GgZAcJt43wuaEykSluAuOkQgzni1cuxLxTV0nJKanQztp7FxyswdRILaKH+P2XZMPRp2S4MV/pElCw==}
+    dependencies:
+      '@volar/source-map': 1.11.1
+    dev: true
+
+  /@volar/source-map@1.11.1:
+    resolution: {integrity: sha512-hJnOnwZ4+WT5iupLRnuzbULZ42L7BWWPMmruzwtLhJfpDVoZLjNBxHDi2sY2bgZXCKlpU5XcsMFoYrsQmPhfZg==}
+    dependencies:
+      muggle-string: 0.3.1
+    dev: true
+
+  /@volar/typescript@1.11.1:
+    resolution: {integrity: sha512-iU+t2mas/4lYierSnoFOeRFQUhAEMgsFuQxoxvwn5EdQopw43j+J27a4lt9LMInx1gLJBC6qL14WYGlgymaSMQ==}
+    dependencies:
+      '@volar/language-core': 1.11.1
+      path-browserify: 1.0.1
+    dev: true
+
+  /@vue/compiler-core@3.5.18:
+    resolution: {integrity: sha512-3slwjQrrV1TO8MoXgy3aynDQ7lslj5UqDxuHnrzHtpON5CBinhWjJETciPngpin/T3OuW3tXUf86tEurusnztw==}
+    dependencies:
+      '@babel/parser': 7.28.0
+      '@vue/shared': 3.5.18
+      entities: 4.5.0
+      estree-walker: 2.0.2
+      source-map-js: 1.2.1
+
+  /@vue/compiler-dom@3.5.18:
+    resolution: {integrity: sha512-RMbU6NTU70++B1JyVJbNbeFkK+A+Q7y9XKE2EM4NLGm2WFR8x9MbAtWxPPLdm0wUkuZv9trpwfSlL6tjdIa1+A==}
+    dependencies:
+      '@vue/compiler-core': 3.5.18
+      '@vue/shared': 3.5.18
+
+  /@vue/compiler-sfc@3.5.18:
+    resolution: {integrity: sha512-5aBjvGqsWs+MoxswZPoTB9nSDb3dhd1x30xrrltKujlCxo48j8HGDNj3QPhF4VIS0VQDUrA1xUfp2hEa+FNyXA==}
+    dependencies:
+      '@babel/parser': 7.28.0
+      '@vue/compiler-core': 3.5.18
+      '@vue/compiler-dom': 3.5.18
+      '@vue/compiler-ssr': 3.5.18
+      '@vue/shared': 3.5.18
+      estree-walker: 2.0.2
+      magic-string: 0.30.17
+      postcss: 8.5.6
+      source-map-js: 1.2.1
+
+  /@vue/compiler-ssr@3.5.18:
+    resolution: {integrity: sha512-xM16Ak7rSWHkM3m22NlmcdIM+K4BMyFARAfV9hYFl+SFuRzrZ3uGMNW05kA5pmeMa0X9X963Kgou7ufdbpOP9g==}
+    dependencies:
+      '@vue/compiler-dom': 3.5.18
+      '@vue/shared': 3.5.18
+
+  /@vue/devtools-api@6.6.4:
+    resolution: {integrity: sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==}
+    dev: false
+
+  /@vue/devtools-api@7.7.7:
+    resolution: {integrity: sha512-lwOnNBH2e7x1fIIbVT7yF5D+YWhqELm55/4ZKf45R9T8r9dE2AIOy8HKjfqzGsoTHFbWbr337O4E0A0QADnjBg==}
+    dependencies:
+      '@vue/devtools-kit': 7.7.7
+    dev: false
+
+  /@vue/devtools-kit@7.7.7:
+    resolution: {integrity: sha512-wgoZtxcTta65cnZ1Q6MbAfePVFxfM+gq0saaeytoph7nEa7yMXoi6sCPy4ufO111B9msnw0VOWjPEFCXuAKRHA==}
+    dependencies:
+      '@vue/devtools-shared': 7.7.7
+      birpc: 2.5.0
+      hookable: 5.5.3
+      mitt: 3.0.1
+      perfect-debounce: 1.0.0
+      speakingurl: 14.0.1
+      superjson: 2.2.2
+    dev: false
+
+  /@vue/devtools-shared@7.7.7:
+    resolution: {integrity: sha512-+udSj47aRl5aKb0memBvcUG9koarqnxNM5yjuREvqwK6T3ap4mn3Zqqc17QrBFTqSMjr3HK1cvStEZpMDpfdyw==}
+    dependencies:
+      rfdc: 1.4.1
+    dev: false
+
+  /@vue/eslint-config-prettier@8.0.0(eslint@8.57.1)(prettier@3.6.2):
+    resolution: {integrity: sha512-55dPqtC4PM/yBjhAr+yEw6+7KzzdkBuLmnhBrDfp4I48+wy+Giqqj9yUr5T2uD/BkBROjjmqnLZmXRdOx/VtQg==}
+    peerDependencies:
+      eslint: '>= 8.0.0'
+      prettier: '>= 3.0.0'
+    dependencies:
+      eslint: 8.57.1
+      eslint-config-prettier: 8.10.2(eslint@8.57.1)
+      eslint-plugin-prettier: 5.5.4(eslint-config-prettier@8.10.2)(eslint@8.57.1)(prettier@3.6.2)
+      prettier: 3.6.2
+    transitivePeerDependencies:
+      - '@types/eslint'
+    dev: true
+
+  /@vue/eslint-config-typescript@12.0.0(eslint-plugin-vue@9.33.0)(eslint@8.57.1)(typescript@5.2.2):
+    resolution: {integrity: sha512-StxLFet2Qe97T8+7L8pGlhYBBr8Eg05LPuTDVopQV6il+SK6qqom59BA/rcFipUef2jD8P2X44Vd8tMFytfvlg==}
+    engines: {node: ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: ^6.2.0 || ^7.0.0 || ^8.0.0
+      eslint-plugin-vue: ^9.0.0
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@typescript-eslint/eslint-plugin': 6.21.0(@typescript-eslint/parser@6.21.0)(eslint@8.57.1)(typescript@5.2.2)
+      '@typescript-eslint/parser': 6.21.0(eslint@8.57.1)(typescript@5.2.2)
+      eslint: 8.57.1
+      eslint-plugin-vue: 9.33.0(eslint@8.57.1)
+      typescript: 5.2.2
+      vue-eslint-parser: 9.4.3(eslint@8.57.1)
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@vue/language-core@1.8.27(typescript@5.2.2):
+    resolution: {integrity: sha512-L8Kc27VdQserNaCUNiSFdDl9LWT24ly8Hpwf1ECy3aFb9m6bDhBGQYOujDm21N7EW3moKIOKEanQwe1q5BK+mA==}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@volar/language-core': 1.11.1
+      '@volar/source-map': 1.11.1
+      '@vue/compiler-dom': 3.5.18
+      '@vue/shared': 3.5.18
+      computeds: 0.0.1
+      minimatch: 9.0.5
+      muggle-string: 0.3.1
+      path-browserify: 1.0.1
+      typescript: 5.2.2
+      vue-template-compiler: 2.7.16
+    dev: true
+
+  /@vue/reactivity@3.5.18:
+    resolution: {integrity: sha512-x0vPO5Imw+3sChLM5Y+B6G1zPjwdOri9e8V21NnTnlEvkxatHEH5B5KEAJcjuzQ7BsjGrKtfzuQ5eQwXh8HXBg==}
+    dependencies:
+      '@vue/shared': 3.5.18
+
+  /@vue/runtime-core@3.5.18:
+    resolution: {integrity: sha512-DUpHa1HpeOQEt6+3nheUfqVXRog2kivkXHUhoqJiKR33SO4x+a5uNOMkV487WPerQkL0vUuRvq/7JhRgLW3S+w==}
+    dependencies:
+      '@vue/reactivity': 3.5.18
+      '@vue/shared': 3.5.18
+
+  /@vue/runtime-dom@3.5.18:
+    resolution: {integrity: sha512-YwDj71iV05j4RnzZnZtGaXwPoUWeRsqinblgVJwR8XTXYZ9D5PbahHQgsbmzUvCWNF6x7siQ89HgnX5eWkr3mw==}
+    dependencies:
+      '@vue/reactivity': 3.5.18
+      '@vue/runtime-core': 3.5.18
+      '@vue/shared': 3.5.18
+      csstype: 3.1.3
+
+  /@vue/server-renderer@3.5.18(vue@3.5.18):
+    resolution: {integrity: sha512-PvIHLUoWgSbDG7zLHqSqaCoZvHi6NNmfVFOqO+OnwvqMz/tqQr3FuGWS8ufluNddk7ZLBJYMrjcw1c6XzR12mA==}
+    peerDependencies:
+      vue: 3.5.18
+    dependencies:
+      '@vue/compiler-ssr': 3.5.18
+      '@vue/shared': 3.5.18
+      vue: 3.5.18(typescript@5.2.2)
+
+  /@vue/shared@3.5.18:
+    resolution: {integrity: sha512-cZy8Dq+uuIXbxCZpuLd2GJdeSO/lIzIspC2WtkqIpje5QyFbvLaI5wZtdUjLHjGZrlVX6GilejatWwVYYRc8tA==}
+
+  /@vue/test-utils@2.4.6:
+    resolution: {integrity: sha512-FMxEjOpYNYiFe0GkaHsnJPXFHxQ6m4t8vI/ElPGpMWxZKpmRvQ33OIrvRXemy6yha03RxhOlQuy+gZMC3CQSow==}
+    dependencies:
+      js-beautify: 1.15.4
+      vue-component-type-helpers: 2.2.12
+    dev: true
+
+  /@vue/tsconfig@0.4.0:
+    resolution: {integrity: sha512-CPuIReonid9+zOG/CGTT05FXrPYATEqoDGNrEaqS4hwcw5BUNM2FguC0mOwJD4Jr16UpRVl9N0pY3P+srIbqmg==}
+    dev: true
+
+  /@vueuse/core@10.11.1(vue@3.5.18):
+    resolution: {integrity: sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==}
+    dependencies:
+      '@types/web-bluetooth': 0.0.20
+      '@vueuse/metadata': 10.11.1
+      '@vueuse/shared': 10.11.1(vue@3.5.18)
+      vue-demi: 0.14.10(vue@3.5.18)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+    dev: false
+
+  /@vueuse/core@9.13.0(vue@3.5.18):
+    resolution: {integrity: sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==}
+    dependencies:
+      '@types/web-bluetooth': 0.0.16
+      '@vueuse/metadata': 9.13.0
+      '@vueuse/shared': 9.13.0(vue@3.5.18)
+      vue-demi: 0.14.10(vue@3.5.18)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+    dev: false
+
+  /@vueuse/metadata@10.11.1:
+    resolution: {integrity: sha512-IGa5FXd003Ug1qAZmyE8wF3sJ81xGLSqTqtQ6jaVfkeZ4i5kS2mwQF61yhVqojRnenVew5PldLyRgvdl4YYuSw==}
+    dev: false
+
+  /@vueuse/metadata@9.13.0:
+    resolution: {integrity: sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==}
+    dev: false
+
+  /@vueuse/shared@10.11.1(vue@3.5.18):
+    resolution: {integrity: sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==}
+    dependencies:
+      vue-demi: 0.14.10(vue@3.5.18)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+    dev: false
+
+  /@vueuse/shared@9.13.0(vue@3.5.18):
+    resolution: {integrity: sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==}
+    dependencies:
+      vue-demi: 0.14.10(vue@3.5.18)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+    dev: false
+
+  /abab@2.0.6:
+    resolution: {integrity: sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==}
+    deprecated: Use your platform's native atob() and btoa() methods instead
+    dev: true
+
+  /abbrev@2.0.0:
+    resolution: {integrity: sha512-6/mh1E2u2YgEsCHdY0Yx5oW+61gZU+1vXaoiHHrpKeuRNNgFvS+/jrwHiQhB5apAf5oB7UB7E19ol2R2LKH8hQ==}
+    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
+    dev: true
+
+  /abort-controller@3.0.0:
+    resolution: {integrity: sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==}
+    engines: {node: '>=6.5'}
+    dependencies:
+      event-target-shim: 5.0.1
+    dev: false
+
+  /ace-builds@1.43.2:
+    resolution: {integrity: sha512-3wzJUJX0RpMc03jo0V8Q3bSb/cKPnS7Nqqw8fVHsCCHweKMiTIxT3fP46EhjmVy6MCuxwP801ere+RW245phGw==}
+    dev: false
+
+  /acorn-jsx@5.3.2(acorn@8.15.0):
+    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
+    peerDependencies:
+      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
+    dependencies:
+      acorn: 8.15.0
+    dev: true
+
+  /acorn-walk@8.3.4:
+    resolution: {integrity: sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==}
+    engines: {node: '>=0.4.0'}
+    dependencies:
+      acorn: 8.15.0
+    dev: true
+
+  /acorn@8.15.0:
+    resolution: {integrity: sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+    dev: true
+
+  /agent-base@6.0.2:
+    resolution: {integrity: sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==}
+    engines: {node: '>= 6.0.0'}
+    dependencies:
+      debug: 4.4.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /ajv@6.12.6:
+    resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
+    dependencies:
+      fast-deep-equal: 3.1.3
+      fast-json-stable-stringify: 2.1.0
+      json-schema-traverse: 0.4.1
+      uri-js: 4.4.1
+    dev: true
+
+  /animate.css@4.1.1:
+    resolution: {integrity: sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ==}
+    dev: false
+
+  /ansi-regex@2.1.1:
+    resolution: {integrity: sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /ansi-regex@5.0.1:
+    resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /ansi-regex@6.1.0:
+    resolution: {integrity: sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==}
+    engines: {node: '>=12'}
+    dev: true
+
+  /ansi-styles@2.2.1:
+    resolution: {integrity: sha512-kmCevFghRiWM7HB5zTPULl4r9bVFSWjz62MhqizDGUrq2NWuNMQyuv4tHHoKJHs69M/MF64lEcHdYIocrdWQYA==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /ansi-styles@4.3.0:
+    resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
+    engines: {node: '>=8'}
+    dependencies:
+      color-convert: 2.0.1
+    dev: true
+
+  /ansi-styles@5.2.0:
+    resolution: {integrity: sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==}
+    engines: {node: '>=10'}
+    dev: true
+
+  /ansi-styles@6.2.1:
+    resolution: {integrity: sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==}
+    engines: {node: '>=12'}
+    dev: true
+
+  /anymatch@3.1.3:
+    resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
+    engines: {node: '>= 8'}
+    dependencies:
+      normalize-path: 3.0.0
+      picomatch: 2.3.1
+    dev: true
+
+  /argparse@1.0.10:
+    resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==}
+    dependencies:
+      sprintf-js: 1.0.3
+    dev: true
+
+  /argparse@2.0.1:
+    resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
+    dev: true
+
+  /arr-diff@4.0.0:
+    resolution: {integrity: sha512-YVIQ82gZPGBebQV/a8dar4AitzCQs0jjXwMPZllpXMaGjXPYVUawSxQrRsjhjupyVxEvbHgUmIhKVlND+j02kA==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /arr-flatten@1.1.0:
+    resolution: {integrity: sha512-L3hKV5R/p5o81R7O02IGnwpDmkp6E982XhtbuwSe3O4qOtMMMtodicASA1Cny2U+aCXcNpml+m4dPsvsJ3jatg==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /arr-union@3.1.0:
+    resolution: {integrity: sha512-sKpyeERZ02v1FeCZT8lrfJq5u6goHCtpTAzPwJYe7c8SPFOboNjNg1vz2L4VTn9T4PQxEx13TbXLmYUcS6Ug7Q==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /array-buffer-byte-length@1.0.2:
+    resolution: {integrity: sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bound: 1.0.4
+      is-array-buffer: 3.0.5
+    dev: true
+
+  /array-union@2.1.0:
+    resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /array-unique@0.3.2:
+    resolution: {integrity: sha512-SleRWjh9JUud2wH1hPs9rZBZ33H6T9HOiL0uwGnGx9FpE6wKGyfWugmbkEOIs6qWrZhg0LWeLziLrEwQJhs5mQ==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /arraybuffer.prototype.slice@1.0.4:
+    resolution: {integrity: sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      array-buffer-byte-length: 1.0.2
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      is-array-buffer: 3.0.5
+    dev: true
+
+  /assertion-error@1.1.0:
+    resolution: {integrity: sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==}
+    dev: true
+
+  /assign-symbols@1.0.0:
+    resolution: {integrity: sha512-Q+JC7Whu8HhmTdBph/Tq59IoRtoy6KAm5zzPv00WdujX82lbAL8K7WVjne7vdCsAmbF4AYaDOPyO3k0kl8qIrw==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /async-function@1.0.0:
+    resolution: {integrity: sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==}
+    engines: {node: '>= 0.4'}
+    dev: true
+
+  /async-validator@4.2.5:
+    resolution: {integrity: sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==}
+    dev: false
+
+  /asynckit@0.4.0:
+    resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
+
+  /atob@2.1.2:
+    resolution: {integrity: sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==}
+    engines: {node: '>= 4.5.0'}
+    hasBin: true
+    dev: true
+
+  /available-typed-arrays@1.0.7:
+    resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      possible-typed-array-names: 1.1.0
+    dev: true
+
+  /axios@1.11.0:
+    resolution: {integrity: sha512-1Lx3WLFQWm3ooKDYZD1eXmoGO9fxYQjrycfHFC8P0sCfQVXyROp0p9PFWBehewBOdCwHc+f/b8I0fMto5eSfwA==}
+    dependencies:
+      follow-redirects: 1.15.11
+      form-data: 4.0.4
+      proxy-from-env: 1.1.0
+    transitivePeerDependencies:
+      - debug
+    dev: false
+
+  /balanced-match@1.0.2:
+    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
+    dev: true
+
+  /base64-arraybuffer@1.0.2:
+    resolution: {integrity: sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==}
+    engines: {node: '>= 0.6.0'}
+    dev: false
+
+  /base64-js@1.5.1:
+    resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
+    dev: false
+
+  /base@0.11.2:
+    resolution: {integrity: sha512-5T6P4xPgpp0YDFvSWwEZ4NoE3aM4QBQXDzmVbraCkFj8zHM+mba8SyqB5DbZWyR7mYHo6Y7BdQo3MoA4m0TeQg==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      cache-base: 1.0.1
+      class-utils: 0.3.6
+      component-emitter: 1.3.1
+      define-property: 1.0.0
+      isobject: 3.0.1
+      mixin-deep: 1.3.2
+      pascalcase: 0.1.1
+    dev: true
+
+  /big.js@5.2.2:
+    resolution: {integrity: sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==}
+    dev: true
+
+  /binary-extensions@2.3.0:
+    resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /birpc@2.5.0:
+    resolution: {integrity: sha512-VSWO/W6nNQdyP520F1mhf+Lc2f8pjGQOtoHHm7Ze8Go1kX7akpVIrtTa0fn+HB0QJEDVacl6aO08YE0PgXfdnQ==}
+    dev: false
+
+  /bl@6.1.2:
+    resolution: {integrity: sha512-6J3oG82fpJ71WF4l0W6XslkwAPMr+Zcp+AmdxJ0L8LsXNzFeO8GYesV2J9AzGArBjrsb2xR50Ocbn/CL1B44TA==}
+    dependencies:
+      '@types/readable-stream': 4.0.21
+      buffer: 6.0.3
+      inherits: 2.0.4
+      readable-stream: 4.7.0
+    dev: false
+
+  /bluebird@3.7.2:
+    resolution: {integrity: sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==}
+    dev: true
+
+  /boolbase@1.0.0:
+    resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
+    dev: true
+
+  /brace-expansion@1.1.12:
+    resolution: {integrity: sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==}
+    dependencies:
+      balanced-match: 1.0.2
+      concat-map: 0.0.1
+    dev: true
+
+  /brace-expansion@2.0.2:
+    resolution: {integrity: sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==}
+    dependencies:
+      balanced-match: 1.0.2
+    dev: true
+
+  /braces@2.3.2:
+    resolution: {integrity: sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      arr-flatten: 1.1.0
+      array-unique: 0.3.2
+      extend-shallow: 2.0.1
+      fill-range: 4.0.0
+      isobject: 3.0.1
+      repeat-element: 1.1.4
+      snapdragon: 0.8.2
+      snapdragon-node: 2.1.1
+      split-string: 3.1.0
+      to-regex: 3.0.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /braces@3.0.3:
+    resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
+    engines: {node: '>=8'}
+    dependencies:
+      fill-range: 7.1.1
+    dev: true
+
+  /broker-factory@3.1.8:
+    resolution: {integrity: sha512-xmVnYN0FZtynhPUmAnN+/MFRdbDi3syCuxWV7o7s78FcIN0pjDtn9mUrVqEgdjQkbfojRhlPWbYbXJkMCyddrg==}
+    dependencies:
+      '@babel/runtime': 7.28.2
+      fast-unique-numbers: 9.0.22
+      tslib: 2.8.1
+      worker-factory: 7.0.44
+    dev: false
+
+  /browserslist@4.25.2:
+    resolution: {integrity: sha512-0si2SJK3ooGzIawRu61ZdPCO1IncZwS8IzuX73sPZsXW6EQ/w/DAfPyKI8l1ETTCr2MnvqWitmlCUxgdul45jA==}
+    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
+    hasBin: true
+    dependencies:
+      caniuse-lite: 1.0.30001734
+      electron-to-chromium: 1.5.200
+      node-releases: 2.0.19
+      update-browserslist-db: 1.1.3(browserslist@4.25.2)
+    dev: true
+
+  /buffer-from@1.1.2:
+    resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
+    dev: false
+
+  /buffer@6.0.3:
+    resolution: {integrity: sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==}
+    dependencies:
+      base64-js: 1.5.1
+      ieee754: 1.2.1
+    dev: false
+
+  /cac@6.7.14:
+    resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /cache-base@1.0.1:
+    resolution: {integrity: sha512-AKcdTnFSWATd5/GCPRxr2ChwIJ85CeyrEyjRHlKxQ56d4XJMGym0uAiKn0xbLOGOl3+yRpOTi484dVCEc5AUzQ==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      collection-visit: 1.0.0
+      component-emitter: 1.3.1
+      get-value: 2.0.6
+      has-value: 1.0.0
+      isobject: 3.0.1
+      set-value: 2.0.1
+      to-object-path: 0.3.0
+      union-value: 1.0.1
+      unset-value: 1.0.0
+    dev: true
+
+  /call-bind-apply-helpers@1.0.2:
+    resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      es-errors: 1.3.0
+      function-bind: 1.1.2
+
+  /call-bind@1.0.8:
+    resolution: {integrity: sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-define-property: 1.0.1
+      get-intrinsic: 1.3.0
+      set-function-length: 1.2.2
+    dev: true
+
+  /call-bound@1.0.4:
+    resolution: {integrity: sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      get-intrinsic: 1.3.0
+    dev: true
+
+  /callsites@3.1.0:
+    resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
+    engines: {node: '>=6'}
+    dev: true
+
+  /caniuse-lite@1.0.30001734:
+    resolution: {integrity: sha512-uhE1Ye5vgqju6OI71HTQqcBCZrvHugk0MjLak7Q+HfoBgoq5Bi+5YnwjP4fjDgrtYr/l8MVRBvzz9dPD4KyK0A==}
+    dev: true
+
+  /canvg@4.0.3:
+    resolution: {integrity: sha512-fKzMoMBwus3CWo1Uy8XJc4tqqn98RoRrGV6CsIkaNiQT5lOeHuMh4fOt+LXLzn2Wqtr4p/c2TOLz4xtu4oBlFA==}
+    engines: {node: '>=12.0.0'}
+    dependencies:
+      '@types/raf': 3.4.3
+      raf: 3.4.1
+      rgbcolor: 1.0.1
+      stackblur-canvas: 2.7.0
+      svg-pathdata: 6.0.3
+    dev: false
+
+  /chai@4.5.0:
+    resolution: {integrity: sha512-RITGBfijLkBddZvnn8jdqoTypxvqbOLYQkGGxXzeFjVHvudaPw0HNFD9x928/eUwYWd2dPCugVqspGALTZZQKw==}
+    engines: {node: '>=4'}
+    dependencies:
+      assertion-error: 1.1.0
+      check-error: 1.0.3
+      deep-eql: 4.1.4
+      get-func-name: 2.0.2
+      loupe: 2.3.7
+      pathval: 1.1.1
+      type-detect: 4.1.0
+    dev: true
+
+  /chalk@1.1.3:
+    resolution: {integrity: sha512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      ansi-styles: 2.2.1
+      escape-string-regexp: 1.0.5
+      has-ansi: 2.0.0
+      strip-ansi: 3.0.1
+      supports-color: 2.0.0
+    dev: true
+
+  /chalk@4.1.2:
+    resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
+    engines: {node: '>=10'}
+    dependencies:
+      ansi-styles: 4.3.0
+      supports-color: 7.2.0
+    dev: true
+
+  /check-error@1.0.3:
+    resolution: {integrity: sha512-iKEoDYaRmd1mxM90a2OEfWhjsjPpYPuQ+lMYsoxB126+t8fw7ySEO48nmDg5COTjxDI65/Y2OWpeEHk3ZOe8zg==}
+    dependencies:
+      get-func-name: 2.0.2
+    dev: true
+
+  /chokidar@3.6.0:
+    resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
+    engines: {node: '>= 8.10.0'}
+    dependencies:
+      anymatch: 3.1.3
+      braces: 3.0.3
+      glob-parent: 5.1.2
+      is-binary-path: 2.1.0
+      is-glob: 4.0.3
+      normalize-path: 3.0.0
+      readdirp: 3.6.0
+    optionalDependencies:
+      fsevents: 2.3.3
+    dev: true
+
+  /class-utils@0.3.6:
+    resolution: {integrity: sha512-qOhPa/Fj7s6TY8H8esGu5QNpMMQxz79h+urzrNYN6mn+9BnxlDGf5QZ+XeCDsxSjPqsSR56XOZOJmpeurnLMeg==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      arr-union: 3.1.0
+      define-property: 0.2.5
+      isobject: 3.0.1
+      static-extend: 0.1.2
+    dev: true
+
+  /clone@2.1.2:
+    resolution: {integrity: sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==}
+    engines: {node: '>=0.8'}
+    dev: true
+
+  /collection-visit@1.0.0:
+    resolution: {integrity: sha512-lNkKvzEeMBBjUGHZ+q6z9pSJla0KWAQPvtzhEV9+iGyQYG+pBpl7xKDhxoNSOZH2hhv0v5k0y2yAM4o4SjoSkw==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      map-visit: 1.0.0
+      object-visit: 1.0.1
+    dev: true
+
+  /color-convert@2.0.1:
+    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
+    engines: {node: '>=7.0.0'}
+    dependencies:
+      color-name: 1.1.4
+    dev: true
+
+  /color-name@1.1.4:
+    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
+    dev: true
+
+  /colorette@2.0.20:
+    resolution: {integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==}
+    dev: true
+
+  /combined-stream@1.0.8:
+    resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
+    engines: {node: '>= 0.8'}
+    dependencies:
+      delayed-stream: 1.0.0
+
+  /commander@10.0.1:
+    resolution: {integrity: sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==}
+    engines: {node: '>=14'}
+    dev: true
+
+  /commander@7.2.0:
+    resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==}
+    engines: {node: '>= 10'}
+    dev: true
+
+  /commander@9.5.0:
+    resolution: {integrity: sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==}
+    engines: {node: ^12.20.0 || >=14}
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /commist@3.2.0:
+    resolution: {integrity: sha512-4PIMoPniho+LqXmpS5d3NuGYncG6XWlkBSVGiWycL22dd42OYdUGil2CWuzklaJoNxyxUSpO4MKIBU94viWNAw==}
+    dev: false
+
+  /component-emitter@1.3.1:
+    resolution: {integrity: sha512-T0+barUSQRTUQASh8bx02dl+DhF54GtIDY13Y3m9oWTklKbb3Wv974meRpeZ3lp1JpLVECWWNHC4vaG2XHXouQ==}
+    dev: true
+
+  /computeds@0.0.1:
+    resolution: {integrity: sha512-7CEBgcMjVmitjYo5q8JTJVra6X5mQ20uTThdK+0kR7UEaDrAWEQcRiBtWJzga4eRpP6afNwwLsX2SET2JhVB1Q==}
+    dev: true
+
+  /concat-map@0.0.1:
+    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
+    dev: true
+
+  /concat-stream@2.0.0:
+    resolution: {integrity: sha512-MWufYdFw53ccGjCA+Ol7XJYpAlW6/prSMzuPOTRnJGcGzuhLn4Scrz7qf6o8bROZ514ltazcIFJZevcfbo0x7A==}
+    engines: {'0': node >= 6.0}
+    dependencies:
+      buffer-from: 1.1.2
+      inherits: 2.0.4
+      readable-stream: 3.6.2
+      typedarray: 0.0.6
+    dev: false
+
+  /confbox@0.1.8:
+    resolution: {integrity: sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==}
+    dev: true
+
+  /confbox@0.2.2:
+    resolution: {integrity: sha512-1NB+BKqhtNipMsov4xI/NnhCKp9XG9NamYp5PVm9klAT0fsrNPjaFICsCFhNhwZJKNh7zB/3q8qXz0E9oaMNtQ==}
+    dev: true
+
+  /config-chain@1.1.13:
+    resolution: {integrity: sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==}
+    dependencies:
+      ini: 1.3.8
+      proto-list: 1.2.4
+    dev: true
+
+  /consola@3.4.2:
+    resolution: {integrity: sha512-5IKcdX0nnYavi6G7TtOhwkYzyjfJlatbjMjuLSfE2kYT5pMDOilZ4OvMhi637CcDICTmz3wARPoyhqyX1Y+XvA==}
+    engines: {node: ^14.18.0 || >=16.10.0}
+    dev: true
+
+  /convert-source-map@2.0.0:
+    resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
+    dev: true
+
+  /copy-anything@2.0.6:
+    resolution: {integrity: sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==}
+    dependencies:
+      is-what: 3.14.1
+
+  /copy-anything@3.0.5:
+    resolution: {integrity: sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==}
+    engines: {node: '>=12.13'}
+    dependencies:
+      is-what: 4.1.16
+    dev: false
+
+  /copy-descriptor@0.1.1:
+    resolution: {integrity: sha512-XgZ0pFcakEUlbwQEVNg3+QAis1FyTL3Qel9FYy8pSkQqoG3PNoT0bOCQtOXcOkur21r2Eq2kI+IE+gsmAEVlYw==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /cors@2.8.5:
+    resolution: {integrity: sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==}
+    engines: {node: '>= 0.10'}
+    dependencies:
+      object-assign: 4.1.1
+      vary: 1.1.2
+    dev: true
+
+  /cross-spawn@7.0.6:
+    resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
+    engines: {node: '>= 8'}
+    dependencies:
+      path-key: 3.1.1
+      shebang-command: 2.0.0
+      which: 2.0.2
+    dev: true
+
+  /css-line-break@2.1.0:
+    resolution: {integrity: sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==}
+    dependencies:
+      utrie: 1.0.2
+    dev: false
+
+  /css-select@4.3.0:
+    resolution: {integrity: sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==}
+    dependencies:
+      boolbase: 1.0.0
+      css-what: 6.2.2
+      domhandler: 4.3.1
+      domutils: 2.8.0
+      nth-check: 2.1.1
+    dev: true
+
+  /css-tree@1.1.3:
+    resolution: {integrity: sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==}
+    engines: {node: '>=8.0.0'}
+    dependencies:
+      mdn-data: 2.0.14
+      source-map: 0.6.1
+    dev: true
+
+  /css-tree@2.3.1:
+    resolution: {integrity: sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==}
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
+    dependencies:
+      mdn-data: 2.0.30
+      source-map-js: 1.2.1
+    dev: true
+
+  /css-what@6.2.2:
+    resolution: {integrity: sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA==}
+    engines: {node: '>= 6'}
+    dev: true
+
+  /cssesc@3.0.0:
+    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
+    engines: {node: '>=4'}
+    hasBin: true
+    dev: true
+
+  /csso@4.2.0:
+    resolution: {integrity: sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==}
+    engines: {node: '>=8.0.0'}
+    dependencies:
+      css-tree: 1.1.3
+    dev: true
+
+  /cssstyle@3.0.0:
+    resolution: {integrity: sha512-N4u2ABATi3Qplzf0hWbVCdjenim8F3ojEXpBDF5hBpjzW182MjNGLqfmQ0SkSPeQ+V86ZXgeH8aXj6kayd4jgg==}
+    engines: {node: '>=14'}
+    dependencies:
+      rrweb-cssom: 0.6.0
+    dev: true
+
+  /csstype@3.1.3:
+    resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
+
+  /data-urls@4.0.0:
+    resolution: {integrity: sha512-/mMTei/JXPqvFqQtfyTowxmJVwr2PVAeCcDxyFf6LhoOu/09TX2OX3kb2wzi4DMXcfj4OItwDOnhl5oziPnT6g==}
+    engines: {node: '>=14'}
+    dependencies:
+      abab: 2.0.6
+      whatwg-mimetype: 3.0.0
+      whatwg-url: 12.0.1
+    dev: true
+
+  /data-view-buffer@1.0.2:
+    resolution: {integrity: sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      is-data-view: 1.0.2
+    dev: true
+
+  /data-view-byte-length@1.0.2:
+    resolution: {integrity: sha512-tuhGbE6CfTM9+5ANGf+oQb72Ky/0+s3xKUpHvShfiz2RxMFgFPjsXuRLBVMtvMs15awe45SRb83D6wH4ew6wlQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      is-data-view: 1.0.2
+    dev: true
+
+  /data-view-byte-offset@1.0.1:
+    resolution: {integrity: sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      is-data-view: 1.0.2
+    dev: true
+
+  /dayjs@1.11.13:
+    resolution: {integrity: sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==}
+    dev: false
+
+  /de-indent@1.0.2:
+    resolution: {integrity: sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==}
+    dev: true
+
+  /debug@2.6.9:
+    resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+    dependencies:
+      ms: 2.0.0
+    dev: true
+
+  /debug@4.4.1:
+    resolution: {integrity: sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+    dependencies:
+      ms: 2.1.3
+
+  /decimal.js@10.6.0:
+    resolution: {integrity: sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==}
+    dev: true
+
+  /decode-uri-component@0.2.2:
+    resolution: {integrity: sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==}
+    engines: {node: '>=0.10'}
+    dev: true
+
+  /deep-eql@4.1.4:
+    resolution: {integrity: sha512-SUwdGfqdKOwxCPeVYjwSyRpJ7Z+fhpwIAtmCUdZIWZ/YP5R9WAsyuSgpLVDi9bjWoN2LXHNss/dk3urXtdQxGg==}
+    engines: {node: '>=6'}
+    dependencies:
+      type-detect: 4.1.0
+    dev: true
+
+  /deep-is@0.1.4:
+    resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
+    dev: true
+
+  /define-data-property@1.1.4:
+    resolution: {integrity: sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      es-define-property: 1.0.1
+      es-errors: 1.3.0
+      gopd: 1.2.0
+    dev: true
+
+  /define-properties@1.2.1:
+    resolution: {integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      define-data-property: 1.1.4
+      has-property-descriptors: 1.0.2
+      object-keys: 1.1.1
+    dev: true
+
+  /define-property@0.2.5:
+    resolution: {integrity: sha512-Rr7ADjQZenceVOAKop6ALkkRAmH1A4Gx9hV/7ZujPUN2rkATqFO0JZLZInbAjpZYoJ1gUx8MRMQVkYemcbMSTA==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      is-descriptor: 0.1.7
+    dev: true
+
+  /define-property@1.0.0:
+    resolution: {integrity: sha512-cZTYKFWspt9jZsMscWo8sc/5lbPC9Q0N5nBLgb+Yd915iL3udB1uFgS3B8YCx66UVHq018DAVFoee7x+gxggeA==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      is-descriptor: 1.0.3
+    dev: true
+
+  /define-property@2.0.2:
+    resolution: {integrity: sha512-jwK2UV4cnPpbcG7+VRARKTZPUWowwXA8bzH5NP6ud0oeAxyYPuGZUAC7hMugpCdz4BeSZl2Dl9k66CHJ/46ZYQ==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      is-descriptor: 1.0.3
+      isobject: 3.0.1
+    dev: true
+
+  /defu@6.1.4:
+    resolution: {integrity: sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==}
+    dev: true
+
+  /delayed-stream@1.0.0:
+    resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
+    engines: {node: '>=0.4.0'}
+
+  /destr@2.0.5:
+    resolution: {integrity: sha512-ugFTXCtDZunbzasqBxrK93Ik/DRYsO6S/fedkWEMKqt04xZ4csmnmwGDBAb07QWNaGMAmnTIemsYZCksjATwsA==}
+    dev: true
+
+  /diff-sequences@29.6.3:
+    resolution: {integrity: sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+    dev: true
+
+  /dir-glob@3.0.1:
+    resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
+    engines: {node: '>=8'}
+    dependencies:
+      path-type: 4.0.0
+    dev: true
+
+  /doctrine@3.0.0:
+    resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
+    engines: {node: '>=6.0.0'}
+    dependencies:
+      esutils: 2.0.3
+    dev: true
+
+  /dom-serializer@0.2.2:
+    resolution: {integrity: sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==}
+    dependencies:
+      domelementtype: 2.3.0
+      entities: 2.2.0
+    dev: true
+
+  /dom-serializer@1.4.1:
+    resolution: {integrity: sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==}
+    dependencies:
+      domelementtype: 2.3.0
+      domhandler: 4.3.1
+      entities: 2.2.0
+    dev: true
+
+  /domelementtype@1.3.1:
+    resolution: {integrity: sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==}
+    dev: true
+
+  /domelementtype@2.3.0:
+    resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==}
+    dev: true
+
+  /domexception@4.0.0:
+    resolution: {integrity: sha512-A2is4PLG+eeSfoTMA95/s4pvAoSo2mKtiM5jlHkAVewmiO8ISFTFKZjH7UAM1Atli/OT/7JHOrJRJiMKUZKYBw==}
+    engines: {node: '>=12'}
+    deprecated: Use your platform's native DOMException instead
+    dependencies:
+      webidl-conversions: 7.0.0
+    dev: true
+
+  /domhandler@2.4.2:
+    resolution: {integrity: sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==}
+    dependencies:
+      domelementtype: 1.3.1
+    dev: true
+
+  /domhandler@4.3.1:
+    resolution: {integrity: sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==}
+    engines: {node: '>= 4'}
+    dependencies:
+      domelementtype: 2.3.0
+    dev: true
+
+  /domutils@1.7.0:
+    resolution: {integrity: sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==}
+    dependencies:
+      dom-serializer: 0.2.2
+      domelementtype: 1.3.1
+    dev: true
+
+  /domutils@2.8.0:
+    resolution: {integrity: sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==}
+    dependencies:
+      dom-serializer: 1.4.1
+      domelementtype: 2.3.0
+      domhandler: 4.3.1
+    dev: true
+
+  /dunder-proto@1.0.1:
+    resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-errors: 1.3.0
+      gopd: 1.2.0
+
+  /duplexer@0.1.2:
+    resolution: {integrity: sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==}
+    dev: true
+
+  /eastasianwidth@0.2.0:
+    resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
+    dev: true
+
+  /echarts@5.6.0:
+    resolution: {integrity: sha512-oTbVTsXfKuEhxftHqL5xprgLoc0k7uScAwtryCgWF6hPYFLRwOUHiFmHGCBKP5NPFNkDVopOieyUqYGH8Fa3kA==}
+    dependencies:
+      tslib: 2.3.0
+      zrender: 5.6.1
+    dev: false
+
+  /editorconfig@1.0.4:
+    resolution: {integrity: sha512-L9Qe08KWTlqYMVvMcTIvMAdl1cDUubzRNYL+WfA4bLDMHe4nemKkpmYzkznE1FwLKu0EEmy6obgQKzMJrg4x9Q==}
+    engines: {node: '>=14'}
+    hasBin: true
+    dependencies:
+      '@one-ini/wasm': 0.1.1
+      commander: 10.0.1
+      minimatch: 9.0.1
+      semver: 7.7.2
+    dev: true
+
+  /electron-to-chromium@1.5.200:
+    resolution: {integrity: sha512-rFCxROw7aOe4uPTfIAx+rXv9cEcGx+buAF4npnhtTqCJk5KDFRnh3+KYj7rdVh6lsFt5/aPs+Irj9rZ33WMA7w==}
+    dev: true
+
+  /element-plus@2.10.7(vue@3.5.18):
+    resolution: {integrity: sha512-bL4yhepL8/0NEQA5+N2Q6ZVKLipIDkiQjK2mqtSmGh6CxJk1yaBMdG5HXfYkbk1htNcT3ULk9g23lzT323JGcA==}
+    peerDependencies:
+      vue: ^3.2.0
+    dependencies:
+      '@ctrl/tinycolor': 3.6.1
+      '@element-plus/icons-vue': 2.3.2(vue@3.5.18)
+      '@floating-ui/dom': 1.7.3
+      '@popperjs/core': /@sxzz/popperjs-es@2.11.7
+      '@types/lodash': 4.17.20
+      '@types/lodash-es': 4.17.12
+      '@vueuse/core': 9.13.0(vue@3.5.18)
+      async-validator: 4.2.5
+      dayjs: 1.11.13
+      escape-html: 1.0.3
+      lodash: 4.17.21
+      lodash-es: 4.17.21
+      lodash-unified: 1.0.3(@types/lodash-es@4.17.12)(lodash-es@4.17.21)(lodash@4.17.21)
+      memoize-one: 6.0.0
+      normalize-wheel-es: 1.2.0
+      vue: 3.5.18(typescript@5.2.2)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+    dev: false
+
+  /emoji-regex@8.0.0:
+    resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
+    dev: true
+
+  /emoji-regex@9.2.2:
+    resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
+    dev: true
+
+  /emojis-list@3.0.0:
+    resolution: {integrity: sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==}
+    engines: {node: '>= 4'}
+    dev: true
+
+  /entities@1.1.2:
+    resolution: {integrity: sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==}
+    dev: true
+
+  /entities@2.2.0:
+    resolution: {integrity: sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==}
+    dev: true
+
+  /entities@4.5.0:
+    resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
+    engines: {node: '>=0.12'}
+
+  /entities@6.0.1:
+    resolution: {integrity: sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==}
+    engines: {node: '>=0.12'}
+    dev: true
+
+  /errno@0.1.8:
+    resolution: {integrity: sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==}
+    hasBin: true
+    requiresBuild: true
+    dependencies:
+      prr: 1.0.1
+    optional: true
+
+  /es-abstract@1.24.0:
+    resolution: {integrity: sha512-WSzPgsdLtTcQwm4CROfS5ju2Wa1QQcVeT37jFjYzdFz1r9ahadC8B8/a4qxJxM+09F18iumCdRmlr96ZYkQvEg==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      array-buffer-byte-length: 1.0.2
+      arraybuffer.prototype.slice: 1.0.4
+      available-typed-arrays: 1.0.7
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      data-view-buffer: 1.0.2
+      data-view-byte-length: 1.0.2
+      data-view-byte-offset: 1.0.1
+      es-define-property: 1.0.1
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+      es-set-tostringtag: 2.1.0
+      es-to-primitive: 1.3.0
+      function.prototype.name: 1.1.8
+      get-intrinsic: 1.3.0
+      get-proto: 1.0.1
+      get-symbol-description: 1.1.0
+      globalthis: 1.0.4
+      gopd: 1.2.0
+      has-property-descriptors: 1.0.2
+      has-proto: 1.2.0
+      has-symbols: 1.1.0
+      hasown: 2.0.2
+      internal-slot: 1.1.0
+      is-array-buffer: 3.0.5
+      is-callable: 1.2.7
+      is-data-view: 1.0.2
+      is-negative-zero: 2.0.3
+      is-regex: 1.2.1
+      is-set: 2.0.3
+      is-shared-array-buffer: 1.0.4
+      is-string: 1.1.1
+      is-typed-array: 1.1.15
+      is-weakref: 1.1.1
+      math-intrinsics: 1.1.0
+      object-inspect: 1.13.4
+      object-keys: 1.1.1
+      object.assign: 4.1.7
+      own-keys: 1.0.1
+      regexp.prototype.flags: 1.5.4
+      safe-array-concat: 1.1.3
+      safe-push-apply: 1.0.0
+      safe-regex-test: 1.1.0
+      set-proto: 1.0.0
+      stop-iteration-iterator: 1.1.0
+      string.prototype.trim: 1.2.10
+      string.prototype.trimend: 1.0.9
+      string.prototype.trimstart: 1.0.8
+      typed-array-buffer: 1.0.3
+      typed-array-byte-length: 1.0.3
+      typed-array-byte-offset: 1.0.4
+      typed-array-length: 1.0.7
+      unbox-primitive: 1.1.0
+      which-typed-array: 1.1.19
+    dev: true
+
+  /es-define-property@1.0.1:
+    resolution: {integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==}
+    engines: {node: '>= 0.4'}
+
+  /es-errors@1.3.0:
+    resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
+    engines: {node: '>= 0.4'}
+
+  /es-object-atoms@1.1.1:
+    resolution: {integrity: sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      es-errors: 1.3.0
+
+  /es-set-tostringtag@2.1.0:
+    resolution: {integrity: sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      has-tostringtag: 1.0.2
+      hasown: 2.0.2
+
+  /es-to-primitive@1.3.0:
+    resolution: {integrity: sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      is-callable: 1.2.7
+      is-date-object: 1.1.0
+      is-symbol: 1.1.1
+    dev: true
+
+  /esbuild@0.18.20:
+    resolution: {integrity: sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==}
+    engines: {node: '>=12'}
+    hasBin: true
+    requiresBuild: true
+    optionalDependencies:
+      '@esbuild/android-arm': 0.18.20
+      '@esbuild/android-arm64': 0.18.20
+      '@esbuild/android-x64': 0.18.20
+      '@esbuild/darwin-arm64': 0.18.20
+      '@esbuild/darwin-x64': 0.18.20
+      '@esbuild/freebsd-arm64': 0.18.20
+      '@esbuild/freebsd-x64': 0.18.20
+      '@esbuild/linux-arm': 0.18.20
+      '@esbuild/linux-arm64': 0.18.20
+      '@esbuild/linux-ia32': 0.18.20
+      '@esbuild/linux-loong64': 0.18.20
+      '@esbuild/linux-mips64el': 0.18.20
+      '@esbuild/linux-ppc64': 0.18.20
+      '@esbuild/linux-riscv64': 0.18.20
+      '@esbuild/linux-s390x': 0.18.20
+      '@esbuild/linux-x64': 0.18.20
+      '@esbuild/netbsd-x64': 0.18.20
+      '@esbuild/openbsd-x64': 0.18.20
+      '@esbuild/sunos-x64': 0.18.20
+      '@esbuild/win32-arm64': 0.18.20
+      '@esbuild/win32-ia32': 0.18.20
+      '@esbuild/win32-x64': 0.18.20
+    dev: true
+
+  /escalade@3.2.0:
+    resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
+    engines: {node: '>=6'}
+    dev: true
+
+  /escape-html@1.0.3:
+    resolution: {integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==}
+    dev: false
+
+  /escape-string-regexp@1.0.5:
+    resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
+    engines: {node: '>=0.8.0'}
+    dev: true
+
+  /escape-string-regexp@4.0.0:
+    resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
+    engines: {node: '>=10'}
+    dev: true
+
+  /eslint-config-prettier@8.10.2(eslint@8.57.1):
+    resolution: {integrity: sha512-/IGJ6+Dka158JnP5n5YFMOszjDWrXggGz1LaK/guZq9vZTmniaKlHcsscvkAhn9y4U+BU3JuUdYvtAMcv30y4A==}
+    hasBin: true
+    peerDependencies:
+      eslint: '>=7.0.0'
+    dependencies:
+      eslint: 8.57.1
+    dev: true
+
+  /eslint-plugin-prettier@5.5.4(eslint-config-prettier@8.10.2)(eslint@8.57.1)(prettier@3.6.2):
+    resolution: {integrity: sha512-swNtI95SToIz05YINMA6Ox5R057IMAmWZ26GqPxusAp1TZzj+IdY9tXNWWD3vkF/wEqydCONcwjTFpxybBqZsg==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    peerDependencies:
+      '@types/eslint': '>=8.0.0'
+      eslint: '>=8.0.0'
+      eslint-config-prettier: '>= 7.0.0 <10.0.0 || >=10.1.0'
+      prettier: '>=3.0.0'
+    peerDependenciesMeta:
+      '@types/eslint':
+        optional: true
+      eslint-config-prettier:
+        optional: true
+    dependencies:
+      eslint: 8.57.1
+      eslint-config-prettier: 8.10.2(eslint@8.57.1)
+      prettier: 3.6.2
+      prettier-linter-helpers: 1.0.0
+      synckit: 0.11.11
+    dev: true
+
+  /eslint-plugin-vue@9.33.0(eslint@8.57.1):
+    resolution: {integrity: sha512-174lJKuNsuDIlLpjeXc5E2Tss8P44uIimAfGD0b90k0NoirJqpG7stLuU9Vp/9ioTOrQdWVREc4mRd1BD+CvGw==}
+    engines: {node: ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: ^6.2.0 || ^7.0.0 || ^8.0.0 || ^9.0.0
+    dependencies:
+      '@eslint-community/eslint-utils': 4.7.0(eslint@8.57.1)
+      eslint: 8.57.1
+      globals: 13.24.0
+      natural-compare: 1.4.0
+      nth-check: 2.1.1
+      postcss-selector-parser: 6.1.2
+      semver: 7.7.2
+      vue-eslint-parser: 9.4.3(eslint@8.57.1)
+      xml-name-validator: 4.0.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /eslint-scope@7.2.2:
+    resolution: {integrity: sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dependencies:
+      esrecurse: 4.3.0
+      estraverse: 5.3.0
+    dev: true
+
+  /eslint-visitor-keys@3.4.3:
+    resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dev: true
+
+  /eslint@8.57.1:
+    resolution: {integrity: sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    deprecated: This version is no longer supported. Please see https://eslint.org/version-support for other options.
+    hasBin: true
+    dependencies:
+      '@eslint-community/eslint-utils': 4.7.0(eslint@8.57.1)
+      '@eslint-community/regexpp': 4.12.1
+      '@eslint/eslintrc': 2.1.4
+      '@eslint/js': 8.57.1
+      '@humanwhocodes/config-array': 0.13.0
+      '@humanwhocodes/module-importer': 1.0.1
+      '@nodelib/fs.walk': 1.2.8
+      '@ungap/structured-clone': 1.3.0
+      ajv: 6.12.6
+      chalk: 4.1.2
+      cross-spawn: 7.0.6
+      debug: 4.4.1
+      doctrine: 3.0.0
+      escape-string-regexp: 4.0.0
+      eslint-scope: 7.2.2
+      eslint-visitor-keys: 3.4.3
+      espree: 9.6.1
+      esquery: 1.6.0
+      esutils: 2.0.3
+      fast-deep-equal: 3.1.3
+      file-entry-cache: 6.0.1
+      find-up: 5.0.0
+      glob-parent: 6.0.2
+      globals: 13.24.0
+      graphemer: 1.4.0
+      ignore: 5.3.2
+      imurmurhash: 0.1.4
+      is-glob: 4.0.3
+      is-path-inside: 3.0.3
+      js-yaml: 4.1.0
+      json-stable-stringify-without-jsonify: 1.0.1
+      levn: 0.4.1
+      lodash.merge: 4.6.2
+      minimatch: 3.1.2
+      natural-compare: 1.4.0
+      optionator: 0.9.4
+      strip-ansi: 6.0.1
+      text-table: 0.2.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /espree@9.6.1:
+    resolution: {integrity: sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dependencies:
+      acorn: 8.15.0
+      acorn-jsx: 5.3.2(acorn@8.15.0)
+      eslint-visitor-keys: 3.4.3
+    dev: true
+
+  /esquery@1.6.0:
+    resolution: {integrity: sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==}
+    engines: {node: '>=0.10'}
+    dependencies:
+      estraverse: 5.3.0
+    dev: true
+
+  /esrecurse@4.3.0:
+    resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
+    engines: {node: '>=4.0'}
+    dependencies:
+      estraverse: 5.3.0
+    dev: true
+
+  /estraverse@5.3.0:
+    resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
+    engines: {node: '>=4.0'}
+    dev: true
+
+  /estree-walker@2.0.2:
+    resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
+
+  /esutils@2.0.3:
+    resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /etag@1.8.1:
+    resolution: {integrity: sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==}
+    engines: {node: '>= 0.6'}
+    dev: true
+
+  /event-target-shim@5.0.1:
+    resolution: {integrity: sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==}
+    engines: {node: '>=6'}
+    dev: false
+
+  /events@3.3.0:
+    resolution: {integrity: sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==}
+    engines: {node: '>=0.8.x'}
+    dev: false
+
+  /expand-brackets@2.1.4:
+    resolution: {integrity: sha512-w/ozOKR9Obk3qoWeY/WDi6MFta9AoMR+zud60mdnbniMcBxRuFJyDt2LdX/14A1UABeqk+Uk+LDfUpvoGKppZA==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      debug: 2.6.9
+      define-property: 0.2.5
+      extend-shallow: 2.0.1
+      posix-character-classes: 0.1.1
+      regex-not: 1.0.2
+      snapdragon: 0.8.2
+      to-regex: 3.0.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /exsolve@1.0.7:
+    resolution: {integrity: sha512-VO5fQUzZtI6C+vx4w/4BWJpg3s/5l+6pRQEHzFRM8WFi4XffSP1Z+4qi7GbjWbvRQEbdIco5mIMq+zX4rPuLrw==}
+    dev: true
+
+  /extend-shallow@2.0.1:
+    resolution: {integrity: sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      is-extendable: 0.1.1
+    dev: true
+
+  /extend-shallow@3.0.2:
+    resolution: {integrity: sha512-BwY5b5Ql4+qZoefgMj2NUmx+tehVTH/Kf4k1ZEtOHNFcm2wSxMRo992l6X3TIgni2eZVTZ85xMOjF31fwZAj6Q==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      assign-symbols: 1.0.0
+      is-extendable: 1.0.1
+    dev: true
+
+  /extglob@2.0.4:
+    resolution: {integrity: sha512-Nmb6QXkELsuBr24CJSkilo6UHHgbekK5UiZgfE6UHD3Eb27YC6oD+bhcT+tJ6cl8dmsgdQxnWlcry8ksBIBLpw==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      array-unique: 0.3.2
+      define-property: 1.0.0
+      expand-brackets: 2.1.4
+      extend-shallow: 2.0.1
+      fragment-cache: 0.2.1
+      regex-not: 1.0.2
+      snapdragon: 0.8.2
+      to-regex: 3.0.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /fast-deep-equal@3.1.3:
+    resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
+    dev: true
+
+  /fast-diff@1.3.0:
+    resolution: {integrity: sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==}
+    dev: true
+
+  /fast-glob@3.3.3:
+    resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==}
+    engines: {node: '>=8.6.0'}
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      '@nodelib/fs.walk': 1.2.8
+      glob-parent: 5.1.2
+      merge2: 1.4.1
+      micromatch: 4.0.8
+    dev: true
+
+  /fast-json-stable-stringify@2.1.0:
+    resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
+    dev: true
+
+  /fast-levenshtein@2.0.6:
+    resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
+    dev: true
+
+  /fast-unique-numbers@9.0.22:
+    resolution: {integrity: sha512-dBR+30yHAqBGvOuxxQdnn2lTLHCO6r/9B+M4yF8mNrzr3u1yiF+YVJ6u3GTyPN/VRWqaE1FcscZDdBgVKmrmQQ==}
+    engines: {node: '>=18.2.0'}
+    dependencies:
+      '@babel/runtime': 7.28.2
+      tslib: 2.8.1
+    dev: false
+
+  /fastq@1.19.1:
+    resolution: {integrity: sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==}
+    dependencies:
+      reusify: 1.1.0
+    dev: true
+
+  /file-entry-cache@6.0.1:
+    resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
+    engines: {node: ^10.12.0 || >=12.0.0}
+    dependencies:
+      flat-cache: 3.2.0
+    dev: true
+
+  /fill-range@4.0.0:
+    resolution: {integrity: sha512-VcpLTWqWDiTerugjj8e3+esbg+skS3M9e54UuR3iCeIDMXCLTsAH8hTSzDQU/X6/6t3eYkOKoZSef2PlU6U1XQ==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      extend-shallow: 2.0.1
+      is-number: 3.0.0
+      repeat-string: 1.6.1
+      to-regex-range: 2.1.1
+    dev: true
+
+  /fill-range@7.1.1:
+    resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
+    engines: {node: '>=8'}
+    dependencies:
+      to-regex-range: 5.0.1
+    dev: true
+
+  /find-up@5.0.0:
+    resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
+    engines: {node: '>=10'}
+    dependencies:
+      locate-path: 6.0.0
+      path-exists: 4.0.0
+    dev: true
+
+  /flat-cache@3.2.0:
+    resolution: {integrity: sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==}
+    engines: {node: ^10.12.0 || >=12.0.0}
+    dependencies:
+      flatted: 3.3.3
+      keyv: 4.5.4
+      rimraf: 3.0.2
+    dev: true
+
+  /flatted@3.3.3:
+    resolution: {integrity: sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==}
+    dev: true
+
+  /follow-redirects@1.15.11:
+    resolution: {integrity: sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==}
+    engines: {node: '>=4.0'}
+    peerDependencies:
+      debug: '*'
+    peerDependenciesMeta:
+      debug:
+        optional: true
+    dev: false
+
+  /for-each@0.3.5:
+    resolution: {integrity: sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      is-callable: 1.2.7
+    dev: true
+
+  /for-in@1.0.2:
+    resolution: {integrity: sha512-7EwmXrOjyL+ChxMhmG5lnW9MPt1aIeZEwKhQzoBUdTV0N3zuwWDZYVJatDvZ2OyzPUvdIAZDsCetk3coyMfcnQ==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /foreground-child@3.3.1:
+    resolution: {integrity: sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==}
+    engines: {node: '>=14'}
+    dependencies:
+      cross-spawn: 7.0.6
+      signal-exit: 4.1.0
+    dev: true
+
+  /form-data@4.0.4:
+    resolution: {integrity: sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==}
+    engines: {node: '>= 6'}
+    dependencies:
+      asynckit: 0.4.0
+      combined-stream: 1.0.8
+      es-set-tostringtag: 2.1.0
+      hasown: 2.0.2
+      mime-types: 2.1.35
+
+  /fragment-cache@0.2.1:
+    resolution: {integrity: sha512-GMBAbW9antB8iZRHLoGw0b3HANt57diZYFO/HL1JGIC1MjKrdmhxvrJbupnVvpys0zsz7yBApXdQyfepKly2kA==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      map-cache: 0.2.2
+    dev: true
+
+  /fs-extra@10.1.0:
+    resolution: {integrity: sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==}
+    engines: {node: '>=12'}
+    dependencies:
+      graceful-fs: 4.2.11
+      jsonfile: 6.2.0
+      universalify: 2.0.1
+    dev: true
+
+  /fs-extra@7.0.1:
+    resolution: {integrity: sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==}
+    engines: {node: '>=6 <7 || >=8'}
+    dependencies:
+      graceful-fs: 4.2.11
+      jsonfile: 4.0.0
+      universalify: 0.1.2
+    dev: true
+
+  /fs.realpath@1.0.0:
+    resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
+    dev: true
+
+  /fsevents@2.3.3:
+    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /function-bind@1.1.2:
+    resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
+
+  /function.prototype.name@1.1.8:
+    resolution: {integrity: sha512-e5iwyodOHhbMr/yNrc7fDYG4qlbIvI5gajyzPnb5TCwyhjApznQh1BMFou9b30SevY43gCJKXycoCBjMbsuW0Q==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      functions-have-names: 1.2.3
+      hasown: 2.0.2
+      is-callable: 1.2.7
+    dev: true
+
+  /functions-have-names@1.2.3:
+    resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==}
+    dev: true
+
+  /gensync@1.0.0-beta.2:
+    resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
+    engines: {node: '>=6.9.0'}
+    dev: true
+
+  /get-func-name@2.0.2:
+    resolution: {integrity: sha512-8vXOvuE167CtIc3OyItco7N/dpRtBbYOsPsXCz7X/PMnlGjYjSGuZJgM1Y7mmew7BKf9BqvLX2tnOVy1BBUsxQ==}
+    dev: true
+
+  /get-intrinsic@1.3.0:
+    resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-define-property: 1.0.1
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+      function-bind: 1.1.2
+      get-proto: 1.0.1
+      gopd: 1.2.0
+      has-symbols: 1.1.0
+      hasown: 2.0.2
+      math-intrinsics: 1.1.0
+
+  /get-proto@1.0.1:
+    resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      dunder-proto: 1.0.1
+      es-object-atoms: 1.1.1
+
+  /get-symbol-description@1.1.0:
+    resolution: {integrity: sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+    dev: true
+
+  /get-value@2.0.6:
+    resolution: {integrity: sha512-Ln0UQDlxH1BapMu3GPtf7CuYNwRZf2gwCuPqbyG6pB8WfmFpzqcy4xtAaAMUhnNqjMKTiCPZG2oMT3YSx8U2NA==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /glob-parent@5.1.2:
+    resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
+    engines: {node: '>= 6'}
+    dependencies:
+      is-glob: 4.0.3
+    dev: true
+
+  /glob-parent@6.0.2:
+    resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
+    engines: {node: '>=10.13.0'}
+    dependencies:
+      is-glob: 4.0.3
+    dev: true
+
+  /glob@10.4.5:
+    resolution: {integrity: sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==}
+    hasBin: true
+    dependencies:
+      foreground-child: 3.3.1
+      jackspeak: 3.4.3
+      minimatch: 9.0.5
+      minipass: 7.1.2
+      package-json-from-dist: 1.0.1
+      path-scurry: 1.11.1
+    dev: true
+
+  /glob@7.2.3:
+    resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
+    deprecated: Glob versions prior to v9 are no longer supported
+    dependencies:
+      fs.realpath: 1.0.0
+      inflight: 1.0.6
+      inherits: 2.0.4
+      minimatch: 3.1.2
+      once: 1.4.0
+      path-is-absolute: 1.0.1
+    dev: true
+
+  /globals@13.24.0:
+    resolution: {integrity: sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==}
+    engines: {node: '>=8'}
+    dependencies:
+      type-fest: 0.20.2
+    dev: true
+
+  /globals@15.15.0:
+    resolution: {integrity: sha512-7ACyT3wmyp3I61S4fG682L0VA2RGD9otkqGJIwNUMF1SWUombIIk+af1unuDYgMm082aHYwD+mzJvv9Iu8dsgg==}
+    engines: {node: '>=18'}
+    dev: true
+
+  /globalthis@1.0.4:
+    resolution: {integrity: sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      define-properties: 1.2.1
+      gopd: 1.2.0
+    dev: true
+
+  /globby@11.1.0:
+    resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==}
+    engines: {node: '>=10'}
+    dependencies:
+      array-union: 2.1.0
+      dir-glob: 3.0.1
+      fast-glob: 3.3.3
+      ignore: 5.3.2
+      merge2: 1.4.1
+      slash: 3.0.0
+    dev: true
+
+  /gopd@1.2.0:
+    resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
+    engines: {node: '>= 0.4'}
+
+  /graceful-fs@4.2.11:
+    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
+
+  /graphemer@1.4.0:
+    resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
+    dev: true
+
+  /gzip-size@6.0.0:
+    resolution: {integrity: sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==}
+    engines: {node: '>=10'}
+    dependencies:
+      duplexer: 0.1.2
+    dev: true
+
+  /has-ansi@2.0.0:
+    resolution: {integrity: sha512-C8vBJ8DwUCx19vhm7urhTuUsr4/IyP6l4VzNQDv+ryHQObW3TTTp9yB68WpYgRe2bbaGuZ/se74IqFeVnMnLZg==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      ansi-regex: 2.1.1
+    dev: true
+
+  /has-bigints@1.1.0:
+    resolution: {integrity: sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==}
+    engines: {node: '>= 0.4'}
+    dev: true
+
+  /has-flag@1.0.0:
+    resolution: {integrity: sha512-DyYHfIYwAJmjAjSSPKANxI8bFY9YtFrgkAfinBojQ8YJTOuOuav64tMUJv584SES4xl74PmuaevIyaLESHdTAA==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /has-flag@4.0.0:
+    resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /has-property-descriptors@1.0.2:
+    resolution: {integrity: sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==}
+    dependencies:
+      es-define-property: 1.0.1
+    dev: true
+
+  /has-proto@1.2.0:
+    resolution: {integrity: sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      dunder-proto: 1.0.1
+    dev: true
+
+  /has-symbols@1.1.0:
+    resolution: {integrity: sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==}
+    engines: {node: '>= 0.4'}
+
+  /has-tostringtag@1.0.2:
+    resolution: {integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      has-symbols: 1.1.0
+
+  /has-value@0.3.1:
+    resolution: {integrity: sha512-gpG936j8/MzaeID5Yif+577c17TxaDmhuyVgSwtnL/q8UUTySg8Mecb+8Cf1otgLoD7DDH75axp86ER7LFsf3Q==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      get-value: 2.0.6
+      has-values: 0.1.4
+      isobject: 2.1.0
+    dev: true
+
+  /has-value@1.0.0:
+    resolution: {integrity: sha512-IBXk4GTsLYdQ7Rvt+GRBrFSVEkmuOUy4re0Xjd9kJSUQpnTrWR4/y9RpfexN9vkAPMFuQoeWKwqzPozRTlasGw==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      get-value: 2.0.6
+      has-values: 1.0.0
+      isobject: 3.0.1
+    dev: true
+
+  /has-values@0.1.4:
+    resolution: {integrity: sha512-J8S0cEdWuQbqD9//tlZxiMuMNmxB8PlEwvYwuxsTmR1G5RXUePEX/SJn7aD0GMLieuZYSwNH0cQuJGwnYunXRQ==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /has-values@1.0.0:
+    resolution: {integrity: sha512-ODYZC64uqzmtfGMEAX/FvZiRyWLpAC3vYnNunURUnkGVTS+mI0smVsWaPydRBsE3g+ok7h960jChO8mFcWlHaQ==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      is-number: 3.0.0
+      kind-of: 4.0.0
+    dev: true
+
+  /hasown@2.0.2:
+    resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      function-bind: 1.1.2
+
+  /he@1.2.0:
+    resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
+    hasBin: true
+    dev: true
+
+  /help-me@5.0.0:
+    resolution: {integrity: sha512-7xgomUX6ADmcYzFik0HzAxh/73YlKR9bmFzf51CZwR+b6YtzU2m0u49hQCqV6SvlqIqsaxovfwdvbnsw3b/zpg==}
+    dev: false
+
+  /hookable@5.5.3:
+    resolution: {integrity: sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==}
+    dev: false
+
+  /html-encoding-sniffer@3.0.0:
+    resolution: {integrity: sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==}
+    engines: {node: '>=12'}
+    dependencies:
+      whatwg-encoding: 2.0.0
+    dev: true
+
+  /html2canvas@1.4.1:
+    resolution: {integrity: sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==}
+    engines: {node: '>=8.0.0'}
+    dependencies:
+      css-line-break: 2.1.0
+      text-segmentation: 1.0.3
+    dev: false
+
+  /htmlparser2@3.10.1:
+    resolution: {integrity: sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ==}
+    dependencies:
+      domelementtype: 1.3.1
+      domhandler: 2.4.2
+      domutils: 1.7.0
+      entities: 1.1.2
+      inherits: 2.0.4
+      readable-stream: 3.6.2
+    dev: true
+
+  /http-proxy-agent@5.0.0:
+    resolution: {integrity: sha512-n2hY8YdoRE1i7r6M0w9DIw5GgZN0G25P8zLCRQ8rjXtTU3vsNFBI/vWK/UIeE6g5MUUz6avwAPXmL6Fy9D/90w==}
+    engines: {node: '>= 6'}
+    dependencies:
+      '@tootallnate/once': 2.0.0
+      agent-base: 6.0.2
+      debug: 4.4.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /https-proxy-agent@5.0.1:
+    resolution: {integrity: sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==}
+    engines: {node: '>= 6'}
+    dependencies:
+      agent-base: 6.0.2
+      debug: 4.4.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /iconv-lite@0.6.3:
+    resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      safer-buffer: 2.1.2
+
+  /ieee754@1.2.1:
+    resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
+    dev: false
+
+  /ignore@5.3.2:
+    resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
+    engines: {node: '>= 4'}
+    dev: true
+
+  /image-size@0.5.5:
+    resolution: {integrity: sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==}
+    engines: {node: '>=0.10.0'}
+    hasBin: true
+
+  /import-fresh@3.3.1:
+    resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
+    engines: {node: '>=6'}
+    dependencies:
+      parent-module: 1.0.1
+      resolve-from: 4.0.0
+    dev: true
+
+  /import-lazy@4.0.0:
+    resolution: {integrity: sha512-rKtvo6a868b5Hu3heneU+L4yEQ4jYKLtjpnPeUdK7h0yzXGmyBTypknlkCvHFBqfX9YlorEiMM6Dnq/5atfHkw==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /imurmurhash@0.1.4:
+    resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
+    engines: {node: '>=0.8.19'}
+    dev: true
+
+  /inflight@1.0.6:
+    resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
+    deprecated: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
+    dependencies:
+      once: 1.4.0
+      wrappy: 1.0.2
+    dev: true
+
+  /inherits@2.0.4:
+    resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
+
+  /ini@1.3.8:
+    resolution: {integrity: sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==}
+    dev: true
+
+  /internal-slot@1.1.0:
+    resolution: {integrity: sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      es-errors: 1.3.0
+      hasown: 2.0.2
+      side-channel: 1.1.0
+    dev: true
+
+  /ip-address@10.0.1:
+    resolution: {integrity: sha512-NWv9YLW4PoW2B7xtzaS3NCot75m6nK7Icdv0o3lfMceJVRfSoQwqD4wEH5rLwoKJwUiZ/rfpiVBhnaF0FK4HoA==}
+    engines: {node: '>= 12'}
+    dev: false
+
+  /is-accessor-descriptor@1.0.1:
+    resolution: {integrity: sha512-YBUanLI8Yoihw923YeFUS5fs0fF2f5TSFTNiYAAzhhDscDa3lEqYuz1pDOEP5KvX94I9ey3vsqjJcLVFVU+3QA==}
+    engines: {node: '>= 0.10'}
+    dependencies:
+      hasown: 2.0.2
+    dev: true
+
+  /is-array-buffer@3.0.5:
+    resolution: {integrity: sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      get-intrinsic: 1.3.0
+    dev: true
+
+  /is-async-function@2.1.1:
+    resolution: {integrity: sha512-9dgM/cZBnNvjzaMYHVoxxfPj2QXt22Ev7SuuPrs+xav0ukGB0S6d4ydZdEiM48kLx5kDV+QBPrpVnFyefL8kkQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      async-function: 1.0.0
+      call-bound: 1.0.4
+      get-proto: 1.0.1
+      has-tostringtag: 1.0.2
+      safe-regex-test: 1.1.0
+    dev: true
+
+  /is-bigint@1.1.0:
+    resolution: {integrity: sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      has-bigints: 1.1.0
+    dev: true
+
+  /is-binary-path@2.1.0:
+    resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
+    engines: {node: '>=8'}
+    dependencies:
+      binary-extensions: 2.3.0
+    dev: true
+
+  /is-boolean-object@1.2.2:
+    resolution: {integrity: sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bound: 1.0.4
+      has-tostringtag: 1.0.2
+    dev: true
+
+  /is-buffer@1.1.6:
+    resolution: {integrity: sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==}
+    dev: true
+
+  /is-callable@1.2.7:
+    resolution: {integrity: sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==}
+    engines: {node: '>= 0.4'}
+    dev: true
+
+  /is-core-module@2.16.1:
+    resolution: {integrity: sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      hasown: 2.0.2
+    dev: true
+
+  /is-data-descriptor@1.0.1:
+    resolution: {integrity: sha512-bc4NlCDiCr28U4aEsQ3Qs2491gVq4V8G7MQyws968ImqjKuYtTJXrl7Vq7jsN7Ly/C3xj5KWFrY7sHNeDkAzXw==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      hasown: 2.0.2
+    dev: true
+
+  /is-data-view@1.0.2:
+    resolution: {integrity: sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bound: 1.0.4
+      get-intrinsic: 1.3.0
+      is-typed-array: 1.1.15
+    dev: true
+
+  /is-date-object@1.1.0:
+    resolution: {integrity: sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bound: 1.0.4
+      has-tostringtag: 1.0.2
+    dev: true
+
+  /is-descriptor@0.1.7:
+    resolution: {integrity: sha512-C3grZTvObeN1xud4cRWl366OMXZTj0+HGyk4hvfpx4ZHt1Pb60ANSXqCK7pdOTeUQpRzECBSTphqvD7U+l22Eg==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      is-accessor-descriptor: 1.0.1
+      is-data-descriptor: 1.0.1
+    dev: true
+
+  /is-descriptor@1.0.3:
+    resolution: {integrity: sha512-JCNNGbwWZEVaSPtS45mdtrneRWJFp07LLmykxeFV5F6oBvNF8vHSfJuJgoT472pSfk+Mf8VnlrspaFBHWM8JAw==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      is-accessor-descriptor: 1.0.1
+      is-data-descriptor: 1.0.1
+    dev: true
+
+  /is-extendable@0.1.1:
+    resolution: {integrity: sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /is-extendable@1.0.1:
+    resolution: {integrity: sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      is-plain-object: 2.0.4
+    dev: true
+
+  /is-extglob@2.1.1:
+    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /is-finalizationregistry@1.1.1:
+    resolution: {integrity: sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bound: 1.0.4
+    dev: true
+
+  /is-fullwidth-code-point@3.0.0:
+    resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /is-generator-function@1.1.0:
+    resolution: {integrity: sha512-nPUB5km40q9e8UfN/Zc24eLlzdSf9OfKByBw9CIdw4H1giPMeA0OIJvbchsCu4npfI2QcMVBsGEBHKZ7wLTWmQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bound: 1.0.4
+      get-proto: 1.0.1
+      has-tostringtag: 1.0.2
+      safe-regex-test: 1.1.0
+    dev: true
+
+  /is-glob@4.0.3:
+    resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      is-extglob: 2.1.1
+    dev: true
+
+  /is-map@2.0.3:
+    resolution: {integrity: sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==}
+    engines: {node: '>= 0.4'}
+    dev: true
+
+  /is-negative-zero@2.0.3:
+    resolution: {integrity: sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==}
+    engines: {node: '>= 0.4'}
+    dev: true
+
+  /is-number-object@1.1.1:
+    resolution: {integrity: sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bound: 1.0.4
+      has-tostringtag: 1.0.2
+    dev: true
+
+  /is-number@3.0.0:
+    resolution: {integrity: sha512-4cboCqIpliH+mAvFNegjZQ4kgKc3ZUhQVr3HvWbSh5q3WH2v82ct+T2Y1hdU5Gdtorx/cLifQjqCbL7bpznLTg==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      kind-of: 3.2.2
+    dev: true
+
+  /is-number@7.0.0:
+    resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
+    engines: {node: '>=0.12.0'}
+    dev: true
+
+  /is-path-inside@3.0.3:
+    resolution: {integrity: sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /is-plain-obj@1.1.0:
+    resolution: {integrity: sha512-yvkRyxmFKEOQ4pNXCmJG5AEQNlXJS5LaONXo5/cLdTZdWvsZ1ioJEonLGAosKlMWE8lwUy/bJzMjcw8az73+Fg==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /is-plain-object@2.0.4:
+    resolution: {integrity: sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      isobject: 3.0.1
+    dev: true
+
+  /is-potential-custom-element-name@1.0.1:
+    resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==}
+    dev: true
+
+  /is-regex@1.2.1:
+    resolution: {integrity: sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bound: 1.0.4
+      gopd: 1.2.0
+      has-tostringtag: 1.0.2
+      hasown: 2.0.2
+    dev: true
+
+  /is-set@2.0.3:
+    resolution: {integrity: sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==}
+    engines: {node: '>= 0.4'}
+    dev: true
+
+  /is-shared-array-buffer@1.0.4:
+    resolution: {integrity: sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bound: 1.0.4
+    dev: true
+
+  /is-string@1.1.1:
+    resolution: {integrity: sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bound: 1.0.4
+      has-tostringtag: 1.0.2
+    dev: true
+
+  /is-symbol@1.1.1:
+    resolution: {integrity: sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bound: 1.0.4
+      has-symbols: 1.1.0
+      safe-regex-test: 1.1.0
+    dev: true
+
+  /is-typed-array@1.1.15:
+    resolution: {integrity: sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      which-typed-array: 1.1.19
+    dev: true
+
+  /is-weakmap@2.0.2:
+    resolution: {integrity: sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==}
+    engines: {node: '>= 0.4'}
+    dev: true
+
+  /is-weakref@1.1.1:
+    resolution: {integrity: sha512-6i9mGWSlqzNMEqpCp93KwRS1uUOodk2OJ6b+sq7ZPDSy2WuI5NFIxp/254TytR8ftefexkWn5xNiHUNpPOfSew==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bound: 1.0.4
+    dev: true
+
+  /is-weakset@2.0.4:
+    resolution: {integrity: sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bound: 1.0.4
+      get-intrinsic: 1.3.0
+    dev: true
+
+  /is-what@3.14.1:
+    resolution: {integrity: sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==}
+
+  /is-what@4.1.16:
+    resolution: {integrity: sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A==}
+    engines: {node: '>=12.13'}
+    dev: false
+
+  /is-windows@1.0.2:
+    resolution: {integrity: sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /isarray@1.0.0:
+    resolution: {integrity: sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==}
+    dev: true
+
+  /isarray@2.0.5:
+    resolution: {integrity: sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==}
+    dev: true
+
+  /isexe@2.0.0:
+    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
+    dev: true
+
+  /isobject@2.1.0:
+    resolution: {integrity: sha512-+OUdGJlgjOBZDfxnDjYYG6zp487z0JGNQq3cYQYg5f5hKR+syHMsaztzGeml/4kGG55CSpKSpWTY+jYGgsHLgA==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      isarray: 1.0.0
+    dev: true
+
+  /isobject@3.0.1:
+    resolution: {integrity: sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /jackspeak@3.4.3:
+    resolution: {integrity: sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==}
+    dependencies:
+      '@isaacs/cliui': 8.0.2
+    optionalDependencies:
+      '@pkgjs/parseargs': 0.11.0
+    dev: true
+
+  /jiti@1.21.7:
+    resolution: {integrity: sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==}
+    hasBin: true
+    dev: true
+
+  /jju@1.4.0:
+    resolution: {integrity: sha512-8wb9Yw966OSxApiCt0K3yNJL8pnNeIv+OEq2YMidz4FKP6nonSRoOXc80iXY4JaN2FC11B9qsNmDsm+ZOfMROA==}
+    dev: true
+
+  /js-base64@2.6.4:
+    resolution: {integrity: sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==}
+    dev: true
+
+  /js-beautify@1.15.4:
+    resolution: {integrity: sha512-9/KXeZUKKJwqCXUdBxFJ3vPh467OCckSBmYDwSK/EtV090K+iMJ7zx2S3HLVDIWFQdqMIsZWbnaGiba18aWhaA==}
+    engines: {node: '>=14'}
+    hasBin: true
+    dependencies:
+      config-chain: 1.1.13
+      editorconfig: 1.0.4
+      glob: 10.4.5
+      js-cookie: 3.0.5
+      nopt: 7.2.1
+    dev: true
+
+  /js-cookie@3.0.5:
+    resolution: {integrity: sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==}
+    engines: {node: '>=14'}
+    dev: true
+
+  /js-sdsl@4.3.0:
+    resolution: {integrity: sha512-mifzlm2+5nZ+lEcLJMoBK0/IH/bDg8XnJfd/Wq6IP+xoCjLZsTOnV2QpxlVbX9bMnkl5PdEjNtBJ9Cj1NjifhQ==}
+    dev: false
+
+  /js-tokens@4.0.0:
+    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
+    dev: true
+
+  /js-yaml@4.1.0:
+    resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
+    hasBin: true
+    dependencies:
+      argparse: 2.0.1
+    dev: true
+
+  /jsdom@22.1.0:
+    resolution: {integrity: sha512-/9AVW7xNbsBv6GfWho4TTNjEo9fe6Zhf9O7s0Fhhr3u+awPwAJMKwAMXnkk5vBxflqLW9hTHX/0cs+P3gW+cQw==}
+    engines: {node: '>=16'}
+    peerDependencies:
+      canvas: ^2.5.0
+    peerDependenciesMeta:
+      canvas:
+        optional: true
+    dependencies:
+      abab: 2.0.6
+      cssstyle: 3.0.0
+      data-urls: 4.0.0
+      decimal.js: 10.6.0
+      domexception: 4.0.0
+      form-data: 4.0.4
+      html-encoding-sniffer: 3.0.0
+      http-proxy-agent: 5.0.0
+      https-proxy-agent: 5.0.1
+      is-potential-custom-element-name: 1.0.1
+      nwsapi: 2.2.21
+      parse5: 7.3.0
+      rrweb-cssom: 0.6.0
+      saxes: 6.0.0
+      symbol-tree: 3.2.4
+      tough-cookie: 4.1.4
+      w3c-xmlserializer: 4.0.0
+      webidl-conversions: 7.0.0
+      whatwg-encoding: 2.0.0
+      whatwg-mimetype: 3.0.0
+      whatwg-url: 12.0.1
+      ws: 8.18.3
+      xml-name-validator: 4.0.0
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+    dev: true
+
+  /jsesc@3.1.0:
+    resolution: {integrity: sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==}
+    engines: {node: '>=6'}
+    hasBin: true
+    dev: true
+
+  /json-buffer@3.0.1:
+    resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
+    dev: true
+
+  /json-parse-even-better-errors@3.0.2:
+    resolution: {integrity: sha512-fi0NG4bPjCHunUJffmLd0gxssIgkNmArMvis4iNah6Owg1MCJjWhEcDLmsK6iGkJq3tHwbDkTlce70/tmXN4cQ==}
+    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
+    dev: true
+
+  /json-schema-traverse@0.4.1:
+    resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
+    dev: true
+
+  /json-stable-stringify-without-jsonify@1.0.1:
+    resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
+    dev: true
+
+  /json5@1.0.2:
+    resolution: {integrity: sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==}
+    hasBin: true
+    dependencies:
+      minimist: 1.2.8
+    dev: true
+
+  /json5@2.2.3:
+    resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
+    engines: {node: '>=6'}
+    hasBin: true
+    dev: true
+
+  /jsonfile@4.0.0:
+    resolution: {integrity: sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==}
+    optionalDependencies:
+      graceful-fs: 4.2.11
+    dev: true
+
+  /jsonfile@6.2.0:
+    resolution: {integrity: sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==}
+    dependencies:
+      universalify: 2.0.1
+    optionalDependencies:
+      graceful-fs: 4.2.11
+    dev: true
+
+  /keyv@4.5.4:
+    resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
+    dependencies:
+      json-buffer: 3.0.1
+    dev: true
+
+  /kind-of@3.2.2:
+    resolution: {integrity: sha512-NOW9QQXMoZGg/oqnVNoNTTIFEIid1627WCffUBJEdMxYApq7mNE7CpzucIPc+ZQg25Phej7IJSmX3hO+oblOtQ==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      is-buffer: 1.1.6
+    dev: true
+
+  /kind-of@4.0.0:
+    resolution: {integrity: sha512-24XsCxmEbRwEDbz/qz3stgin8TTzZ1ESR56OMCN0ujYg+vRutNSiOj9bHH9u85DKgXguraugV5sFuvbD4FW/hw==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      is-buffer: 1.1.6
+    dev: true
+
+  /kind-of@5.1.0:
+    resolution: {integrity: sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /kind-of@6.0.3:
+    resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /kolorist@1.8.0:
+    resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==}
+    dev: true
+
+  /less@4.4.0:
+    resolution: {integrity: sha512-kdTwsyRuncDfjEs0DlRILWNvxhDG/Zij4YLO4TMJgDLW+8OzpfkdPnRgrsRuY1o+oaxJGWsps5f/RVBgGmmN0w==}
+    engines: {node: '>=14'}
+    hasBin: true
+    dependencies:
+      copy-anything: 2.0.6
+      parse-node-version: 1.0.1
+      tslib: 2.8.1
+    optionalDependencies:
+      errno: 0.1.8
+      graceful-fs: 4.2.11
+      image-size: 0.5.5
+      make-dir: 2.1.0
+      mime: 1.6.0
+      needle: 3.3.1
+      source-map: 0.6.1
+
+  /levn@0.4.1:
+    resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
+    engines: {node: '>= 0.8.0'}
+    dependencies:
+      prelude-ls: 1.2.1
+      type-check: 0.4.0
+    dev: true
+
+  /loader-utils@1.4.2:
+    resolution: {integrity: sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==}
+    engines: {node: '>=4.0.0'}
+    dependencies:
+      big.js: 5.2.2
+      emojis-list: 3.0.0
+      json5: 1.0.2
+    dev: true
+
+  /local-pkg@0.4.3:
+    resolution: {integrity: sha512-SFppqq5p42fe2qcZQqqEOiVRXl+WCP1MdT6k7BDEW1j++sp5fIY+/fdRQitvKgB5BrBcmrs5m/L0v2FrU5MY1g==}
+    engines: {node: '>=14'}
+    dev: true
+
+  /local-pkg@1.1.1:
+    resolution: {integrity: sha512-WunYko2W1NcdfAFpuLUoucsgULmgDBRkdxHxWQ7mK0cQqwPiy8E1enjuRBrhLtZkB5iScJ1XIPdhVEFK8aOLSg==}
+    engines: {node: '>=14'}
+    dependencies:
+      mlly: 1.7.4
+      pkg-types: 2.2.0
+      quansync: 0.2.10
+    dev: true
+
+  /locate-path@6.0.0:
+    resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
+    engines: {node: '>=10'}
+    dependencies:
+      p-locate: 5.0.0
+    dev: true
+
+  /lodash-es@4.17.21:
+    resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==}
+    dev: false
+
+  /lodash-unified@1.0.3(@types/lodash-es@4.17.12)(lodash-es@4.17.21)(lodash@4.17.21):
+    resolution: {integrity: sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ==}
+    peerDependencies:
+      '@types/lodash-es': '*'
+      lodash: '*'
+      lodash-es: '*'
+    dependencies:
+      '@types/lodash-es': 4.17.12
+      lodash: 4.17.21
+      lodash-es: 4.17.21
+    dev: false
+
+  /lodash.get@4.4.2:
+    resolution: {integrity: sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==}
+    deprecated: This package is deprecated. Use the optional chaining (?.) operator instead.
+    dev: true
+
+  /lodash.isequal@4.5.0:
+    resolution: {integrity: sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==}
+    deprecated: This package is deprecated. Use require('node:util').isDeepStrictEqual instead.
+    dev: true
+
+  /lodash.merge@4.6.2:
+    resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
+    dev: true
+
+  /lodash@4.17.21:
+    resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
+
+  /loupe@2.3.7:
+    resolution: {integrity: sha512-zSMINGVYkdpYSOBmLi0D1Uo7JU9nVdQKrHxC8eYlV+9YKK9WePqAlL7lSlorG/U2Fw1w0hTBmaa/jrQ3UbPHtA==}
+    dependencies:
+      get-func-name: 2.0.2
+    dev: true
+
+  /lru-cache@10.4.3:
+    resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
+
+  /lru-cache@5.1.1:
+    resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
+    dependencies:
+      yallist: 3.1.1
+    dev: true
+
+  /lru-cache@6.0.0:
+    resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
+    engines: {node: '>=10'}
+    dependencies:
+      yallist: 4.0.0
+    dev: true
+
+  /magic-string@0.30.17:
+    resolution: {integrity: sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==}
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+
+  /make-dir@2.1.0:
+    resolution: {integrity: sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==}
+    engines: {node: '>=6'}
+    requiresBuild: true
+    dependencies:
+      pify: 4.0.1
+      semver: 5.7.2
+    optional: true
+
+  /map-cache@0.2.2:
+    resolution: {integrity: sha512-8y/eV9QQZCiyn1SprXSrCmqJN0yNRATe+PO8ztwqrvrbdRLA3eYJF0yaR0YayLWkMbsQSKWS9N2gPcGEc4UsZg==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /map-visit@1.0.0:
+    resolution: {integrity: sha512-4y7uGv8bd2WdM9vpQsiQNo41Ln1NvhvDRuVt0k2JZQ+ezN2uaQes7lZeZ+QQUHOLQAtDaBJ+7wCbi+ab/KFs+w==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      object-visit: 1.0.1
+    dev: true
+
+  /math-intrinsics@1.1.0:
+    resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
+    engines: {node: '>= 0.4'}
+
+  /mdn-data@2.0.14:
+    resolution: {integrity: sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==}
+    dev: true
+
+  /mdn-data@2.0.30:
+    resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==}
+    dev: true
+
+  /memoize-one@6.0.0:
+    resolution: {integrity: sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==}
+    dev: false
+
+  /memorystream@0.3.1:
+    resolution: {integrity: sha512-S3UwM3yj5mtUSEfP41UZmt/0SCoVYUcU1rkXv+BQ5Ig8ndL4sPoJNBUJERafdPb5jjHJGuMgytgKvKIf58XNBw==}
+    engines: {node: '>= 0.10.0'}
+    dev: true
+
+  /merge-options@1.0.1:
+    resolution: {integrity: sha512-iuPV41VWKWBIOpBsjoxjDZw8/GbSfZ2mk7N1453bwMrfzdrIk7EzBd+8UVR6rkw67th7xnk9Dytl3J+lHPdxvg==}
+    engines: {node: '>=4'}
+    dependencies:
+      is-plain-obj: 1.1.0
+    dev: true
+
+  /merge2@1.4.1:
+    resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
+    engines: {node: '>= 8'}
+    dev: true
+
+  /micromatch@3.1.0:
+    resolution: {integrity: sha512-3StSelAE+hnRvMs8IdVW7Uhk8CVed5tp+kLLGlBP6WiRAXS21GPGu/Nat4WNPXj2Eoc24B02SaeoyozPMfj0/g==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      arr-diff: 4.0.0
+      array-unique: 0.3.2
+      braces: 2.3.2
+      define-property: 1.0.0
+      extend-shallow: 2.0.1
+      extglob: 2.0.4
+      fragment-cache: 0.2.1
+      kind-of: 5.1.0
+      nanomatch: 1.2.13
+      object.pick: 1.3.0
+      regex-not: 1.0.2
+      snapdragon: 0.8.2
+      to-regex: 3.0.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /micromatch@4.0.8:
+    resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
+    engines: {node: '>=8.6'}
+    dependencies:
+      braces: 3.0.3
+      picomatch: 2.3.1
+    dev: true
+
+  /mime-db@1.52.0:
+    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
+    engines: {node: '>= 0.6'}
+
+  /mime-types@2.1.35:
+    resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
+    engines: {node: '>= 0.6'}
+    dependencies:
+      mime-db: 1.52.0
+
+  /mime@1.6.0:
+    resolution: {integrity: sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==}
+    engines: {node: '>=4'}
+    hasBin: true
+    requiresBuild: true
+    optional: true
+
+  /minimatch@3.0.8:
+    resolution: {integrity: sha512-6FsRAQsxQ61mw+qP1ZzbL9Bc78x2p5OqNgNpnoAFLTrX8n5Kxph0CsnhmKKNXTWjXqU5L0pGPR7hYk+XWZr60Q==}
+    dependencies:
+      brace-expansion: 1.1.12
+    dev: true
+
+  /minimatch@3.1.2:
+    resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
+    dependencies:
+      brace-expansion: 1.1.12
+    dev: true
+
+  /minimatch@9.0.1:
+    resolution: {integrity: sha512-0jWhJpD/MdhPXwPuiRkCbfYfSKp2qnn2eOc279qI7f+osl/l+prKSrvhg157zSYvx/1nmgn2NqdT6k2Z7zSH9w==}
+    engines: {node: '>=16 || 14 >=14.17'}
+    dependencies:
+      brace-expansion: 2.0.2
+    dev: true
+
+  /minimatch@9.0.3:
+    resolution: {integrity: sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==}
+    engines: {node: '>=16 || 14 >=14.17'}
+    dependencies:
+      brace-expansion: 2.0.2
+    dev: true
+
+  /minimatch@9.0.5:
+    resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==}
+    engines: {node: '>=16 || 14 >=14.17'}
+    dependencies:
+      brace-expansion: 2.0.2
+    dev: true
+
+  /minimist@1.2.8:
+    resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
+
+  /minipass@7.1.2:
+    resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
+    engines: {node: '>=16 || 14 >=14.17'}
+    dev: true
+
+  /mitt@3.0.1:
+    resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==}
+    dev: false
+
+  /mixin-deep@1.3.2:
+    resolution: {integrity: sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      for-in: 1.0.2
+      is-extendable: 1.0.1
+    dev: true
+
+  /mlly@1.7.4:
+    resolution: {integrity: sha512-qmdSIPC4bDJXgZTCR7XosJiNKySV7O215tsPtDN9iEO/7q/76b/ijtgRu/+epFXSJhijtTCCGp3DWS549P3xKw==}
+    dependencies:
+      acorn: 8.15.0
+      pathe: 2.0.3
+      pkg-types: 1.3.1
+      ufo: 1.6.1
+    dev: true
+
+  /mqtt-packet@9.0.2:
+    resolution: {integrity: sha512-MvIY0B8/qjq7bKxdN1eD+nrljoeaai+qjLJgfRn3TiMuz0pamsIWY2bFODPZMSNmabsLANXsLl4EMoWvlaTZWA==}
+    dependencies:
+      bl: 6.1.2
+      debug: 4.4.1
+      process-nextick-args: 2.0.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
+  /mqtt@5.14.0:
+    resolution: {integrity: sha512-H7EmeCJhbGblbWjm6APF5sAH3SkdI7lxHw/UkblZp8fjSNl8b2MsLcdAkIaQKxvZYmiORkdAjffvKjqQWPkd6w==}
+    engines: {node: '>=16.0.0'}
+    hasBin: true
+    dependencies:
+      '@types/readable-stream': 4.0.21
+      '@types/ws': 8.18.1
+      commist: 3.2.0
+      concat-stream: 2.0.0
+      debug: 4.4.1
+      help-me: 5.0.0
+      lru-cache: 10.4.3
+      minimist: 1.2.8
+      mqtt-packet: 9.0.2
+      number-allocator: 1.0.14
+      readable-stream: 4.7.0
+      rfdc: 1.4.1
+      socks: 2.8.7
+      split2: 4.2.0
+      worker-timers: 8.0.23
+      ws: 8.18.3
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+    dev: false
+
+  /mrmime@2.0.1:
+    resolution: {integrity: sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==}
+    engines: {node: '>=10'}
+    dev: true
+
+  /ms@2.0.0:
+    resolution: {integrity: sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==}
+    dev: true
+
+  /ms@2.1.3:
+    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
+
+  /muggle-string@0.3.1:
+    resolution: {integrity: sha512-ckmWDJjphvd/FvZawgygcUeQCxzvohjFO5RxTjj4eq8kw359gFF3E1brjfI+viLMxss5JrHTDRHZvu2/tuy0Qg==}
+    dev: true
+
+  /nanoid@3.3.11:
+    resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
+  /nanomatch@1.2.13:
+    resolution: {integrity: sha512-fpoe2T0RbHwBTBUOftAfBPaDEi06ufaUai0mE6Yn1kacc3SnTErfb/h+X94VXzI64rKFHYImXSvdwGGCmwOqCA==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      arr-diff: 4.0.0
+      array-unique: 0.3.2
+      define-property: 2.0.2
+      extend-shallow: 3.0.2
+      fragment-cache: 0.2.1
+      is-windows: 1.0.2
+      kind-of: 6.0.3
+      object.pick: 1.3.0
+      regex-not: 1.0.2
+      snapdragon: 0.8.2
+      to-regex: 3.0.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /natural-compare@1.4.0:
+    resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
+    dev: true
+
+  /needle@3.3.1:
+    resolution: {integrity: sha512-6k0YULvhpw+RoLNiQCRKOl09Rv1dPLr8hHnVjHqdolKwDrdNyk+Hmrthi4lIGPPz3r39dLx0hsF5s40sZ3Us4Q==}
+    engines: {node: '>= 4.4.x'}
+    hasBin: true
+    requiresBuild: true
+    dependencies:
+      iconv-lite: 0.6.3
+      sax: 1.4.1
+    optional: true
+
+  /node-fetch-native@1.6.7:
+    resolution: {integrity: sha512-g9yhqoedzIUm0nTnTqAQvueMPVOuIY16bqgAJJC8XOOubYFNwz6IER9qs0Gq2Xd0+CecCKFjtdDTMA4u4xG06Q==}
+    dev: true
+
+  /node-releases@2.0.19:
+    resolution: {integrity: sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==}
+    dev: true
+
+  /nopt@7.2.1:
+    resolution: {integrity: sha512-taM24ViiimT/XntxbPyJQzCG+p4EKOpgD3mxFwW38mGjVUrfERQOeY4EDHjdnptttfHuHQXFx+lTP08Q+mLa/w==}
+    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
+    hasBin: true
+    dependencies:
+      abbrev: 2.0.0
+    dev: true
+
+  /normalize-path@3.0.0:
+    resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /normalize-wheel-es@1.2.0:
+    resolution: {integrity: sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw==}
+    dev: false
+
+  /npm-normalize-package-bin@3.0.1:
+    resolution: {integrity: sha512-dMxCf+zZ+3zeQZXKxmyuCKlIDPGuv8EF940xbkC4kQVDTtqoh6rJFO+JTKSA6/Rwi0getWmtuy4Itup0AMcaDQ==}
+    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
+    dev: true
+
+  /npm-run-all2@6.2.6:
+    resolution: {integrity: sha512-tkyb4pc0Zb0oOswCb5tORPk9MvVL6gcDq1cMItQHmsbVk1skk7YF6cH+UU2GxeNLHMuk6wFEOSmEmJ2cnAK1jg==}
+    engines: {node: ^14.18.0 || ^16.13.0 || >=18.0.0, npm: '>= 8'}
+    hasBin: true
+    dependencies:
+      ansi-styles: 6.2.1
+      cross-spawn: 7.0.6
+      memorystream: 0.3.1
+      minimatch: 9.0.5
+      pidtree: 0.6.0
+      read-package-json-fast: 3.0.2
+      shell-quote: 1.8.3
+      which: 3.0.1
+    dev: true
+
+  /nth-check@2.1.1:
+    resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
+    dependencies:
+      boolbase: 1.0.0
+    dev: true
+
+  /number-allocator@1.0.14:
+    resolution: {integrity: sha512-OrL44UTVAvkKdOdRQZIJpLkAdjXGTRda052sN4sO77bKEzYYqWKMBjQvrJFzqygI99gL6Z4u2xctPW1tB8ErvA==}
+    dependencies:
+      debug: 4.4.1
+      js-sdsl: 4.3.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
+  /nwsapi@2.2.21:
+    resolution: {integrity: sha512-o6nIY3qwiSXl7/LuOU0Dmuctd34Yay0yeuZRLFmDPrrdHpXKFndPj3hM+YEPVHYC5fx2otBx4Ilc/gyYSAUaIA==}
+    dev: true
+
+  /object-assign@4.1.1:
+    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /object-copy@0.1.0:
+    resolution: {integrity: sha512-79LYn6VAb63zgtmAteVOWo9Vdj71ZVBy3Pbse+VqxDpEP83XuujMrGqHIwAXJ5I/aM0zU7dIyIAhifVTPrNItQ==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      copy-descriptor: 0.1.1
+      define-property: 0.2.5
+      kind-of: 3.2.2
+    dev: true
+
+  /object-inspect@1.13.4:
+    resolution: {integrity: sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==}
+    engines: {node: '>= 0.4'}
+    dev: true
+
+  /object-keys@1.1.1:
+    resolution: {integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==}
+    engines: {node: '>= 0.4'}
+    dev: true
+
+  /object-visit@1.0.1:
+    resolution: {integrity: sha512-GBaMwwAVK9qbQN3Scdo0OyvgPW7l3lnaVMj84uTOZlswkX0KpF6fyDBJhtTthf7pymztoN36/KEr1DyhF96zEA==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      isobject: 3.0.1
+    dev: true
+
+  /object.assign@4.1.7:
+    resolution: {integrity: sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      es-object-atoms: 1.1.1
+      has-symbols: 1.1.0
+      object-keys: 1.1.1
+    dev: true
+
+  /object.pick@1.3.0:
+    resolution: {integrity: sha512-tqa/UMy/CCoYmj+H5qc07qvSL9dqcs/WZENZ1JbtWBlATP+iVOe778gE6MSijnyCnORzDuX6hU+LA4SZ09YjFQ==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      isobject: 3.0.1
+    dev: true
+
+  /ofetch@1.4.1:
+    resolution: {integrity: sha512-QZj2DfGplQAr2oj9KzceK9Hwz6Whxazmn85yYeVuS3u9XTMOGMRx0kO95MQ+vLsj/S/NwBDMMLU5hpxvI6Tklw==}
+    dependencies:
+      destr: 2.0.5
+      node-fetch-native: 1.6.7
+      ufo: 1.6.1
+    dev: true
+
+  /once@1.4.0:
+    resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
+    dependencies:
+      wrappy: 1.0.2
+    dev: true
+
+  /optionator@0.9.4:
+    resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
+    engines: {node: '>= 0.8.0'}
+    dependencies:
+      deep-is: 0.1.4
+      fast-levenshtein: 2.0.6
+      levn: 0.4.1
+      prelude-ls: 1.2.1
+      type-check: 0.4.0
+      word-wrap: 1.2.5
+    dev: true
+
+  /own-keys@1.0.1:
+    resolution: {integrity: sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      get-intrinsic: 1.3.0
+      object-keys: 1.1.1
+      safe-push-apply: 1.0.0
+    dev: true
+
+  /p-limit@3.1.0:
+    resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
+    engines: {node: '>=10'}
+    dependencies:
+      yocto-queue: 0.1.0
+    dev: true
+
+  /p-limit@4.0.0:
+    resolution: {integrity: sha512-5b0R4txpzjPWVw/cXXUResoD4hb6U/x9BH08L7nw+GN1sezDzPdxeRvpc9c433fZhBan/wusjbCsqwqm4EIBIQ==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    dependencies:
+      yocto-queue: 1.2.1
+    dev: true
+
+  /p-locate@5.0.0:
+    resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
+    engines: {node: '>=10'}
+    dependencies:
+      p-limit: 3.1.0
+    dev: true
+
+  /package-json-from-dist@1.0.1:
+    resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==}
+    dev: true
+
+  /package-manager-detector@1.3.0:
+    resolution: {integrity: sha512-ZsEbbZORsyHuO00lY1kV3/t72yp6Ysay6Pd17ZAlNGuGwmWDLCJxFpRs0IzfXfj1o4icJOkUEioexFHzyPurSQ==}
+    dev: true
+
+  /parent-module@1.0.1:
+    resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
+    engines: {node: '>=6'}
+    dependencies:
+      callsites: 3.1.0
+    dev: true
+
+  /parse-node-version@1.0.1:
+    resolution: {integrity: sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==}
+    engines: {node: '>= 0.10'}
+
+  /parse5@7.3.0:
+    resolution: {integrity: sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==}
+    dependencies:
+      entities: 6.0.1
+    dev: true
+
+  /pascalcase@0.1.1:
+    resolution: {integrity: sha512-XHXfu/yOQRy9vYOtUDVMN60OEJjW013GoObG1o+xwQTpB9eYJX/BjXMsdW13ZDPruFhYYn0AG22w0xgQMwl3Nw==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /path-browserify@1.0.1:
+    resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
+    dev: true
+
+  /path-exists@4.0.0:
+    resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /path-is-absolute@1.0.1:
+    resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /path-key@3.1.1:
+    resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /path-parse@1.0.7:
+    resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
+    dev: true
+
+  /path-scurry@1.11.1:
+    resolution: {integrity: sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==}
+    engines: {node: '>=16 || 14 >=14.18'}
+    dependencies:
+      lru-cache: 10.4.3
+      minipass: 7.1.2
+    dev: true
+
+  /path-type@4.0.0:
+    resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /pathe@0.2.0:
+    resolution: {integrity: sha512-sTitTPYnn23esFR3RlqYBWn4c45WGeLcsKzQiUpXJAyfcWkolvlYpV8FLo7JishK946oQwMFUCHXQ9AjGPKExw==}
+    dev: true
+
+  /pathe@1.1.2:
+    resolution: {integrity: sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==}
+    dev: true
+
+  /pathe@2.0.3:
+    resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==}
+    dev: true
+
+  /pathval@1.1.1:
+    resolution: {integrity: sha512-Dp6zGqpTdETdR63lehJYPeIOqpiNBNtc7BpWSLrOje7UaIsE5aY92r/AunQA7rsXvet3lrJ3JnZX29UPTKXyKQ==}
+    dev: true
+
+  /perfect-debounce@1.0.0:
+    resolution: {integrity: sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==}
+
+  /performance-now@2.1.0:
+    resolution: {integrity: sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==}
+    dev: false
+
+  /picocolors@1.1.1:
+    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
+
+  /picomatch@2.3.1:
+    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
+    engines: {node: '>=8.6'}
+    dev: true
+
+  /picomatch@4.0.3:
+    resolution: {integrity: sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==}
+    engines: {node: '>=12'}
+    dev: true
+
+  /pidtree@0.6.0:
+    resolution: {integrity: sha512-eG2dWTVw5bzqGRztnHExczNxt5VGsE6OwTeCG3fdUf9KBsZzO3R5OIIIzWR+iZA0NtZ+RDVdaoE2dK1cn6jH4g==}
+    engines: {node: '>=0.10'}
+    hasBin: true
+    dev: true
+
+  /pify@4.0.1:
+    resolution: {integrity: sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==}
+    engines: {node: '>=6'}
+    requiresBuild: true
+    optional: true
+
+  /pinia@3.0.3(typescript@5.2.2)(vue@3.5.18):
+    resolution: {integrity: sha512-ttXO/InUULUXkMHpTdp9Fj4hLpD/2AoJdmAbAeW2yu1iy1k+pkFekQXw5VpC0/5p51IOR/jDaDRfRWRnMMsGOA==}
+    peerDependencies:
+      typescript: '>=4.4.4'
+      vue: ^2.7.0 || ^3.5.11
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@vue/devtools-api': 7.7.7
+      typescript: 5.2.2
+      vue: 3.5.18(typescript@5.2.2)
+    dev: false
+
+  /pkg-types@1.3.1:
+    resolution: {integrity: sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==}
+    dependencies:
+      confbox: 0.1.8
+      mlly: 1.7.4
+      pathe: 2.0.3
+    dev: true
+
+  /pkg-types@2.2.0:
+    resolution: {integrity: sha512-2SM/GZGAEkPp3KWORxQZns4M+WSeXbC2HEvmOIJe3Cmiv6ieAJvdVhDldtHqM5J1Y7MrR1XhkBT/rMlhh9FdqQ==}
+    dependencies:
+      confbox: 0.2.2
+      exsolve: 1.0.7
+      pathe: 2.0.3
+    dev: true
+
+  /posix-character-classes@0.1.1:
+    resolution: {integrity: sha512-xTgYBc3fuo7Yt7JbiuFxSYGToMoz8fLoE6TC9Wx1P/u+LfeThMOAqmuyECnlBaaJb+u1m9hHiXUEtwW4OzfUJg==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /possible-typed-array-names@1.1.0:
+    resolution: {integrity: sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==}
+    engines: {node: '>= 0.4'}
+    dev: true
+
+  /postcss-prefix-selector@1.16.1(postcss@5.2.18):
+    resolution: {integrity: sha512-Umxu+FvKMwlY6TyDzGFoSUnzW+NOfMBLyC1tAkIjgX+Z/qGspJeRjVC903D7mx7TuBpJlwti2ibXtWuA7fKMeQ==}
+    peerDependencies:
+      postcss: '>4 <9'
+    dependencies:
+      postcss: 5.2.18
+    dev: true
+
+  /postcss-selector-parser@6.1.2:
+    resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==}
+    engines: {node: '>=4'}
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+    dev: true
+
+  /postcss@5.2.18:
+    resolution: {integrity: sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==}
+    engines: {node: '>=0.12'}
+    dependencies:
+      chalk: 1.1.3
+      js-base64: 2.6.4
+      source-map: 0.5.7
+      supports-color: 3.2.3
+    dev: true
+
+  /postcss@8.5.6:
+    resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
+    engines: {node: ^10 || ^12 || >=14}
+    dependencies:
+      nanoid: 3.3.11
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
+  /posthtml-parser@0.2.1:
+    resolution: {integrity: sha512-nPC53YMqJnc/+1x4fRYFfm81KV2V+G9NZY+hTohpYg64Ay7NemWWcV4UWuy/SgMupqQ3kJ88M/iRfZmSnxT+pw==}
+    dependencies:
+      htmlparser2: 3.10.1
+      isobject: 2.1.0
+    dev: true
+
+  /posthtml-rename-id@1.0.12:
+    resolution: {integrity: sha512-UKXf9OF/no8WZo9edRzvuMenb6AD5hDLzIepJW+a4oJT+T/Lx7vfMYWT4aWlGNQh0WMhnUx1ipN9OkZ9q+ddEw==}
+    dependencies:
+      escape-string-regexp: 1.0.5
+    dev: true
+
+  /posthtml-render@1.4.0:
+    resolution: {integrity: sha512-W1779iVHGfq0Fvh2PROhCe2QhB8mEErgqzo1wpIt36tCgChafP+hbXIhLDOM8ePJrZcFs0vkNEtdibEWVqChqw==}
+    engines: {node: '>=10'}
+    dev: true
+
+  /posthtml-svg-mode@1.0.3:
+    resolution: {integrity: sha512-hEqw9NHZ9YgJ2/0G7CECOeuLQKZi8HjWLkBaSVtOWjygQ9ZD8P7tqeowYs7WrFdKsWEKG7o+IlsPY8jrr0CJpQ==}
+    dependencies:
+      merge-options: 1.0.1
+      posthtml: 0.9.2
+      posthtml-parser: 0.2.1
+      posthtml-render: 1.4.0
+    dev: true
+
+  /posthtml@0.9.2:
+    resolution: {integrity: sha512-spBB5sgC4cv2YcW03f/IAUN1pgDJWNWD8FzkyY4mArLUMJW+KlQhlmUdKAHQuPfb00Jl5xIfImeOsf6YL8QK7Q==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      posthtml-parser: 0.2.1
+      posthtml-render: 1.4.0
+    dev: true
+
+  /prelude-ls@1.2.1:
+    resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
+    engines: {node: '>= 0.8.0'}
+    dev: true
+
+  /prettier-linter-helpers@1.0.0:
+    resolution: {integrity: sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==}
+    engines: {node: '>=6.0.0'}
+    dependencies:
+      fast-diff: 1.3.0
+    dev: true
+
+  /prettier@3.6.2:
+    resolution: {integrity: sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==}
+    engines: {node: '>=14'}
+    hasBin: true
+    dev: true
+
+  /pretty-format@29.7.0:
+    resolution: {integrity: sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+    dependencies:
+      '@jest/schemas': 29.6.3
+      ansi-styles: 5.2.0
+      react-is: 18.3.1
+    dev: true
+
+  /process-nextick-args@2.0.1:
+    resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==}
+    dev: false
+
+  /process@0.11.10:
+    resolution: {integrity: sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==}
+    engines: {node: '>= 0.6.0'}
+    dev: false
+
+  /proto-list@1.2.4:
+    resolution: {integrity: sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==}
+    dev: true
+
+  /proxy-from-env@1.1.0:
+    resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
+    dev: false
+
+  /prr@1.0.1:
+    resolution: {integrity: sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==}
+    requiresBuild: true
+    optional: true
+
+  /psl@1.15.0:
+    resolution: {integrity: sha512-JZd3gMVBAVQkSs6HdNZo9Sdo0LNcQeMNP3CozBJb3JYC/QUYZTnKxP+f8oWRX4rHP5EurWxqAHTSwUCjlNKa1w==}
+    dependencies:
+      punycode: 2.3.1
+    dev: true
+
+  /punycode@2.3.1:
+    resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
+    engines: {node: '>=6'}
+    dev: true
+
+  /quansync@0.2.10:
+    resolution: {integrity: sha512-t41VRkMYbkHyCYmOvx/6URnN80H7k4X0lLdBMGsz+maAwrJQYB1djpV6vHrQIBE0WBSGqhtEHrK9U3DWWH8v7A==}
+    dev: true
+
+  /query-string@4.3.4:
+    resolution: {integrity: sha512-O2XLNDBIg1DnTOa+2XrIwSiXEV8h2KImXUnjhhn2+UsvZ+Es2uyd5CCRTNQlDGbzUQOW3aYCBx9rVA6dzsiY7Q==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      object-assign: 4.1.1
+      strict-uri-encode: 1.1.0
+    dev: true
+
+  /querystringify@2.2.0:
+    resolution: {integrity: sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==}
+    dev: true
+
+  /queue-microtask@1.2.3:
+    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
+    dev: true
+
+  /raf@3.4.1:
+    resolution: {integrity: sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==}
+    dependencies:
+      performance-now: 2.1.0
+    dev: false
+
+  /react-is@18.3.1:
+    resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
+    dev: true
+
+  /read-package-json-fast@3.0.2:
+    resolution: {integrity: sha512-0J+Msgym3vrLOUB3hzQCuZHII0xkNGCtz/HJH9xZshwv9DbDwkw1KaE3gx/e2J5rpEY5rtOy6cyhKOPrkP7FZw==}
+    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
+    dependencies:
+      json-parse-even-better-errors: 3.0.2
+      npm-normalize-package-bin: 3.0.1
+    dev: true
+
+  /readable-stream@3.6.2:
+    resolution: {integrity: sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==}
+    engines: {node: '>= 6'}
+    dependencies:
+      inherits: 2.0.4
+      string_decoder: 1.3.0
+      util-deprecate: 1.0.2
+
+  /readable-stream@4.7.0:
+    resolution: {integrity: sha512-oIGGmcpTLwPga8Bn6/Z75SVaH1z5dUut2ibSyAMVhmUggWpmDn2dapB0n7f8nwaSiRtepAsfJyfXIO5DCVAODg==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dependencies:
+      abort-controller: 3.0.0
+      buffer: 6.0.3
+      events: 3.3.0
+      process: 0.11.10
+      string_decoder: 1.3.0
+    dev: false
+
+  /readdirp@3.6.0:
+    resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
+    engines: {node: '>=8.10.0'}
+    dependencies:
+      picomatch: 2.3.1
+    dev: true
+
+  /reflect.getprototypeof@1.0.10:
+    resolution: {integrity: sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+      get-intrinsic: 1.3.0
+      get-proto: 1.0.1
+      which-builtin-type: 1.2.1
+    dev: true
+
+  /regex-not@1.0.2:
+    resolution: {integrity: sha512-J6SDjUgDxQj5NusnOtdFxDwN/+HWykR8GELwctJ7mdqhcyy1xEc4SRFHUXvxTp661YaVKAjfRLZ9cCqS6tn32A==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      extend-shallow: 3.0.2
+      safe-regex: 1.1.0
+    dev: true
+
+  /regexp.prototype.flags@1.5.4:
+    resolution: {integrity: sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-errors: 1.3.0
+      get-proto: 1.0.1
+      gopd: 1.2.0
+      set-function-name: 2.0.2
+    dev: true
+
+  /repeat-element@1.1.4:
+    resolution: {integrity: sha512-LFiNfRcSu7KK3evMyYOuCzv3L10TW7yC1G2/+StMjK8Y6Vqd2MG7r/Qjw4ghtuCOjFvlnms/iMmLqpvW/ES/WQ==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /repeat-string@1.6.1:
+    resolution: {integrity: sha512-PV0dzCYDNfRi1jCDbJzpW7jNNDRuCOG/jI5ctQcGKt/clZD+YcPS3yIlWuTJMmESC8aevCFmWJy5wjAFgNqN6w==}
+    engines: {node: '>=0.10'}
+    dev: true
+
+  /requires-port@1.0.0:
+    resolution: {integrity: sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==}
+    dev: true
+
+  /resize-detector@0.3.0:
+    resolution: {integrity: sha512-R/tCuvuOHQ8o2boRP6vgx8hXCCy87H1eY9V5imBYeVNyNVpuL9ciReSccLj2gDcax9+2weXy3bc8Vv+NRXeEvQ==}
+    dev: false
+
+  /resize-observer-polyfill@1.5.1:
+    resolution: {integrity: sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==}
+    dev: false
+
+  /resolve-from@4.0.0:
+    resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
+    engines: {node: '>=4'}
+    dev: true
+
+  /resolve-url@0.2.1:
+    resolution: {integrity: sha512-ZuF55hVUQaaczgOIwqWzkEcEidmlD/xl44x1UZnhOXcYuFN2S6+rcxpG+C1N3So0wvNI3DmJICUFfu2SxhBmvg==}
+    deprecated: https://github.com/lydell/resolve-url#deprecated
+    dev: true
+
+  /resolve@1.19.0:
+    resolution: {integrity: sha512-rArEXAgsBG4UgRGcynxWIWKFvh/XZCcS8UJdHhwy91zwAvCZIbcs+vAbflgBnNjYMs/i/i+/Ux6IZhML1yPvxg==}
+    dependencies:
+      is-core-module: 2.16.1
+      path-parse: 1.0.7
+    dev: true
+
+  /resolve@1.22.10:
+    resolution: {integrity: sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==}
+    engines: {node: '>= 0.4'}
+    hasBin: true
+    dependencies:
+      is-core-module: 2.16.1
+      path-parse: 1.0.7
+      supports-preserve-symlinks-flag: 1.0.0
+    dev: true
+
+  /ret@0.1.15:
+    resolution: {integrity: sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==}
+    engines: {node: '>=0.12'}
+    dev: true
+
+  /reusify@1.1.0:
+    resolution: {integrity: sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==}
+    engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
+    dev: true
+
+  /rfdc@1.4.1:
+    resolution: {integrity: sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==}
+    dev: false
+
+  /rgbcolor@1.0.1:
+    resolution: {integrity: sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw==}
+    engines: {node: '>= 0.8.15'}
+    dev: false
+
+  /rimraf@3.0.2:
+    resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==}
+    deprecated: Rimraf versions prior to v4 are no longer supported
+    hasBin: true
+    dependencies:
+      glob: 7.2.3
+    dev: true
+
+  /rollup@3.29.5:
+    resolution: {integrity: sha512-GVsDdsbJzzy4S/v3dqWPJ7EfvZJfCHiDqe80IyrF59LYuP+e6U1LJoUqeuqRbwAWoMNoXivMNeNAOf5E22VA1w==}
+    engines: {node: '>=14.18.0', npm: '>=8.0.0'}
+    hasBin: true
+    optionalDependencies:
+      fsevents: 2.3.3
+    dev: true
+
+  /rrweb-cssom@0.6.0:
+    resolution: {integrity: sha512-APM0Gt1KoXBz0iIkkdB/kfvGOwC4UuJFeG/c+yV7wSc7q96cG/kJ0HiYCnzivD9SB53cLV1MlHFNfOuPaadYSw==}
+    dev: true
+
+  /run-parallel@1.2.0:
+    resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
+    dependencies:
+      queue-microtask: 1.2.3
+    dev: true
+
+  /safe-array-concat@1.1.3:
+    resolution: {integrity: sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==}
+    engines: {node: '>=0.4'}
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      get-intrinsic: 1.3.0
+      has-symbols: 1.1.0
+      isarray: 2.0.5
+    dev: true
+
+  /safe-buffer@5.2.1:
+    resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
+
+  /safe-push-apply@1.0.0:
+    resolution: {integrity: sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      es-errors: 1.3.0
+      isarray: 2.0.5
+    dev: true
+
+  /safe-regex-test@1.1.0:
+    resolution: {integrity: sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      is-regex: 1.2.1
+    dev: true
+
+  /safe-regex@1.1.0:
+    resolution: {integrity: sha512-aJXcif4xnaNUzvUuC5gcb46oTS7zvg4jpMTnuqtrEPlR3vFr4pxtdTwaF1Qs3Enjn9HK+ZlwQui+a7z0SywIzg==}
+    dependencies:
+      ret: 0.1.15
+    dev: true
+
+  /safer-buffer@2.1.2:
+    resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
+
+  /sax@1.4.1:
+    resolution: {integrity: sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg==}
+    requiresBuild: true
+    optional: true
+
+  /saxes@6.0.0:
+    resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==}
+    engines: {node: '>=v12.22.7'}
+    dependencies:
+      xmlchars: 2.2.0
+    dev: true
+
+  /semver@5.7.2:
+    resolution: {integrity: sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==}
+    hasBin: true
+    requiresBuild: true
+    optional: true
+
+  /semver@6.3.1:
+    resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
+    hasBin: true
+    dev: true
+
+  /semver@7.5.4:
+    resolution: {integrity: sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==}
+    engines: {node: '>=10'}
+    hasBin: true
+    dependencies:
+      lru-cache: 6.0.0
+    dev: true
+
+  /semver@7.7.2:
+    resolution: {integrity: sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==}
+    engines: {node: '>=10'}
+    hasBin: true
+    dev: true
+
+  /set-function-length@1.2.2:
+    resolution: {integrity: sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      define-data-property: 1.1.4
+      es-errors: 1.3.0
+      function-bind: 1.1.2
+      get-intrinsic: 1.3.0
+      gopd: 1.2.0
+      has-property-descriptors: 1.0.2
+    dev: true
+
+  /set-function-name@2.0.2:
+    resolution: {integrity: sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      define-data-property: 1.1.4
+      es-errors: 1.3.0
+      functions-have-names: 1.2.3
+      has-property-descriptors: 1.0.2
+    dev: true
+
+  /set-proto@1.0.0:
+    resolution: {integrity: sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      dunder-proto: 1.0.1
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+    dev: true
+
+  /set-value@2.0.1:
+    resolution: {integrity: sha512-JxHc1weCN68wRY0fhCoXpyK55m/XPHafOmK4UWD7m2CI14GMcFypt4w/0+NV5f/ZMby2F6S2wwA7fgynh9gWSw==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      extend-shallow: 2.0.1
+      is-extendable: 0.1.1
+      is-plain-object: 2.0.4
+      split-string: 3.1.0
+    dev: true
+
+  /shebang-command@2.0.0:
+    resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
+    engines: {node: '>=8'}
+    dependencies:
+      shebang-regex: 3.0.0
+    dev: true
+
+  /shebang-regex@3.0.0:
+    resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /shell-quote@1.8.3:
+    resolution: {integrity: sha512-ObmnIF4hXNg1BqhnHmgbDETF8dLPCggZWBjkQfhZpbszZnYur5DUljTcCHii5LC3J5E0yeO/1LIMyH+UvHQgyw==}
+    engines: {node: '>= 0.4'}
+    dev: true
+
+  /side-channel-list@1.0.0:
+    resolution: {integrity: sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      es-errors: 1.3.0
+      object-inspect: 1.13.4
+    dev: true
+
+  /side-channel-map@1.0.1:
+    resolution: {integrity: sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      object-inspect: 1.13.4
+    dev: true
+
+  /side-channel-weakmap@1.0.2:
+    resolution: {integrity: sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      object-inspect: 1.13.4
+      side-channel-map: 1.0.1
+    dev: true
+
+  /side-channel@1.1.0:
+    resolution: {integrity: sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      es-errors: 1.3.0
+      object-inspect: 1.13.4
+      side-channel-list: 1.0.0
+      side-channel-map: 1.0.1
+      side-channel-weakmap: 1.0.2
+    dev: true
+
+  /siginfo@2.0.0:
+    resolution: {integrity: sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==}
+    dev: true
+
+  /signal-exit@4.1.0:
+    resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
+    engines: {node: '>=14'}
+    dev: true
+
+  /sirv@2.0.4:
+    resolution: {integrity: sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==}
+    engines: {node: '>= 10'}
+    dependencies:
+      '@polka/url': 1.0.0-next.29
+      mrmime: 2.0.1
+      totalist: 3.0.1
+    dev: true
+
+  /slash@3.0.0:
+    resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /smart-buffer@4.2.0:
+    resolution: {integrity: sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==}
+    engines: {node: '>= 6.0.0', npm: '>= 3.0.0'}
+    dev: false
+
+  /snapdragon-node@2.1.1:
+    resolution: {integrity: sha512-O27l4xaMYt/RSQ5TR3vpWCAB5Kb/czIcqUFOM/C4fYcLnbZUc1PkjTAMjof2pBWaSTwOUd6qUHcFGVGj7aIwnw==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      define-property: 1.0.0
+      isobject: 3.0.1
+      snapdragon-util: 3.0.1
+    dev: true
+
+  /snapdragon-util@3.0.1:
+    resolution: {integrity: sha512-mbKkMdQKsjX4BAL4bRYTj21edOf8cN7XHdYUJEe+Zn99hVEYcMvKPct1IqNe7+AZPirn8BCDOQBHQZknqmKlZQ==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      kind-of: 3.2.2
+    dev: true
+
+  /snapdragon@0.8.2:
+    resolution: {integrity: sha512-FtyOnWN/wCHTVXOMwvSv26d+ko5vWlIDD6zoUJ7LW8vh+ZBC8QdljveRP+crNrtBwioEUWy/4dMtbBjA4ioNlg==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      base: 0.11.2
+      debug: 2.6.9
+      define-property: 0.2.5
+      extend-shallow: 2.0.1
+      map-cache: 0.2.2
+      source-map: 0.5.7
+      source-map-resolve: 0.5.3
+      use: 3.1.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /socks@2.8.7:
+    resolution: {integrity: sha512-HLpt+uLy/pxB+bum/9DzAgiKS8CX1EvbWxI4zlmgGCExImLdiad2iCwXT5Z4c9c3Eq8rP2318mPW2c+QbtjK8A==}
+    engines: {node: '>= 10.0.0', npm: '>= 3.0.0'}
+    dependencies:
+      ip-address: 10.0.1
+      smart-buffer: 4.2.0
+    dev: false
+
+  /sortablejs@1.15.6:
+    resolution: {integrity: sha512-aNfiuwMEpfBM/CN6LY0ibyhxPfPbyFeBTYJKCvzkJ2GkUpazIt3H+QIPAMHwqQ7tMKaHz1Qj+rJJCqljnf4p3A==}
+    dev: false
+
+  /source-map-js@1.2.1:
+    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
+    engines: {node: '>=0.10.0'}
+
+  /source-map-resolve@0.5.3:
+    resolution: {integrity: sha512-Htz+RnsXWk5+P2slx5Jh3Q66vhQj1Cllm0zvnaY98+NFx+Dv2CF/f5O/t8x+KaNdrdIAsruNzoh/KpialbqAnw==}
+    deprecated: See https://github.com/lydell/source-map-resolve#deprecated
+    dependencies:
+      atob: 2.1.2
+      decode-uri-component: 0.2.2
+      resolve-url: 0.2.1
+      source-map-url: 0.4.1
+      urix: 0.1.0
+    dev: true
+
+  /source-map-url@0.4.1:
+    resolution: {integrity: sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw==}
+    deprecated: See https://github.com/lydell/source-map-url#deprecated
+    dev: true
+
+  /source-map@0.5.7:
+    resolution: {integrity: sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /source-map@0.6.1:
+    resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
+    engines: {node: '>=0.10.0'}
+
+  /speakingurl@14.0.1:
+    resolution: {integrity: sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
+  /split-string@3.1.0:
+    resolution: {integrity: sha512-NzNVhJDYpwceVVii8/Hu6DKfD2G+NrQHlS/V/qgv763EYudVwEcMQNxd2lh+0VrUByXN/oJkl5grOhYWvQUYiw==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      extend-shallow: 3.0.2
+    dev: true
+
+  /split2@4.2.0:
+    resolution: {integrity: sha512-UcjcJOWknrNkF6PLX83qcHM6KHgVKNkV62Y8a5uYDVv9ydGQVwAHMKqHdJje1VTWpljG0WYpCDhrCdAOYH4TWg==}
+    engines: {node: '>= 10.x'}
+    dev: false
+
+  /sprintf-js@1.0.3:
+    resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==}
+    dev: true
+
+  /stable@0.1.8:
+    resolution: {integrity: sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==}
+    deprecated: 'Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility'
+    dev: true
+
+  /stackback@0.0.2:
+    resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==}
+    dev: true
+
+  /stackblur-canvas@2.7.0:
+    resolution: {integrity: sha512-yf7OENo23AGJhBriGx0QivY5JP6Y1HbrrDI6WLt6C5auYZXlQrheoY8hD4ibekFKz1HOfE48Ww8kMWMnJD/zcQ==}
+    engines: {node: '>=0.1.14'}
+    dev: false
+
+  /static-extend@0.1.2:
+    resolution: {integrity: sha512-72E9+uLc27Mt718pMHt9VMNiAL4LMsmDbBva8mxWUCkT07fSzEGMYUCk0XWY6lp0j6RBAG4cJ3mWuZv2OE3s0g==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      define-property: 0.2.5
+      object-copy: 0.1.0
+    dev: true
+
+  /std-env@3.9.0:
+    resolution: {integrity: sha512-UGvjygr6F6tpH7o2qyqR6QYpwraIjKSdtzyBdyytFOHmPZY917kwdwLG0RbOjWOnKmnm3PeHjaoLLMie7kPLQw==}
+    dev: true
+
+  /stop-iteration-iterator@1.1.0:
+    resolution: {integrity: sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      es-errors: 1.3.0
+      internal-slot: 1.1.0
+    dev: true
+
+  /strict-uri-encode@1.1.0:
+    resolution: {integrity: sha512-R3f198pcvnB+5IpnBlRkphuE9n46WyVl8I39W/ZUTZLz4nqSP/oLYUrcnJrw462Ds8he4YKMov2efsTIw1BDGQ==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /string-argv@0.3.2:
+    resolution: {integrity: sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==}
+    engines: {node: '>=0.6.19'}
+    dev: true
+
+  /string-width@4.2.3:
+    resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
+    engines: {node: '>=8'}
+    dependencies:
+      emoji-regex: 8.0.0
+      is-fullwidth-code-point: 3.0.0
+      strip-ansi: 6.0.1
+    dev: true
+
+  /string-width@5.1.2:
+    resolution: {integrity: sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==}
+    engines: {node: '>=12'}
+    dependencies:
+      eastasianwidth: 0.2.0
+      emoji-regex: 9.2.2
+      strip-ansi: 7.1.0
+    dev: true
+
+  /string.prototype.trim@1.2.10:
+    resolution: {integrity: sha512-Rs66F0P/1kedk5lyYyH9uBzuiI/kNRmwJAR9quK6VOtIpZ2G+hMZd+HQbbv25MgCA6gEffoMZYxlTod4WcdrKA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-data-property: 1.1.4
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-object-atoms: 1.1.1
+      has-property-descriptors: 1.0.2
+    dev: true
+
+  /string.prototype.trimend@1.0.9:
+    resolution: {integrity: sha512-G7Ok5C6E/j4SGfyLCloXTrngQIQU3PWtXGst3yM7Bea9FRURf1S42ZHlZZtsNque2FN2PoUhfZXYLNWwEr4dLQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      es-object-atoms: 1.1.1
+    dev: true
+
+  /string.prototype.trimstart@1.0.8:
+    resolution: {integrity: sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-object-atoms: 1.1.1
+    dev: true
+
+  /string_decoder@1.3.0:
+    resolution: {integrity: sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==}
+    dependencies:
+      safe-buffer: 5.2.1
+
+  /strip-ansi@3.0.1:
+    resolution: {integrity: sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      ansi-regex: 2.1.1
+    dev: true
+
+  /strip-ansi@6.0.1:
+    resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
+    engines: {node: '>=8'}
+    dependencies:
+      ansi-regex: 5.0.1
+    dev: true
+
+  /strip-ansi@7.1.0:
+    resolution: {integrity: sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==}
+    engines: {node: '>=12'}
+    dependencies:
+      ansi-regex: 6.1.0
+    dev: true
+
+  /strip-json-comments@3.1.1:
+    resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /strip-literal@1.3.0:
+    resolution: {integrity: sha512-PugKzOsyXpArk0yWmUwqOZecSO0GH0bPoctLcqNDH9J04pVW3lflYE0ujElBGTloevcxF5MofAOZ7C5l2b+wLg==}
+    dependencies:
+      acorn: 8.15.0
+    dev: true
+
+  /superjson@2.2.2:
+    resolution: {integrity: sha512-5JRxVqC8I8NuOUjzBbvVJAKNM8qoVuH0O77h4WInc/qC2q5IreqKxYwgkga3PfA22OayK2ikceb/B26dztPl+Q==}
+    engines: {node: '>=16'}
+    dependencies:
+      copy-anything: 3.0.5
+    dev: false
+
+  /supports-color@2.0.0:
+    resolution: {integrity: sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g==}
+    engines: {node: '>=0.8.0'}
+    dev: true
+
+  /supports-color@3.2.3:
+    resolution: {integrity: sha512-Jds2VIYDrlp5ui7t8abHN2bjAu4LV/q4N2KivFPpGH0lrka0BMq/33AmECUXlKPcHigkNaqfXRENFju+rlcy+A==}
+    engines: {node: '>=0.8.0'}
+    dependencies:
+      has-flag: 1.0.0
+    dev: true
+
+  /supports-color@7.2.0:
+    resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
+    engines: {node: '>=8'}
+    dependencies:
+      has-flag: 4.0.0
+    dev: true
+
+  /supports-color@8.1.1:
+    resolution: {integrity: sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==}
+    engines: {node: '>=10'}
+    dependencies:
+      has-flag: 4.0.0
+    dev: true
+
+  /supports-preserve-symlinks-flag@1.0.0:
+    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
+    engines: {node: '>= 0.4'}
+    dev: true
+
+  /svg-baker@1.7.0:
+    resolution: {integrity: sha512-nibslMbkXOIkqKVrfcncwha45f97fGuAOn1G99YwnwTj8kF9YiM6XexPcUso97NxOm6GsP0SIvYVIosBis1xLg==}
+    dependencies:
+      bluebird: 3.7.2
+      clone: 2.1.2
+      he: 1.2.0
+      image-size: 0.5.5
+      loader-utils: 1.4.2
+      merge-options: 1.0.1
+      micromatch: 3.1.0
+      postcss: 5.2.18
+      postcss-prefix-selector: 1.16.1(postcss@5.2.18)
+      posthtml-rename-id: 1.0.12
+      posthtml-svg-mode: 1.0.3
+      query-string: 4.3.4
+      traverse: 0.6.11
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /svg-pathdata@6.0.3:
+    resolution: {integrity: sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw==}
+    engines: {node: '>=12.0.0'}
+    dev: false
+
+  /svgo@2.8.0:
+    resolution: {integrity: sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg==}
+    engines: {node: '>=10.13.0'}
+    hasBin: true
+    dependencies:
+      '@trysound/sax': 0.2.0
+      commander: 7.2.0
+      css-select: 4.3.0
+      css-tree: 1.1.3
+      csso: 4.2.0
+      picocolors: 1.1.1
+      stable: 0.1.8
+    dev: true
+
+  /symbol-tree@3.2.4:
+    resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
+    dev: true
+
+  /synckit@0.11.11:
+    resolution: {integrity: sha512-MeQTA1r0litLUf0Rp/iisCaL8761lKAZHaimlbGK4j0HysC4PLfqygQj9srcs0m2RdtDYnF8UuYyKpbjHYp7Jw==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    dependencies:
+      '@pkgr/core': 0.2.9
+    dev: true
+
+  /text-segmentation@1.0.3:
+    resolution: {integrity: sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==}
+    dependencies:
+      utrie: 1.0.2
+    dev: false
+
+  /text-table@0.2.0:
+    resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
+    dev: true
+
+  /tinybench@2.9.0:
+    resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==}
+    dev: true
+
+  /tinyexec@1.0.1:
+    resolution: {integrity: sha512-5uC6DDlmeqiOwCPmK9jMSdOuZTh8bU39Ys6yidB+UTt5hfZUPGAypSgFRiEp+jbi9qH40BLDvy85jIU88wKSqw==}
+    dev: true
+
+  /tinypool@0.7.0:
+    resolution: {integrity: sha512-zSYNUlYSMhJ6Zdou4cJwo/p7w5nmAH17GRfU/ui3ctvjXFErXXkruT4MWW6poDeXgCaIBlGLrfU6TbTXxyGMww==}
+    engines: {node: '>=14.0.0'}
+    dev: true
+
+  /tinyspy@2.2.1:
+    resolution: {integrity: sha512-KYad6Vy5VDWV4GH3fjpseMQ/XU2BhIYP7Vzd0LG44qRWm/Yt2WCOTicFdvmgo6gWaqooMQCawTtILVQJupKu7A==}
+    engines: {node: '>=14.0.0'}
+    dev: true
+
+  /to-object-path@0.3.0:
+    resolution: {integrity: sha512-9mWHdnGRuh3onocaHzukyvCZhzvr6tiflAy/JRFXcJX0TjgfWA9pk9t8CMbzmBE4Jfw58pXbkngtBtqYxzNEyg==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      kind-of: 3.2.2
+    dev: true
+
+  /to-regex-range@2.1.1:
+    resolution: {integrity: sha512-ZZWNfCjUokXXDGXFpZehJIkZqq91BcULFq/Pi7M5i4JnxXdhMKAK682z8bCW3o8Hj1wuuzoKcW3DfVzaP6VuNg==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      is-number: 3.0.0
+      repeat-string: 1.6.1
+    dev: true
+
+  /to-regex-range@5.0.1:
+    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
+    engines: {node: '>=8.0'}
+    dependencies:
+      is-number: 7.0.0
+    dev: true
+
+  /to-regex@3.0.2:
+    resolution: {integrity: sha512-FWtleNAtZ/Ki2qtqej2CXTOayOH9bHDQF+Q48VpWyDXjbYxA4Yz8iDB31zXOBUlOHHKidDbqGVrTUvQMPmBGBw==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      define-property: 2.0.2
+      extend-shallow: 3.0.2
+      regex-not: 1.0.2
+      safe-regex: 1.1.0
+    dev: true
+
+  /totalist@3.0.1:
+    resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==}
+    engines: {node: '>=6'}
+    dev: true
+
+  /tough-cookie@4.1.4:
+    resolution: {integrity: sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==}
+    engines: {node: '>=6'}
+    dependencies:
+      psl: 1.15.0
+      punycode: 2.3.1
+      universalify: 0.2.0
+      url-parse: 1.5.10
+    dev: true
+
+  /tr46@4.1.1:
+    resolution: {integrity: sha512-2lv/66T7e5yNyhAAC4NaKe5nVavzuGJQVVtRYLyQ2OI8tsJ61PMLlelehb0wi2Hx6+hT/OJUWZcw8MjlSRnxvw==}
+    engines: {node: '>=14'}
+    dependencies:
+      punycode: 2.3.1
+    dev: true
+
+  /traverse@0.6.11:
+    resolution: {integrity: sha512-vxXDZg8/+p3gblxB6BhhG5yWVn1kGRlaL8O78UDXc3wRnPizB5g83dcvWV1jpDMIPnjZjOFuxlMmE82XJ4407w==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      gopd: 1.2.0
+      typedarray.prototype.slice: 1.0.5
+      which-typed-array: 1.1.19
+    dev: true
+
+  /ts-api-utils@1.4.3(typescript@5.2.2):
+    resolution: {integrity: sha512-i3eMG77UTMD0hZhgRS562pv83RC6ukSAC2GMNWc+9dieh/+jDM5u5YG+NHX6VNDRHQcHwmsTHctP9LhbC3WxVw==}
+    engines: {node: '>=16'}
+    peerDependencies:
+      typescript: '>=4.2.0'
+    dependencies:
+      typescript: 5.2.2
+    dev: true
+
+  /tslib@2.3.0:
+    resolution: {integrity: sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==}
+    dev: false
+
+  /tslib@2.8.1:
+    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
+
+  /type-check@0.4.0:
+    resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
+    engines: {node: '>= 0.8.0'}
+    dependencies:
+      prelude-ls: 1.2.1
+    dev: true
+
+  /type-detect@4.1.0:
+    resolution: {integrity: sha512-Acylog8/luQ8L7il+geoSxhEkazvkslg7PSNKOX59mbB9cOveP5aq9h74Y7YU8yDpJwetzQQrfIwtf4Wp4LKcw==}
+    engines: {node: '>=4'}
+    dev: true
+
+  /type-fest@0.20.2:
+    resolution: {integrity: sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==}
+    engines: {node: '>=10'}
+    dev: true
+
+  /typed-array-buffer@1.0.3:
+    resolution: {integrity: sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      is-typed-array: 1.1.15
+    dev: true
+
+  /typed-array-byte-length@1.0.3:
+    resolution: {integrity: sha512-BaXgOuIxz8n8pIq3e7Atg/7s+DpiYrxn4vdot3w9KbnBhcRQq6o3xemQdIfynqSeXeDrF32x+WvfzmOjPiY9lg==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.8
+      for-each: 0.3.5
+      gopd: 1.2.0
+      has-proto: 1.2.0
+      is-typed-array: 1.1.15
+    dev: true
+
+  /typed-array-byte-offset@1.0.4:
+    resolution: {integrity: sha512-bTlAFB/FBYMcuX81gbL4OcpH5PmlFHqlCCpAl8AlEzMz5k53oNDvN8p1PNOWLEmI2x4orp3raOFB51tv9X+MFQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      available-typed-arrays: 1.0.7
+      call-bind: 1.0.8
+      for-each: 0.3.5
+      gopd: 1.2.0
+      has-proto: 1.2.0
+      is-typed-array: 1.1.15
+      reflect.getprototypeof: 1.0.10
+    dev: true
+
+  /typed-array-length@1.0.7:
+    resolution: {integrity: sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.8
+      for-each: 0.3.5
+      gopd: 1.2.0
+      is-typed-array: 1.1.15
+      possible-typed-array-names: 1.1.0
+      reflect.getprototypeof: 1.0.10
+    dev: true
+
+  /typedarray.prototype.slice@1.0.5:
+    resolution: {integrity: sha512-q7QNVDGTdl702bVFiI5eY4l/HkgCM6at9KhcFbgUAzezHFbOVy4+0O/lCjsABEQwbZPravVfBIiBVGo89yzHFg==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-errors: 1.3.0
+      get-proto: 1.0.1
+      math-intrinsics: 1.1.0
+      typed-array-buffer: 1.0.3
+      typed-array-byte-offset: 1.0.4
+    dev: true
+
+  /typedarray@0.0.6:
+    resolution: {integrity: sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==}
+    dev: false
+
+  /typescript@5.2.2:
+    resolution: {integrity: sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+
+  /typescript@5.4.2:
+    resolution: {integrity: sha512-+2/g0Fds1ERlP6JsakQQDXjZdZMM+rqpamFZJEKh4kwTIn3iDkgKtby0CeNd5ATNZ4Ry1ax15TMx0W2V+miizQ==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+    dev: true
+
+  /ufo@1.6.1:
+    resolution: {integrity: sha512-9a4/uxlTWJ4+a5i0ooc1rU7C7YOw3wT+UGqdeNNHWnOF9qcMBgLRS+4IYUqbczewFx4mLEig6gawh7X6mFlEkA==}
+    dev: true
+
+  /unbox-primitive@1.1.0:
+    resolution: {integrity: sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bound: 1.0.4
+      has-bigints: 1.1.0
+      has-symbols: 1.1.0
+      which-boxed-primitive: 1.1.1
+    dev: true
+
+  /unconfig@0.3.13:
+    resolution: {integrity: sha512-N9Ph5NC4+sqtcOjPfHrRcHekBCadCXWTBzp2VYYbySOHW0PfD9XLCeXshTXjkPYwLrBr9AtSeU0CZmkYECJhng==}
+    dependencies:
+      '@antfu/utils': 0.7.10
+      defu: 6.1.4
+      jiti: 1.21.7
+    dev: true
+
+  /undici-types@5.26.5:
+    resolution: {integrity: sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==}
+
+  /union-value@1.0.1:
+    resolution: {integrity: sha512-tJfXmxMeWYnczCVs7XAEvIV7ieppALdyepWMkHkwciRpZraG/xwT+s2JN8+pr1+8jCRf80FFzvr+MpQeeoF4Xg==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      arr-union: 3.1.0
+      get-value: 2.0.6
+      is-extendable: 0.1.1
+      set-value: 2.0.1
+    dev: true
+
+  /universalify@0.1.2:
+    resolution: {integrity: sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==}
+    engines: {node: '>= 4.0.0'}
+    dev: true
+
+  /universalify@0.2.0:
+    resolution: {integrity: sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==}
+    engines: {node: '>= 4.0.0'}
+    dev: true
+
+  /universalify@2.0.1:
+    resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==}
+    engines: {node: '>= 10.0.0'}
+    dev: true
+
+  /unocss@0.57.7(postcss@8.5.6)(vite@4.5.14):
+    resolution: {integrity: sha512-Z99ZZPkbkjIUXEM7L+K/7Y5V5yqUS0VigG7ZIFzLf/npieKmXHKlrPyvQWFQaf3OqooMFuKBQivh75TwvSOkcQ==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@unocss/webpack': 0.57.7
+      vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0 || ^5.0.0-0
+    peerDependenciesMeta:
+      '@unocss/webpack':
+        optional: true
+      vite:
+        optional: true
+    dependencies:
+      '@unocss/astro': 0.57.7(vite@4.5.14)
+      '@unocss/cli': 0.57.7
+      '@unocss/core': 0.57.7
+      '@unocss/extractor-arbitrary-variants': 0.57.7
+      '@unocss/postcss': 0.57.7(postcss@8.5.6)
+      '@unocss/preset-attributify': 0.57.7
+      '@unocss/preset-icons': 0.57.7
+      '@unocss/preset-mini': 0.57.7
+      '@unocss/preset-tagify': 0.57.7
+      '@unocss/preset-typography': 0.57.7
+      '@unocss/preset-uno': 0.57.7
+      '@unocss/preset-web-fonts': 0.57.7
+      '@unocss/preset-wind': 0.57.7
+      '@unocss/reset': 0.57.7
+      '@unocss/transformer-attributify-jsx': 0.57.7
+      '@unocss/transformer-attributify-jsx-babel': 0.57.7
+      '@unocss/transformer-compile-class': 0.57.7
+      '@unocss/transformer-directives': 0.57.7
+      '@unocss/transformer-variant-group': 0.57.7
+      '@unocss/vite': 0.57.7(vite@4.5.14)
+      vite: 4.5.14(@types/node@18.19.122)(less@4.4.0)
+    transitivePeerDependencies:
+      - postcss
+      - rollup
+      - supports-color
+    dev: true
+
+  /unset-value@1.0.0:
+    resolution: {integrity: sha512-PcA2tsuGSF9cnySLHTLSh2qrQiJ70mn+r+Glzxv2TWZblxsxCC52BDlZoPCsz7STd9pN7EZetkWZBAvk4cgZdQ==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      has-value: 0.3.1
+      isobject: 3.0.1
+    dev: true
+
+  /update-browserslist-db@1.1.3(browserslist@4.25.2):
+    resolution: {integrity: sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==}
+    hasBin: true
+    peerDependencies:
+      browserslist: '>= 4.21.0'
+    dependencies:
+      browserslist: 4.25.2
+      escalade: 3.2.0
+      picocolors: 1.1.1
+    dev: true
+
+  /uri-js@4.4.1:
+    resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
+    dependencies:
+      punycode: 2.3.1
+    dev: true
+
+  /urix@0.1.0:
+    resolution: {integrity: sha512-Am1ousAhSLBeB9cG/7k7r2R0zj50uDRlZHPGbazid5s9rlF1F/QKYObEKSIunSjIOkJZqwRRLpvewjEkM7pSqg==}
+    deprecated: Please see https://github.com/lydell/urix#deprecated
+    dev: true
+
+  /url-parse@1.5.10:
+    resolution: {integrity: sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==}
+    dependencies:
+      querystringify: 2.2.0
+      requires-port: 1.0.0
+    dev: true
+
+  /use@3.1.1:
+    resolution: {integrity: sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /util-deprecate@1.0.2:
+    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
+
+  /utrie@1.0.2:
+    resolution: {integrity: sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==}
+    dependencies:
+      base64-arraybuffer: 1.0.2
+    dev: false
+
+  /validator@13.15.15:
+    resolution: {integrity: sha512-BgWVbCI72aIQy937xbawcs+hrVaN/CZ2UwutgaJ36hGqRrLNM+f5LUT/YPRbo8IV/ASeFzXszezV+y2+rq3l8A==}
+    engines: {node: '>= 0.10'}
+    dev: true
+
+  /vary@1.1.2:
+    resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
+    engines: {node: '>= 0.8'}
+    dev: true
+
+  /vite-node@0.34.6(@types/node@18.19.122)(less@4.4.0):
+    resolution: {integrity: sha512-nlBMJ9x6n7/Amaz6F3zJ97EBwR2FkzhBRxF5e+jE6LA3yi6Wtc2lyTij1OnDMIr34v5g/tVQtsVAzhT0jc5ygA==}
+    engines: {node: '>=v14.18.0'}
+    hasBin: true
+    dependencies:
+      cac: 6.7.14
+      debug: 4.4.1
+      mlly: 1.7.4
+      pathe: 1.1.2
+      picocolors: 1.1.1
+      vite: 4.5.14(@types/node@18.19.122)(less@4.4.0)
+    transitivePeerDependencies:
+      - '@types/node'
+      - less
+      - lightningcss
+      - sass
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+    dev: true
+
+  /vite-plugin-dts@3.9.1(@types/node@18.19.122)(typescript@5.2.2)(vite@4.5.14):
+    resolution: {integrity: sha512-rVp2KM9Ue22NGWB8dNtWEr+KekN3rIgz1tWD050QnRGlriUCmaDwa7qA5zDEjbXg5lAXhYMSBJtx3q3hQIJZSg==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    peerDependencies:
+      typescript: '*'
+      vite: '*'
+    peerDependenciesMeta:
+      vite:
+        optional: true
+    dependencies:
+      '@microsoft/api-extractor': 7.43.0(@types/node@18.19.122)
+      '@rollup/pluginutils': 5.2.0
+      '@vue/language-core': 1.8.27(typescript@5.2.2)
+      debug: 4.4.1
+      kolorist: 1.8.0
+      magic-string: 0.30.17
+      typescript: 5.2.2
+      vite: 4.5.14(@types/node@18.19.122)(less@4.4.0)
+      vue-tsc: 1.8.27(typescript@5.2.2)
+    transitivePeerDependencies:
+      - '@types/node'
+      - rollup
+      - supports-color
+    dev: true
+
+  /vite-plugin-svg-icons@2.0.1(vite@4.5.14):
+    resolution: {integrity: sha512-6ktD+DhV6Rz3VtedYvBKKVA2eXF+sAQVaKkKLDSqGUfnhqXl3bj5PPkVTl3VexfTuZy66PmINi8Q6eFnVfRUmA==}
+    peerDependencies:
+      vite: '>=2.0.0'
+    dependencies:
+      '@types/svgo': 2.6.4
+      cors: 2.8.5
+      debug: 4.4.1
+      etag: 1.8.1
+      fs-extra: 10.1.0
+      pathe: 0.2.0
+      svg-baker: 1.7.0
+      svgo: 2.8.0
+      vite: 4.5.14(@types/node@18.19.122)(less@4.4.0)
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /vite@4.5.14(@types/node@18.19.122)(less@4.4.0):
+    resolution: {integrity: sha512-+v57oAaoYNnO3hIu5Z/tJRZjq5aHM2zDve9YZ8HngVHbhk66RStobhb1sqPMIPEleV6cNKYK4eGrAbE9Ulbl2g==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': '>= 14'
+      less: '*'
+      lightningcss: ^1.21.0
+      sass: '*'
+      stylus: '*'
+      sugarss: '*'
+      terser: ^5.4.0
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      less:
+        optional: true
+      lightningcss:
+        optional: true
+      sass:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+    dependencies:
+      '@types/node': 18.19.122
+      esbuild: 0.18.20
+      less: 4.4.0
+      postcss: 8.5.6
+      rollup: 3.29.5
+    optionalDependencies:
+      fsevents: 2.3.3
+    dev: true
+
+  /vitest@0.34.6(jsdom@22.1.0)(less@4.4.0):
+    resolution: {integrity: sha512-+5CALsOvbNKnS+ZHMXtuUC7nL8/7F1F2DnHGjSsszX8zCjWSSviphCb/NuS9Nzf4Q03KyyDRBAXhF/8lffME4Q==}
+    engines: {node: '>=v14.18.0'}
+    hasBin: true
+    peerDependencies:
+      '@edge-runtime/vm': '*'
+      '@vitest/browser': '*'
+      '@vitest/ui': '*'
+      happy-dom: '*'
+      jsdom: '*'
+      playwright: '*'
+      safaridriver: '*'
+      webdriverio: '*'
+    peerDependenciesMeta:
+      '@edge-runtime/vm':
+        optional: true
+      '@vitest/browser':
+        optional: true
+      '@vitest/ui':
+        optional: true
+      happy-dom:
+        optional: true
+      jsdom:
+        optional: true
+      playwright:
+        optional: true
+      safaridriver:
+        optional: true
+      webdriverio:
+        optional: true
+    dependencies:
+      '@types/chai': 4.3.20
+      '@types/chai-subset': 1.3.6(@types/chai@4.3.20)
+      '@types/node': 18.19.122
+      '@vitest/expect': 0.34.6
+      '@vitest/runner': 0.34.6
+      '@vitest/snapshot': 0.34.6
+      '@vitest/spy': 0.34.6
+      '@vitest/utils': 0.34.6
+      acorn: 8.15.0
+      acorn-walk: 8.3.4
+      cac: 6.7.14
+      chai: 4.5.0
+      debug: 4.4.1
+      jsdom: 22.1.0
+      local-pkg: 0.4.3
+      magic-string: 0.30.17
+      pathe: 1.1.2
+      picocolors: 1.1.1
+      std-env: 3.9.0
+      strip-literal: 1.3.0
+      tinybench: 2.9.0
+      tinypool: 0.7.0
+      vite: 4.5.14(@types/node@18.19.122)(less@4.4.0)
+      vite-node: 0.34.6(@types/node@18.19.122)(less@4.4.0)
+      why-is-node-running: 2.3.0
+    transitivePeerDependencies:
+      - less
+      - lightningcss
+      - sass
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+    dev: true
+
+  /vue-component-type-helpers@2.2.12:
+    resolution: {integrity: sha512-YbGqHZ5/eW4SnkPNR44mKVc6ZKQoRs/Rux1sxC6rdwXb4qpbOSYfDr9DsTHolOTGmIKgM9j141mZbBeg05R1pw==}
+    dev: true
+
+  /vue-demi@0.13.11(vue@3.5.18):
+    resolution: {integrity: sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==}
+    engines: {node: '>=12'}
+    hasBin: true
+    requiresBuild: true
+    peerDependencies:
+      '@vue/composition-api': ^1.0.0-rc.1
+      vue: ^3.0.0-0 || ^2.6.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+    dependencies:
+      vue: 3.5.18(typescript@5.2.2)
+    dev: false
+
+  /vue-demi@0.14.10(vue@3.5.18):
+    resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==}
+    engines: {node: '>=12'}
+    hasBin: true
+    requiresBuild: true
+    peerDependencies:
+      '@vue/composition-api': ^1.0.0-rc.1
+      vue: ^3.0.0-0 || ^2.6.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+    dependencies:
+      vue: 3.5.18(typescript@5.2.2)
+    dev: false
+
+  /vue-draggable-plus@0.6.0(@types/sortablejs@1.15.8):
+    resolution: {integrity: sha512-G5TSfHrt9tX9EjdG49InoFJbt2NYk0h3kgjgKxkFWr3ulIUays0oFObr5KZ8qzD4+QnhtALiRwIqY6qul4egqw==}
+    peerDependencies:
+      '@types/sortablejs': ^1.15.0
+      '@vue/composition-api': '*'
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+    dependencies:
+      '@types/sortablejs': 1.15.8
+    dev: false
+
+  /vue-echarts@6.7.3(echarts@5.6.0)(vue@3.5.18):
+    resolution: {integrity: sha512-vXLKpALFjbPphW9IfQPOVfb1KjGZ/f8qa/FZHi9lZIWzAnQC1DgnmEK3pJgEkyo6EP7UnX6Bv/V3Ke7p+qCNXA==}
+    requiresBuild: true
+    peerDependencies:
+      '@vue/composition-api': ^1.0.5
+      '@vue/runtime-core': ^3.0.0
+      echarts: ^5.4.1
+      vue: ^2.6.12 || ^3.1.1
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+      '@vue/runtime-core':
+        optional: true
+    dependencies:
+      echarts: 5.6.0
+      resize-detector: 0.3.0
+      vue: 3.5.18(typescript@5.2.2)
+      vue-demi: 0.13.11(vue@3.5.18)
+    dev: false
+
+  /vue-eslint-parser@9.4.3(eslint@8.57.1):
+    resolution: {integrity: sha512-2rYRLWlIpaiN8xbPiDyXZXRgLGOtWxERV7ND5fFAv5qo1D2N9Fu9MNajBNc6o13lZ+24DAWCkQCvj4klgmcITg==}
+    engines: {node: ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: '>=6.0.0'
+    dependencies:
+      debug: 4.4.1
+      eslint: 8.57.1
+      eslint-scope: 7.2.2
+      eslint-visitor-keys: 3.4.3
+      espree: 9.6.1
+      esquery: 1.6.0
+      lodash: 4.17.21
+      semver: 7.7.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /vue-router@4.5.1(vue@3.5.18):
+    resolution: {integrity: sha512-ogAF3P97NPm8fJsE4by9dwSYtDwXIY1nFY9T6DyQnGHd1E2Da94w9JIolpe42LJGIl0DwOHBi8TcRPlPGwbTtw==}
+    peerDependencies:
+      vue: ^3.2.0
+    dependencies:
+      '@vue/devtools-api': 6.6.4
+      vue: 3.5.18(typescript@5.2.2)
+    dev: false
+
+  /vue-template-compiler@2.7.16:
+    resolution: {integrity: sha512-AYbUWAJHLGGQM7+cNTELw+KsOG9nl2CnSv467WobS5Cv9uk3wFcnr1Etsz2sEIHEZvw1U+o9mRlEO6QbZvUPGQ==}
+    dependencies:
+      de-indent: 1.0.2
+      he: 1.2.0
+    dev: true
+
+  /vue-tsc@1.8.27(typescript@5.2.2):
+    resolution: {integrity: sha512-WesKCAZCRAbmmhuGl3+VrdWItEvfoFIPXOvUJkjULi+x+6G/Dy69yO3TBRJDr9eUlmsNAwVmxsNZxvHKzbkKdg==}
+    hasBin: true
+    peerDependencies:
+      typescript: '*'
+    dependencies:
+      '@volar/typescript': 1.11.1
+      '@vue/language-core': 1.8.27(typescript@5.2.2)
+      semver: 7.7.2
+      typescript: 5.2.2
+    dev: true
+
+  /vue3-ace-editor@2.2.4(ace-builds@1.43.2)(vue@3.5.18):
+    resolution: {integrity: sha512-FZkEyfpbH068BwjhMyNROxfEI8135Sc+x8ouxkMdCNkuj/Tuw83VP/gStFQqZHqljyX9/VfMTCdTqtOnJZGN8g==}
+    peerDependencies:
+      ace-builds: '*'
+      vue: ^3
+    dependencies:
+      ace-builds: 1.43.2
+      resize-observer-polyfill: 1.5.1
+      vue: 3.5.18(typescript@5.2.2)
+    dev: false
+
+  /vue@3.5.18(typescript@5.2.2):
+    resolution: {integrity: sha512-7W4Y4ZbMiQ3SEo+m9lnoNpV9xG7QVMLa+/0RFwwiAVkeYoyGXqWE85jabU4pllJNUzqfLShJ5YLptewhCWUgNA==}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@vue/compiler-dom': 3.5.18
+      '@vue/compiler-sfc': 3.5.18
+      '@vue/runtime-dom': 3.5.18
+      '@vue/server-renderer': 3.5.18(vue@3.5.18)
+      '@vue/shared': 3.5.18
+      typescript: 5.2.2
+
+  /w3c-xmlserializer@4.0.0:
+    resolution: {integrity: sha512-d+BFHzbiCx6zGfz0HyQ6Rg69w9k19nviJspaj4yNscGjrHu94sVP+aRm75yEbCh+r2/yR+7q6hux9LVtbuTGBw==}
+    engines: {node: '>=14'}
+    dependencies:
+      xml-name-validator: 4.0.0
+    dev: true
+
+  /webidl-conversions@7.0.0:
+    resolution: {integrity: sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==}
+    engines: {node: '>=12'}
+    dev: true
+
+  /whatwg-encoding@2.0.0:
+    resolution: {integrity: sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==}
+    engines: {node: '>=12'}
+    dependencies:
+      iconv-lite: 0.6.3
+    dev: true
+
+  /whatwg-mimetype@3.0.0:
+    resolution: {integrity: sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==}
+    engines: {node: '>=12'}
+    dev: true
+
+  /whatwg-url@12.0.1:
+    resolution: {integrity: sha512-Ed/LrqB8EPlGxjS+TrsXcpUond1mhccS3pchLhzSgPCnTimUCKj3IZE75pAs5m6heB2U2TMerKFUXheyHY+VDQ==}
+    engines: {node: '>=14'}
+    dependencies:
+      tr46: 4.1.1
+      webidl-conversions: 7.0.0
+    dev: true
+
+  /which-boxed-primitive@1.1.1:
+    resolution: {integrity: sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      is-bigint: 1.1.0
+      is-boolean-object: 1.2.2
+      is-number-object: 1.1.1
+      is-string: 1.1.1
+      is-symbol: 1.1.1
+    dev: true
+
+  /which-builtin-type@1.2.1:
+    resolution: {integrity: sha512-6iBczoX+kDQ7a3+YJBnh3T+KZRxM/iYNPXicqk66/Qfm1b93iu+yOImkg0zHbj5LNOcNv1TEADiZ0xa34B4q6Q==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bound: 1.0.4
+      function.prototype.name: 1.1.8
+      has-tostringtag: 1.0.2
+      is-async-function: 2.1.1
+      is-date-object: 1.1.0
+      is-finalizationregistry: 1.1.1
+      is-generator-function: 1.1.0
+      is-regex: 1.2.1
+      is-weakref: 1.1.1
+      isarray: 2.0.5
+      which-boxed-primitive: 1.1.1
+      which-collection: 1.0.2
+      which-typed-array: 1.1.19
+    dev: true
+
+  /which-collection@1.0.2:
+    resolution: {integrity: sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      is-map: 2.0.3
+      is-set: 2.0.3
+      is-weakmap: 2.0.2
+      is-weakset: 2.0.4
+    dev: true
+
+  /which-typed-array@1.1.19:
+    resolution: {integrity: sha512-rEvr90Bck4WZt9HHFC4DJMsjvu7x+r6bImz0/BrbWb7A2djJ8hnZMrWnHo9F8ssv0OMErasDhftrfROTyqSDrw==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      available-typed-arrays: 1.0.7
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      for-each: 0.3.5
+      get-proto: 1.0.1
+      gopd: 1.2.0
+      has-tostringtag: 1.0.2
+    dev: true
+
+  /which@2.0.2:
+    resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
+    engines: {node: '>= 8'}
+    hasBin: true
+    dependencies:
+      isexe: 2.0.0
+    dev: true
+
+  /which@3.0.1:
+    resolution: {integrity: sha512-XA1b62dzQzLfaEOSQFTCOd5KFf/1VSzZo7/7TUjnya6u0vGGKzU96UQBZTAThCb2j4/xjBAyii1OhRLJEivHvg==}
+    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
+    hasBin: true
+    dependencies:
+      isexe: 2.0.0
+    dev: true
+
+  /why-is-node-running@2.3.0:
+    resolution: {integrity: sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==}
+    engines: {node: '>=8'}
+    hasBin: true
+    dependencies:
+      siginfo: 2.0.0
+      stackback: 0.0.2
+    dev: true
+
+  /word-wrap@1.2.5:
+    resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /worker-factory@7.0.44:
+    resolution: {integrity: sha512-08AuUfWi+KeZI+KC7nU4pU/9tDeAFvE5NSWk+K9nIfuQc6UlOsZtjjeGVYVEn+DEchyXNJ5i10HCn0xRzFXEQA==}
+    dependencies:
+      '@babel/runtime': 7.28.2
+      fast-unique-numbers: 9.0.22
+      tslib: 2.8.1
+    dev: false
+
+  /worker-timers-broker@8.0.9:
+    resolution: {integrity: sha512-WJsd7aIvu2GBTXp7IBGT1NKnt3ZbiJ2wqb7Pl4nFJXC8pek84+X68TJGVvvrqwHgHPNxSlzpU1nadhcW4PDD7A==}
+    dependencies:
+      '@babel/runtime': 7.28.2
+      broker-factory: 3.1.8
+      fast-unique-numbers: 9.0.22
+      tslib: 2.8.1
+      worker-timers-worker: 9.0.9
+    dev: false
+
+  /worker-timers-worker@9.0.9:
+    resolution: {integrity: sha512-OOKTMdHbzx7FaXCW40RS8RxAqLF/R8xU5/YA7CFasDy+jBA5yQWUusSQJUFFTV2Z9ZOpnR+ZWgte/IuAqOAEVw==}
+    dependencies:
+      '@babel/runtime': 7.28.2
+      tslib: 2.8.1
+      worker-factory: 7.0.44
+    dev: false
+
+  /worker-timers@8.0.23:
+    resolution: {integrity: sha512-1BnWHNNiu5YEutgF7eVZEqNntAsij2oG0r66xDdScoY3fKGFrok2y0xA8OgG6FA+3srrmAplSY6JN5h9jV5D0w==}
+    dependencies:
+      '@babel/runtime': 7.28.2
+      tslib: 2.8.1
+      worker-timers-broker: 8.0.9
+      worker-timers-worker: 9.0.9
+    dev: false
+
+  /wrap-ansi@7.0.0:
+    resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
+    engines: {node: '>=10'}
+    dependencies:
+      ansi-styles: 4.3.0
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+    dev: true
+
+  /wrap-ansi@8.1.0:
+    resolution: {integrity: sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==}
+    engines: {node: '>=12'}
+    dependencies:
+      ansi-styles: 6.2.1
+      string-width: 5.1.2
+      strip-ansi: 7.1.0
+    dev: true
+
+  /wrappy@1.0.2:
+    resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
+    dev: true
+
+  /ws@8.18.3:
+    resolution: {integrity: sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: '>=5.0.2'
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
+
+  /xml-name-validator@4.0.0:
+    resolution: {integrity: sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==}
+    engines: {node: '>=12'}
+    dev: true
+
+  /xmlchars@2.2.0:
+    resolution: {integrity: sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==}
+    dev: true
+
+  /yallist@3.1.1:
+    resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
+    dev: true
+
+  /yallist@4.0.0:
+    resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
+    dev: true
+
+  /yocto-queue@0.1.0:
+    resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
+    engines: {node: '>=10'}
+    dev: true
+
+  /yocto-queue@1.2.1:
+    resolution: {integrity: sha512-AyeEbWOu/TAXdxlV9wmGcR0+yh2j3vYPGOECcIj2S7MkrLyC7ne+oye2BKTItt0ii2PHk4cDy+95+LshzbXnGg==}
+    engines: {node: '>=12.20'}
+    dev: true
+
+  /z-schema@5.0.5:
+    resolution: {integrity: sha512-D7eujBWkLa3p2sIpJA0d1pr7es+a7m0vFAnZLlCEKq/Ij2k0MLi9Br2UPxoxdYystm5K1yeBGzub0FlYUEWj2Q==}
+    engines: {node: '>=8.0.0'}
+    hasBin: true
+    dependencies:
+      lodash.get: 4.4.2
+      lodash.isequal: 4.5.0
+      validator: 13.15.15
+    optionalDependencies:
+      commander: 9.5.0
+    dev: true
+
+  /zrender@5.6.1:
+    resolution: {integrity: sha512-OFXkDJKcrlx5su2XbzJvj/34Q3m6PvyCZkVPHGYpcCJ52ek4U/ymZyfuV1nKE23AyBJ51E/6Yr0mhZ7xGTO4ag==}
+    dependencies:
+      tslib: 2.3.0
+    dev: false
diff --git a/public/favicon.ico b/public/favicon.ico
new file mode 100644
index 0000000..fe16b5a
Binary files /dev/null and b/public/favicon.ico differ
diff --git a/public/favicon.svg b/public/favicon.svg
new file mode 100644
index 0000000..1d450e2
--- /dev/null
+++ 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>
diff --git a/public/imgs/change-attr.png b/public/imgs/change-attr.png
new file mode 100644
index 0000000..587086a
Binary files /dev/null and b/public/imgs/change-attr.png differ
diff --git a/public/imgs/edit-load.png b/public/imgs/edit-load.png
new file mode 100644
index 0000000..abcb92a
Binary files /dev/null and b/public/imgs/edit-load.png differ
diff --git a/public/imgs/edit.png b/public/imgs/edit.png
new file mode 100644
index 0000000..fe1a3ae
Binary files /dev/null and b/public/imgs/edit.png differ
diff --git a/public/imgs/event-callback.png b/public/imgs/event-callback.png
new file mode 100644
index 0000000..1c1887e
Binary files /dev/null and b/public/imgs/event-callback.png differ
diff --git a/public/imgs/set-node-attr.gif b/public/imgs/set-node-attr.gif
new file mode 100644
index 0000000..b9c4b8a
Binary files /dev/null and b/public/imgs/set-node-attr.gif differ
diff --git a/public/svgs/demo.svg b/public/svgs/demo.svg
new file mode 100644
index 0000000..994495a
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/public/svgs/my-button.svg b/public/svgs/my-button.svg
new file mode 100644
index 0000000..aee1196
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/public/svgs/my-input.svg b/public/svgs/my-input.svg
new file mode 100644
index 0000000..9fa947c
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/public/svgs/pie-charts.svg b/public/svgs/pie-charts.svg
new file mode 100644
index 0000000..826b132
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
new file mode 100644
index 0000000..a951e08
--- /dev/null
+++ b/src/App.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import loadSvg from '@/utils/loadSvg'
+loadSvg()
+</script>
+
+<template>
+    <router-view></router-view>
+</template>
+
+<style scoped></style>
diff --git a/src/api/index.ts b/src/api/index.ts
new file mode 100644
index 0000000..30439f5
--- /dev/null
+++ b/src/api/index.ts
@@ -0,0 +1,87 @@
+import http from '@/utils/request'
+
+//查询图元
+export function find() {
+    return http.request({
+        url: '/cs-system-boot/csElement/find',
+        method: 'POST'
+    })
+}
+// 获取svg文件
+export function download(params: any) {
+    return http.request({
+        url: '/system-boot/file/download',
+        method: 'get',
+        params
+    })
+}
+
+// 新增图元
+export function addElement(params: any) {
+    return http.request({
+        url: '/cs-system-boot/csElement/add',
+        method: 'post',
+        data: params
+    })
+}
+
+// 删除图元
+export function deleteElement(params: any) {
+    return http.request({
+        url: '/cs-system-boot/csElement/delete',
+        method: 'post',
+        params: params
+    })
+}
+
+// 查询左侧图纸列表
+export function queryPage(params: any) {
+    return http.request({
+        url: '/cs-harmonic-boot/cspage/queryPage',
+        method: 'post',
+        data: params
+    })
+}
+
+// 总的画布的保存
+export function addCanvas(params: any) {
+    return http.request({
+        url: '/cs-harmonic-boot/cspage/add',
+        method: 'post',
+        data: params
+    })
+}
+
+// 截图
+export function audit(params: any) {
+    return http.request({
+        url: '/cs-harmonic-boot/csconfiguration/audit',
+        method: 'post',
+        data: params
+    })
+}
+
+// 监测点列表
+export function lineTree(params: any) {
+    return http.request({
+        url: '/cs-device-boot/csLedger/lineTree',
+        method: 'post',
+        data: params
+    })
+}
+
+// 指标列表
+export function targetList(params: any) {
+    return http.request({
+        url: '/cs-harmonic-boot/lineTarget/target',
+        method: 'post',
+        params: params
+    })
+}
+// 无锡指标列表
+export function eleEpdChooseTree_wx() {
+    return http.request({
+        url: '/csDictData/eleEpdChooseTree',
+        method: 'get'
+    })
+}
diff --git a/src/api/index_wx.ts b/src/api/index_wx.ts
new file mode 100644
index 0000000..c5d64c5
--- /dev/null
+++ b/src/api/index_wx.ts
@@ -0,0 +1,10 @@
+import http from '@/utils/request'
+
+// 监测点树
+export function lineTree_wx(params: any) {
+    return http.request({
+        url: '/terminalTree/tree',
+        method: 'get',
+        params: params
+    })
+}
diff --git a/src/assets/css-vars.css b/src/assets/css-vars.css
new file mode 100644
index 0000000..4b09f5d
--- /dev/null
+++ b/src/assets/css-vars.css
@@ -0,0 +1,91 @@
+#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;
+}
diff --git a/src/assets/icons/add.svg b/src/assets/icons/add.svg
new file mode 100644
index 0000000..2caac8c
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/src/assets/icons/align-bottom.svg b/src/assets/icons/align-bottom.svg
new file mode 100644
index 0000000..a2f9b51
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/src/assets/icons/align-horizontally.svg b/src/assets/icons/align-horizontally.svg
new file mode 100644
index 0000000..5074b9e
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/src/assets/icons/align-left.svg b/src/assets/icons/align-left.svg
new file mode 100644
index 0000000..2f08ab5
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/src/assets/icons/align-right.svg b/src/assets/icons/align-right.svg
new file mode 100644
index 0000000..7579fa8
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/src/assets/icons/align-top.svg b/src/assets/icons/align-top.svg
new file mode 100644
index 0000000..6b41c74
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/src/assets/icons/align-vertical.svg b/src/assets/icons/align-vertical.svg
new file mode 100644
index 0000000..f756a60
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/src/assets/icons/align.svg b/src/assets/icons/align.svg
new file mode 100644
index 0000000..4c7dda2
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/src/assets/icons/dark.svg b/src/assets/icons/dark.svg
new file mode 100644
index 0000000..60b657e
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/src/assets/icons/delete.svg b/src/assets/icons/delete.svg
new file mode 100644
index 0000000..7fb4aa2
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/src/assets/icons/exit-full-screen.svg b/src/assets/icons/exit-full-screen.svg
new file mode 100644
index 0000000..7c6477a
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/src/assets/icons/export-json.svg b/src/assets/icons/export-json.svg
new file mode 100644
index 0000000..75eb05a
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/src/assets/icons/full-screen.svg b/src/assets/icons/full-screen.svg
new file mode 100644
index 0000000..2c4c1a1
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/src/assets/icons/group.svg b/src/assets/icons/group.svg
new file mode 100644
index 0000000..2bef48f
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/src/assets/icons/help.svg b/src/assets/icons/help.svg
new file mode 100644
index 0000000..016bce7
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/src/assets/icons/horizontal-distribution.svg b/src/assets/icons/horizontal-distribution.svg
new file mode 100644
index 0000000..a20357e
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/src/assets/icons/import-json.svg b/src/assets/icons/import-json.svg
new file mode 100644
index 0000000..971c6cd
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/src/assets/icons/light.svg b/src/assets/icons/light.svg
new file mode 100644
index 0000000..d704c39
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/src/assets/icons/line.svg b/src/assets/icons/line.svg
new file mode 100644
index 0000000..efa3aad
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/src/assets/icons/lock.svg b/src/assets/icons/lock.svg
new file mode 100644
index 0000000..4eb3825
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/src/assets/icons/menu-fold.svg b/src/assets/icons/menu-fold.svg
new file mode 100644
index 0000000..26de71d
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/src/assets/icons/menu-unfold.svg b/src/assets/icons/menu-unfold.svg
new file mode 100644
index 0000000..7fa6cae
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/src/assets/icons/pen-line.svg b/src/assets/icons/pen-line.svg
new file mode 100644
index 0000000..6fbedf3
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/src/assets/icons/preview.svg b/src/assets/icons/preview.svg
new file mode 100644
index 0000000..afb8ec5
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/src/assets/icons/question.svg b/src/assets/icons/question.svg
new file mode 100644
index 0000000..17ecc33
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/src/assets/icons/redo.svg b/src/assets/icons/redo.svg
new file mode 100644
index 0000000..763b8a1
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/src/assets/icons/return.svg b/src/assets/icons/return.svg
new file mode 100644
index 0000000..2a1d786
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/src/assets/icons/rotate.svg b/src/assets/icons/rotate.svg
new file mode 100644
index 0000000..9e88136
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/src/assets/icons/save.svg b/src/assets/icons/save.svg
new file mode 100644
index 0000000..c2dee9a
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/src/assets/icons/search.svg b/src/assets/icons/search.svg
new file mode 100644
index 0000000..8efe863
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/src/assets/icons/setting.svg b/src/assets/icons/setting.svg
new file mode 100644
index 0000000..8f147ad
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/src/assets/icons/thumbnail.svg b/src/assets/icons/thumbnail.svg
new file mode 100644
index 0000000..392d921
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/src/assets/icons/tree-list.svg b/src/assets/icons/tree-list.svg
new file mode 100644
index 0000000..63b72b3
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/src/assets/icons/undo.svg b/src/assets/icons/undo.svg
new file mode 100644
index 0000000..9f88fe3
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/src/assets/icons/ungroup.svg b/src/assets/icons/ungroup.svg
new file mode 100644
index 0000000..8fa16ea
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/src/assets/icons/unlock.svg b/src/assets/icons/unlock.svg
new file mode 100644
index 0000000..b945f7a
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/src/assets/icons/upload.svg b/src/assets/icons/upload.svg
new file mode 100644
index 0000000..84e803a
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/src/assets/icons/vertical-distribution.svg b/src/assets/icons/vertical-distribution.svg
new file mode 100644
index 0000000..5962274
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/src/assets/icons/view-hide.svg b/src/assets/icons/view-hide.svg
new file mode 100644
index 0000000..71ba86e
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/src/assets/icons/view-show.svg b/src/assets/icons/view-show.svg
new file mode 100644
index 0000000..570cc7c
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/src/assets/imgs/test/my-img.png b/src/assets/imgs/test/my-img.png
new file mode 100644
index 0000000..83061ff
Binary files /dev/null and b/src/assets/imgs/test/my-img.png differ
diff --git a/src/assets/logo.png b/src/assets/logo.png
new file mode 100644
index 0000000..ccd100f
Binary files /dev/null and b/src/assets/logo.png differ
diff --git a/src/assets/main.css b/src/assets/main.css
new file mode 100644
index 0000000..9798fcc
--- /dev/null
+++ b/src/assets/main.css
@@ -0,0 +1,4 @@
+body {
+    margin: 0;
+    padding: 0;
+}
diff --git a/src/assets/svgs/electrical/face/三绕组变压器.svg b/src/assets/svgs/electrical/face/三绕组变压器.svg
new file mode 100644
index 0000000..9c56358
--- /dev/null
+++ b/src/assets/svgs/electrical/face/三绕组变压器.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>
\ No newline at end of file
diff --git a/src/assets/svgs/electrical/face/交流发电机.svg b/src/assets/svgs/electrical/face/交流发电机.svg
new file mode 100644
index 0000000..2198886
--- /dev/null
+++ b/src/assets/svgs/electrical/face/交流发电机.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>
\ No newline at end of file
diff --git a/src/assets/svgs/electrical/face/双绕组变压器.svg b/src/assets/svgs/electrical/face/双绕组变压器.svg
new file mode 100644
index 0000000..f443480
--- /dev/null
+++ b/src/assets/svgs/electrical/face/双绕组变压器.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>
\ No newline at end of file
diff --git a/src/assets/svgs/electrical/face/告警.svg b/src/assets/svgs/electrical/face/告警.svg
new file mode 100644
index 0000000..34d86a8
--- /dev/null
+++ b/src/assets/svgs/electrical/face/告警.svg
@@ -0,0 +1,16 @@
+<?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
+id="_图层_12" data-name="图层 12"
+  viewBox="0 0 1024 1024"
+  version="1.1"
+  xmlns="http://www.w3.org/2000/svg"
+  p-id="2803"
+  xmlns:xlink="http://www.w3.org/1999/xlink"
+  width="200"
+  height="200"
+>
+  <path
+    d="M959.800889 318.762667a30.364444 30.364444 0 0 1-11.377778 41.543111l-98.133333 56.632889-30.222222-52.864 94.435555-56.632889a47.872 47.872 0 0 1 22.641778-3.783111 34.688 34.688 0 0 1 22.656 15.104z m-898.844445 0c4.48-6.968889 11.107556-12.273778 18.887112-15.104a24.974222 24.974222 0 0 1 22.656 3.783111l94.435555 56.632889-30.222222 52.864-94.421333-56.632889a30.364444 30.364444 0 0 1-11.377778-41.543111h0.042666zM249.799111 129.962667a47.900444 47.900444 0 0 1 22.656-3.783111 37.688889 37.688889 0 0 1 18.887111 15.104l56.661334 94.407111-52.878223 30.208-56.647111-94.407111a30.364444 30.364444 0 0 1 11.377778-41.528889h-0.056889zM513.848889 56.888889a37.105778 37.105778 0 0 1 36.636444 31.530667v109.511111h-70.570666v-109.511111C476.131556 73.315556 494.961778 56.888889 513.848889 56.888889z m253.383111 73.073778a30.364444 30.364444 0 0 1 11.377778 41.528889l-56.647111 94.407111-52.878223-30.208 56.647112-94.407111a66.304 66.304 0 0 1 18.887111-15.104c7.552 0 18.887111 0 22.656 3.783111h-0.042667zM533.020444 409.329778L378.168889 665.614222h124.629333l-30.222222 181.902222 162.247111-252.387555h-132.024889l30.222222-185.799111z m-271.928888 483.100444h-64.782223V594.360889c1.521778-172.103111 141.952-310.556444 314.055111-309.632A308.48 308.48 0 0 1 819.868444 594.346667v298.069333H261.091556z m-169.955556 0H933.404444a37.12 37.12 0 0 1 33.991112 37.603556 33.877333 33.877333 0 0 1-33.991112 33.991111H91.164444a33.848889 33.848889 0 0 1-33.991111-33.991111 37.12 37.12 0 0 1 33.991111-37.603556"
+  
+  ></path>
+</svg>
diff --git a/src/assets/svgs/electrical/face/手车02.svg b/src/assets/svgs/electrical/face/手车02.svg
new file mode 100644
index 0000000..8669cdc
--- /dev/null
+++ b/src/assets/svgs/electrical/face/手车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>
\ No newline at end of file
diff --git a/src/assets/svgs/electrical/face/测试.svg b/src/assets/svgs/electrical/face/测试.svg
new file mode 100644
index 0000000..c4f791d
--- /dev/null
+++ b/src/assets/svgs/electrical/face/测试.svg
@@ -0,0 +1,22 @@
+<?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="1689212544735"
+    class="icon"
+    viewBox="0 0 1024 1024"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    p-id="2636"
+    width="48"
+    height="48"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+>
+    <path
+        d="M866.816 588.8c17.92 11.264 45.056 11.264 61.44 0 16.384-12.288 16.384-31.232 0-41.984l-379.904-322.56c-9.728-5.632-20.992-8.704-33.792-7.68-12.8-1.024-24.064 1.024-33.792 7.68l-382.464 322.56c-16.384 12.288-16.384 31.232 0 41.984 17.92 11.264 45.056 11.264 61.44 0l354.816-303.616 352.256 303.616z"
+        p-id="2637"
+    ></path>
+    <path
+        d="M873.984 836.608c17.92 11.264 45.056 11.264 61.44 0 16.384-12.288 16.384-31.232 0-41.984l-379.904-322.56c-9.728-5.632-20.992-8.704-33.792-7.68-12.8-1.024-24.064 1.024-33.792 7.68l-382.464 322.56c-16.384 12.288-16.384 31.232 0 41.984 17.92 11.264 45.056 11.264 61.44 0l354.816-303.616 352.256 303.616z"
+        p-id="2638"
+    ></path>
+</svg>
diff --git a/src/assets/svgs/electrical/fs/故障.svg b/src/assets/svgs/electrical/fs/故障.svg
new file mode 100644
index 0000000..4bf36e1
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/src/assets/svgs/electrical/fs/火花间隙.svg b/src/assets/svgs/electrical/fs/火花间隙.svg
new file mode 100644
index 0000000..72a3351
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/src/assets/svgs/electrical/fs/电阻(阻抗).svg b/src/assets/svgs/electrical/fs/电阻(阻抗).svg
new file mode 100644
index 0000000..a5b6b03
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/src/assets/svgs/electrical/fs/避雷器.svg b/src/assets/svgs/electrical/fs/避雷器.svg
new file mode 100644
index 0000000..1d33a0e
--- /dev/null
+++ 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>
diff --git a/src/assets/svgs/electrical/stroke/三绕组自耦变压器.svg b/src/assets/svgs/electrical/stroke/三绕组自耦变压器.svg
new file mode 100644
index 0000000..7714fe9
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/src/assets/svgs/electrical/stroke/手车01.svg b/src/assets/svgs/electrical/stroke/手车01.svg
new file mode 100644
index 0000000..9cfff3b
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/src/assets/svgs/electrical/stroke/接地.svg b/src/assets/svgs/electrical/stroke/接地.svg
new file mode 100644
index 0000000..d3f901b
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/src/assets/svgs/electrical/stroke/断路器-开关.svg b/src/assets/svgs/electrical/stroke/断路器-开关.svg
new file mode 100644
index 0000000..97d4abe
--- /dev/null
+++ 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>
diff --git a/src/assets/svgs/electrical/stroke/消弧线圈.svg b/src/assets/svgs/electrical/stroke/消弧线圈.svg
new file mode 100644
index 0000000..41678fd
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/src/assets/svgs/electrical/stroke/熔断器.svg b/src/assets/svgs/electrical/stroke/熔断器.svg
new file mode 100644
index 0000000..b08a19e
--- /dev/null
+++ b/src/assets/svgs/electrical/stroke/熔断器.svg
@@ -0,0 +1,17 @@
+<?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>
diff --git a/src/assets/svgs/electrical/stroke/电动机.svg b/src/assets/svgs/electrical/stroke/电动机.svg
new file mode 100644
index 0000000..e7ccbb2
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/src/assets/svgs/electrical/stroke/电容器.svg b/src/assets/svgs/electrical/stroke/电容器.svg
new file mode 100644
index 0000000..554ec78
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/src/assets/svgs/electrical/stroke/电抗器.svg b/src/assets/svgs/electrical/stroke/电抗器.svg
new file mode 100644
index 0000000..a28512c
--- /dev/null
+++ 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>
diff --git a/src/assets/svgs/electrical/stroke/电缆终端头.svg b/src/assets/svgs/electrical/stroke/电缆终端头.svg
new file mode 100644
index 0000000..c8d6524
--- /dev/null
+++ 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>
diff --git a/src/assets/svgs/electrical/stroke/自动空气断路器.svg b/src/assets/svgs/electrical/stroke/自动空气断路器.svg
new file mode 100644
index 0000000..00e9f0f
--- /dev/null
+++ 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>
diff --git a/src/assets/svgs/electrical/stroke/跌落式熔断器.svg b/src/assets/svgs/electrical/stroke/跌落式熔断器.svg
new file mode 100644
index 0000000..3ae11b8
--- /dev/null
+++ 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>
diff --git a/src/assets/svgs/electrical/stroke/隔离开关-刀闸.svg b/src/assets/svgs/electrical/stroke/隔离开关-刀闸.svg
new file mode 100644
index 0000000..abb2277
--- /dev/null
+++ 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>
diff --git a/src/components/custom-components/bind-dot-vue/index.vue b/src/components/custom-components/bind-dot-vue/index.vue
new file mode 100644
index 0000000..38a91ae
--- /dev/null
+++ b/src/components/custom-components/bind-dot-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>
diff --git a/src/components/custom-components/bind-index-vue/index.vue b/src/components/custom-components/bind-index-vue/index.vue
new file mode 100644
index 0000000..38a91ae
--- /dev/null
+++ b/src/components/custom-components/bind-index-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>
diff --git a/src/components/custom-components/card-vue/index.vue b/src/components/custom-components/card-vue/index.vue
new file mode 100644
index 0000000..dc2977d
--- /dev/null
+++ 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>
diff --git a/src/components/custom-components/kv-vue/index.vue b/src/components/custom-components/kv-vue/index.vue
new file mode 100644
index 0000000..aeec278
--- /dev/null
+++ 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>
diff --git a/src/components/custom-components/now-time-vue/index.vue b/src/components/custom-components/now-time-vue/index.vue
new file mode 100644
index 0000000..add3e38
--- /dev/null
+++ b/src/components/custom-components/now-time-vue/index.vue
@@ -0,0 +1,72 @@
+<!-- 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>
diff --git a/src/components/custom-components/sys-button-vue/index.vue b/src/components/custom-components/sys-button-vue/index.vue
new file mode 100644
index 0000000..478bc9f
--- /dev/null
+++ 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>
diff --git a/src/components/custom-components/text-vue/index.vue b/src/components/custom-components/text-vue/index.vue
new file mode 100644
index 0000000..38a91ae
--- /dev/null
+++ 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>
diff --git a/src/components/mt-dzr/__tests__/mt-dzr.spec.ts b/src/components/mt-dzr/__tests__/mt-dzr.spec.ts
new file mode 100644
index 0000000..da55ec2
--- /dev/null
+++ 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')
+    })
+})
diff --git a/src/components/mt-dzr/components/render-item.vue b/src/components/mt-dzr/components/render-item.vue
new file mode 100644
index 0000000..e706caf
--- /dev/null
+++ 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>
diff --git a/src/components/mt-dzr/components/resize-handle.vue b/src/components/mt-dzr/components/resize-handle.vue
new file mode 100644
index 0000000..15e6a4f
--- /dev/null
+++ b/src/components/mt-dzr/components/resize-handle.vue
@@ -0,0 +1,190 @@
+<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>
diff --git a/src/components/mt-dzr/components/rotate-handle.vue b/src/components/mt-dzr/components/rotate-handle.vue
new file mode 100644
index 0000000..1abecd3
--- /dev/null
+++ b/src/components/mt-dzr/components/rotate-handle.vue
@@ -0,0 +1,86 @@
+<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>
diff --git a/src/components/mt-dzr/composables/mouse.ts b/src/components/mt-dzr/composables/mouse.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/mt-dzr/index.ts b/src/components/mt-dzr/index.ts
new file mode 100644
index 0000000..2f4fa33
--- /dev/null
+++ b/src/components/mt-dzr/index.ts
@@ -0,0 +1,3 @@
+import MtDzr from './index.vue'
+
+export default MtDzr
diff --git a/src/components/mt-dzr/index.vue b/src/components/mt-dzr/index.vue
new file mode 100644
index 0000000..311d2d2
--- /dev/null
+++ b/src/components/mt-dzr/index.vue
@@ -0,0 +1,276 @@
+<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>
diff --git a/src/components/mt-dzr/store/index.ts b/src/components/mt-dzr/store/index.ts
new file mode 100644
index 0000000..c6846fb
--- /dev/null
+++ b/src/components/mt-dzr/store/index.ts
@@ -0,0 +1,34 @@
+import { reactive } from 'vue'
+import type { IDzrCopyInfo, IDzrStore } from './types'
+import type { IDzrPropsModelValue } from '../types'
+
+export const dzrStore: IDzrStore = reactive({
+    dzr_copy_info: {
+        gen_id: '',
+        show: false,
+        value: {
+            left: 0,
+            top: 0,
+            width: 0,
+            height: 0,
+            angle: 0
+        }
+    },
+    setDzrCopyInfo: (value: IDzrCopyInfo) => {
+        dzrStore.dzr_copy_info = value
+    },
+    showDzrCopy: (value: IDzrPropsModelValue, gen_id: string) => {
+        dzrStore.setDzrCopyInfo({
+            ...dzrStore.dzr_copy_info,
+            show: true,
+            value,
+            gen_id
+        })
+    },
+    hideDzrCopy: () => {
+        dzrStore.setDzrCopyInfo({
+            ...dzrStore.dzr_copy_info,
+            show: false
+        })
+    }
+})
diff --git a/src/components/mt-dzr/store/types.ts b/src/components/mt-dzr/store/types.ts
new file mode 100644
index 0000000..8bf345e
--- /dev/null
+++ b/src/components/mt-dzr/store/types.ts
@@ -0,0 +1,13 @@
+import type { IDzrPropsModelValue } from '../types'
+
+export interface IDzrStore {
+    dzr_copy_info: IDzrCopyInfo
+    setDzrCopyInfo: (value: IDzrCopyInfo) => void
+    showDzrCopy: (value: IDzrPropsModelValue, gen_id: string) => void
+    hideDzrCopy: () => void
+}
+export interface IDzrCopyInfo {
+    gen_id: string
+    show: boolean
+    value: IDzrPropsModelValue
+}
diff --git a/src/components/mt-dzr/types.ts b/src/components/mt-dzr/types.ts
new file mode 100644
index 0000000..04e59dc
--- /dev/null
+++ b/src/components/mt-dzr/types.ts
@@ -0,0 +1,31 @@
+export interface IDzrProps {
+    id: string
+    modelValue: IDzrPropsModelValue //位置和大小
+    scaleRatio?: number //画布缩放倍数
+    hide: boolean //隐藏
+    grid?: IDzrPropsGrid //网格配置
+    resize?: boolean //开启缩放
+    rotate?: boolean //开启旋转
+    lock?: boolean //锁定
+    active?: boolean //激活
+    useProportionalScaling?: boolean //开启等比例缩放
+    showGhostDom?: boolean //是否显示幽灵dom
+    class?: string //
+    disabled: boolean //是否禁用
+    adsorp_diff?: {
+        x: number
+        y: number
+    }
+}
+export interface IDzrPropsModelValue {
+    left: number
+    top: number
+    width: number
+    height: number
+    angle: number
+}
+export interface IDzrPropsGrid {
+    enabled: boolean //开启网格
+    align: boolean //对齐到网格
+    size: number //网格大小
+}
diff --git a/src/components/mt-dzr/utils/index.ts b/src/components/mt-dzr/utils/index.ts
new file mode 100644
index 0000000..6957dcd
--- /dev/null
+++ b/src/components/mt-dzr/utils/index.ts
@@ -0,0 +1,349 @@
+import type { IDzrPropsModelValue } from '../types'
+import type { MouseTouchEvent } from './types'
+
+/**
+ * 会自动销毁的鼠标移动事件
+ * @param onMousemove
+ */
+export const autoDestroyMouseMove = (onMousemove: (e: MouseTouchEvent) => void, mouseUpCallBack?: () => void) => {
+    const onMouseup = () => {
+        document.removeEventListener('mousemove', onMousemove)
+        document.removeEventListener('touchmove', onMousemove)
+        document.removeEventListener('mouseup', onMouseup)
+        document.removeEventListener('touchend', onMouseup)
+        document.removeEventListener('mouseleave', onMouseup)
+        if (mouseUpCallBack) {
+            mouseUpCallBack()
+        }
+    }
+    document.addEventListener('mousemove', onMousemove)
+    document.addEventListener('touchmove', onMousemove)
+    document.addEventListener('mouseup', onMouseup)
+    document.addEventListener('touchend', onMouseup)
+    document.addEventListener('mouseleave', onMouseup)
+}
+/**
+ * 根据坐标对齐到网格
+ * @param position 当前坐标
+ * @param grid 网格大小
+ * @returns 对应网格的坐标
+ */
+export const alignToGrid = (position: number, grid = 1) => {
+    const integerPart = Math.floor(position / grid)
+    const fractionalPart = position % grid
+
+    if (fractionalPart >= grid / 2) {
+        return (integerPart + 1) * grid
+    } else {
+        return integerPart * grid
+    }
+}
+/** 根据移动的距离对齐到网格
+ * @param diff 移动的距离
+ * @param grid 网格大小
+ */
+export const calcGrid = (diff: number, grid = 1) => {
+    // 得到每次缩放的余数
+    const r = Math.abs(diff) % grid
+
+    // 正负grid
+    const mulGrid = diff > 0 ? grid : -grid
+    let result = 0
+    // 余数大于grid的1/2
+    if (r > grid / 2) {
+        result = mulGrid * Math.ceil(Math.abs(diff) / grid)
+    } else {
+        result = mulGrid * Math.floor(Math.abs(diff) / grid)
+    }
+
+    return result
+}
+/**
+ * 获取当前点击坐标 根据pc端和移动端获取
+ * @param e
+ * @returns
+ */
+export function getXY(e: MouseTouchEvent) {
+    let clientX = 0,
+        clientY = 0
+    if (isTouchEvent(e)) {
+        const touch = e.targetTouches[0]
+        clientX = touch.pageX
+        clientY = touch.pageY
+    } else {
+        clientX = e.clientX
+        clientY = e.clientY
+    }
+
+    return { clientX, clientY }
+}
+
+function isTouchEvent(val: unknown): val is TouchEvent {
+    const typeStr = Object.prototype.toString.call(val)
+    return typeStr.substring(8, typeStr.length - 1) === 'TouchEvent'
+}
+
+export const getLength = (x: number, y: number) => Math.sqrt(x * x + y * y)
+
+export const degToRadian = (deg: number) => (deg * Math.PI) / 180
+const cos = (deg: number) => Math.cos(degToRadian(deg))
+const sin = (deg: number) => Math.sin(degToRadian(deg))
+/**
+ * 计算并返回给定类型变换的新样式。
+ *
+ * @param {string} type - 变换的类型。
+ * @param {any} rect - 矩形对象。
+ * @param {number} deltaW - 宽度变化。
+ * @param {number} deltaH - 高度变化。
+ * @param {number | undefined} ratio - 比例。
+ * @param {number} minWidth - 最小宽度。
+ * @param {number} minHeight - 最小高度。
+ * @returns {Object} 矩形的新位置和大小。
+ */
+export const getNewStyle = (
+    type: string,
+    rect: any,
+    deltaW: number,
+    deltaH: number,
+    ratio: number | undefined,
+    minWidth: number,
+    minHeight: number
+) => {
+    // eslint-disable-next-line prefer-const
+    let { width, height, centerX, centerY, rotateAngle } = rect
+    const widthFlag = width < 0 ? -1 : 1
+    const heightFlag = height < 0 ? -1 : 1
+    width = Math.abs(width)
+    height = Math.abs(height)
+    switch (type) {
+        case 'r': {
+            const widthAndDeltaW = setWidthAndDeltaW(width, deltaW, minWidth)
+            width = widthAndDeltaW.width
+            deltaW = widthAndDeltaW.deltaW
+            if (ratio) {
+                deltaH = deltaW / ratio
+                height = width / ratio
+                // 左上角固定
+                centerX += (deltaW / 2) * cos(rotateAngle) - (deltaH / 2) * sin(rotateAngle)
+                centerY += (deltaW / 2) * sin(rotateAngle) + (deltaH / 2) * cos(rotateAngle)
+            } else {
+                // 左边固定
+                centerX += (deltaW / 2) * cos(rotateAngle)
+                centerY += (deltaW / 2) * sin(rotateAngle)
+            }
+            break
+        }
+        case 'tr': {
+            deltaH = -deltaH
+            const widthAndDeltaW = setWidthAndDeltaW(width, deltaW, minWidth)
+            width = widthAndDeltaW.width
+            deltaW = widthAndDeltaW.deltaW
+            const heightAndDeltaH = setHeightAndDeltaH(height, deltaH, minHeight)
+            height = heightAndDeltaH.height
+            deltaH = heightAndDeltaH.deltaH
+            if (ratio) {
+                deltaW = deltaH * ratio
+                width = height * ratio
+            }
+            centerX += (deltaW / 2) * cos(rotateAngle) + (deltaH / 2) * sin(rotateAngle)
+            centerY += (deltaW / 2) * sin(rotateAngle) - (deltaH / 2) * cos(rotateAngle)
+            break
+        }
+        case 'br': {
+            const widthAndDeltaW = setWidthAndDeltaW(width, deltaW, minWidth)
+            width = widthAndDeltaW.width
+            deltaW = widthAndDeltaW.deltaW
+            const heightAndDeltaH = setHeightAndDeltaH(height, deltaH, minHeight)
+            height = heightAndDeltaH.height
+            deltaH = heightAndDeltaH.deltaH
+            if (ratio) {
+                deltaW = deltaH * ratio
+                width = height * ratio
+            }
+            centerX += (deltaW / 2) * cos(rotateAngle) - (deltaH / 2) * sin(rotateAngle)
+            centerY += (deltaW / 2) * sin(rotateAngle) + (deltaH / 2) * cos(rotateAngle)
+            break
+        }
+        case 'bc': {
+            const heightAndDeltaH = setHeightAndDeltaH(height, deltaH, minHeight)
+            height = heightAndDeltaH.height
+            deltaH = heightAndDeltaH.deltaH
+            if (ratio) {
+                deltaW = deltaH * ratio
+                width = height * ratio
+                // 左上角固定
+                centerX += (deltaW / 2) * cos(rotateAngle) - (deltaH / 2) * sin(rotateAngle)
+                centerY += (deltaW / 2) * sin(rotateAngle) + (deltaH / 2) * cos(rotateAngle)
+            } else {
+                // 上边固定
+                centerX -= (deltaH / 2) * sin(rotateAngle)
+                centerY += (deltaH / 2) * cos(rotateAngle)
+            }
+            break
+        }
+        case 'bl': {
+            deltaW = -deltaW
+            const widthAndDeltaW = setWidthAndDeltaW(width, deltaW, minWidth)
+            width = widthAndDeltaW.width
+            deltaW = widthAndDeltaW.deltaW
+            const heightAndDeltaH = setHeightAndDeltaH(height, deltaH, minHeight)
+            height = heightAndDeltaH.height
+            deltaH = heightAndDeltaH.deltaH
+            if (ratio) {
+                height = width / ratio
+                deltaH = deltaW / ratio
+            }
+            centerX -= (deltaW / 2) * cos(rotateAngle) + (deltaH / 2) * sin(rotateAngle)
+            centerY -= (deltaW / 2) * sin(rotateAngle) - (deltaH / 2) * cos(rotateAngle)
+            break
+        }
+        case 'l': {
+            deltaW = -deltaW
+            const widthAndDeltaW = setWidthAndDeltaW(width, deltaW, minWidth)
+            width = widthAndDeltaW.width
+            deltaW = widthAndDeltaW.deltaW
+            if (ratio) {
+                height = width / ratio
+                deltaH = deltaW / ratio
+                // 右上角固定
+                centerX -= (deltaW / 2) * cos(rotateAngle) + (deltaH / 2) * sin(rotateAngle)
+                centerY -= (deltaW / 2) * sin(rotateAngle) - (deltaH / 2) * cos(rotateAngle)
+            } else {
+                // 右边固定
+                centerX -= (deltaW / 2) * cos(rotateAngle)
+                centerY -= (deltaW / 2) * sin(rotateAngle)
+            }
+            break
+        }
+        case 'tl': {
+            deltaW = -deltaW
+            deltaH = -deltaH
+            const widthAndDeltaW = setWidthAndDeltaW(width, deltaW, minWidth)
+            width = widthAndDeltaW.width
+            deltaW = widthAndDeltaW.deltaW
+            const heightAndDeltaH = setHeightAndDeltaH(height, deltaH, minHeight)
+            height = heightAndDeltaH.height
+            deltaH = heightAndDeltaH.deltaH
+            if (ratio) {
+                width = height * ratio
+                deltaW = deltaH * ratio
+            }
+            centerX -= (deltaW / 2) * cos(rotateAngle) - (deltaH / 2) * sin(rotateAngle)
+            centerY -= (deltaW / 2) * sin(rotateAngle) + (deltaH / 2) * cos(rotateAngle)
+            break
+        }
+        case 'tc': {
+            deltaH = -deltaH
+            const heightAndDeltaH = setHeightAndDeltaH(height, deltaH, minHeight)
+            height = heightAndDeltaH.height
+            deltaH = heightAndDeltaH.deltaH
+            if (ratio) {
+                width = height * ratio
+                deltaW = deltaH * ratio
+                // 左下角固定
+                centerX += (deltaW / 2) * cos(rotateAngle) + (deltaH / 2) * sin(rotateAngle)
+                centerY += (deltaW / 2) * sin(rotateAngle) - (deltaH / 2) * cos(rotateAngle)
+            } else {
+                centerX += (deltaH / 2) * sin(rotateAngle)
+                centerY -= (deltaH / 2) * cos(rotateAngle)
+            }
+            break
+        }
+    }
+
+    return {
+        position: {
+            centerX,
+            centerY
+        },
+        size: {
+            width: width * widthFlag,
+            height: height * heightFlag
+        }
+    }
+}
+/**
+ * 根据给定的参数设置高度和 deltaH 值。
+ *
+ * @param {number} height - 当前的高度值。
+ * @param {number} deltaH - 高度变化值。
+ * @param {number} minHeight - 最小高度值。
+ * @return {object} - 包含更新后的高度和 deltaH 值的对象。
+ */
+const setHeightAndDeltaH = (height: number, deltaH: number, minHeight: number) => {
+    const expectedHeight = height + deltaH
+    if (expectedHeight > minHeight) {
+        height = expectedHeight
+    } else {
+        deltaH = minHeight - height
+        height = minHeight
+    }
+    return { height, deltaH }
+}
+/**
+ * 设置元素的宽度和deltaW值。
+ *
+ * @param {number} width - 元素的当前宽度。
+ * @param {number} deltaW - 元素宽度的变化量。
+ * @param {number} minWidth - 元素的最小宽度。
+ * @return {Object} - 包含更新后的宽度和deltaW值的对象。
+ */
+const setWidthAndDeltaW = (width: number, deltaW: number, minWidth: number) => {
+    const expectedWidth = width + deltaW
+    if (expectedWidth > minWidth) {
+        width = expectedWidth
+    } else {
+        deltaW = minWidth - width
+        width = minWidth
+    }
+    return { width, deltaW }
+}
+/**
+ * 根据矩形的中心坐标、尺寸和角度计算左上角的位置。
+ *
+ * @param {object} params - 计算的参数。
+ * @param {number} params.centerX - 矩形的中心点的 x 坐标。
+ * @param {number} params.centerY - 矩形的中心点的 y 坐标。
+ * @param {number} params.width - 矩形的宽度。
+ * @param {number} params.height - 矩形的高度。
+ * @param {number} params.angle - 矩形的旋转角度。
+ * @return {object} - 矩形的左上角位置。
+ */
+export const centerToTL = ({ centerX, centerY, width, height, angle }: any): IDzrPropsModelValue => ({
+    top: centerY - height / 2,
+    left: centerX - width / 2,
+    width,
+    height,
+    angle
+})
+/**
+ * 格式化数据并返回一个包含更新后尺寸和位置的对象。
+ *
+ * @param {IDzrPropsModelValue} data - 包含宽度和高度的数据。
+ * @param {number} centerX - 中心点的x坐标。
+ * @param {number} centerY - 中心点的y坐标。
+ * @return {object} - 一个包含更新后尺寸和位置的对象。
+ */
+export const formatData = (data: IDzrPropsModelValue, centerX: number, centerY: number) => {
+    const { width, height } = data
+    return {
+        width: Math.abs(width),
+        height: Math.abs(height),
+        left: centerX - Math.abs(width) / 2,
+        top: centerY - Math.abs(height) / 2
+    }
+}
+/**
+ * 生成随机字符串
+ * @param len 生成个数
+ */
+export const randomString = (len?: number) => {
+    len = len || 10
+    const str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
+    const maxPos = str.length
+    let random_str = ''
+    for (let i = 0; i < len; i++) {
+        random_str += str.charAt(Math.floor(Math.random() * maxPos))
+    }
+    return random_str
+}
diff --git a/src/components/mt-dzr/utils/types.ts b/src/components/mt-dzr/utils/types.ts
new file mode 100644
index 0000000..984593b
--- /dev/null
+++ b/src/components/mt-dzr/utils/types.ts
@@ -0,0 +1 @@
+export type MouseTouchEvent = MouseEvent | TouchEvent
diff --git a/src/components/mt-edit/ace-edit.ts b/src/components/mt-edit/ace-edit.ts
new file mode 100644
index 0000000..325030e
--- /dev/null
+++ b/src/components/mt-edit/ace-edit.ts
@@ -0,0 +1,78 @@
+import ace from 'ace-builds'
+
+import themeMonokaiUrl from 'ace-builds/src-noconflict/theme-monokai?url'
+ace.config.setModuleUrl('ace/theme/monokai', themeMonokaiUrl)
+
+import workerBaseUrl from 'ace-builds/src-noconflict/worker-base?url'
+ace.config.setModuleUrl('ace/mode/base', workerBaseUrl)
+
+import modeJsonUrl from 'ace-builds/src-noconflict/mode-json?url'
+ace.config.setModuleUrl('ace/mode/json', modeJsonUrl)
+import workerJsonUrl from 'ace-builds/src-noconflict/worker-json?url'
+ace.config.setModuleUrl('ace/mode/json_worker', workerJsonUrl)
+import snippetsJsonUrl from 'ace-builds/src-noconflict/snippets/json?url'
+ace.config.setModuleUrl('ace/snippets/json', snippetsJsonUrl)
+
+import modeJavascriptUrl from 'ace-builds/src-noconflict/mode-javascript?url'
+ace.config.setModuleUrl('ace/mode/javascript', modeJavascriptUrl)
+import workerJavascriptUrl from 'ace-builds/src-noconflict/worker-javascript?url'
+ace.config.setModuleUrl('ace/mode/javascript_worker', workerJavascriptUrl)
+import snippetsJavascriptUrl from 'ace-builds/src-noconflict/snippets/javascript?url'
+ace.config.setModuleUrl('ace/snippets/javascript', snippetsJavascriptUrl)
+
+import 'ace-builds/src-noconflict/ext-language_tools'
+// ace.require('ace/ext/language_tools');
+const langTools = ace.require('ace/ext/language_tools')
+langTools.addCompleter({
+    getCompletions: function (
+        _editor: any,
+        _session: any,
+        _pos: any,
+        prefix: string | any[],
+        callback: (
+            arg0: null,
+            arg1: {
+                name: string //显示的名称
+                value: string //插入的值，
+                score: number //分数
+                meta: string //描述
+            }[]
+        ) => void
+    ) {
+        if (prefix.length === 0) {
+            callback(null, [])
+            return
+        }
+        callback(null, [
+            {
+                name: '$mtEventCallBack',
+                value: '$mtEventCallBack(type,$item_info.id)',
+                score: 1000,
+                meta: '执行订阅回调函数'
+            },
+            {
+                name: '$mtElMessage',
+                value: '$mtElMessage.success("成功")',
+                score: 1000,
+                meta: '消息提示'
+            },
+            {
+                name: '$mtElMessageBox',
+                value: `$mtElMessageBox.alert('This is a message', 'Title', {
+          confirmButtonText: 'OK',
+          callback: (action) => {
+            console.log(action)
+          },
+        })`,
+                score: 1000,
+                meta: '消息弹出框'
+            },
+            {
+                name: '$item_info',
+                value: '$item_info',
+                score: 1000,
+                meta: '回调函数中获取当前触发事件图形的信息'
+            }
+        ])
+    }
+})
diff --git a/src/components/mt-edit/assets/css/custom_ani.css b/src/components/mt-edit/assets/css/custom_ani.css
new file mode 100644
index 0000000..d35f967
--- /dev/null
+++ b/src/components/mt-edit/assets/css/custom_ani.css
@@ -0,0 +1,37 @@
+@-webkit-keyframes rotate360 {
+    0% {
+        -webkit-transform: rotate3d(0, 0, 1, 0deg);
+        transform: rotate3d(0, 0, 1, 0deg);
+    }
+    50% {
+        -webkit-transform: rotate3d(0, 0, 1, 180deg);
+        transform: rotate3d(0, 0, 1, 180deg);
+    }
+    to {
+        -webkit-transform: rotate3d(0, 0, 1, 360deg);
+        transform: rotate3d(0, 0, 1, 360deg);
+    }
+}
+
+@keyframes rotate360 {
+    0% {
+        -webkit-transform: rotate3d(0, 0, 1, 0deg);
+        transform: rotate3d(0, 0, 1, 0deg);
+    }
+    50% {
+        -webkit-transform: rotate3d(0, 0, 1, 180deg);
+        transform: rotate3d(0, 0, 1, 180deg);
+    }
+    to {
+        -webkit-transform: rotate3d(0, 0, 1, 360deg);
+        transform: rotate3d(0, 0, 1, 360deg);
+    }
+}
+
+.animate__rotate360 {
+    -webkit-animation-name: rotate360;
+    animation-name: rotate360;
+    animation-timing-function: linear;
+    -webkit-transform-origin: center;
+    transform-origin: center;
+}
diff --git a/src/components/mt-edit/components/add-element/index.vue b/src/components/mt-edit/components/add-element/index.vue
new file mode 100644
index 0000000..4220d6f
--- /dev/null
+++ b/src/components/mt-edit/components/add-element/index.vue
@@ -0,0 +1,280 @@
+<template>
+    <div class="add-element">
+        <el-dialog v-model="open" title="新增图元" width="500px" destroy-on-close @close="closeDialog">
+            <el-form :model="element" ref="ruleFormRef" :rules="rules" label-width="120px">
+                <el-form-item label="图元分类:" prop="elementSonType">
+                    <el-select v-model="element.elementSonType" placeholder="请选择图元分类" style="width: 100%">
+                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+                    </el-select>
+                </el-form-item>
+                <!-- <el-form-item label="组件子类型:" prop="elementSonType">
+              <el-select
+                v-model="element.elementSonType"
+                placeholder="请选择组件子类型"
+                style="width: 100%"
+              >
+                <el-option
+                  v-for="item in options1.filter(
+                    (item) => item.key == element.elementType
+                  )"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item> -->
+                <!-- <el-form-item label="图元状态:" prop="elementForm">
+              <el-select
+                v-if="element.elementSonType == '电力状态图元'"
+                v-model="element.elementForm"
+                placeholder="请选择图元状态"
+                style="width: 100%"
+                @change="
+                  (val) => {
+                    changeEvent(val, args);
+                  }
+                "
+              >
+                <el-option
+                  v-for="item in StatusList1"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+              <el-select
+                v-else="
+                  element.elementSonType == '电力系统基础图元' ||
+                  element.elementSonType == '自定义图元'
+                "
+                v-model="element.elementForm"
+                placeholder="请选择图元状态"
+                style="width: 100%"
+                @change="
+                  (val) => {
+                    changeEvent(val, args);
+                  }
+                "
+              >
+                <el-option
+                  v-for="item in StatusList"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item> -->
+                <!-- <el-form-item label="组件编码:" prop="elementCode">
+              <el-input
+                v-model="element.elementCode"
+                placeholder="请选择组件编码"
+                style="width: 100%"
+              />
+            </el-form-item> -->
+                <el-form-item label="图元名称:" prop="elementName">
+                    <el-input v-model="element.elementName" placeholder="请选择组件名称" style="width: 100%" />
+                </el-form-item>
+                <!-- <el-form-item label="组件标识:" prop="elementMark">
+                    <el-input v-model="element.elementMark" placeholder="请选择组件标识" style="width: 100%" />
+                </el-form-item> -->
+                <el-form-item label="上传svg:">
+                    <el-upload
+                        ref="upload"
+                        v-model="fileList"
+                        style="width: 415px"
+                        action="#"
+                        multiple
+                        accept="image/svg+xml"
+                        :http-request="UploadSvg"
+                        :on-remove="handleRemove"
+                        :before-upload="beforeAvatarUpload"
+                        :limit="1"
+                        :on-exceed="handleExceed"
+                    >
+                        <el-button type="primary">上传</el-button>
+                    </el-upload>
+                    <el-dialog v-model="dialogVisible">
+                        <img w-full :src="dialogImageUrl" alt="Preview Image" />
+                    </el-dialog>
+                </el-form-item>
+                <el-form-item>
+                    <el-button @click="addNewComponent(ruleFormRef)" type="primary">保存</el-button>
+                </el-form-item>
+            </el-form>
+        </el-dialog>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { defineProps, getCurrentInstance, onMounted, ref, watch, reactive } from 'vue'
+import { ElInput, ElFormItem, ElForm, ElDialog, ElUpload, ElMessage, ElButton, ElSelect, ElOption } from 'element-plus'
+import type { UploadInstance, UploadProps, FormInstance, FormRules, UploadFile, UploadUserFile } from 'element-plus'
+
+import { addElement, download } from '@/api/index'
+import { leftAsideStore } from '@/export'
+
+const instance = getCurrentInstance() // 获取当前组件实例
+
+const open = ref(false)
+
+const props = defineProps({
+    show: Boolean
+})
+
+const element: any = ref({
+    elementCode: '', //组件编码
+    elementForm: '', //	图元状态
+    elementMark: '', //组件标识
+    elementName: '', //图元名称
+    elementSonType: '', //组件子类型  图元分类
+    elementType: '', //组件分类
+    multipartFile: '' //	图元文件
+})
+
+interface RuleForm {
+    elementCode: string
+    elementForm: string
+    elementMark: string
+    elementName: string
+    elementSonType: string
+    elementType: string
+}
+
+const options = [
+    {
+        value: '电力基础图元',
+        label: '电力基础图元'
+    },
+    {
+        value: '自定义',
+        label: '自定义'
+    }
+]
+
+const fileList = ref<UploadFile[]>([]) // 上传文件列表
+const dialogImageUrl = ref('')
+const dialogVisible = ref(false) // 上传图片预览
+
+const handleRemove = (file: UploadFile) => {
+    fileList.value = []
+}
+// 文件校验
+const beforeAvatarUpload: UploadProps['beforeUpload'] = rawFile => {
+    if (rawFile.type !== 'image/svg+xml') {
+        ElMessage.error('只能上传svg格式文件!')
+        return false
+    }
+    return true
+}
+const handleExceed: UploadProps['onExceed'] = files => {
+    return ElMessage.error('只能上传1个svg文件!')
+}
+// 上传svg
+// const UploadSvg = (params:any) => {
+//   fileList.value.push(params.file);
+// };
+
+const UploadSvg = (params: any) => {
+    return new Promise<void>(resolve => {
+        fileList.value.push(params.file)
+        resolve()
+    })
+}
+
+const handlePictureCardPreview = (file: UploadFile) => {
+    dialogImageUrl.value = file.url!
+    dialogVisible.value = true
+}
+
+const ruleFormRef = ref<FormInstance>()
+const rules = reactive<FormRules<RuleForm>>({
+    elementCode: [{ required: true, message: '请输入组件编码', trigger: 'blur' }],
+    elementForm: [{ required: true, message: '请选择图元状态', trigger: 'change' }],
+    elementMark: [{ required: true, message: '请输入组件标识', trigger: 'blur' }],
+    elementName: [{ required: true, message: '请输入图元名称', trigger: 'blur' }],
+    elementSonType: [{ required: true, message: '请选择父类型', trigger: 'change' }],
+    elementType: [{ required: true, message: '请选择组件分类', trigger: 'change' }]
+})
+
+const closeDialog = () => {
+    open.value = false
+    if (instance) {
+        const emit = instance.emit
+        emit('update:show', false) // 向父组件发送更新后的状态
+    }
+}
+
+watch(
+    () => props.show,
+    val => {
+        if (val === true) {
+            open.value = true
+            element.value = {}
+        }
+    }
+)
+
+// 新增保存
+
+const addNewComponent = async (formEl: FormInstance | undefined) => {
+    if (!formEl) return
+    await formEl.validate(valid => {
+        if (valid) {
+            if (fileList.value.length == 0) {
+                ElMessage({
+                    message: '请上传svg文件!',
+                    type: 'warning'
+                })
+                return Promise.resolve() // 显式返回 Promise<void>
+            }
+            let form = new FormData()
+
+            form.append('elementCode', element.value.elementName)
+            form.append('elementForm', '普通图元')
+            form.append('elementMark', element.value.elementName)
+            form.append('elementName', element.value.elementName)
+            form.append('elementSonType', element.value.elementSonType)
+            form.append('elementType', 'svg文件')
+            form.append('multipartFile', fileList.value[0])
+
+            addElement(form).then((res: any) => {
+                if (res.code == 'A0000') {
+                    ElMessage({
+                        message: '新增成功',
+                        type: 'success'
+                    })
+                    closeDialog()
+                    // 左侧列表渲染新增的图元
+                    download({ filePath: res.data.path }).then((Svg: any) => {
+                        // 动态添加svg
+                        leftAsideStore.svgPush(res.data.elementSonType, [
+                            {
+                                id: res.data.id,
+                                title: res.data.elementName,
+                                type: 'svg',
+                                thumbnail:
+                                    'data:image/svg+xml;utf8,' +
+                                    encodeURIComponent(Svg.replace(/(\sfill=(["']))[^"']*(\2)/g, '$1#000000$3')),
+                                svg: Svg.replace(/\sfill=(["'])[^"']*\1/g, ''),
+                                props: {
+                                    fill: {
+                                        type: 'color',
+                                        val: '#FF0000',
+                                        title: '填充色'
+                                    }
+                                }
+                            }
+                        ])
+                    })
+                } else {
+                    ElMessage({
+                        message: res.message,
+                        type: 'info'
+                    })
+                }
+            })
+        }
+        return Promise.resolve() // 确保所有分支都返回 Promise<void>
+    })
+}
+</script>
diff --git a/src/components/mt-edit/components/context-menu/index.vue b/src/components/mt-edit/components/context-menu/index.vue
new file mode 100644
index 0000000..c72c35e
--- /dev/null
+++ b/src/components/mt-edit/components/context-menu/index.vue
@@ -0,0 +1,86 @@
+<template>
+    <ul ref="contextMenuRef" class="contextMenu" v-show="show">
+        <li
+            v-for="(item, key) in contextMenuProps.menuInfo.info"
+            :key="item.title"
+            @click="onItemClick(key, item, $event)"
+        >
+            <p :class="item.enable ? '' : 'disabled'">
+                {{ item.title }}
+                <span class="shortcut">{{ item.hot_key }}</span>
+            </p>
+        </li>
+    </ul>
+</template>
+<script setup lang="ts">
+import type { ContextMenuInfoType, IContextMenuDetail, IContextMenuInfo } from '../../store/types'
+
+type ContextMenuProps = {
+    menuInfo: IContextMenuDetail
+    show: boolean
+}
+const contextMenuProps = withDefaults(defineProps<ContextMenuProps>(), {})
+const emits = defineEmits(['onContextMenuClick'])
+const onItemClick = (key: ContextMenuInfoType, item: IContextMenuInfo, e: MouseEvent) => {
+    if (!item.enable) {
+        return
+    }
+    emits('onContextMenuClick', key, e)
+}
+</script>
+<style scoped lang="less">
+.contextMenu {
+    position: fixed;
+    z-index: 99999;
+    background: #ffffff;
+    padding: 5px 0;
+    margin: 0px;
+    display: block;
+    border-radius: 5px;
+    box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.3);
+    left: v-bind('contextMenuProps.menuInfo.left + "px"');
+    top: v-bind('contextMenuProps.menuInfo.top + "px"');
+
+    li {
+        list-style: none;
+        padding: 0px;
+        margin: 0px;
+    }
+
+    .shortcut {
+        width: 115px;
+        text-align: right;
+        float: right;
+    }
+
+    p {
+        text-decoration: none;
+        display: block;
+        padding: 0px 15px 1px 20px;
+        margin: 0;
+        user-select: none;
+        -webkit-user-select: none;
+    }
+
+    p:hover {
+        background-color: #0cf;
+        color: #ffffff;
+        cursor: default;
+    }
+
+    .disabled {
+        color: #999;
+    }
+
+    .disabled:hover {
+        color: #999;
+        background-color: transparent;
+    }
+
+    li.separator {
+        border-top: solid 1px #e3e3e3;
+        padding-top: 5px;
+        margin-top: 5px;
+    }
+}
+</style>
diff --git a/src/components/mt-edit/components/custom-svg-render/index.vue b/src/components/mt-edit/components/custom-svg-render/index.vue
new file mode 100644
index 0000000..c00c03b
--- /dev/null
+++ b/src/components/mt-edit/components/custom-svg-render/index.vue
@@ -0,0 +1,26 @@
+<template>
+    <img draggable="false" class="w-1/1 h-1/1" :src="img_url" />
+</template>
+<script setup lang="ts">
+// @ts-nocheck
+import { onMounted, ref, useSlots, watch } from 'vue'
+import { renderToString } from 'vue/server-renderer'
+import { svgToImgSrc } from '../../utils'
+const img_url = ref('')
+const slots = useSlots()
+const setImgUrl = async () => {
+    const slotNodes = slots.default ? slots.default() : []
+    const slotStrings = await renderToString(slotNodes[0])
+    img_url.value = svgToImgSrc(slotStrings)
+}
+onMounted(async () => {
+    await setImgUrl()
+})
+watch(
+    () => slots.default(),
+    async () => {
+        await setImgUrl()
+    },
+    { deep: true }
+)
+</script>
diff --git a/src/components/mt-edit/components/done-tree/index.vue b/src/components/mt-edit/components/done-tree/index.vue
new file mode 100644
index 0000000..8f91abb
--- /dev/null
+++ b/src/components/mt-edit/components/done-tree/index.vue
@@ -0,0 +1,51 @@
+<template>
+    <el-tree
+        :data="doneTreeProps.doneJson"
+        :props="defaultProps"
+        @node-click="handleNodeClick"
+        :default-expand-all="true"
+        :expand-on-click-node="false"
+        :highlight-current="true"
+        node-key="id"
+        :current-node-key="current_node_key"
+    >
+        <template #default="{ node, data }">
+            <div class="flex justify-between w-8/10">
+                <div>{{ node.label }}</div>
+                <el-button text circle size="small" class="mr-10px">
+                    <el-icon :title="data.hide ? '隐藏' : '显示'" :size="20" @click.stop="changeHide(data)">
+                        <svg-analysis :name="data.hide ? 'view-hide' : 'view-show'"></svg-analysis>
+                    </el-icon>
+                </el-button>
+            </div>
+        </template>
+    </el-tree>
+</template>
+
+<script lang="ts" setup>
+import { ElTree, ElButton, ElIcon } from 'element-plus'
+import { computed } from 'vue'
+import type { IDoneJson } from '@/components/mt-edit/store/types'
+import SvgAnalysis from '@/components/mt-edit/components/svg-analysis/index.vue'
+type DoneTree = {
+    doneJson: IDoneJson[]
+    selectedItemsId: string[] //已选中组件的id
+}
+const doneTreeProps = withDefaults(defineProps<DoneTree>(), {})
+
+const emits = defineEmits(['updateSelectedItemsId', 'updateSelectedIdHide'])
+
+const current_node_key = computed(() => {
+    return doneTreeProps.selectedItemsId.length == 1 ? doneTreeProps.selectedItemsId[0] : ''
+})
+const handleNodeClick = (data: IDoneJson) => {
+    emits('updateSelectedItemsId', data.id)
+}
+const changeHide = (data: IDoneJson) => {
+    emits('updateSelectedIdHide', data.id)
+}
+const defaultProps = {
+    children: 'nochildren',
+    label: 'title'
+}
+</script>
diff --git a/src/components/mt-edit/components/drag-canvas/index.vue b/src/components/mt-edit/components/drag-canvas/index.vue
new file mode 100644
index 0000000..2284f48
--- /dev/null
+++ b/src/components/mt-edit/components/drag-canvas/index.vue
@@ -0,0 +1,49 @@
+<template>
+    <div class="hidden"></div>
+</template>
+
+<script setup lang="ts">
+import type { MouseTouchEvent } from '../types'
+type DragCanvasProps = {
+    scaleRatio: number
+}
+const dragCanvasProps = withDefaults(defineProps<DragCanvasProps>(), {
+    scaleRatio: 1
+})
+const emits = defineEmits(['dragCanvasMouseDown', 'dragCanvasMouseMove', 'dragCanvasMouseUp'])
+
+const onMouseDown = (de: MouseTouchEvent) => {
+    let move_x = 0
+    let move_y = 0
+    // 记录最开始点击时鼠标位置
+    const d_x = de instanceof MouseEvent ? de.clientX : de.touches[0].pageX
+    const d_y = de instanceof MouseEvent ? de.clientY : de.touches[0].pageY
+    emits('dragCanvasMouseDown', d_x, d_y)
+    const onMouseMove = (e: MouseTouchEvent) => {
+        // 记录鼠标移动的位置
+        const m_x = e instanceof MouseEvent ? e.clientX : e.touches[0].pageX
+        const m_y = e instanceof MouseEvent ? e.clientY : e.touches[0].pageY
+        // 移动的距离
+        move_x = (m_x - d_x) / 1
+        move_y = (m_y - d_y) / 1
+        emits('dragCanvasMouseMove', move_x, move_y)
+    }
+
+    const onMouseUp = () => {
+        document.removeEventListener('mousemove', onMouseMove)
+        document.removeEventListener('mouseup', onMouseUp)
+        document.removeEventListener('touchmove', onMouseMove)
+        document.removeEventListener('touchend', onMouseUp)
+        emits('dragCanvasMouseUp', move_x, move_y)
+    }
+    document.addEventListener('mousemove', onMouseMove)
+    document.addEventListener('mouseup', onMouseUp)
+    document.addEventListener('touchmove', onMouseMove)
+    document.addEventListener('touchend', onMouseUp)
+}
+
+defineExpose({
+    onMouseDown
+})
+</script>
+<style scoped></style>
diff --git a/src/components/mt-edit/components/draw-line-render/index.vue b/src/components/mt-edit/components/draw-line-render/index.vue
new file mode 100644
index 0000000..6b3e642
--- /dev/null
+++ b/src/components/mt-edit/components/draw-line-render/index.vue
@@ -0,0 +1,196 @@
+<template>
+    <svg
+        :id="lineRenderProps.itemJson.id"
+        class="mt-line-render"
+        :style="{
+            position: 'absolute',
+            left: `${-offset}px`,
+            top: `${-offset}px`,
+            width: `${lineRenderProps.canvasCfg.width + offset}px`,
+            height: `${lineRenderProps.canvasCfg.height + offset}px`
+        }"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        pointer-events="none"
+    >
+        <g>
+            <defs>
+                <marker
+                    :id="'markerArrowStart' + lineRenderProps.itemJson.id"
+                    viewBox="0 0 10 10"
+                    refX="8"
+                    refY="5"
+                    markerWidth="6"
+                    markerHeight="6"
+                    orient="auto-start-reverse"
+                >
+                    <path d="M 0 0 L 10 5 L 0 10 z" :fill="lineRenderProps.itemJson.props.stroke.val" />
+                </marker>
+                <marker
+                    :id="'markerArrowEnd' + lineRenderProps.itemJson.id"
+                    viewBox="0 0 10 10"
+                    refX="8"
+                    refY="5"
+                    markerWidth="6"
+                    markerHeight="6"
+                    orient="auto"
+                >
+                    <path d="M 0 0 L 10 5 L 0 10 z" :fill="lineRenderProps.itemJson.props.stroke.val" />
+                </marker>
+            </defs>
+            <path
+                :d="
+                    positionArrarToPath(
+                        lineRenderProps.itemJson.props.point_position.val,
+                        lineRenderProps.itemJson.binfo.left + offset,
+                        lineRenderProps.itemJson.binfo.top + offset
+                    )
+                "
+                pointer-events="visibleStroke"
+                fill="none"
+                :stroke="
+                    lineRenderProps.itemJson.props.ani_type.val === 'electricity'
+                        ? lineRenderProps.itemJson.props.ani_color.val
+                        : lineRenderProps.itemJson.props.stroke.val
+                "
+                :stroke-width="lineRenderProps.itemJson.props['stroke-width'].val"
+                style="cursor: move"
+                stroke-dashoffset="0"
+                :stroke-dasharray="
+                    lineRenderProps.itemJson.props.ani_type.val === 'electricity'
+                        ? lineRenderProps.itemJson.props['stroke-width'].val * 3
+                        : 0
+                "
+                :marker-start="
+                    lineRenderProps.itemJson.props?.['marker-start']?.val
+                        ? `url(#markerArrowStart${lineRenderProps.itemJson.id})`
+                        : ''
+                "
+                :marker-end="
+                    lineRenderProps.itemJson.props?.['marker-end']?.val
+                        ? `url(#markerArrowEnd${lineRenderProps.itemJson.id})`
+                        : ''
+                "
+                class="real"
+            >
+                <animate
+                    v-if="lineRenderProps.itemJson.props.ani_type.val === 'electricity'"
+                    attributeName="stroke-dashoffset"
+                    :from="lineRenderProps.itemJson.props.ani_reverse.val ? 0 : 1000"
+                    :to="
+                        lineRenderProps.itemJson.props.ani_reverse.val
+                            ? lineRenderProps.itemJson.props.ani_play.val
+                                ? 1000
+                                : 0
+                            : lineRenderProps.itemJson.props.ani_play.val
+                              ? 0
+                              : 1000
+                    "
+                    :dur="`${
+                        lineRenderProps.itemJson.props.ani_dur.val < 1 ? 1 : lineRenderProps.itemJson.props.ani_dur.val
+                    }s`"
+                    repeatCount="indefinite"
+                />
+            </path>
+        </g>
+    </svg>
+</template>
+<script setup lang="ts">
+import type { MouseTouchEvent } from '@/components/mt-dzr/utils/types'
+import type { IDoneJson, IGlobalStoreCanvasCfg, IGlobalStoreGridCfg } from '../../store/types'
+import { alignToGrid, positionArrarToPath } from '@/components/mt-edit/utils'
+import { computed } from 'vue'
+import { configStore } from '../../store/config'
+type LineRenderProps = {
+    itemJson: IDoneJson
+    canvasCfg: IGlobalStoreCanvasCfg
+    grid: IGlobalStoreGridCfg
+    canvasDom: HTMLElement | null
+    mode: 'pen' | 'pencil'
+}
+const lineRenderProps = withDefaults(defineProps<LineRenderProps>(), {
+    mode: 'pen'
+})
+const lineRenderEmits = defineEmits(['drawLineEnd'])
+const offset = configStore.lineRenderOffset
+//如果网格关闭或者没有开启网格对齐，网格大小为1
+const grid_align_size = computed(() =>
+    !lineRenderProps.grid.align || !lineRenderProps.grid.enabled ? 1 : lineRenderProps.grid.size
+)
+const onMouseDown = (de: MouseTouchEvent, point_index: number, item: { x: number; y: number }) => {
+    de.stopPropagation()
+    // 记录鼠标按下时实际点的坐标
+    const { x: realityX, y: realityY } = item
+    // 记录最开始点击时鼠标位置
+    const d_x = de instanceof MouseEvent ? de.clientX : de.touches[0].pageX
+    const d_y = de instanceof MouseEvent ? de.clientY : de.touches[0].pageY
+    let new_x = 0
+    let new_y = 0
+    const onMouseMove = (e: MouseTouchEvent) => {
+        // 记录鼠标移动的位置
+        const m_x = e instanceof MouseEvent ? e.clientX : e.touches[0].pageX
+        const m_y = e instanceof MouseEvent ? e.clientY : e.touches[0].pageY
+        // 移动的距离
+        const move_x = de.ctrlKey ? 0 : alignToGrid((m_x - d_x) / lineRenderProps.canvasCfg.scale, 1) //感觉对齐网格有点体验不好 所以固定为一了
+        const move_y = de.shiftKey ? 0 : alignToGrid((m_y - d_y) / lineRenderProps.canvasCfg.scale, 1)
+        new_x = realityX + move_x
+        new_y = realityY + move_y
+        if (lineRenderProps.mode == 'pencil') {
+            const new_point_position = lineRenderProps.itemJson.props.point_position.val
+            new_point_position.push({
+                x: new_x,
+                y: new_y
+            })
+            return
+        } else {
+            const new_point_position = lineRenderProps.itemJson.props.point_position.val
+            new_point_position[point_index].x = new_x
+            new_point_position[point_index].y = new_y
+        }
+    }
+
+    const onMouseUp = () => {
+        document.removeEventListener('mousemove', onMouseMove)
+        document.removeEventListener('mouseup', onMouseUp)
+        document.removeEventListener('touchmove', onMouseMove)
+        document.removeEventListener('touchend', onMouseUp)
+        const itemRect = document.querySelector(`#${lineRenderProps.itemJson.id} g .real`)!.getBoundingClientRect()
+        const canvas_area_bounding_info = lineRenderProps.canvasDom!.getBoundingClientRect()
+        const new_left = (itemRect?.left - canvas_area_bounding_info?.left) / lineRenderProps.canvasCfg.scale
+        const new_top = (itemRect?.top - canvas_area_bounding_info?.top) / lineRenderProps.canvasCfg.scale
+        const move_x = new_left - lineRenderProps.itemJson.binfo.left
+        const move_y = new_top - lineRenderProps.itemJson.binfo.top
+        const new_item_json = {
+            ...lineRenderProps.itemJson,
+            binfo: {
+                ...lineRenderProps.itemJson.binfo,
+                left: new_left,
+                top: new_top,
+                width: itemRect?.width / lineRenderProps.canvasCfg.scale,
+                height: itemRect?.height / lineRenderProps.canvasCfg.scale
+            },
+            props: {
+                ...lineRenderProps.itemJson.props,
+                point_position: {
+                    ...lineRenderProps.itemJson.props.point_position,
+                    val: lineRenderProps.itemJson.props.point_position.val.map((m: { x: number; y: number }) => {
+                        return {
+                            x: m.x - move_x,
+                            y: m.y - move_y
+                        }
+                    })
+                }
+            }
+        }
+        lineRenderEmits('drawLineEnd', new_item_json)
+    }
+    document.addEventListener('mousemove', onMouseMove)
+    document.addEventListener('mouseup', onMouseUp)
+    document.addEventListener('touchmove', onMouseMove)
+    document.addEventListener('touchend', onMouseUp)
+}
+defineExpose({
+    onMouseDown
+})
+</script>
+<style scoped></style>
diff --git a/src/components/mt-edit/components/export-json/index.vue b/src/components/mt-edit/components/export-json/index.vue
new file mode 100644
index 0000000..9fb5aa1
--- /dev/null
+++ b/src/components/mt-edit/components/export-json/index.vue
@@ -0,0 +1,35 @@
+<template>
+    <div>
+        <v-ace-editor
+            v-model:value="export_json"
+            lang="json"
+            theme="monokai"
+            style="height: 400px"
+            :options="{
+                useWorker: true,
+                enableBasicAutocompletion: true,
+                enableSnippets: true,
+                enableLiveAutocompletion: true
+            }"
+        />
+    </div>
+</template>
+<script setup lang="ts">
+import { VAceEditor } from 'vue3-ace-editor'
+import type { IDoneJson, IGlobalStoreCanvasCfg, IGlobalStoreGridCfg } from '../../store/types'
+import { computed } from 'vue'
+import { genExportJson } from '../../composables'
+type ExportProps = {
+    doneJson: IDoneJson[]
+    canvasCfg: IGlobalStoreCanvasCfg
+    gridCfg: IGlobalStoreGridCfg
+}
+const exportProps = withDefaults(defineProps<ExportProps>(), {})
+const export_json = computed({
+    get: () => {
+        const { exportJson } = genExportJson(exportProps.canvasCfg, exportProps.gridCfg, exportProps.doneJson)
+        return JSON.stringify(exportJson, null, 2)
+    },
+    set: () => {}
+})
+</script>
diff --git a/src/components/mt-edit/components/group-render/index.vue b/src/components/mt-edit/components/group-render/index.vue
new file mode 100644
index 0000000..1cabe3d
--- /dev/null
+++ b/src/components/mt-edit/components/group-render/index.vue
@@ -0,0 +1,44 @@
+<template>
+    <div class="mt-group">
+        <div
+            class="absolute"
+            v-for="item in groupRender.itemJson.children"
+            :key="item.id"
+            :id="item.id"
+            :style="{
+                left: item.binfo.left + '%',
+                top: item.binfo.top + '%',
+                width: item.binfo.width + '%',
+                height: item.binfo.height + '%',
+                transform: `rotate(${item.binfo.angle}deg)`
+            }"
+        >
+            <render-item
+                :item-json="item"
+                :grid="groupRender.grid"
+                :canvas-cfg="groupRender.canvasCfg"
+                :canvas-dom="groupRender.canvasDom"
+                :lock-state="false"
+            ></render-item>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+import RenderItem from '@/components/mt-edit/components/render-item/index.vue'
+import type { IDoneJson, IGlobalStoreCanvasCfg, IGlobalStoreGridCfg } from '@/components/mt-edit/store/types'
+type GroupRender = {
+    itemJson: IDoneJson
+    grid: IGlobalStoreGridCfg
+    canvasCfg: IGlobalStoreCanvasCfg
+    canvasDom: HTMLElement | null
+}
+const groupRender = withDefaults(defineProps<GroupRender>(), {})
+</script>
+<style scoped>
+.mt-group {
+    left: v-bind('groupRender.itemJson.binfo.left+"px"');
+    top: v-bind('groupRender.itemJson.binfo.top+"px"');
+    width: v-bind('groupRender.itemJson.binfo.width+"px"');
+    height: v-bind('groupRender.itemJson.binfo.height+"px"');
+}
+</style>
diff --git a/src/components/mt-edit/components/import-json/index.vue b/src/components/mt-edit/components/import-json/index.vue
new file mode 100644
index 0000000..0d42b1a
--- /dev/null
+++ b/src/components/mt-edit/components/import-json/index.vue
@@ -0,0 +1,44 @@
+<template>
+    <div>
+        <v-ace-editor
+            v-model:value="import_json"
+            lang="json"
+            theme="monokai"
+            style="height: 400px"
+            :options="{
+                useWorker: true,
+                enableBasicAutocompletion: true,
+                enableSnippets: true,
+                enableLiveAutocompletion: true
+            }"
+        />
+    </div>
+</template>
+<script setup lang="ts">
+import { VAceEditor } from 'vue3-ace-editor'
+import { ref } from 'vue'
+import type { IExportJson } from '../types'
+import { globalStore } from '../../store/global'
+import { useExportJsonToDoneJson } from '../../composables'
+const import_json = ref('')
+const onImport = () => {
+    return new Promise((resolve, reject) => {
+        try {
+            const json: IExportJson = JSON.parse(import_json.value)
+            console.log('🚀 ~ onImport ~ json:', json)
+
+            const { canvasCfg, gridCfg, importDoneJson } = useExportJsonToDoneJson(json)
+
+            globalStore.canvasCfg = canvasCfg
+            globalStore.gridCfg = gridCfg
+            globalStore.setGlobalStoreDoneJson(importDoneJson)
+            resolve(true)
+        } catch (error) {
+            resolve(false)
+        }
+    })
+}
+defineExpose({
+    onImport
+})
+</script>
diff --git a/src/components/mt-edit/components/layout/footer-panel/index.vue b/src/components/mt-edit/components/layout/footer-panel/index.vue
new file mode 100644
index 0000000..da04fd1
--- /dev/null
+++ b/src/components/mt-edit/components/layout/footer-panel/index.vue
@@ -0,0 +1,12 @@
+<template>
+    <div class="flex justify-center items-center pt-2">
+        <el-text>Copyright (c) 2025</el-text>
+
+        <el-link class="ml-10px" href="http://www.shining-electric.com/" target="_blank">
+            南京灿能电气自动化股份有限公司
+        </el-link>
+    </div>
+</template>
+<script lang="ts" setup>
+import { ElText, ElLink } from 'element-plus'
+</script>
diff --git a/src/components/mt-edit/components/layout/header-panel/index.vue b/src/components/mt-edit/components/layout/header-panel/index.vue
new file mode 100644
index 0000000..e9b95df
--- /dev/null
+++ b/src/components/mt-edit/components/layout/header-panel/index.vue
@@ -0,0 +1,333 @@
+<template>
+    <div class="flex justify-between" style="width: 100%; padding-top: 10px">
+        <div class="flex items-center justify-between w-200px">
+            <div class="flex items-center">
+                <!-- <el-image
+          class="w-45px h-45px pl-20px"
+          src="data:image/svg+xml;utf8,%3Csvg%20id%3D%22%E7%BB%84_2%22%20data-name%3D%22%E7%BB%84%202%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22700%22%20height%3D%22700%22%20viewBox%3D%220%200%20700%20700%22%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3Cstyle%3E%0A%20%20%20%20%20%20.cls-1%20%7B%0A%20%20%20%20%20%20%20%20fill%3A%20none%3B%0A%20%20%20%20%20%20%20%20stroke%3A%20%2300ccbd%3B%0A%20%20%20%20%20%20%20%20stroke-width%3A%2020px%3B%0A%20%20%20%20%20%20%20%20fill-rule%3A%20evenodd%3B%0A%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20.cls-2%20%7B%0A%20%20%20%20%20%20%20%20font-size%3A%20100px%3B%0A%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20.cls-2%2C%20.cls-3%20%7B%0A%20%20%20%20%20%20%20%20fill%3A%20%23deea2e%3B%0A%20%20%20%20%20%20%20%20font-weight%3A%20700%3B%0A%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20.cls-3%20%7B%0A%20%20%20%20%20%20%20%20font-size%3A%20120px%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%3C%2Fstyle%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Cg%20id%3D%22%E7%BB%84_1%22%20data-name%3D%22%E7%BB%84%201%22%3E%0A%20%20%20%20%3Cpath%20id%3D%22%E5%BD%A2%E7%8A%B6_1%22%20data-name%3D%22%E5%BD%A2%E7%8A%B6%201%22%20class%3D%22cls-1%22%20d%3D%22M34.518%2C406.156S47.789%2C166%2C187.922%2C211.451c0%2C0%2C55.156%2C15.864%2C91.453%2C45.448%2C0%2C0%2C67.7-42.655%2C141.6%2C0%22%2F%3E%0A%20%20%20%20%3Cpath%20id%3D%22%E5%BD%A2%E7%8A%B6_1_%E6%8B%B7%E8%B4%9D%22%20data-name%3D%22%E5%BD%A2%E7%8A%B6%201%20%E6%8B%B7%E8%B4%9D%22%20class%3D%22cls-1%22%20d%3D%22M665.493%2C406.156s-13.271-240.373-153.4-194.884c0%2C0-55.156%2C15.879-91.452%2C45.489%2C0%2C0-67.7-42.694-141.6%2C0%22%2F%3E%0A%20%20%20%20%3Cpath%20id%3D%22%E5%BD%A2%E7%8A%B6_2%22%20data-name%3D%22%E5%BD%A2%E7%8A%B6%202%22%20class%3D%22cls-1%22%20d%3D%22M117.921%2C306.109s9.026-64.564%2C74.891-32.1%22%2F%3E%0A%20%20%20%20%3Cpath%20id%3D%22%E5%BD%A2%E7%8A%B6_2_%E6%8B%B7%E8%B4%9D%22%20data-name%3D%22%E5%BD%A2%E7%8A%B6%202%20%E6%8B%B7%E8%B4%9D%22%20class%3D%22cls-1%22%20d%3D%22M581.357%2C306.589s-9-65.089-74.668-32.357%22%2F%3E%0A%20%20%20%20%3Ctext%20id%3D%22ao%22%20class%3D%22cls-2%22%20transform%3D%22translate(124.132%20368.651)%20scale(0.823)%22%3Eao%3C%2Ftext%3E%0A%20%20%20%20%3Ctext%20id%3D%22tu%22%20class%3D%22cls-2%22%20transform%3D%22translate(482.948%20368.651)%20scale(0.823)%22%3Etu%3C%2Ftext%3E%0A%20%20%3C%2Fg%3E%0A%20%20%3Ctext%20id%3D%22M_A_O_T_U%22%20data-name%3D%22M%20A%20O%20T%20U%22%20class%3D%22cls-3%22%20x%3D%2245.25%22%20y%3D%22537.03%22%3EM%20A%20O%20T%20U%3C%2Ftext%3E%0A%3C%2Fsvg%3E%0A"
+        /> -->
+                <el-text class="title_text">web组态编辑器</el-text>
+            </div>
+            <el-button text circle size="small" @click="emits('update:leftAside', !headerPanelProps.leftAside)">
+                <el-icon :size="20">
+                    <svg-analysis v-if="headerPanelProps.leftAside" name="menu-fold"></svg-analysis>
+                    <svg-analysis v-else name="menu-unfold"></svg-analysis>
+                </el-icon>
+            </el-button>
+        </div>
+        <div class="flex justify-between" style="width: calc(100% - 440px)">
+            <div class="flex items-center">
+                <el-button-group>
+                    <el-button
+                        text
+                        circle
+                        size="small"
+                        :disabled="!headerPanelProps.undoEnabled"
+                        @click="emits('onUndoClick')"
+                    >
+                        <el-icon title="撤销 Ctrl+Z" :size="20">
+                            <svg-analysis name="undo"></svg-analysis>
+                        </el-icon>
+                    </el-button>
+                    <el-button
+                        text
+                        circle
+                        size="small"
+                        :disabled="!headerPanelProps.redoEnabled"
+                        @click="emits('onRedoClick')"
+                    >
+                        <el-icon title="重做 Ctrl+Y" :size="20">
+                            <svg-analysis name="redo"></svg-analysis>
+                        </el-icon>
+                    </el-button>
+                </el-button-group>
+                <el-divider direction="vertical"></el-divider>
+                <el-button text circle size="small" :disabled="!headerPanelProps.deleteEnabled" @click="onDeleteClick">
+                    <el-icon title="删除 delete" :class="``" :size="20">
+                        <svg-analysis name="delete"></svg-analysis>
+                    </el-icon>
+                </el-button>
+                <el-divider direction="vertical"></el-divider>
+                <el-button text circle size="small" @click="onTreeClick">
+                    <el-icon title="组件树" :size="20">
+                        <svg-analysis name="tree-list"></svg-analysis>
+                    </el-icon>
+                </el-button>
+                <el-divider direction="vertical"></el-divider>
+                <el-button-group>
+                    <el-button text circle size="small" @click="onImportClick">
+                        <el-icon title="导入数据模型" :size="20">
+                            <svg-analysis name="import-json"></svg-analysis>
+                        </el-icon>
+                    </el-button>
+                    <el-button text circle size="small" @click="onExportClick">
+                        <el-icon title="导出数据模型" :size="20">
+                            <svg-analysis name="export-json"></svg-analysis>
+                        </el-icon>
+                    </el-button>
+                </el-button-group>
+                <el-divider direction="vertical"></el-divider>
+                <el-popover placement="bottom" :width="240" trigger="hover" :disabled="!headerPanelProps.alignEnabled">
+                    <template #reference>
+                        <el-button text circle size="small" :disabled="!headerPanelProps.alignEnabled">
+                            <el-icon title="对齐" :size="20">
+                                <svg-analysis name="align"></svg-analysis>
+                            </el-icon>
+                        </el-button>
+                    </template>
+                    <div class="flex justify-center">
+                        <el-button-group>
+                            <el-button text circle size="small" @click="alignSelected('left')">
+                                <el-icon title="左对齐" :size="20">
+                                    <svg-analysis name="align-left"></svg-analysis>
+                                </el-icon>
+                            </el-button>
+                            <el-button text circle size="small" @click="alignSelected('horizontally')">
+                                <el-icon title="水平居中" :size="20">
+                                    <svg-analysis name="align-horizontally"></svg-analysis>
+                                </el-icon>
+                            </el-button>
+                            <el-button text circle size="small" @click="alignSelected('right')">
+                                <el-icon title="右对齐" :size="20">
+                                    <svg-analysis name="align-right"></svg-analysis>
+                                </el-icon>
+                            </el-button>
+                            <el-button text circle size="small" @click="alignSelected('top')">
+                                <el-icon title="上对齐" :size="20">
+                                    <svg-analysis name="align-top"></svg-analysis>
+                                </el-icon>
+                            </el-button>
+                            <el-button text circle size="small" @click="alignSelected('vertically')">
+                                <el-icon title="垂直居中" :size="20">
+                                    <svg-analysis name="align-vertical"></svg-analysis>
+                                </el-icon>
+                            </el-button>
+                            <el-button text circle size="small" @click="alignSelected('bottom')">
+                                <el-icon title="下对齐" :size="20">
+                                    <svg-analysis name="align-bottom"></svg-analysis>
+                                </el-icon>
+                            </el-button>
+                            <el-button text circle size="small" @click="alignSelected('horizontal-distribution')">
+                                <el-icon title="水平分布" :size="20">
+                                    <svg-analysis name="horizontal-distribution"></svg-analysis>
+                                </el-icon>
+                            </el-button>
+                            <el-button text circle size="small" @click="alignSelected('vertical-distribution')">
+                                <el-icon title="垂直分布" :size="20">
+                                    <svg-analysis name="vertical-distribution"></svg-analysis>
+                                </el-icon>
+                            </el-button>
+                        </el-button-group>
+                    </div>
+                </el-popover>
+                <el-divider direction="vertical"></el-divider>
+                <el-button-group>
+                    <el-button
+                        text
+                        circle
+                        size="small"
+                        :disabled="!headerPanelProps.groupEnabled"
+                        @click="onGroupClick"
+                    >
+                        <el-icon title="组合" :size="20">
+                            <svg-analysis name="group"></svg-analysis>
+                        </el-icon>
+                    </el-button>
+                    <el-button
+                        text
+                        circle
+                        size="small"
+                        :disabled="!headerPanelProps.unGroupEnabled"
+                        @click="onUngroupClick"
+                    >
+                        <el-icon title="取消组合" :size="20">
+                            <svg-analysis name="ungroup"></svg-analysis>
+                        </el-icon>
+                    </el-button>
+                </el-button-group>
+                <el-divider direction="vertical" v-if="!is_npm_env"></el-divider>
+                <el-button text circle size="small" @click="onDrawLineClick" v-if="!is_npm_env">
+                    <el-icon title="连线编辑模式" :size="20" :class="drawline_selected ? 'icon-selected' : ''">
+                        <svg-analysis name="pen-line"></svg-analysis>
+                    </el-icon>
+                </el-button>
+            </div>
+            <div class="flex justify-center items-center">
+                <el-tag v-if="headerPanelProps.realTimeData.show" size="small">
+                    {{ headerPanelProps.realTimeData.text }}
+                </el-tag>
+            </div>
+            <div class="flex items-center mr-20px">
+                <el-button text circle size="small" @click="emits('onReturnClick')">
+                    <el-icon title="返回" :size="20">
+                        <svg-analysis name="return"></svg-analysis>
+                    </el-icon>
+                </el-button>
+                <!-- <el-divider direction="vertical"></el-divider> -->
+                <!-- <el-button text circle size="small" @click="emits('onSaveClick')">
+                    <el-icon title="保存" :size="20">
+                        <svg-analysis name="save"></svg-analysis>
+                    </el-icon>
+                </el-button> -->
+                <!-- <el-divider v-if="headerPanelProps.useThumbnail" direction="vertical"></el-divider>
+                <el-button
+                    v-if="headerPanelProps.useThumbnail"
+                    text
+                    circle
+                    size="small"
+                    @click="emits('onThumbnailClick')"
+                >
+                    <el-icon title="生成缩略图" :size="20">
+                        <svg-analysis name="thumbnail"></svg-analysis>
+                    </el-icon>
+                </el-button> -->
+                <el-divider direction="vertical"></el-divider>
+                <el-button text circle size="small" @click="emits('onPreviewClick')">
+                    <el-icon title="预览" :size="20">
+                        <svg-analysis name="preview"></svg-analysis>
+                    </el-icon>
+                </el-button>
+                <el-button type="primary" size="small" @click="emits('onSaveAll')">保存</el-button>
+            </div>
+        </div>
+        <div class="flex items-center justify-between w-200px">
+            <el-button text circle size="small" @click="emits('update:rightAside', !headerPanelProps.rightAside)">
+                <el-icon :size="20" style="cursor: pointer">
+                    <svg-analysis v-if="headerPanelProps.rightAside" name="menu-unfold"></svg-analysis>
+                    <svg-analysis v-else name="menu-fold"></svg-analysis>
+                </el-icon>
+            </el-button>
+            <div class="flex items-center">
+                <el-button text circle size="small" @click="onHelpClick">
+                    <el-icon title="帮助" :size="20">
+                        <svg-analysis name="help"></svg-analysis>
+                    </el-icon>
+                </el-button>
+                <el-button text circle size="small" @click="toggle">
+                    <el-icon title="全屏" :size="20">
+                        <svg-analysis :name="isFullscreen ? 'exit-full-screen' : 'full-screen'"></svg-analysis>
+                    </el-icon>
+                </el-button>
+                <el-divider direction="vertical"></el-divider>
+                <el-button text circle size="small" @click="changeLockState">
+                    <el-icon :title="headerPanelProps.lockState ? '已锁定' : '已解锁'" :size="20">
+                        <svg-analysis :name="headerPanelProps.lockState ? 'lock' : 'unlock'"></svg-analysis>
+                    </el-icon>
+                </el-button>
+                <el-divider direction="vertical"></el-divider>
+                <el-button text circle size="small" class="mr-10px">
+                    <el-icon :title="isDark ? '切换到日间模式' : '切换到夜间模式'" :size="20" @click="toggleDark()">
+                        <svg-analysis :name="isDark ? 'light' : 'dark'"></svg-analysis>
+                    </el-icon>
+                </el-button>
+            </div>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+import { useDark, useToggle, useFullscreen } from '@vueuse/core'
+import { ElIcon, ElDivider, ElPopover, ElButton, ElButtonGroup, ElImage, ElText, ElTag } from 'element-plus'
+import SvgAnalysis from '@/components/mt-edit/components/svg-analysis/index.vue'
+import type { IRealTimeData } from '@/components/mt-edit/store/types'
+import { ref } from 'vue'
+type HeaderPanelProps = {
+    leftAside: boolean
+    rightAside: boolean
+    selectedItemsId: string[] //已选中组件的id
+    groupEnabled: boolean
+    unGroupEnabled: boolean
+    alignEnabled: boolean
+    deleteEnabled: boolean
+    lockState: boolean
+    undoEnabled: boolean
+    redoEnabled: boolean
+    realTimeData: IRealTimeData
+    useThumbnail?: boolean
+}
+const headerPanelProps = withDefaults(defineProps<HeaderPanelProps>(), {
+    leftAside: true,
+    rightAside: true,
+    useThumbnail: false,
+    selectedItemsId: () => []
+})
+const emits = defineEmits([
+    'update:leftAside',
+    'update:rightAside',
+    'onGroupClick',
+    'onUngroupClick',
+    'onDeleteClick',
+    'onExportClick',
+    'onTreeClick',
+    'alignSelected',
+    'update:lockState',
+    'onHelpClick',
+    'onRedoClick',
+    'onUndoClick',
+    'onImportClick',
+    'onPreviewClick',
+    'onReturnClick',
+    'onSaveClick',
+    'onDrawLineClick',
+    'onThumbnailClick',
+    'onSaveAll'
+])
+const isDark = useDark({
+    selector: '#mt-edit'
+})
+const { isFullscreen, toggle } = useFullscreen()
+const toggleDark = useToggle(isDark)
+const drawline_selected = ref(false)
+const is_npm_env = ref(import.meta.env.MODE === 'npm')
+const onGroupClick = () => {
+    emits('onGroupClick')
+}
+const onUngroupClick = () => {
+    emits('onUngroupClick')
+}
+const onDeleteClick = () => {
+    emits('onDeleteClick')
+}
+const onExportClick = () => {
+    emits('onExportClick')
+}
+const onTreeClick = () => {
+    emits('onTreeClick')
+}
+const alignSelected = (
+    type:
+        | 'left'
+        | 'horizontally'
+        | 'right'
+        | 'top'
+        | 'vertically'
+        | 'bottom'
+        | 'horizontal-distribution'
+        | 'vertical-distribution'
+) => {
+    emits('alignSelected', type)
+}
+const changeLockState = () => {
+    emits('update:lockState', !headerPanelProps.lockState)
+}
+const onHelpClick = () => {
+    emits('onHelpClick')
+}
+const onImportClick = () => {
+    emits('onImportClick')
+}
+const onDrawLineClick = () => {
+    drawline_selected.value = !drawline_selected.value
+    emits('onDrawLineClick', drawline_selected.value)
+}
+</script>
+<style scoped>
+.icon-selected {
+    background-color: #ecf5ff;
+    color: #409eff;
+}
+.title_text {
+    font-size: 15px;
+    font-weight: 600;
+    padding-left: 20px;
+}
+</style>
diff --git a/src/components/mt-edit/components/layout/left-aside-list/index.vue b/src/components/mt-edit/components/layout/left-aside-list/index.vue
new file mode 100644
index 0000000..369a5e6
--- /dev/null
+++ b/src/components/mt-edit/components/layout/left-aside-list/index.vue
@@ -0,0 +1,272 @@
+<template>
+    <div>
+        <el-button type="primary" style="float: right; margin-right: 5px" size="small" @click="onAddClick">
+            <el-icon><Plus /></el-icon>
+            新增图纸
+        </el-button>
+        <el-table
+            :data="dataTrees"
+            style="width: 100%; padding-top: 10px"
+            :show-header="false"
+            highlight-current-row
+            ref="multipleTable"
+            @row-click="onRowClick"
+            empty-text="暂无数据"
+            row-key="id"
+        >
+            <el-table-column prop="name" label="名称" />
+            <el-table-column label="操作" align="center" width="60" #default="scope">
+                <el-tooltip content="修改" placement="top">
+                    <el-icon @click.stop="update(scope.$index, scope.row)" style="cursor: pointer">
+                        <Edit />
+                    </el-icon>
+                </el-tooltip>
+                <el-tooltip content="删除" placement="top">
+                    <el-icon @click.stop="del(scope.$index)" style="margin-left: 5px; cursor: pointer">
+                        <Delete />
+                    </el-icon>
+                </el-tooltip>
+            </el-table-column>
+            <el-table-column label="操作" width="40">
+                <template #default>
+                    <el-tooltip content="拖拽" placement="top">
+                        <div class="drag-handle">⋮⋮⋮</div>
+                    </el-tooltip>
+                </template>
+            </el-table-column>
+        </el-table>
+        <!-- 新增/修改 -->
+        <el-dialog draggable v-model="dialogFormVisible" :title="dialog_title" width="500px" destroy-on-close>
+            <el-form :model="form" ref="formRef" :rules="rules">
+                <el-form-item label="图纸名称" :label-width="formLabelWidth" prop="name">
+                    <el-input v-model="form.name" autocomplete="off" placeholder="请输入图纸名称" />
+                </el-form-item>
+            </el-form>
+            <template #footer>
+                <div class="dialog-footer">
+                    <el-button @click="dialogFormVisible = false">取消</el-button>
+                    <el-button type="primary" @click="saveDialog(form)">确定</el-button>
+                </div>
+            </template>
+        </el-dialog>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref, computed, watch, onMounted, nextTick } from 'vue'
+import {
+    ElButton,
+    ElDialog,
+    ElForm,
+    ElFormItem,
+    ElInput,
+    ElTable,
+    ElTableColumn,
+    ElIcon,
+    ElMessage,
+    ElMessageBox
+} from 'element-plus'
+import { useDataStore } from '@/stores/menuList'
+import { globalStore } from '@/components/mt-edit/store/global'
+import type { IExportJson } from '@/components/mt-edit/components/types'
+import { useExportJsonToDoneJson } from '@/components/mt-edit/composables/index'
+import { cacheStore } from '@/components/mt-edit/store/cache'
+import { queryPage } from '@/api/index'
+import Sortable from 'sortablejs'
+
+const useData = useDataStore()
+
+// 弹框
+const dialogFormVisible = ref(false)
+const dialog_title = ref('新增图纸')
+const formLabelWidth = '100px'
+const globalIndex = ref(-1)
+const multipleTable: any = ref(null)
+const { pid } = useData // 解构出 myArray 状态
+
+interface PageQuery {
+    /** 页码 */
+    pageNum: number
+
+    /** 条数 */
+    pageSize: number
+
+    /** 父id */
+    pid: string | number | undefined
+}
+
+let form = reactive({
+    name: ''
+})
+const formRef = ref()
+
+const dataTrees = computed(() => useData.dataTree)
+
+interface PageData {
+    records: any[] // 根据实际字段类型定义
+}
+
+// 监听数据变化，数据加载完成后初始化拖拽
+watch(
+    () => dataTrees.value,
+    newVal => {
+        if (newVal.length > 0) {
+            initSortable()
+        }
+    },
+    { immediate: true, deep: true }
+)
+
+// 在 script setup 中定义 sortableInstance
+const sortableInstance = ref<any>(null)
+
+// 修改 initSortable 方法中的实例挂载与销毁逻辑
+const initSortable = () => {
+    nextTick(() => {
+        const tbody = multipleTable.value.$el.querySelector('.el-table__body-wrapper tbody')
+        if (!tbody) {
+            console.error('未找到 tbody 元素')
+            return
+        }
+
+        // 销毁旧实例
+        if (sortableInstance.value) {
+            sortableInstance.value.destroy()
+        }
+
+        // 创建新实例并保存到 sortableInstance
+        sortableInstance.value = new Sortable(tbody, {
+            animation: 150,
+            ghostClass: 'sortable-ghost',
+            onEnd: ({ newIndex, oldIndex }) => {
+                // 确保 newIndex 和 oldIndex 都存在且不相等
+                if (newIndex === undefined || oldIndex === undefined || newIndex === oldIndex) return
+
+                const targetItem = dataTrees.value.splice(oldIndex, 1)[0]
+                dataTrees.value.splice(newIndex, 0, targetItem)
+            }
+        })
+    })
+}
+
+//form表单校验规则
+const rules = {
+    name: [{ required: true, message: '图纸名称不能为空', trigger: 'blur' }]
+}
+
+// 使用watch监听myValue的变化
+watch(
+    () => useData.loading,
+    (newValue, oldValue) => {
+        if (newValue !== oldValue) {
+            // 第一条默认选中
+            if (dataTrees.value.length > 0) {
+                if (dataTrees.value) {
+                    multipleTable.value.setCurrentRow(dataTrees.value[0]) // 设置第一行为当前行
+                    onRowClick(dataTrees.value[0])
+                }
+            }
+        }
+    }
+)
+
+const onAddClick = () => {
+    Object.assign(form, { name: '' })
+    //打开弹窗
+    dialogFormVisible.value = true
+}
+
+// 删除功能，传索引行数
+function del(index: number) {
+    ElMessageBox.confirm('确定删除?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+    })
+        .then(() => {
+            // splice方法，传两个参数：第几行开始，删除多少条（如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素）
+            dataTrees.value.splice(index, 1)
+            ElMessage({
+                type: 'success',
+                message: '删除成功'
+            })
+        })
+        .catch(() => {
+            ElMessage({
+                type: 'info',
+                message: '删除取消'
+            })
+        })
+}
+// 点击行
+const onRowClick = async (row: any) => {
+    useData.placeKid(row.kId)
+    const json: IExportJson = JSON.parse(row.path)
+    const { canvasCfg, gridCfg, importDoneJson } = useExportJsonToDoneJson(json)
+    canvasCfg.drag_offset.x = 0
+    canvasCfg.drag_offset.y = 0
+    canvasCfg.scale = 1
+    globalStore.canvasCfg = canvasCfg
+    globalStore.gridCfg = gridCfg
+    globalStore.setGlobalStoreDoneJson(importDoneJson)
+    cacheStore.addHistory(globalStore.done_json)
+}
+
+const saveDialog = async (form: any) => {
+    // 校验表单
+    if (!formRef) return
+    const valid = await formRef.value.validate()
+    if (!valid) return
+    // 提交请求
+    if (globalIndex.value >= 0) {
+        //表示编辑
+        // dataTrees[globalIndex.value] = form;
+        useData.modify(form.kId, form.name)
+        //还原回去
+        globalIndex.value = -1
+    } else {
+        //新增
+        useData.append(form.name)
+        // dataTrees.push(form);
+    }
+    dialogFormVisible.value = false
+}
+
+// 修改功能
+function update(index: number, row: any) {
+    // const newObj = Object.assign({}, row);
+    // form = reactive(newObj);
+    Object.assign(form, row)
+    //把当前编辑的行号赋值给全局保存的行号
+    globalIndex.value = index
+    dialogFormVisible.value = true
+}
+</script>
+
+<style scoped lang="less">
+::v-deep(.el-table--border th.el-table__cell),
+::v-deep(.el-table td.el-table__cell) {
+    border-bottom: none !important;
+}
+
+::v-deep(.el-table--border .el-table__cell) {
+    border-right: none !important;
+}
+
+::v-deep(.el-table--group, .el-table--border) {
+    border: none !important;
+}
+
+.el-table::before {
+    height: 0;
+}
+
+::v-deep(.el-table--fit .el-table__inner-wrapper::before) {
+    width: 0;
+}
+
+svg {
+    width: 15px;
+    height: 15px;
+}
+</style>
diff --git a/src/components/mt-edit/components/layout/left-aside/index.vue b/src/components/mt-edit/components/layout/left-aside/index.vue
new file mode 100644
index 0000000..22ce7f6
--- /dev/null
+++ b/src/components/mt-edit/components/layout/left-aside/index.vue
@@ -0,0 +1,387 @@
+<template>
+    <div id="mt-left-aside" class="pt-10px h-1/1 box-border p-x-10px">
+        <el-input v-model="search_str" class="pb-10px pr-10px" placeholder="请输入关键字进行搜索"></el-input>
+        <div style="height: calc(100vh - 243px)">
+            <el-scrollbar class="pr-10px" :always="true" :view-style="{ height: '100%', 'overflow-x': 'hidden' }">
+                <el-collapse v-model="active_names">
+                    <el-collapse-item
+                        v-for="config_item_key in checked_keys"
+                        :key="config_item_key"
+                        :title="config_item_key"
+                        :name="config_item_key"
+                    >
+                        <div class="flex flex-wrap">
+                            <div
+                                draggable="true"
+                                @dragstart="onDragStart(config_item_key, item.id)"
+                                @touchstart.passive="onDragStart(config_item_key, item.id)"
+                                class="w-120px h-40px"
+                                v-for="(item, index) in getFilteritems(
+                                    leftAsideProps.leftAsideConfig.get(config_item_key)
+                                )"
+                                :key="item.id"
+                            >
+                                <el-tooltip
+                                    v-model:visible="is_show_tooltip[`${config_item_key}${item.id}`]"
+                                    placement="right"
+                                    :width="200"
+                                    :effect="isDark ? 'dark' : 'light'"
+                                    :show-arrow="false"
+                                    :hide-after="0"
+                                    trigger="hover"
+                                    :enterable="false"
+                                    :offset="getOffset(index + 1)"
+                                >
+                                    <div class="flex">
+                                        <el-image
+                                            draggable="false"
+                                            class="w-30px h-30px select-none"
+                                            :class="isDark ? 'bg-amber-50' : ''"
+                                            :src="item.thumbnail"
+                                        />
+                                        <span class="textBox">{{ item.title }}</span>
+                                    </div>
+
+                                    <template #content>
+                                        <div class="flex justify-center items-center">
+                                            <div class="flex flex-col">
+                                                <el-text>{{ item.title }}</el-text>
+                                                <el-image
+                                                    class="w-100px h-100px pt-5px"
+                                                    :class="isDark ? 'bg-amber-50' : ''"
+                                                    :src="item.thumbnail"
+                                                />
+                                            </div>
+                                        </div>
+                                    </template>
+                                </el-tooltip>
+                            </div>
+                        </div>
+                    </el-collapse-item>
+                </el-collapse>
+            </el-scrollbar>
+        </div>
+        <div class="h-[calc(10%-1px)] flex justify-center items-center ct-border" style="padding-top: 10px">
+            <el-button class="w-80/100" @click="onManageClick">管理</el-button>
+        </div>
+        <el-dialog v-model="manage_dialog_visiable" title="图库管理" width="50%" destroy-on-close>
+            <div class="flex">
+                <div>
+                    <div>
+                        <!-- <div class="flex justify-center">
+                            <el-checkbox v-model="check_all" :indeterminate="is_indeterminate">全选</el-checkbox>
+                        </div> -->
+                        <el-scrollbar height="50vh">
+                            <el-tree
+                                ref="treeRef"
+                                :data="classify_list"
+                                :highlight-current="true"
+                                @check-change="handleCheckChange"
+                                node-key="label"
+                                :default-checked-keys="checked_keys"
+                                @node-click="onNodeClick"
+                            ></el-tree>
+                        </el-scrollbar>
+                        <!-- <el-upload
+                            ref="uploadRef"
+                            class="w-24px h-24px"
+                            v-model:file-list="up_img_list"
+                            :auto-upload="false"
+                            :limit="1"
+                            :show-file-list="false"
+                            :on-change="onUpLoadChange"
+                            accept="image/*"
+                        >
+                            <el-button type="primary">本地上传</el-button>
+                        </el-upload> -->
+                        <el-button type="primary" @click="checkClick()">新增图元</el-button>
+                        <add-element :show="openCheck" @update:show="updateOpenCheck"></add-element>
+                    </div>
+                </div>
+
+                <el-divider direction="vertical" class="h-50vh ml-40px"></el-divider>
+                <div v-if="selected_node_key">
+                    <el-scrollbar height="50vh" :always="true">
+                        <div class="flex flex-wrap">
+                            <div
+                                v-for="item in leftAsideProps.leftAsideConfig.get(selected_node_key)"
+                                :key="item.id"
+                                class="w-160px h-160px flex flex-wrap justify-center items-center cursor-pointer relative"
+                                @mouseenter="show_del_local_file = item.id"
+                                @mouseleave="show_del_local_file = null"
+                            >
+                                <div class="flex flex-col items-center">
+                                    <el-image
+                                        class="w-60px h-60px"
+                                        :class="isDark ? 'bg-amber-50' : ''"
+                                        :src="item.thumbnail"
+                                    />
+                                    <div class="w-160px h-60px flex justify-center items-center">
+                                        <el-text truncated>{{ item.title }}</el-text>
+                                    </div>
+                                    <div
+                                        v-if="
+                                            selected_node_key !== '数据绑定图元' &&
+                                            selected_node_key !== '基础图元' &&
+                                            show_del_local_file == item.id
+                                        "
+                                        class="absolute w-160px h-160px left-0 top-0 opacity-80 bg-light-300 flex justify-center items-center"
+                                    >
+                                        <el-button type="danger" @click="onDelLocalFile(item)">删除</el-button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </el-scrollbar>
+                </div>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+<script setup lang="ts">
+import { computed, reactive, ref, watch } from 'vue'
+import {
+    ElInput,
+    ElCollapse,
+    ElCollapseItem,
+    ElButton,
+    ElScrollbar,
+    ElImage,
+    ElTooltip,
+    ElText,
+    ElDialog,
+    ElCheckbox,
+    ElDivider,
+    ElTree,
+    ElUpload,
+    ElMessageBox,
+    type UploadUserFile,
+    ElMessage,
+    type UploadFile
+} from 'element-plus'
+import SvgAnalysis from '@/components/mt-edit/components/svg-analysis/index.vue'
+import { useDark, useLocalStorage } from '@vueuse/core'
+import type {
+    ILeftAsideConfig,
+    ILeftAsideConfigItem,
+    ILeftAsideConfigItemPublic
+} from '@/components/mt-edit/store/types'
+import { globalStore } from '@/components/mt-edit/store/global'
+import { blobToBase64 } from '@/components/mt-edit/utils'
+import AddElement from '@/components/mt-edit/components/add-element/index.vue'
+import { deleteElement } from '@/api/index'
+import { leftAsideStore } from '@/export'
+import { useDataStore } from '@/stores/menuList'
+
+type LeftAsideProps = {
+    leftAsideConfig: ILeftAsideConfig
+}
+const leftAsideProps = withDefaults(defineProps<LeftAsideProps>(), {
+    leftAsideConfig: () => new Map<string, ILeftAsideConfigItem[]>()
+})
+const isDark = useDark({
+    selector: '#mt-edit'
+})
+const uploadRef = ref()
+// 从本地储存中查被禁用的类别
+const disable_classify = useLocalStorage<string[]>('mt-disable-classify', [])
+// 上传的文件也存到本地储存中
+const local_file = useLocalStorage<ILeftAsideConfigItem[]>('mt-local-file', [])
+// leftAsideProps.leftAsideConfig.set('本地文件', local_file.value)
+const treeRef = ref()
+const is_show_tooltip: Record<string, boolean> = reactive({})
+const active_names = ref([])
+const search_str = ref()
+const manage_dialog_visiable = ref(false)
+const up_img_list = ref<UploadUserFile[]>([])
+const show_del_local_file = ref<null | string>(null)
+const classify_list = computed(() =>
+    [...leftAsideProps.leftAsideConfig.keys()].map(m => {
+        return { label: m }
+    })
+)
+const useData = useDataStore()
+
+// const classify_list = computed(() =>
+//     [...leftAsideProps.leftAsideConfig.keys()]
+//         // 当 useData.graphicDisplay 为 true 时不包含「数据绑定图元」
+//         .filter(key => !(useData.graphicDisplay && key === '数据绑定图元'))
+//         .map(m => {
+//             return { label: m }
+//         })
+// )
+
+watch(
+    () => leftAsideProps,
+    newVal => {
+        // checked_keys.value = [...leftAsideProps.leftAsideConfig.keys()]
+        //     .filter(key => !(useData.graphicDisplay && key === '数据绑定图元'))
+        //     .map(m => {
+        //         return { label: m }
+        //     })
+        //     .map(m => m.label)
+        checked_keys.value = [...leftAsideProps.leftAsideConfig.keys()]
+            .map(m => {
+                return { label: m }
+            })
+            .map(m => m.label)
+    },
+    { deep: true } // 添加深度监听配置
+)
+
+const checked_keys = ref<string[]>(
+    classify_list.value.filter(f => !disable_classify.value.includes(f.label)).map(m => m.label)
+)
+
+const selected_node_key = ref()
+const check_all = computed({
+    get: () => {
+        return classify_list.value.length == checked_keys.value.length
+    },
+    set: val => {
+        if (val) {
+            checked_keys.value = classify_list.value.map(m => m.label)
+        } else {
+            checked_keys.value = []
+            treeRef.value?.setCheckedNodes([])
+        }
+    }
+})
+const is_indeterminate = computed(() => {
+    return checked_keys.value.length > 0 && checked_keys.value.length < classify_list.value.length
+})
+const getOffset = (index: number) => {
+    return index % 4 == 0 ? 40 : index % 4 == 3 ? 80 : index % 4 == 2 ? 120 : 160
+}
+const getFilteritems = (arr: ILeftAsideConfigItemPublic[] | undefined): ILeftAsideConfigItemPublic[] => {
+    if (!arr) {
+        return []
+    }
+    if (search_str.value) {
+        return arr.filter(f => f.title.includes(search_str.value))
+    }
+    return arr
+}
+const onDragStart = (config_item_key: string, item_id: string) => {
+    if (!config_item_key || !item_id) {
+        console.error('拖拽初始化失败', config_item_key, item_id)
+        return
+    }
+    is_show_tooltip[`${config_item_key}${item_id}`] = false
+    globalStore.setIntention('create')
+    globalStore.setCreateItemInfo({
+        config_key: config_item_key,
+        item_id
+    })
+}
+const onManageClick = () => {
+    manage_dialog_visiable.value = true
+}
+const handleCheckChange = (data: { label: string }, checked: boolean, indeterminate: boolean) => {
+    if (checked && !checked_keys.value.includes(data.label)) {
+        checked_keys.value.push(data.label)
+    } else if (!checked) {
+        checked_keys.value = checked_keys.value.filter(f => f !== data.label)
+    }
+    disable_classify.value = classify_list.value.filter(f => !checked_keys.value.includes(f.label)).map(m => m.label)
+}
+const onNodeClick = ({ label }: { label: string }) => {
+    selected_node_key.value = label
+}
+const onUpLoadChange = (e: UploadFile) => {
+    if (!e.raw!.type.includes('image/')) {
+        ElMessage.error('只能上传图片!')
+        uploadRef.value.clearFiles()
+        up_img_list.value = []
+        return false
+    } else if (e.raw!.size / 1024 / 1024 > 1) {
+        ElMessage.error('不能上传超过1MB的图像!')
+        uploadRef.value.clearFiles()
+        up_img_list.value = []
+        return false
+    }
+    blobToBase64(e.raw!).then(base64 => {
+        const id = e.name.split('.')[0]
+        const config: ILeftAsideConfigItem = {
+            id: id,
+            title: id,
+            type: 'img',
+            thumbnail: base64 as string,
+            props: {},
+            common_animations: {
+                val: '',
+                delay: 'delay-0s',
+                speed: 'slow',
+                repeat: 'infinite'
+            }
+        }
+        const find_index = local_file.value.findIndex(f => f.id == id)
+        if (find_index != -1) {
+            ElMessage.info('存在同名文件,已覆盖!')
+            local_file.value.splice(find_index, 1)
+        }
+        local_file.value.push(config)
+        leftAsideProps.leftAsideConfig.set('本地文件', local_file.value)
+        uploadRef.value.clearFiles()
+        up_img_list.value = []
+        selected_node_key.value = '本地文件'
+        treeRef.value?.setCurrentKey('本地文件')
+    })
+}
+
+// 删除
+function onDelLocalFile(item: ILeftAsideConfigItem) {
+    ElMessageBox.confirm('确定删除?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+    })
+        .then(() => {
+            deleteElement({ id: item.id }).then((res: any) => {
+                if (res.code == 'A0000') {
+                    ElMessage.success('删除成功')
+                    // 删除svg
+                    leftAsideStore.svgDelete(selected_node_key.value, item.id)
+                }
+            })
+        })
+        .catch(() => {
+            ElMessage({
+                type: 'info',
+                message: '删除取消'
+            })
+        })
+}
+
+// const onDelLocalFile = (item: ILeftAsideConfigItem) => {
+//      const find_index = local_file.value.findIndex(f => f.id == id)
+//      if (find_index != -1) {
+//          local_file.value.splice(find_index, 1)
+//      }
+//      leftAsideProps.leftAsideConfig.set('本地文件', local_file.value)
+// }
+
+// 新增图元
+const openCheck = ref(false)
+//打开弹窗按钮
+function checkClick() {
+    openCheck.value = true
+}
+//接收到子页面关闭弹窗的事件，改变openCheck的值，否则在刷新页面之前openCheck会一直是true，导致无法第二次打开弹窗
+const updateOpenCheck = (value: boolean) => {
+    openCheck.value = value
+}
+</script>
+<style>
+#mt-left-aside .el-collapse-item__header,
+#mt-left-aside .el-collapse-item__wrap {
+    background-color: transparent !important;
+}
+.textBox {
+    line-height: 30px;
+    margin-left: 5px;
+    overflow: hidden; /* 隐藏超出宽度的内容 */
+    white-space: nowrap; /* 禁止文本换行 */
+    text-overflow: ellipsis;
+}
+</style>
diff --git a/src/components/mt-edit/components/layout/main-panel/index.vue b/src/components/mt-edit/components/layout/main-panel/index.vue
new file mode 100644
index 0000000..aaaa5df
--- /dev/null
+++ b/src/components/mt-edit/components/layout/main-panel/index.vue
@@ -0,0 +1,1514 @@
+<template>
+    <div class="overflow-hidden w-1/1 h-1/1" @wheel="onMouseWheel">
+        <div
+            id="mtCanvasArea"
+            ref="canvasAreaRef"
+            :class="`canvasArea  ${globalStore.intention == 'runDragCanvas' ? 'cursor-grab' : ''}`"
+            @drop="onDrop"
+            @dragover="onDragOver"
+            @touchstart="onDrop($event, true)"
+            @mousedown="onMouseDown"
+            @mousemove="onCanvasMove"
+            @click.right.prevent="onCanvasRightClick"
+        >
+            <pattern-grid v-if="globalStore.gridCfg.enabled" :grid="globalStore.gridCfg.size"></pattern-grid>
+            <render-core
+                v-model:done-json="done_json"
+                :canvas-cfg="globalStore.canvasCfg"
+                :grid-cfg="globalStore.gridCfg"
+                :show-ghost-dom="globalStore.selected_items_id?.length > 1 ? false : true"
+                :canvas-dom="canvasAreaRef"
+                :global-lock="globalStore.lock"
+                :line-append-enable="mainPanelProps.lineAppendEnable"
+                @on-mouse-down="onRenderCoreMouseDown"
+                @on-item-move="onItemMove"
+                @on-move-mouse-up="onMoveMouseUp"
+                @on-item-mouse-enter="onItemMouseEnter"
+                @on-item-mouse-leave="onItemMouseLeave"
+                @set-intention="setIntention"
+                @on-item-resize-done="onItemResizeDone"
+                @on-item-rotate-done="onItemRotateDone"
+                @on-item-right-click.stop="onItemRightClick"
+            ></render-core>
+            <selected-area
+                v-show="globalStore.intention === 'beginMulSelect'"
+                ref="selectedAreaRef"
+                :scale-ratio="globalStore.canvasCfg.scale"
+                :target-dom="canvasAreaRef"
+                @selected-area-mouse-up="onSelectedAreaMouseUp"
+            ></selected-area>
+            <drag-canvas
+                ref="dragCanvasRef"
+                :scale-ratio="globalStore.canvasCfg.scale"
+                @drag-canvas-mouse-down="dragCanvasMouseDown"
+                @drag-canvas-mouse-move="dragCanvasMouseMove"
+                @drag-canvas-mouse-up="dragCanvasMouseUp"
+            ></drag-canvas>
+            <draw-line-render
+                v-show="globalStore.intention == 'drawSysLineStart'"
+                ref="dragLineRenderRef"
+                v-model:item-json="draw_line_data"
+                :canvas-cfg="globalStore.canvasCfg"
+                :canvas-dom="canvasAreaRef"
+                :grid="globalStore.gridCfg"
+                :mode="'pen'"
+                @draw-line-end="onDrawLineEnd"
+            ></draw-line-render>
+            <div v-if="globalStore.intention == 'adsorbStart' || globalStore.intention == 'adsorbEnd'">
+                <div
+                    v-for="item in cacheStore.adsorbPoint"
+                    :key="item.type"
+                    class="adsorb-point touch-none"
+                    :style="{ left: item.x + 'px', top: item.y + 'px' }"
+                    :data-id="item.type"
+                    @mouseenter="onAdsorbPointMouseEnter(item)"
+                    @mouseout="onAdsorbPointMouseOut()"
+                ></div>
+            </div>
+
+            <div id="guide-x"></div>
+            <div id="guide-y"></div>
+        </div>
+        <context-menu
+            :menu-info="contextMenuStore.menuInfo"
+            :show="globalStore.intention == 'showContextMenu'"
+            @on-context-menu-click="onContextMenuClick"
+        ></context-menu>
+    </div>
+</template>
+<script setup lang="ts">
+import { globalStore } from '@/components/mt-edit/store/global'
+import { leftAsideStore } from '@/components/mt-edit/store/left-aside'
+import { ElMessage } from 'element-plus'
+import RenderCore from '@/components/mt-edit/components/render-core/index.vue'
+import PatternGrid from '@/components/mt-edit/components/pattern-grid/index.vue'
+import { computed, ref, reactive, onMounted, onUnmounted, watch, nextTick } from 'vue'
+import {
+    alignToGrid,
+    getRealityXY,
+    randomString,
+    objectDeepClone,
+    createGroupInfo,
+    cancelGroup,
+    calculateGuideY,
+    calculateGuideX,
+    rotatePoint,
+    getRectCoordinate,
+    getRectCenterCoordinate,
+    handleAlign
+} from '@/components/mt-edit/utils'
+import type {
+    AdsorbPointType,
+    ContextMenuInfoType,
+    GlobalStoreIntention,
+    IDoneJson,
+    ILeftAsideConfigItem
+} from '@/components/mt-edit/store/types'
+import SelectedArea from '@/components/mt-edit/components/selected-area/index.vue'
+import type { IAreaBinfo } from '../../selected-area/types'
+import { cacheStore } from '@/components/mt-edit/store/cache'
+import type { onItemMoveParams } from '../../render-core/types'
+import { useUpdateSysLine } from '@/components/mt-edit/composables/sys-line'
+import DragCanvas from '@/components/mt-edit/components/drag-canvas/index.vue'
+import ContextMenu from '@/components/mt-edit/components/context-menu/index.vue'
+import { contextMenuStore } from '@/components/mt-edit/store/context-menu'
+import DrawLineRender from '@/components/mt-edit/components/draw-line-render/index.vue'
+import { configStore } from '@/components/mt-edit/store/config'
+import { useDataStore } from '@/stores/menuList'
+import { genExportJson, useExportJsonToDoneJson } from '@/components/mt-edit/composables/index'
+import type { IExportDoneJson, IExportJson } from '../../../components/types'
+type MainPanelProps = {
+    groupEnabled: boolean
+    unGroupEnabled: boolean
+    deleteEnabled: boolean
+    lineAppendEnable?: boolean
+}
+const mainPanelProps = withDefaults(defineProps<MainPanelProps>(), {
+    lineAppendEnable: false
+})
+const useData = useDataStore()
+const canvasAreaRef = ref()
+const selectedAreaRef = ref<InstanceType<typeof SelectedArea>>()
+const dragCanvasRef = ref<InstanceType<typeof DragCanvas>>()
+const dragLineRenderRef = ref<InstanceType<typeof DrawLineRender>>()
+// 是否需要重新计算画布缩放中心点
+const is_need_recal_center = ref(true)
+let is_listen_keydown = false // 是否已经监听了键盘事件
+// 画布初始偏移坐标
+const init_drag_offset = reactive(globalStore.canvasCfg.drag_offset)
+//如果网格关闭或者没有开启网格对齐，网格大小为1
+const grid_align_size = computed(() =>
+    !globalStore.gridCfg.align || !globalStore.gridCfg.enabled ? 1 : globalStore.gridCfg.size
+)
+const done_json = computed({
+    get() {
+        return globalStore.done_json
+    },
+    set(val) {
+        globalStore.setGlobalStoreDoneJson(val)
+    }
+})
+const sys_line_init = configStore.sysComponent.find(f => f.type == 'sys-line')!
+const draw_line_init_data: IDoneJson = {
+    id: sys_line_init.id + '-' + randomString(),
+    title: sys_line_init.title,
+    type: sys_line_init.type,
+    binfo: {
+        left: 0,
+        top: 0,
+        width: 100,
+        height: 0,
+        angle: 0
+    },
+    resize: false,
+    rotate: false,
+    lock: false,
+    active: true,
+    hide: false,
+    props: {
+        ...sys_line_init.props,
+        point_position: {
+            title: '点坐标',
+            type: 'jsonEdit',
+            val: [
+                {
+                    x: 0,
+                    y: 0
+                },
+                {
+                    x: 0,
+                    y: 0
+                }
+            ],
+            disabled: true
+        }
+    },
+    tag: sys_line_init.id,
+    common_animations: sys_line_init.common_animations,
+    events: []
+}
+const draw_line_data = ref<IDoneJson>(objectDeepClone(draw_line_init_data))
+const onDrop = (e: DragEvent | TouchEvent, isTouch?: boolean) => {
+    beginListenerKeyDown()
+    if (globalStore.lock && globalStore.intention === 'create') {
+        ElMessage.error('画布已锁定，请先解锁！')
+        return
+    }
+    e.preventDefault()
+    if (isTouch && globalStore.intention !== 'create') {
+        if (globalStore.lock) {
+            globalStore.setIntention('beginDragCanvas')
+            dragCanvasRef.value?.onMouseDown(e)
+            return
+        }
+        if (mainPanelProps.lineAppendEnable) {
+            globalStore.setIntention('drawSysLineStart')
+            const { realityX, realityY } = getRealityXY(e, canvasAreaRef.value?.getBoundingClientRect())
+            draw_line_data.value = {
+                ...objectDeepClone(draw_line_init_data),
+                binfo: {
+                    left: alignToGrid(realityX / globalStore.canvasCfg.scale, grid_align_size.value),
+                    top: alignToGrid(realityY / globalStore.canvasCfg.scale, grid_align_size.value),
+                    width: 0,
+                    height: 0,
+                    angle: 0
+                }
+            }
+            dragLineRenderRef.value?.onMouseDown(e, 1, { x: 0, y: 0 })
+            return
+        }
+        globalStore.cancelAllSelect()
+        globalStore.setIntention('beginMulSelect')
+        selectedAreaRef.value?.onMouseDown(e)
+    }
+    if (globalStore.intention !== 'create') {
+        return
+    }
+    if (!globalStore.create_item_info) {
+        console.error('拖拽初始化失败', globalStore.create_item_info)
+        return
+    }
+    globalStore.setSelectItems([])
+    //找到要创建图形的信息
+    const find_cfg = leftAsideStore.config
+        .get(globalStore.create_item_info.config_key)
+        ?.find(f => f.id === globalStore.create_item_info!.item_id)
+    if (!find_cfg) {
+        console.error('拖拽配置不匹配', globalStore.create_item_info, leftAsideStore.config)
+        return
+    }
+    const deep_find_cfg = objectDeepClone<ILeftAsideConfigItem>(find_cfg)
+    // 自由连线 直角连线都有自定义宽高以及禁止缩放和旋转
+    const is_line = deep_find_cfg.type === 'sys-line'
+    // 横线
+    const is_vertical_line = deep_find_cfg.id === 'sys-line'
+    // 竖线
+    const is_horizontal_line = deep_find_cfg.id === 'sys-line-vertical'
+    //文字
+    const TEXT_VUE_IDS = ['text-vue', 'bind-dot-vue', 'bind-index-vue']
+    const is_text_vue = TEXT_VUE_IDS.includes(deep_find_cfg.id)
+
+    //根据配置创建图形
+    const { realityX, realityY } = getRealityXY(e, canvasAreaRef.value?.getBoundingClientRect())
+    const create_item: IDoneJson = {
+        id: deep_find_cfg.id + '-' + randomString(),
+        title: deep_find_cfg.title,
+        keyId: deep_find_cfg.keyId || '',
+        type: deep_find_cfg.type,
+        binfo: {
+            left: alignToGrid(realityX / globalStore.canvasCfg.scale, grid_align_size.value),
+            top: alignToGrid(realityY / globalStore.canvasCfg.scale, grid_align_size.value),
+            width: is_text_vue ? 150 : is_vertical_line ? 100 : is_horizontal_line ? 0 : 50,
+            height: is_horizontal_line ? 100 : is_vertical_line ? 0 : 50,
+            angle: 0
+        },
+        resize: is_line ? false : true,
+        rotate: is_line ? false : true,
+        lock: false,
+        active: true,
+        hide: false,
+        props: deep_find_cfg.props,
+        tag: deep_find_cfg.id,
+        common_animations: deep_find_cfg.common_animations,
+        use_proportional_scaling: deep_find_cfg.use_proportional_scaling || true,
+        events: [],
+        lineId: deep_find_cfg.lineId || '',
+        lineList: deep_find_cfg.lineList || [],
+        lineName: deep_find_cfg.lineName || '',
+        UID: deep_find_cfg.UID || [],
+        UIDName: deep_find_cfg.UIDName || '',
+        UIDNames: deep_find_cfg.UIDNames || []
+    }
+    if (deep_find_cfg.type === 'svg') {
+        create_item.symbol = deep_find_cfg.symbol
+    } else if (deep_find_cfg.type === 'img') {
+        create_item.thumbnail = deep_find_cfg.thumbnail
+    }
+    const done_json_temp = [...globalStore.done_json]
+    done_json_temp.push(create_item)
+    globalStore.setGlobalStoreDoneJson(done_json_temp)
+    globalStore.setSingleSelect(create_item.id)
+    globalStore.setIntention('none')
+    globalStore.setCreateItemInfo(null)
+    cacheStore.addHistory(done_json_temp)
+}
+
+// 改进的 createCustomItem 函数
+const createCustomItem = () => {
+    try {
+        const list = [
+            'c53cccb8c65201c192d8c57fbdb4d993-RdNsoqHYOZ',
+            'c53cccb8c65201c192d8c57fbdb4d993-O4jAyCBz1A',
+            'c53cccb8c65201c192d8c57fbdb4d993-XBd70oZ3kH',
+            'c53cccb8c65201c192d8c57fbdb4d993-FZfEOEctuD'
+        ]
+
+        const message = [
+            { id: 'c53cccb8c65201c192d8c57fbdb4d993-RdNsoqHYOZ', text: '发生时刻:2023-07-05 12:00:00' },
+            { id: 'c53cccb8c65201c192d8c57fbdb4d993-O4jAyCBz1A', text: '发生时刻:2023-07-06 14:20:00' },
+            { id: 'c53cccb8c65201c192d8c57fbdb4d993-XBd70oZ3kH', text: '传输中，你说你是谁？' },
+            { id: 'c53cccb8c65201c192d8c57fbdb4d993-FZfEOEctuD', text: '传输中，哈哈哈哈？' }
+        ]
+
+        // 查找传输设备图元
+        const transportDevices = globalStore.done_json.filter(item => list.includes(item.id))
+
+        if (transportDevices.length === 0) {
+            console.warn('未找到指定的传输设备图元')
+            return false
+        }
+
+        // 为每个传输设备添加旁边的文字图元
+        const textElementsToAdd: IDoneJson[] = []
+        const idsToRemove: string[] = []
+
+        transportDevices.forEach((device, index) => {
+            // 构造预期的旧文本图元 ID 模式 (基于设备 ID)
+            const expectedIdPrefix = `auto-text-${device.id}`
+
+            // 查找所有与当前设备关联的现有文本图元
+            const existingTextElements = globalStore.done_json.filter(item => item.id?.startsWith(expectedIdPrefix))
+
+            // 将这些旧图元的 ID 添加到待删除列表
+            idsToRemove.push(...existingTextElements.map(item => item.id!))
+
+            // 获取对应的消息文本
+            const deviceMessage = message.find(m => m.id === device.id)?.text || '默认提示信息'
+
+            // 创建新的文本图元
+            const textElement: IExportDoneJson = {
+                id: `auto-text-${device.id}-${randomString()}`, // 使用随机字符串确保唯一性
+                title: '动态文字',
+                type: 'vue',
+                tag: 'text-vue',
+                props: {
+                    text: deviceMessage, // 添加安全检查
+                    fontFamily: '黑体',
+                    fontSize: 14,
+                    fill: 'red',
+                    vertical: false
+                },
+                common_animations: {
+                    val: '',
+                    delay: 'delay-0s',
+                    speed: 'slow',
+                    repeat: 'infinite'
+                },
+                binfo: {
+                    left: (device.binfo?.left || 0) + (device.binfo?.width || 0) + 10,
+                    top: (device.binfo?.top || 0) + (device.binfo?.height || 0) / 2 - 10 + (index % 2 === 0 ? 20 : -20),
+                    width: 200,
+                    height: 50,
+                    angle: 0
+                },
+                resize: true,
+                rotate: true,
+                lock: false,
+                active: false,
+                hide: false,
+                UIDName: '',
+                events: []
+            }
+            textElementsToAdd.push(textElement)
+        })
+
+        // 从 done_json 中移除旧的文本图元
+        let updatedDoneJson = globalStore.done_json.filter(item => !idsToRemove.includes(item.id!))
+
+        // 添加新的文本图元
+        updatedDoneJson = [...updatedDoneJson, ...textElementsToAdd]
+
+        // 更新全局状态
+        globalStore.setGlobalStoreDoneJson(updatedDoneJson)
+        globalStore.setIntention('none')
+        cacheStore.addHistory(updatedDoneJson)
+
+        console.log('globalStore111456777', globalStore)
+        return true
+    } catch (error) {
+        console.error('创建动态图元时出错:', error)
+        return false
+    }
+}
+
+// const createCustomItem = () => {
+//     const list = [
+//         'c53cccb8c65201c192d8c57fbdb4d993-RdNsoqHYOZ',
+//         'c53cccb8c65201c192d8c57fbdb4d993-O4jAyCBz1A',
+//         'c53cccb8c65201c192d8c57fbdb4d993-XBd70oZ3kH'
+//     ]
+
+//     const message = [
+//         { id: 'c53cccb8c65201c192d8c57fbdb4d993-RdNsoqHYOZ', text: '发生时刻:2023-07-05 12:00:00' },
+//         { id: 'c53cccb8c65201c192d8c57fbdb4d993-O4jAyCBz1A', text: '发生时刻:2023-07-06 14:20:00' },
+//         { id: 'c53cccb8c65201c192d8c57fbdb4d993-XBd70oZ3kH', text: '传输中，你说你是谁？' }
+//     ]
+
+//     // 查找传输设备图元并添加文字图元
+//     const transportDevices = globalStore.done_json.filter(item =>
+//         // 假设传输设备有特定的标识，比如ID包含特定关键词或type为特定值
+//         // item.title?.includes('传输')
+//         // list.some(id => item.id?.includes(id))
+//         list.includes(item.id)
+//     )
+
+//     if (transportDevices.length == 0) {
+//         console.warn('未找到传输设备图元')
+//         return
+//     }
+
+//     // 为每个传输设备添加旁边的文字图元
+//     const textElementsToAdd: IExportDoneJson[] = []
+
+//     const idsToRemove: string[] = []
+
+//     transportDevices.forEach((device, index) => {
+//         // 构造预期的旧文本图元 ID 模式 (基于设备 ID)
+//         const expectedIdPrefix = `auto-text-${device.id}-`
+
+//         // 查找所有与当前设备关联的现有文本图元
+//         const existingTextElements = globalStore.done_json.filter(item => item.id?.startsWith(expectedIdPrefix))
+
+//         // 将这些旧图元的 ID 添加到待删除列表
+//         idsToRemove.push(...existingTextElements.map(item => item.id!))
+
+//         // 创建新的文本图元
+//         const textElement: IExportDoneJson = {
+//             id: `auto-text-${device.id}-${index}`, // 使用时间戳确保唯一性
+//             title: '动态文字',
+//             type: 'vue',
+//             tag: 'text-vue',
+//             props: {
+//                 text: message[index]?.text || '默认提示信息', // 添加安全检查
+//                 fontFamily: '黑体',
+//                 fontSize: 14,
+//                 fill: 'red',
+//                 vertical: false
+//             },
+//             common_animations: {
+//                 val: '',
+//                 delay: 'delay-0s',
+//                 speed: 'slow',
+//                 repeat: 'infinite'
+//             },
+//             binfo: {
+//                 left: (device.binfo?.left || 0) + (device.binfo?.width || 0) + 10,
+//                 top: (device.binfo?.top || 0) + (device.binfo?.height || 0) / 2 - 10 + (index % 2 === 0 ? 20 : -20), // 偶数下移20px，奇数上移20px
+//                 width: 200,
+//                 height: 50,
+//                 angle: 0
+//             },
+//             resize: true,
+//             rotate: true,
+//             lock: false,
+//             active: false,
+//             hide: false,
+//             UIDName: '',
+//             events: []
+//         }
+//         textElementsToAdd.push(textElement)
+//     })
+
+//     // 从 done_json 中移除旧的文本图元
+//     let updatedDoneJson = globalStore.done_json.filter(item => !idsToRemove.includes(item.id!))
+
+//     // 添加新的文本图元
+//     updatedDoneJson = [...updatedDoneJson, ...textElementsToAdd]
+// console.log(globalStore,'1111')
+//     // 更新全局状态
+//     globalStore.setGlobalStoreDoneJson(updatedDoneJson)
+//     globalStore.setIntention('none')
+//     cacheStore.addHistory(updatedDoneJson)
+
+//     console.log(globalStore,'2334')
+// }
+
+// 创建一个更可靠的初始化函数
+// const initCustomItems = () => {
+//     // 确保 DOM 已经准备就绪
+//     nextTick(() => {
+//         // 延迟执行以确保所有组件都已加载
+//         setTimeout(() => {
+//             createCustomItem()
+//         }, 3000)
+//     })
+// }
+
+const initCustomItems = async () => {
+    // 等待DOM更新完成
+    await nextTick()
+
+    // 多次尝试创建，确保数据已加载
+    const attemptCreate = (attempt = 0) => {
+        if (attempt > 10) {
+            console.warn('超过最大尝试次数，停止创建动态图元')
+            return
+        }
+
+        const success = createCustomItem()
+
+        if (!success) {
+            // 如果失败，等待一段时间后重试
+            setTimeout(() => {
+                attemptCreate(attempt + 1)
+            }, 500)
+        } else {
+            console.log('动态图元创建成功')
+        }
+    }
+
+    // 延迟执行以确保所有组件都已加载
+    setTimeout(() => {
+        attemptCreate()
+    }, 1000)
+}
+
+const onDragOver = (e: DragEvent) => {
+    e.preventDefault()
+}
+const onRenderCoreMouseDown = (item: IDoneJson, e: MouseEvent) => {
+    beginListenerKeyDown()
+    if (globalStore.lock) {
+        return
+    }
+    // 如果开启了吸附或参考线功能，在点击时候将所有组件目前的边界信息存到缓存中 不存系统连线的边界
+    if (globalStore.canvasCfg.adsorp || globalStore.canvasCfg.guide) {
+        const allBoundingInfo = globalStore.done_json
+            // 如果不想让系统连线也能吸附就用下面的
+            // .filter((f) => !f.hide && f.type !== 'sys-line')
+            .filter(f => !f.hide)
+            .map(m => {
+                const { left, top, width, height, right, bottom } = document
+                    .getElementById(m.id)!
+                    .getBoundingClientRect()
+                return {
+                    id: m.id,
+                    type: m.type,
+                    left,
+                    top,
+                    width,
+                    height,
+                    right,
+                    bottom
+                }
+            })
+        cacheStore.setBoundingBox(allBoundingInfo)
+    }
+    if (!e.ctrlKey) {
+        // 如果当前id已经是选中状态了 则不需要取消其它组件的激活状态 也不需要重复设置选中状态
+        if (globalStore.selected_items_id.includes(item.id)) {
+            return
+        }
+        //将除了选中id的图形全部设置为非选中
+        globalStore.setSingleSelect(item.id)
+    } else if (e.ctrlKey && !item.lock) {
+        const find_item = globalStore.done_json.find(f => f.id == item.id)!
+        find_item.active = !find_item.active
+        globalStore.refreshSelectedItemsId()
+    }
+}
+const onMouseDown = (e: MouseEvent) => {
+    beginListenerKeyDown()
+    globalStore.cancelAllSelect()
+    // 锁定状态或者右键点击进行画布拖动
+    if (globalStore.lock || e.button == 2) {
+        globalStore.setIntention('beginDragCanvas')
+        dragCanvasRef.value?.onMouseDown(e)
+        return
+    }
+    if (mainPanelProps.lineAppendEnable) {
+        globalStore.setIntention('drawSysLineStart')
+        const { realityX, realityY } = getRealityXY(e, canvasAreaRef.value?.getBoundingClientRect())
+        draw_line_data.value = {
+            ...objectDeepClone(draw_line_init_data),
+            binfo: {
+                left: alignToGrid(realityX / globalStore.canvasCfg.scale, grid_align_size.value),
+                top: alignToGrid(realityY / globalStore.canvasCfg.scale, grid_align_size.value),
+                width: 0,
+                height: 0,
+                angle: 0
+            }
+        }
+        dragLineRenderRef.value?.onMouseDown(e, 1, { x: 0, y: 0 })
+        return
+    }
+    globalStore.setIntention('beginMulSelect')
+    selectedAreaRef.value?.onMouseDown(e)
+}
+/**
+ * 区域选择结束事件 之所以用getBoundingClientRect是为了处理旋转后的坐标
+ * @param area_binfo 区域选择的边界信息
+ */
+const onSelectedAreaMouseUp = (area_binfo: IAreaBinfo) => {
+    //区域选择要过滤掉锁定的组件
+    const done_json_temp = [...globalStore.done_json].map(m => {
+        const bounding_info = document.getElementById(m.id)?.getBoundingClientRect()
+        const canvas_area_bounding_info = canvasAreaRef.value?.getBoundingClientRect()
+        let { left, top, width, height } = m.binfo
+        if (bounding_info && canvas_area_bounding_info) {
+            left = (bounding_info.left - canvas_area_bounding_info.left) / globalStore.canvasCfg.scale
+            top = (bounding_info.top - canvas_area_bounding_info.top) / globalStore.canvasCfg.scale
+            width = bounding_info.width / globalStore.canvasCfg.scale
+            height = bounding_info.height / globalStore.canvasCfg.scale
+        }
+        // 左右是否包含
+        const contain_x = area_binfo.left < left && area_binfo.left + area_binfo.width > left + width
+        // 上下是否包含
+        const contain_y = area_binfo.top < top && area_binfo.top + area_binfo.height > top + height
+        if (contain_x && contain_y && !m.lock && !m.hide) {
+            m.active = true
+        }
+        return m
+    })
+
+    globalStore.setGlobalStoreDoneJson(done_json_temp)
+    globalStore.refreshSelectedItemsId()
+    globalStore.setIntention('none')
+}
+/**
+ * 创建组合组件
+ */
+const createGroupItem = () => {
+    // 根据选中的组件id，找到对应的需要组合的组件
+    const selected_items = objectDeepClone<IDoneJson[]>(
+        globalStore.done_json.filter(f => globalStore.selected_items_id.includes(f.id))
+    )
+    // 如果选中的组件属于连线的锚点跟随组件 并且要组合的组件不包含该连线 那么取消该连线的绑定关系
+    const temp_sys_lines = globalStore.done_json.filter(
+        f =>
+            f.type === 'sys-line' &&
+            (globalStore.selected_items_id.includes(f.props.bind_anchors.val.start?.id) ||
+                globalStore.selected_items_id.includes(f.props.bind_anchors.val.end?.id)) &&
+            !globalStore.selected_items_id.includes(f.id)
+    )
+    temp_sys_lines.forEach(f => {
+        f.props.bind_anchors.val = {
+            start: null,
+            end: null
+        }
+    })
+    const create_group_item = createGroupInfo(selected_items, canvasAreaRef.value, globalStore.canvasCfg.scale)
+    const done_json_temp = [...globalStore.done_json].filter(f => !globalStore.selected_items_id.includes(f.id))
+    done_json_temp.push(create_group_item)
+    globalStore.setGlobalStoreDoneJson(done_json_temp)
+    globalStore.setSingleSelect(create_group_item.id)
+    cacheStore.addHistory(globalStore.done_json)
+}
+const onUngroup = () => {
+    // 根据选中的组件id，找到对应的需要解除组合的组件
+    if (globalStore.selected_items_id.length != 1) {
+        ElMessage.error('只能解除组合组件!')
+        return
+    }
+    const selected_item_info = globalStore.done_json.find(f => f.id === globalStore.selected_items_id[0])
+    if (!selected_item_info) {
+        ElMessage.error('未知错误！无法找到解组信息')
+        return
+    }
+    if (selected_item_info.type != 'group') {
+        ElMessage.error('只能解除组合组件!')
+        return
+    }
+    //获取拆分后的组件信息
+    const split_group_items = cancelGroup(
+        selected_item_info,
+        canvasAreaRef.value,
+        globalStore.canvasCfg.scale,
+        grid_align_size.value
+    )
+    const done_json_temp = [...globalStore.done_json].filter(f => !globalStore.selected_items_id.includes(f.id))
+    globalStore.setGlobalStoreDoneJson([...done_json_temp, ...split_group_items])
+    globalStore.setSelectItems(split_group_items.map(m => m.id))
+    cacheStore.addHistory(globalStore.done_json)
+}
+const onItemMove = ({ move_item_bounding_info, move_binfo }: onItemMoveParams) => {
+    // 拿到画布的边界信息
+    const canvas_bounding_info = canvasAreaRef.value?.getBoundingClientRect()
+    // 开启了参考线或者吸附 才需要计算参考线属性和吸附距离
+    if (globalStore.canvasCfg.adsorp || globalStore.canvasCfg.guide) {
+        // 定义需要进行对比的缓存信息
+        let cache_store_bounding_box = cacheStore.boundingBox
+        // 如果移动的是多个 只需要对比缓存数据中未移动的图形边界计算吸附距离
+        if (globalStore.selected_items_id.length > 1 && move_item_bounding_info.length > 1) {
+            // 从缓存里面取出所有组件的边界除去本次移动图形的其它图形边界信息 缓存里本来就没有系统连线的信息 所以这里不用过滤
+            cache_store_bounding_box = cacheStore.boundingBox.filter(f => !globalStore.selected_items_id.includes(f.id))
+        }
+        // 如果不想让系统连线也能吸附就用下面的 过滤掉多选时候连线的边界
+        // const move_item_bounding_info_temp = move_item_bounding_info.filter(
+        //   (f) => f.type !== 'sys-line'
+        // );
+        const move_item_bounding_info_temp = move_item_bounding_info
+        const { y_info, move_x } = calculateGuideY(
+            cache_store_bounding_box,
+            globalStore.canvasCfg.adsorp_diff,
+            move_item_bounding_info_temp,
+            canvas_bounding_info,
+            globalStore.canvasCfg.scale
+        )
+        const { x_info, move_y } = calculateGuideX(
+            cache_store_bounding_box,
+            globalStore.canvasCfg.adsorp_diff,
+            move_item_bounding_info_temp,
+            canvas_bounding_info,
+            globalStore.canvasCfg.scale
+        )
+        globalStore.guideCfg.x = x_info
+        globalStore.guideCfg.y = y_info
+        // 吸附
+        if (move_x != 0 && globalStore.canvasCfg.adsorp) {
+            // 把当前移动的所有组件吸附到最近的点上
+            // globalStore.done_json.forEach((f) => {
+            //   if (globalStore.selected_items_id.includes(f.id)) {
+            //     f.binfo.left += move_x;
+            //   }
+            // });
+            globalStore.adsorp_diff.x = move_x
+        } else {
+            globalStore.adsorp_diff.x = 0
+        }
+        if (move_y != 0 && globalStore.canvasCfg.adsorp) {
+            // 把当前移动的所有组件吸附到最近的点上
+            // globalStore.done_json.forEach((f) => {
+            //   if (globalStore.selected_items_id.includes(f.id)) {
+            //     f.binfo.top += move_y;
+            //   }
+            // });
+            globalStore.adsorp_diff.y = move_y
+        } else {
+            globalStore.adsorp_diff.y = 0
+        }
+    }
+    // 如果多选的组件里有连线，并且连线的锚点绑定对应的组件不在多选里 那么清除掉连线的绑定关系
+    const clear_bind_sys_line = globalStore.done_json.filter(
+        f =>
+            f.type == 'sys-line' &&
+            globalStore.selected_items_id.includes(f.id) &&
+            (f.props.bind_anchors.val.start || f.props.bind_anchors.val.end)
+    )
+    // 循环将当前连线的绑定关系清空
+    clear_bind_sys_line.forEach(f => {
+        if (f.props.bind_anchors.val.start) {
+            if (!globalStore.selected_items_id.includes(f.props.bind_anchors.val.start.id)) {
+                // f.props.bind_anchors.val.start = null
+            }
+        }
+        if (f.props.bind_anchors.val.end) {
+            if (!globalStore.selected_items_id.includes(f.props.bind_anchors.val.end.id)) {
+                // f.props.bind_anchors.val.end = null
+            }
+        }
+    })
+    //移动的时候要判断一下有没有系统连线绑定到了该组件
+    const all_bind_sys_line = globalStore.done_json.filter(
+        f =>
+            f.type == 'sys-line' &&
+            (globalStore.selected_items_id.includes(f.props.bind_anchors.val.start?.id) ||
+                globalStore.selected_items_id.includes(f.props.bind_anchors.val.end?.id)) &&
+            !globalStore.selected_items_id.includes(f.id)
+    )
+    useUpdateSysLine(
+        all_bind_sys_line,
+        globalStore.done_json,
+        canvasAreaRef.value,
+        globalStore.canvasCfg.scale,
+        move_binfo
+    )
+}
+/**
+ * 移动完成事件
+ */
+const onMoveMouseUp = () => {
+    //移动完毕之后隐藏参考线
+    globalStore.guideCfg.x.display = false
+    globalStore.guideCfg.y.display = false
+    cacheStore.addHistory(globalStore.done_json)
+}
+/**
+ * 缓存连线可以吸附的四个点
+ * @param item
+ */
+const cacheAdsorbPoint = (item: IDoneJson) => {
+    // 四个角原始坐标
+    const { topLeft, topRight, bottomLeft, bottomRight } = getRectCoordinate(item.binfo)
+    // 四条边中点坐标
+    const { topCenter, bottomCenter, leftCenter, rightCenter } = getRectCenterCoordinate(
+        topLeft,
+        topRight,
+        bottomLeft,
+        bottomRight
+    )
+    // 旋转中心
+    const centerX = topCenter.x
+    const centerY = leftCenter.y
+
+    // 旋转角度（弧度）
+    const angleRad = (Math.PI / 180) * item.binfo.angle
+
+    // 计算旋转后的坐标
+    const rotatedTopCenter = rotatePoint(topCenter.x, topCenter.y, centerX, centerY, angleRad)
+    const rotatedBottomCenter = rotatePoint(bottomCenter.x, bottomCenter.y, centerX, centerY, angleRad)
+    const rotatedLeftCenter = rotatePoint(leftCenter.x, leftCenter.y, centerX, centerY, angleRad)
+    const rotatedRightCenter = rotatePoint(rightCenter.x, rightCenter.y, centerX, centerY, angleRad)
+    cacheStore.setAdsorbPoint([
+        {
+            type: 'tc',
+            x: rotatedTopCenter.x,
+            y: rotatedTopCenter.y,
+            id: item.id
+        },
+        {
+            type: 'bc',
+            x: rotatedBottomCenter.x,
+            y: rotatedBottomCenter.y,
+            id: item.id
+        },
+        {
+            type: 'lc',
+            x: rotatedLeftCenter.x,
+            y: rotatedLeftCenter.y,
+            id: item.id
+        },
+        {
+            type: 'rc',
+            x: rotatedRightCenter.x,
+            y: rotatedRightCenter.y,
+            id: item.id
+        }
+    ])
+}
+const onItemMouseEnter = (e: any, item: IDoneJson) => {
+    // 鼠标进入的时候计算可以吸附的四点坐标 去除连线
+    if (item.type == 'sys-line') {
+        return
+    }
+    cacheAdsorbPoint(item)
+}
+const onItemMouseLeave = (e: any, item: IDoneJson) => {
+    //如果拖动连线起点或者终点，则不清空连线锚点缓存
+    if (globalStore.intention == 'adsorbStart' || globalStore.intention == 'adsorbEnd') {
+        return
+    }
+    cacheStore.setAdsorbPoint([])
+}
+const setIntention = (val: GlobalStoreIntention) => {
+    globalStore.setIntention(val)
+}
+const onAdsorbPointMouseEnter = (item: { type: AdsorbPointType; x: number; y: number; id: string }) => {
+    if (globalStore.intention == 'adsorbStart' || globalStore.intention == 'adsorbEnd') {
+        //将当前操作的连线绑定到该锚点上
+        const handle_item = globalStore.done_json.find(f => f.id == globalStore.selected_items_id[0])
+        if (handle_item) {
+            if (globalStore.intention == 'adsorbStart') {
+                handle_item.props.bind_anchors.val = {
+                    ...handle_item.props.bind_anchors.val,
+                    start: {
+                        type: item.type,
+                        id: item.id
+                    }
+                }
+                handle_item.props.point_position.val[0] = {
+                    x: item.x - handle_item.binfo.left,
+                    y: item.y - handle_item.binfo.top
+                }
+            } else if (globalStore.intention == 'adsorbEnd') {
+                handle_item.props.bind_anchors.val = {
+                    ...handle_item.props.bind_anchors.val,
+                    end: {
+                        type: item.type,
+                        id: item.id
+                    }
+                }
+                handle_item.props.point_position.val[handle_item.props.point_position.val.length - 1] = {
+                    x: item.x - handle_item.binfo.left,
+                    y: item.y - handle_item.binfo.top
+                }
+            }
+        }
+    }
+}
+const onAdsorbPointMouseOut = () => {
+    if (globalStore.intention == 'adsorbStart' || globalStore.intention == 'adsorbEnd') {
+        //将当前操作的连线取消绑定到该锚点上
+        const handle_item = globalStore.done_json.find(f => f.id == globalStore.selected_items_id[0])
+        if (handle_item) {
+            if (globalStore.intention == 'adsorbStart') {
+                handle_item.props.bind_anchors.val = {
+                    ...handle_item.props.bind_anchors.val,
+                    start: null
+                }
+            } else if (globalStore.intention == 'adsorbEnd') {
+                handle_item.props.bind_anchors.val = {
+                    ...handle_item.props.bind_anchors.val,
+                    end: null
+                }
+            }
+        }
+    }
+}
+const onItemResizeDone = (item: IDoneJson) => {
+    // 缩放完成之后查看是否有连线绑定到了该图形 更新连线信息
+    const update_lines = globalStore.done_json.filter(
+        f =>
+            f.type == 'sys-line' &&
+            (f.props.bind_anchors.val.start?.id == item.id || f.props.bind_anchors.val.end?.id == item.id)
+    )
+    useUpdateSysLine(update_lines, globalStore.done_json, canvasAreaRef.value, globalStore.canvasCfg.scale)
+    cacheStore.addHistory(globalStore.done_json)
+}
+const onItemRotateDone = (item: IDoneJson) => {
+    const update_lines = globalStore.done_json.filter(
+        f =>
+            f.type == 'sys-line' &&
+            (f.props.bind_anchors.val.start?.id == item.id || f.props.bind_anchors.val.end?.id == item.id)
+    )
+    useUpdateSysLine(update_lines, globalStore.done_json, canvasAreaRef.value, globalStore.canvasCfg.scale)
+    cacheStore.addHistory(globalStore.done_json)
+}
+const onAlignSelected = (
+    type:
+        | 'left'
+        | 'horizontally'
+        | 'right'
+        | 'top'
+        | 'vertically'
+        | 'bottom'
+        | 'horizontal-distribution'
+        | 'vertical-distribution'
+) => {
+    // 取出当前选中的所有元素
+    const selected_items = globalStore.done_json.filter(f => globalStore.selected_items_id.includes(f.id))
+    handleAlign(type, selected_items, canvasAreaRef.value, globalStore.canvasCfg.scale, globalStore.done_json)
+    cacheStore.addHistory(globalStore.done_json)
+}
+const dragCanvasMouseDown = () => {
+    init_drag_offset.x = globalStore.canvasCfg.drag_offset.x
+    init_drag_offset.y = globalStore.canvasCfg.drag_offset.y
+}
+/**
+ * 画布拖动移动事件
+ * @param move_x
+ * @param move_y
+ */
+const dragCanvasMouseMove = (move_x: number, move_y: number) => {
+    if (move_x === 0 && move_y === 0) {
+        return
+    }
+    globalStore.setIntention('runDragCanvas')
+    // 设置画布偏移
+    globalStore.canvasCfg.drag_offset = {
+        x: init_drag_offset.x + move_x,
+        y: init_drag_offset.y + move_y
+    }
+}
+/**
+ * 画布拖动结束事件
+ */
+const dragCanvasMouseUp = () => {
+    if (globalStore.intention == 'runDragCanvas') {
+        globalStore.setIntention('endDragCanvas')
+    } else {
+        globalStore.setIntention('none')
+    }
+}
+/**
+ * 画布点击事件
+ * @param e
+ */
+const onCanvasRightClick = (e: MouseEvent) => {
+    if (globalStore.intention == 'endDragCanvas') {
+        return
+    }
+    const show_item: ContextMenuInfoType[] = []
+    if (cacheStore.copy.length > 0) {
+        show_item.push('paste')
+    }
+    if (globalStore.done_json.length > 0) {
+        show_item.push('selectAll')
+    }
+    contextMenuStore.setDisplayItem(show_item)
+    contextMenuStore.setMenuInfo({
+        ...contextMenuStore.menuInfo,
+        ...{
+            left: e.clientX,
+            top: e.clientY
+        }
+    })
+    globalStore.setIntention('showContextMenu')
+}
+const onItemRightClick = (e: MouseEvent, item: IDoneJson) => {
+    const show_item: ContextMenuInfoType[] = ['copy', 'delete']
+    if (mainPanelProps.groupEnabled) {
+        show_item.push('group')
+    }
+    if (mainPanelProps.unGroupEnabled) {
+        show_item.push('ungroup')
+    }
+    if (mainPanelProps.deleteEnabled) {
+        show_item.push('delete')
+    }
+    const find_item_index = globalStore.done_json.findIndex(f => f.id == item.id)
+    if (find_item_index > -1 && find_item_index < globalStore.done_json.length - 1) {
+        show_item.push('moveTop')
+        show_item.push('moveUp')
+    }
+    if (find_item_index > -1 && find_item_index > 0) {
+        show_item.push('moveDown')
+        show_item.push('moveBottom')
+    }
+    contextMenuStore.setDisplayItem(show_item)
+    contextMenuStore.setMenuInfo({
+        ...contextMenuStore.menuInfo,
+        ...{
+            left: e.clientX,
+            top: e.clientY
+        }
+    })
+    globalStore.setIntention('showContextMenu')
+}
+/**
+ * 全选
+ */
+const onContextMenuSelectAll = () => {
+    globalStore.setSelectItems(globalStore.done_json.map(f => f.id))
+}
+/**
+ * 复制
+ */
+const onContextMenuCopy = () => {
+    if (globalStore.selected_items_id.length < 1) {
+        return
+    }
+    cacheStore.setCopy(globalStore.done_json.filter(f => globalStore.selected_items_id.includes(f.id)))
+    ElMessage.success('复制成功')
+}
+const handlePasteData = (data: IDoneJson[]) => {
+    data.forEach(f => {
+        f.id = f.tag + '-' + randomString()
+        if (f.type == 'sys-line') {
+            f.props.bind_anchors.val = {
+                start: null,
+                end: null
+            }
+        } else if (f.type == 'group' && f.children) {
+            f.children = handlePasteData(f.children)
+        }
+    })
+    return data
+}
+/**
+ *
+ * 粘贴
+ */
+const onContextMenuPaste = (offset_x: number, offset_y: number) => {
+    if (cacheStore.copy.length < 1) {
+        return
+    }
+    const new_items = handlePasteData(objectDeepClone(cacheStore.copy)).map(m => {
+        return {
+            ...m,
+            binfo: {
+                ...m.binfo,
+                left: m.binfo.left - offset_x,
+                top: m.binfo.top - offset_y
+            }
+        }
+    })
+    globalStore.setGlobalStoreDoneJson([...globalStore.done_json, ...new_items])
+    globalStore.setSelectItems(new_items.map(m => m.id))
+    cacheStore.addHistory(globalStore.done_json)
+}
+/**
+ * 删除
+ */
+const onContextMenuDelete = () => {
+    if (globalStore.selected_items_id.length < 1) {
+        return
+    }
+    globalStore.deleteSelectedItems()
+    cacheStore.addHistory(globalStore.done_json)
+}
+/**
+ * 组合
+ */
+const onContextMenuGroup = () => {
+    if (globalStore.selected_items_id.length < 2) {
+        return
+    }
+    createGroupItem()
+}
+/**
+ * 取消组合
+ */
+const onContextMenuUnGroup = () => {
+    if (globalStore.selected_items_id.length > 1) {
+        return
+    }
+    onUngroup()
+}
+const onContextMoveTop = () => {
+    if (globalStore.selected_items_id.length !== 1) {
+        return
+    }
+    const item = globalStore.done_json.find(f => f.id === globalStore.selected_items_id[0])!
+    globalStore.setGlobalStoreDoneJson([...globalStore.done_json.filter(f => f.id !== item.id), item])
+    cacheStore.addHistory(globalStore.done_json)
+}
+const onContextMoveBottom = () => {
+    if (globalStore.selected_items_id.length !== 1) {
+        return
+    }
+    const item = globalStore.done_json.find(f => f.id === globalStore.selected_items_id[0])!
+    globalStore.setGlobalStoreDoneJson([item, ...globalStore.done_json.filter(f => f.id !== item.id)])
+    cacheStore.addHistory(globalStore.done_json)
+}
+const onContextMoveUp = () => {
+    if (globalStore.selected_items_id.length !== 1) {
+        return
+    }
+    // 找到当前选中item的index
+    const index = globalStore.done_json.findIndex(f => f.id === globalStore.selected_items_id[0])
+    if (index >= globalStore.done_json.length - 1) {
+        ElMessage.error('已经是最上层了')
+        return
+    }
+    const temp = globalStore.done_json[index]
+    globalStore.done_json[index] = globalStore.done_json[index + 1]
+    globalStore.done_json[index + 1] = temp
+    globalStore.setGlobalStoreDoneJson(globalStore.done_json)
+    cacheStore.addHistory(globalStore.done_json)
+}
+const onContextMoveDown = () => {
+    if (globalStore.selected_items_id.length !== 1) {
+        return
+    }
+
+    // 找到当前选中item的index
+    const index = globalStore.done_json.findIndex(f => f.id === globalStore.selected_items_id[0])
+    if (index <= 0) {
+        ElMessage.error('已经是最下层了')
+        return
+    }
+    const temp = globalStore.done_json[index]
+    globalStore.done_json[index] = globalStore.done_json[index - 1]
+    globalStore.done_json[index - 1] = temp
+    globalStore.setGlobalStoreDoneJson(globalStore.done_json)
+    cacheStore.addHistory(globalStore.done_json)
+}
+const onUndo = () => {
+    if (cacheStore.historyIndex == 0) {
+        return
+    }
+    cacheStore.historyIndex -= 1
+    globalStore.setGlobalStoreDoneJson(objectDeepClone(cacheStore.history[cacheStore.historyIndex]))
+    globalStore.setSelectItems([])
+}
+const onRedo = () => {
+    if (cacheStore.historyIndex == cacheStore.history.length - 1) {
+        return
+    }
+    cacheStore.historyIndex += 1
+    globalStore.setGlobalStoreDoneJson(objectDeepClone(cacheStore.history[cacheStore.historyIndex]))
+    globalStore.setSelectItems([])
+}
+/**
+ * 右键菜单点击事件
+ * @param key
+ * @param e
+ */
+const onContextMenuClick = (key: ContextMenuInfoType, e: MouseEvent) => {
+    switch (key) {
+        case 'selectAll':
+            onContextMenuSelectAll()
+            break
+        case 'copy':
+            onContextMenuCopy()
+            break
+        case 'paste': {
+            if (cacheStore.copy.length < 1) {
+                return
+            }
+            const { realityX, realityY } = getRealityXY(e, canvasAreaRef.value?.getBoundingClientRect())
+            const left = alignToGrid(realityX / globalStore.canvasCfg.scale, 1)
+            const top = alignToGrid(realityY / globalStore.canvasCfg.scale, 1)
+            // 找到top最小的那条数据的id
+            let min_top_id = ''
+            let min_top = Infinity
+            cacheStore.copy.forEach(f => {
+                if (f.binfo.top < min_top) {
+                    min_top = f.binfo.top
+                    min_top_id = f.id
+                }
+            })
+
+            const min_top_item = cacheStore.copy.find(f => f.id === min_top_id)
+
+            const offset_x = min_top_item!.binfo.left - left
+            const offset_y = min_top_item!.binfo.top - top
+            onContextMenuPaste(offset_x, offset_y)
+            break
+        }
+        case 'delete':
+            onContextMenuDelete()
+            break
+        case 'group':
+            onContextMenuGroup()
+            break
+        case 'ungroup':
+            onContextMenuUnGroup()
+            break
+        case 'moveTop': {
+            onContextMoveTop()
+            break
+        }
+        case 'moveBottom': {
+            onContextMoveBottom()
+            break
+        }
+        case 'moveUp': {
+            onContextMoveUp()
+            break
+        }
+        case 'moveDown': {
+            onContextMoveDown()
+            break
+        }
+        default:
+            break
+    }
+    globalStore.setIntention('none')
+}
+const onKeydown = (e: KeyboardEvent) => {
+    // 全选
+    if (e.ctrlKey && e.key.toLocaleLowerCase() === 'a') {
+        e.preventDefault()
+        onContextMenuSelectAll()
+    }
+    //复制
+    else if (e.ctrlKey && e.key.toLocaleLowerCase() === 'c') {
+        e.preventDefault()
+        onContextMenuCopy()
+    }
+    //粘贴
+    else if (e.ctrlKey && e.key.toLocaleLowerCase() === 'v') {
+        e.preventDefault()
+        onContextMenuPaste(10, 10)
+    }
+    //删除
+    else if (e.key.toLocaleLowerCase() === 'delete') {
+        e.preventDefault()
+        onContextMenuDelete()
+    }
+    //组合
+    else if (e.ctrlKey && e.key.toLocaleLowerCase() === 'g') {
+        e.preventDefault()
+        onContextMenuGroup()
+    }
+    //取消组合
+    else if (e.ctrlKey && e.key.toLocaleLowerCase() === 'u') {
+        e.preventDefault()
+        onContextMenuUnGroup()
+    }
+    // 置顶
+    else if (e.ctrlKey && e.key === 'ArrowRight') {
+        e.preventDefault()
+        onContextMoveTop()
+    }
+    // 置底
+    else if (e.ctrlKey && e.key === 'ArrowLeft') {
+        e.preventDefault()
+        onContextMoveBottom()
+    }
+    // 上移一层
+    else if (e.ctrlKey && e.key === 'ArrowUp') {
+        e.preventDefault()
+        onContextMoveUp()
+    }
+    // 下移一层
+    else if (e.ctrlKey && e.key === 'ArrowDown') {
+        e.preventDefault()
+        onContextMoveDown()
+    }
+    // 撤销
+    else if (e.ctrlKey && e.key.toLocaleLowerCase() === 'z') {
+        e.preventDefault()
+        onUndo()
+    }
+    // 重做
+    else if (e.ctrlKey && e.key.toLocaleLowerCase() === 'y') {
+        e.preventDefault()
+        onRedo()
+    }
+
+    // 上移一个像素
+    else if (e.key === 'ArrowUp') {
+        e.preventDefault()
+        upDateLeftAndTop(0, -1)
+    }
+    // 下移一个像素
+    else if (e.key === 'ArrowDown') {
+        e.preventDefault()
+        upDateLeftAndTop(0, 1)
+    }
+    // 左移一个像素
+    else if (e.key === 'ArrowLeft') {
+        e.preventDefault()
+        upDateLeftAndTop(-1, 0)
+    }
+    // 右移一个像素
+    else if (e.key === 'ArrowRight') {
+        e.preventDefault()
+        upDateLeftAndTop(1, 0)
+    }
+    function upDateLeftAndTop(left: number, top: number) {
+        if (globalStore.selected_items_id.length < 1) {
+            return
+        }
+        const update_lines: IDoneJson[] = []
+        globalStore.done_json.forEach(f => {
+            if (globalStore.selected_items_id.includes(f.id)) {
+                f.binfo.left += left
+                f.binfo.top += top
+                // if (f.type == 'sys-line') {
+                //     f.props.bind_anchors.val = {
+                //         start: null,
+                //         end: null
+                //     }
+                // } else
+                {
+                    update_lines.push(
+                        ...globalStore.done_json.filter(
+                            df =>
+                                df.type == 'sys-line' &&
+                                (df.props.bind_anchors.val.start?.id == f.id ||
+                                    df.props.bind_anchors.val.end?.id == f.id)
+                        )
+                    )
+                }
+            }
+        })
+        useUpdateSysLine(update_lines, globalStore.done_json, canvasAreaRef.value, globalStore.canvasCfg.scale)
+        cacheStore.addHistory(globalStore.done_json)
+    }
+}
+const onMouseWheel = (e: any) => {
+    if (e.ctrlKey) {
+        e.preventDefault()
+        e.stopPropagation()
+        if (e.deltaY > 0) {
+            globalStore.canvasCfg.scale = (globalStore.canvasCfg.scale * 10 - 1) / 10
+        } else if (e.deltaY < 0) {
+            globalStore.canvasCfg.scale = (globalStore.canvasCfg.scale * 10 + 1) / 10
+        }
+        if (!is_need_recal_center.value) {
+            return
+        }
+        const { realityX, realityY } = getRealityXY(e, canvasAreaRef.value.getBoundingClientRect())
+        const new_transform_origin_x = parseInt(realityX / globalStore.canvasCfg.scale + '')
+        const new_transform_origin_y = parseInt(realityY / globalStore.canvasCfg.scale + '')
+        if (
+            globalStore.canvasCfg.transform_origin.x !== new_transform_origin_x &&
+            globalStore.canvasCfg.transform_origin.y !== new_transform_origin_y
+        ) {
+            globalStore.canvasCfg.transform_origin = {
+                x: new_transform_origin_x,
+                y: new_transform_origin_y
+            }
+            is_need_recal_center.value = false
+        }
+    }
+}
+const beginListenerKeyDown = () => {
+    if (is_listen_keydown) {
+        return
+    }
+    // 监听键盘事件
+    document.addEventListener('keydown', onKeydown)
+    is_listen_keydown = true
+}
+const stopListenerKeyDown = () => {
+    if (!is_listen_keydown) {
+        return
+    }
+    document.removeEventListener('keydown', onKeydown)
+    is_listen_keydown = false
+}
+const onCanvasMove = () => {
+    is_need_recal_center.value = true
+}
+/**
+ * 绘制线结束事件
+ * @param line_item 绘制好的线
+ */
+const onDrawLineEnd = (line_item: IDoneJson) => {
+    const done_json_temp = [...globalStore.done_json]
+    const new_line_item = { ...line_item, id: line_item.tag + '-' + randomString() }
+    done_json_temp.push(new_line_item)
+    globalStore.setGlobalStoreDoneJson(done_json_temp)
+    globalStore.setSingleSelect(new_line_item.id)
+    globalStore.setIntention('none')
+    cacheStore.addHistory(done_json_temp)
+}
+
+const time: any = ref(null)
+// 监听图纸变化
+watch(
+    [globalStore],
+    new_val => {
+        if (time.value !== null) {
+            clearTimeout(time.value)
+        }
+
+        time.value = setTimeout(() => {
+            console.log('🚀 ~ globalStore:', globalStore)
+
+            const { exportJson } = genExportJson(globalStore.canvasCfg, globalStore.gridCfg, globalStore.done_json)
+            // const data_model: any = {
+            //   canvasCfg: globalStore.canvasCfg,
+            //   gridCfg: globalStore.gridCfg,
+            //   json: objectDeepClone(globalStore.done_json)
+            // };
+
+            useData.setUpPath(JSON.stringify(exportJson))
+        }, 500)
+    },
+    {
+        deep: true
+    }
+)
+
+// 暴露方法供外部调用
+const triggerCreateCustomItem = () => {
+    // hasCreatedCustomItems = false // 重置标志位
+    // initCustomItems()
+}
+
+onMounted(() => {
+    beginListenerKeyDown()
+    // setTimeout(() => {
+    //     initCustomItems()
+    // }, 2000)
+})
+onUnmounted(() => {
+    stopListenerKeyDown()
+})
+defineExpose({
+    createGroupItem,
+    onUngroup,
+    onAlignSelected,
+    onRedo,
+    onUndo,
+    beginListenerKeyDown,
+    stopListenerKeyDown,
+    triggerCreateCustomItem
+})
+</script>
+<style scoped>
+.canvasArea {
+    position: relative;
+    transform: v-bind('`scale(${globalStore.canvasCfg.scale})`');
+    transform-origin: v-bind(
+        '`${globalStore.canvasCfg.transform_origin.x}px ${globalStore.canvasCfg.transform_origin.y}px`'
+    );
+    width: v-bind('globalStore.canvasCfg.width + "px"');
+    height: v-bind('globalStore.canvasCfg.height + "px"');
+    background-color: v-bind('globalStore.canvasCfg.color');
+    background-image: v-bind('"url("+globalStore.canvasCfg.img+")"');
+    left: v-bind('globalStore.canvasCfg.drag_offset.x + "px"');
+    top: v-bind('globalStore.canvasCfg.drag_offset.y + "px"');
+    background-size: 100% 100%; /* 强制拉伸图片填满容器 */
+    background-position: center; /* 图片居中显示 */
+    background-repeat: no-repeat; /* 防止图片重复平铺 */
+}
+
+#guide-x {
+    display: v-bind('globalStore.guideCfg.x.display?"block":"none"');
+    position: absolute;
+    width: 100%;
+    left: 0px;
+    top: v-bind('globalStore.guideCfg.x.top+"px"');
+    border-top: 1px dashed #59c7f9;
+}
+
+#guide-y {
+    display: v-bind('globalStore.guideCfg.y.display?"block":"none"');
+    position: absolute;
+    height: 100%;
+    left: v-bind('globalStore.guideCfg.y.left+"px"');
+    top: 0px;
+    border-left: 1px dashed #59c7f9;
+}
+.adsorb-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;
+}
+.adsorb-point:hover {
+    background: #59c7f9;
+}
+</style>
diff --git a/src/components/mt-edit/components/layout/right-aside/index.vue b/src/components/mt-edit/components/layout/right-aside/index.vue
new file mode 100644
index 0000000..5c89591
--- /dev/null
+++ b/src/components/mt-edit/components/layout/right-aside/index.vue
@@ -0,0 +1,42 @@
+<template>
+    <div id="mt-right-aside" class="px-4">
+        <select-item-setting
+            v-if="globalStore.selected_items_id.length == 1"
+            v-model:item-json="globalStore.done_json[find_index_item_json]"
+            :done-json="globalStore.done_json"
+            @add-history="onAddHistory"
+        >
+            <template v-if="hasDeviceBindSlot" #deviceBind="{ item }">
+                <slot name="deviceBind" :item="item" />
+            </template>
+        </select-item-setting>
+        <page-setting
+            v-else
+            v-model:canvasCfg="globalStore.canvasCfg"
+            v-model:grid-cfg="globalStore.gridCfg"
+        ></page-setting>
+    </div>
+</template>
+<script setup lang="ts">
+import { computed, useSlots } from 'vue'
+import PageSetting from './page-setting.vue'
+import SelectItemSetting from './select-item-setting.vue'
+import { globalStore } from '@/components/mt-edit/store/global'
+import { cacheStore } from '@/components/mt-edit/store/cache'
+const slots = useSlots()
+const find_index_item_json = computed(() => {
+    return globalStore.done_json.findIndex(f => f.id == globalStore.selected_items_id[0])
+})
+const onAddHistory = () => {
+    cacheStore.addHistory(globalStore.done_json)
+}
+const hasDeviceBindSlot = computed(() => {
+    return !!slots.deviceBind
+})
+</script>
+<style>
+#mt-right-aside .el-collapse-item__header,
+#mt-right-aside .el-collapse-item__wrap {
+    background-color: transparent !important;
+}
+</style>
diff --git a/src/components/mt-edit/components/layout/right-aside/json-edit.vue b/src/components/mt-edit/components/layout/right-aside/json-edit.vue
new file mode 100644
index 0000000..2cfec85
--- /dev/null
+++ b/src/components/mt-edit/components/layout/right-aside/json-edit.vue
@@ -0,0 +1,43 @@
+<template>
+    <div>
+        <el-button type="primary" plain round @click="dialogVisible = true">点击编辑</el-button>
+        <el-dialog v-model="dialogVisible" title="配置编辑" width="60%">
+            <v-ace-editor
+                v-model:value="content"
+                lang="json"
+                theme="monokai"
+                style="height: 400px"
+                :options="{
+                    useWorker: true,
+                    enableBasicAutocompletion: true,
+                    enableSnippets: true,
+                    enableLiveAutocompletion: true
+                }"
+            />
+            <template #footer>
+                <span class="dialog-footer">
+                    <el-button type="primary" @click="onYesBtnClick">确定</el-button>
+                    <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
+                </span>
+            </template>
+        </el-dialog>
+    </div>
+</template>
+<script setup lang="ts">
+import { VAceEditor } from 'vue3-ace-editor'
+import { ElButton, ElDialog } from 'element-plus'
+import { ref } from 'vue'
+const props = defineProps({
+    contentObj: {
+        type: Object,
+        default: () => {}
+    }
+})
+const dialogVisible = ref(false)
+const emits = defineEmits(['update:contentObj'])
+const content = ref(JSON.stringify(props.contentObj, null, 2))
+const onYesBtnClick = () => {
+    emits('update:contentObj', JSON.parse(content.value))
+    dialogVisible.value = false
+}
+</script>
diff --git a/src/components/mt-edit/components/layout/right-aside/page-setting.vue b/src/components/mt-edit/components/layout/right-aside/page-setting.vue
new file mode 100644
index 0000000..d0770e0
--- /dev/null
+++ b/src/components/mt-edit/components/layout/right-aside/page-setting.vue
@@ -0,0 +1,356 @@
+<template>
+    <el-tabs v-model="activeName" class="select-none">
+        <el-tab-pane label="页面" name="page">
+            <el-form label-width="70px" label-position="left">
+                <el-form-item label="画布尺寸" size="small">
+                    <el-select v-model="canvas_size" placeholder="请设置画布尺寸">
+                        <el-option-group label="自定义">
+                            <div class="flex justify-between">
+                                <el-input-number
+                                    v-model="canvas_size_width"
+                                    size="small"
+                                    :controls="false"
+                                    class="w-5/10 pl-5px"
+                                ></el-input-number>
+                                <el-text>*</el-text>
+                                <el-input-number
+                                    v-model="canvas_size_height"
+                                    size="small"
+                                    :controls="false"
+                                    class="w-5/10 pr-5px"
+                                ></el-input-number>
+                            </div>
+                        </el-option-group>
+                        <el-option-group v-for="group in canvas_size_options" :key="group.label" :label="group.label">
+                            <el-option
+                                v-for="item in group.options"
+                                :key="item.value"
+                                :label="item.label"
+                                :value="item.value"
+                            />
+                        </el-option-group>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="缩放倍数" size="small">
+                    <el-select v-model="canvas_size_scale" placeholder="请设置缩放比例" size="small">
+                        <el-option
+                            v-for="item in canvas_size_scale_options"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value"
+                        />
+                        <div class="flex justify-between px-10px ct-border pt-10px">
+                            <el-text>自定义:</el-text>
+                            <el-input-number
+                                v-model="canvas_size_scale_input"
+                                size="small"
+                                :step="0.1"
+                                :min="0.1"
+                                class="mx-5px"
+                            ></el-input-number>
+                        </div>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="背景颜色" size="small">
+                    <el-color-picker v-model="canvas_bg_color"></el-color-picker>
+                </el-form-item>
+                <el-form-item label="背景图片" size="small">
+                    <el-upload
+                        ref="canvasBgImgUploadRef"
+                        class="w-24px h-24px"
+                        v-model:file-list="bg_img_list"
+                        :auto-upload="false"
+                        :limit="1"
+                        :show-file-list="false"
+                        :on-change="onBgImgChange"
+                        accept="image/*"
+                        @mouseenter="show_clear_bg_img = true"
+                        @mouseleave="show_clear_bg_img = false"
+                    >
+                        <div class="flex justify-center items-center relative">
+                            <img
+                                class="w-40px h-40px absolute left-0"
+                                v-if="rightAsideProps.canvasCfg.img"
+                                :src="rightAsideProps.canvasCfg.img"
+                            />
+                            <el-button v-else size="small" class="w-40px h-40px absolute left-0">
+                                <el-icon title="上传" :size="20">
+                                    <svg-analysis name="upload"></svg-analysis>
+                                </el-icon>
+                            </el-button>
+                            <div
+                                v-if="rightAsideProps.canvasCfg.img && show_clear_bg_img"
+                                class="absolute w-40px h-40px left-0 opacity-80 bg-light-300 flex justify-center items-center"
+                                @click.stop="clearBgImg"
+                            >
+                                <el-icon title="删除" :size="25">
+                                    <svg-analysis name="delete"></svg-analysis>
+                                </el-icon>
+                            </div>
+                        </div>
+                    </el-upload>
+                </el-form-item>
+                <el-form-item label="参考线" size="small">
+                    <el-switch v-model="canvas_guide"></el-switch>
+                </el-form-item>
+                <el-form-item label="吸附" size="small">
+                    <el-switch v-model="canvas_adsorp"></el-switch>
+                </el-form-item>
+                <el-form-item label="网格" size="small">
+                    <el-switch v-model="grid_enabled"></el-switch>
+                </el-form-item>
+                <el-form-item label="网格对齐" size="small" v-if="grid_enabled">
+                    <el-switch v-model="grid_align"></el-switch>
+                </el-form-item>
+                <el-form-item label="网格大小" size="small" v-if="grid_enabled">
+                    <el-input-number v-model="grid_size" :min="1"></el-input-number>
+                </el-form-item>
+            </el-form>
+        </el-tab-pane>
+    </el-tabs>
+</template>
+<script setup lang="ts">
+import type { IGlobalStoreCanvasCfg, IGlobalStoreGridCfg } from '@/components/mt-edit/store/types'
+import {
+    ElTabs,
+    ElTabPane,
+    ElForm,
+    ElFormItem,
+    ElInput,
+    ElInputNumber,
+    ElSelect,
+    ElOption,
+    ElOptionGroup,
+    ElSwitch,
+    ElText,
+    ElColorPicker,
+    ElUpload,
+    ElIcon,
+    type UploadUserFile,
+    ElButton,
+    type UploadFile,
+    ElMessage
+} from 'element-plus'
+import { computed, ref } from 'vue'
+import SvgAnalysis from '@/components/mt-edit/components/svg-analysis/index.vue'
+import { blobToBase64 } from '@/components/mt-edit/utils'
+type RightAsideProps = {
+    canvasCfg: IGlobalStoreCanvasCfg
+    gridCfg: IGlobalStoreGridCfg
+}
+const rightAsideProps = withDefaults(defineProps<RightAsideProps>(), {})
+const emits = defineEmits(['update:canvasCfg', 'update:gridCfg'])
+const activeName = ref('page')
+const canvasBgImgUploadRef = ref()
+const canvas_size = computed({
+    get: () => {
+        return `${rightAsideProps.canvasCfg.width}*${rightAsideProps.canvasCfg.height}`
+    },
+    set: value => {
+        const [width, height] = value.split('*')
+        emits('update:canvasCfg', {
+            ...rightAsideProps.canvasCfg,
+            width: Number(width),
+            height: Number(height)
+        })
+    }
+})
+const canvas_size_width = computed({
+    get: () => {
+        return rightAsideProps.canvasCfg.width
+    },
+    set: value => {
+        emits('update:canvasCfg', {
+            ...rightAsideProps.canvasCfg,
+            width: value
+        })
+    }
+})
+const canvas_size_height = computed({
+    get: () => {
+        return rightAsideProps.canvasCfg.height
+    },
+    set: value => {
+        emits('update:canvasCfg', {
+            ...rightAsideProps.canvasCfg,
+            height: value
+        })
+    }
+})
+const canvas_size_options = [
+    {
+        label: 'pc端',
+        options: [
+            {
+                value: '1920*1080',
+                label: '1920*1080'
+            },
+            {
+                value: '1600*900',
+                label: '1600*900'
+            },
+            {
+                value: '1366*768',
+                label: '1366*768'
+            },
+            {
+                value: '1280*720',
+                label: '1280*720'
+            }
+        ]
+    },
+    {
+        label: '移动端',
+        options: [
+            {
+                value: '1024*1366',
+                label: '1024*1366'
+            },
+            {
+                value: '768*1024',
+                label: '768*1024'
+            },
+            {
+                value: '480*800',
+                label: '480*800'
+            }
+        ]
+    }
+]
+const canvas_size_scale_input = computed({
+    get: () => {
+        return rightAsideProps.canvasCfg.scale
+    },
+    set: value => {
+        emits('update:canvasCfg', {
+            ...rightAsideProps.canvasCfg,
+            scale: value
+        })
+    }
+})
+const canvas_size_scale = computed({
+    get: () => {
+        return rightAsideProps.canvasCfg.scale
+    },
+    set: value => {
+        emits('update:canvasCfg', {
+            ...rightAsideProps.canvasCfg,
+            scale: value
+        })
+    }
+})
+const canvas_size_scale_options = [
+    {
+        value: 0.5,
+        label: 0.5
+    },
+    {
+        value: 1,
+        label: 1
+    },
+    {
+        value: 1.5,
+        label: 1.5
+    },
+    {
+        value: 2,
+        label: 2
+    }
+]
+const canvas_bg_color = computed({
+    get: () => {
+        return rightAsideProps.canvasCfg.color
+    },
+    set: value => {
+        emits('update:canvasCfg', {
+            ...rightAsideProps.canvasCfg,
+            color: value
+        })
+    }
+})
+const show_clear_bg_img = ref(false)
+const bg_img_list = ref<UploadUserFile[]>([])
+const grid_enabled = computed({
+    get: () => {
+        return rightAsideProps.gridCfg.enabled
+    },
+    set: value => {
+        emits('update:gridCfg', {
+            ...rightAsideProps.gridCfg,
+            enabled: value
+        })
+    }
+})
+const grid_align = computed({
+    get: () => {
+        return rightAsideProps.gridCfg.align
+    },
+    set: value => {
+        emits('update:gridCfg', {
+            ...rightAsideProps.gridCfg,
+            align: value
+        })
+    }
+})
+const grid_size = computed({
+    get: () => {
+        return rightAsideProps.gridCfg.size
+    },
+    set: value => {
+        emits('update:gridCfg', {
+            ...rightAsideProps.gridCfg,
+            size: value
+        })
+    }
+})
+const onBgImgChange = (e: UploadFile) => {
+    show_clear_bg_img.value = false
+    if (!e.raw!.type.includes('image/')) {
+        ElMessage.error('只能上传图片!')
+        canvasBgImgUploadRef.value.clearFiles()
+        bg_img_list.value = []
+        return false
+    } else if (e.raw!.size / 1024 / 1024 > 1) {
+        ElMessage.error('不能上传超过1MB的图像!')
+        canvasBgImgUploadRef.value.clearFiles()
+        bg_img_list.value = []
+        return false
+    }
+    blobToBase64(e.raw!).then(base64 => {
+        emits('update:canvasCfg', {
+            ...rightAsideProps.canvasCfg,
+            img: base64
+        })
+    })
+}
+
+const clearBgImg = () => {
+    canvasBgImgUploadRef.value.clearFiles()
+    emits('update:canvasCfg', {
+        ...rightAsideProps.canvasCfg,
+        img: ''
+    })
+}
+const canvas_adsorp = computed({
+    get: () => {
+        return rightAsideProps.canvasCfg.adsorp
+    },
+    set: value => {
+        emits('update:canvasCfg', {
+            ...rightAsideProps.canvasCfg,
+            adsorp: value
+        })
+    }
+})
+const canvas_guide = computed({
+    get: () => {
+        return rightAsideProps.canvasCfg.guide
+    },
+    set: value => {
+        emits('update:canvasCfg', {
+            ...rightAsideProps.canvasCfg,
+            guide: value
+        })
+    }
+})
+</script>
diff --git a/src/components/mt-edit/components/layout/right-aside/select-item-animate-setting/common-animate.vue b/src/components/mt-edit/components/layout/right-aside/select-item-animate-setting/common-animate.vue
new file mode 100644
index 0000000..2b37e09
--- /dev/null
+++ b/src/components/mt-edit/components/layout/right-aside/select-item-animate-setting/common-animate.vue
@@ -0,0 +1,191 @@
+<template>
+    <div style="height: 100%">
+        <el-tag
+            closable
+            v-if="select_val"
+            @close="addAnimation('')"
+            @click="drawer_visiable = true"
+            style="cursor: pointer"
+        >
+            {{
+                common_animate_list
+                    .map(m => m.children)
+                    .reduce((pre, curr) => {
+                        return pre.concat(curr)
+                    })
+                    .find(f => f.value == select_val)?.label
+            }}
+            <el-icon :size="10"><svg-analysis name="setting"></svg-analysis></el-icon>
+        </el-tag>
+        <el-tag v-else type="success" style="cursor: pointer" @click="drawer_visiable = true">新增</el-tag>
+        <el-drawer v-model="drawer_visiable" title="选择动画" direction="ltr">
+            <el-tabs v-model="activeName">
+                <el-tab-pane
+                    :label="tab_item.label"
+                    :name="tab_item.label"
+                    v-for="tab_item in common_animate_list"
+                    :key="tab_item.label"
+                >
+                    <el-scrollbar height="500px">
+                        <div class="flex flex-wrap">
+                            <div
+                                class="animate"
+                                v-for="(animate, index) in tab_item.children"
+                                :key="index"
+                                @mouseenter="play_index = index"
+                                @mouseleave="play_index = null"
+                                @click="addAnimation(animate.value)"
+                            >
+                                <div
+                                    :class="`${
+                                        play_index == index
+                                            ? `animate__animated animate__${animate.value} animate__slow animate__infinite`
+                                            : ''
+                                    }`"
+                                >
+                                    {{ animate.label }}
+                                </div>
+                            </div>
+                        </div>
+                    </el-scrollbar>
+                </el-tab-pane>
+            </el-tabs>
+        </el-drawer>
+    </div>
+</template>
+<script setup lang="ts">
+import { ElTag, ElDrawer, ElTabs, ElTabPane, ElScrollbar, ElIcon } from 'element-plus'
+import { computed, ref } from 'vue'
+import SvgAnalysis from '@/components/mt-edit/components/svg-analysis/index.vue'
+const props = defineProps({
+    modelValue: {
+        type: String,
+        default: ''
+    }
+})
+const emits = defineEmits(['update:modelValue'])
+const select_val = computed(() => props.modelValue)
+const drawer_visiable = ref(false)
+const activeName = ref('进入')
+const play_index = ref<null | number>(null)
+const common_animate_list = [
+    {
+        label: '进入',
+        children: [
+            { label: '渐显', value: 'fadeIn' },
+            { label: '向右进入', value: 'fadeInLeft' },
+            { label: '向左进入', value: 'fadeInRight' },
+            { label: '向上进入', value: 'fadeInUp' },
+            { label: '向下进入', value: 'fadeInDown' },
+            { label: '向右长距进入', value: 'fadeInLeftBig' },
+            { label: '向左长距进入', value: 'fadeInRightBig' },
+            { label: '向上长距进入', value: 'fadeInUpBig' },
+            { label: '向下长距进入', value: 'fadeInDownBig' },
+            { label: '旋转进入', value: 'rotateIn' },
+            { label: '左顺时针旋转', value: 'rotateInDownLeft' },
+            { label: '右逆时针旋转', value: 'rotateInDownRight' },
+            { label: '左逆时针旋转', value: 'rotateInUpLeft' },
+            { label: '右逆时针旋转', value: 'rotateInUpRight' },
+            { label: '弹入', value: 'bounceIn' },
+            { label: '向右弹入', value: 'bounceInLeft' },
+            { label: '向左弹入', value: 'bounceInRight' },
+            { label: '向上弹入', value: 'bounceInUp' },
+            { label: '向下弹入', value: 'bounceInDown' },
+            { label: '光速从右进入', value: 'lightSpeedInRight' },
+            { label: '光速从左进入', value: 'lightSpeedInLeft' },
+            { label: '光速从右退出', value: 'lightSpeedOutRight' },
+            { label: '光速从左退出', value: 'lightSpeedOutLeft' },
+            { label: 'Y轴旋转', value: 'flip' },
+            { label: '中心X轴旋转', value: 'flipInX' },
+            { label: '中心Y轴旋转', value: 'flipInY' },
+            { label: '左长半径旋转', value: 'rollIn' },
+            { label: '由小变大进入', value: 'zoomIn' },
+            { label: '左变大进入', value: 'zoomInLeft' },
+            { label: '右变大进入', value: 'zoomInRight' },
+            { label: '向上变大进入', value: 'zoomInUp' },
+            { label: '向下变大进入', value: 'zoomInDown' },
+            { label: '向右滑动展开', value: 'slideInLeft' },
+            { label: '向左滑动展开', value: 'slideInRight' },
+            { label: '向上滑动展开', value: 'slideInUp' },
+            { label: '向下滑动展开', value: 'slideInDown' }
+        ]
+    },
+    {
+        label: '强调',
+        children: [
+            { label: '弹跳', value: 'bounce' },
+            { label: '闪烁', value: 'flash' },
+            { label: '放大缩小', value: 'pulse' },
+            { label: '放大缩小弹簧', value: 'rubberBand' },
+            { label: '左右晃动', value: 'headShake' },
+            { label: '左右扇形摇摆', value: 'swing' },
+            { label: '放大晃动缩小', value: 'tada' },
+            { label: '扇形摇摆', value: 'wobble' },
+            { label: '左右上下晃动', value: 'jello' },
+            { label: 'Y轴旋转', value: 'flip' },
+            { label: '旋转360', value: 'rotate360' }
+        ]
+    },
+    {
+        label: '退出',
+        children: [
+            { label: '渐隐', value: 'fadeOut' },
+            { label: '向左退出', value: 'fadeOutLeft' },
+            { label: '向右退出', value: 'fadeOutRight' },
+            { label: '向上退出', value: 'fadeOutUp' },
+            { label: '向下退出', value: 'fadeOutDown' },
+            { label: '向左长距退出', value: 'fadeOutLeftBig' },
+            { label: '向右长距退出', value: 'fadeOutRightBig' },
+            { label: '向上长距退出', value: 'fadeOutUpBig' },
+            { label: '向下长距退出', value: 'fadeOutDownBig' },
+            { label: '旋转退出', value: 'rotateOut' },
+            { label: '左顺时针旋转', value: 'rotateOutDownLeft' },
+            { label: '右逆时针旋转', value: 'rotateOutDownRight' },
+            { label: '左逆时针旋转', value: 'rotateOutUpLeft' },
+            { label: '右逆时针旋转', value: 'rotateOutUpRight' },
+            { label: '弹出', value: 'bounceOut' },
+            { label: '向左弹出', value: 'bounceOutLeft' },
+            { label: '向右弹出', value: 'bounceOutRight' },
+            { label: '向上弹出', value: 'bounceOutUp' },
+            { label: '向下弹出', value: 'bounceOutDown' },
+            { label: '中心X轴旋转', value: 'flipOutX' },
+            { label: '中心Y轴旋转', value: 'flipOutY' },
+            { label: '左长半径旋转', value: 'rollOut' },
+            { label: '由小变大退出', value: 'zoomOut' },
+            { label: '左变大退出', value: 'zoomOutLeft' },
+            { label: '右变大退出', value: 'zoomOutRight' },
+            { label: '向上变大退出', value: 'zoomOutUp' },
+            { label: '向下变大退出', value: 'zoomOutDown' },
+            { label: '向左滑动收起', value: 'slideOutLeft' },
+            { label: '向右滑动收起', value: 'slideOutRight' },
+            { label: '向上滑动收起', value: 'slideOutUp' },
+            { label: '向下滑动收起', value: 'slideOutDown' }
+        ]
+    }
+]
+const addAnimation = (val: string) => {
+    emits('update:modelValue', val)
+    drawer_visiable.value = false
+}
+</script>
+<style scoped>
+.animate {
+    cursor: pointer;
+}
+
+.animate > div {
+    width: 80px;
+    height: 60px;
+    background: #f5f8fb;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 12px;
+    margin-bottom: 10px;
+    font-size: 12px;
+    color: #333;
+    border-radius: 3px;
+    user-select: none;
+    cursor: pointer;
+}
+</style>
diff --git a/src/components/mt-edit/components/layout/right-aside/select-item-animate-setting/index.vue b/src/components/mt-edit/components/layout/right-aside/select-item-animate-setting/index.vue
new file mode 100644
index 0000000..118a993
--- /dev/null
+++ b/src/components/mt-edit/components/layout/right-aside/select-item-animate-setting/index.vue
@@ -0,0 +1,88 @@
+<template>
+    <el-form label-width="60px" label-position="left">
+        <el-form-item label="动画效果" size="small">
+            <common-animate v-model="item_val"></common-animate>
+        </el-form-item>
+        <el-form-item label="延迟" size="small">
+            <el-select v-model="item_delay">
+                <el-option value="delay-0s" label="无"></el-option>
+                <el-option value="delay-1s" label="1秒"></el-option>
+                <el-option value="delay-2s" label="2秒"></el-option>
+                <el-option value="delay-3s" label="3秒"></el-option>
+                <el-option value="delay-4s" label="4秒"></el-option>
+                <el-option value="delay-5s" label="5秒"></el-option>
+            </el-select>
+        </el-form-item>
+        <el-form-item label="动画速度" size="small">
+            <el-select v-model="item_speed">
+                <el-option value="slow" label="慢"></el-option>
+                <el-option value="slower" label="最慢"></el-option>
+                <el-option value="fast" label="快"></el-option>
+                <el-option value="faster" label="最快"></el-option>
+            </el-select>
+        </el-form-item>
+        <el-form-item label="循环次数" size="small">
+            <el-select v-model="item_repeat">
+                <el-option value="repeat-1" label="一次"></el-option>
+                <el-option value="repeat-2" label="两次"></el-option>
+                <el-option value="repeat-3" label="三次"></el-option>
+                <el-option value="infinite" label="无限次"></el-option>
+            </el-select>
+        </el-form-item>
+    </el-form>
+</template>
+<script setup lang="ts">
+import type { ICommonAnimations } from '@/components/mt-edit/store/types'
+import CommonAnimate from './common-animate.vue'
+import { computed } from 'vue'
+import { ElForm, ElFormItem, ElSelect, ElOption } from 'element-plus'
+type SelectItemAnimateSettingProps = {
+    commonAnimates: ICommonAnimations | undefined
+}
+const selectItemAnimateSettingProps = withDefaults(defineProps<SelectItemAnimateSettingProps>(), {})
+const emits = defineEmits(['update:commonAnimates'])
+const item_val = computed({
+    get: () => {
+        return selectItemAnimateSettingProps.commonAnimates?.val
+    },
+    set: value => {
+        emits('update:commonAnimates', {
+            ...selectItemAnimateSettingProps.commonAnimates,
+            val: value
+        })
+    }
+})
+const item_delay = computed({
+    get: () => {
+        return selectItemAnimateSettingProps.commonAnimates?.delay
+    },
+    set: value => {
+        emits('update:commonAnimates', {
+            ...selectItemAnimateSettingProps.commonAnimates,
+            delay: value
+        })
+    }
+})
+const item_speed = computed({
+    get: () => {
+        return selectItemAnimateSettingProps.commonAnimates?.speed
+    },
+    set: value => {
+        emits('update:commonAnimates', {
+            ...selectItemAnimateSettingProps.commonAnimates,
+            speed: value
+        })
+    }
+})
+const item_repeat = computed({
+    get: () => {
+        return selectItemAnimateSettingProps.commonAnimates?.repeat
+    },
+    set: value => {
+        emits('update:commonAnimates', {
+            ...selectItemAnimateSettingProps.commonAnimates,
+            repeat: value
+        })
+    }
+})
+</script>
diff --git a/src/components/mt-edit/components/layout/right-aside/select-item-bind-setting/index.vue b/src/components/mt-edit/components/layout/right-aside/select-item-bind-setting/index.vue
new file mode 100644
index 0000000..1f31404
--- /dev/null
+++ b/src/components/mt-edit/components/layout/right-aside/select-item-bind-setting/index.vue
@@ -0,0 +1,429 @@
+<template>
+    <div v-if="useData.graphicDisplay == 'zl'">
+        <el-form label-width="60px" label-position="left">
+            <el-form-item label="监测点" size="small" class="mt-10px" v-if="item_title == '绑定监测点' || item_title == '绑定指标'">
+                <div>
+                    <el-cascader :key="cascaderKey" :options="treeData"
+                        :props="{ value: 'id', label: 'name', children: 'children' }" clearable placeholder="请选择"
+                        @change="handleDeptChange" @clear="handleDeptClear" filterable v-model="deptIds"
+                        ref="fileRef"></el-cascader>
+                </div>
+            </el-form-item>
+
+            <el-form-item label="指标绑定" size="small" class="mt-10px"
+                v-if="deptIds && deptIds.length > 0 && item_title == '绑定指标'">
+                <div>
+                    <el-cascader :key="cascaderKey + 1" v-model="item_uid" filterable :options="treeIndexs"
+                        :props="{ value: 'id', label: 'showName', children: 'children' }" @change="handleSelectUID"
+                        @clear="handleIndexClear" clearable placeholder="请选择" ref="indexRef" />
+                </div>
+            </el-form-item>
+        </el-form>
+    </div>
+    <!-- 无锡监测点 指标 -->
+    <div v-if="useData.graphicDisplay == 'wx'">
+        <el-form label-width="60px" label-position="left">
+            <el-form-item label="监测点" size="small" class="mt-10px">
+                <div>
+                    <el-cascader :key="cascaderKey" :options="treeData_wx"
+                        :props="{ value: 'id', label: 'name', children: 'children' }" clearable placeholder="请选择"
+                        @change="handleDeptChange" @clear="handleDeptClear" filterable v-model="deptIds"
+                        ref="fileRef"></el-cascader>
+                </div>
+            </el-form-item>
+            <el-form-item label="指标绑定" size="small" class="mt-10px" v-if="deptIds && deptIds.length > 0">
+                <div>
+                    <el-cascader :key="cascaderKey + 1" v-model="item_uid" filterable collapse-tags
+                        collapse-tags-tooltip :options="treeIndexs" :props="{
+                            value: 'name',
+                            label: 'showName',
+                            children: 'children',
+                            multiple: item_title == '绑定指标' ? false : true
+                        }" @change="handleSelectUID" @clear="handleIndexClear" clearable placeholder="请选择"
+                        ref="indexRef" />
+                </div>
+            </el-form-item>
+        </el-form>
+    </div>
+    <!-- 显示所选项 -->
+
+    <div v-if="labelString && labelString.length > 0">
+        <el-divider />
+        <el-descriptions title="所选监测点" :column="1">
+            <el-descriptions-item>{{ labelString }}</el-descriptions-item>
+        </el-descriptions>
+        <el-divider />
+    </div>
+    <div v-if="indexString && indexString.length > 0">
+        <el-descriptions title="所选指标" :column="1" class="tipBox">
+            <el-descriptions-item v-for="value in indexString">{{ value }}</el-descriptions-item>
+        </el-descriptions>
+    </div>
+</template>
+<script setup lang="ts">
+import { ElForm, ElFormItem, ElTreeSelect } from 'element-plus'
+import { computed, ref, watch, onMounted, reactive, nextTick, watchEffect } from 'vue'
+import type { IDoneJson } from '@/components/mt-edit/store/types'
+import { globalStore } from '@/components/mt-edit/store/global'
+import { lineTree, targetList, eleEpdChooseTree_wx } from '@/api/index'
+import { useDataStore } from '@/stores/menuList'
+import { lineTree_wx } from '@/api/index_wx'
+import { templateRef } from '@vueuse/core'
+
+type SelectItemSettingProps = {
+    itemJson: IDoneJson | undefined
+}
+const selectItemSettingProps = withDefaults(defineProps<SelectItemSettingProps>(), {})
+
+const item_title = computed(() => selectItemSettingProps.itemJson?.title)
+
+const flag = ref(false)
+
+const deptIds = ref([])
+
+const item_uid = ref([])
+
+const fileRef = ref()
+
+const indexRef = ref()
+
+const labelString = ref('')
+
+const indexString: any = ref('')
+
+const disabledTooltip = ref(true)
+
+const disabledTooltip_1 = ref(true)
+
+const useData = useDataStore()
+
+// 添加用于强制刷新的 key
+const cascaderKey = ref(0)
+
+const treeData_wx = ref([])
+
+// 重置级联选择器的方法  关闭面板
+const resetCascaders = () => {
+    // 清空绑定的数据
+    deptIds.value = []
+    item_uid.value = []
+
+    // 清空显示文本
+    labelString.value = ''
+    indexString.value = ''
+
+    // 强制重新渲染组件
+    cascaderKey.value += 1
+}
+
+watch(
+    () => selectItemSettingProps.itemJson?.keyId,
+    (newVal, oldVal) => {
+        if (newVal == 'bind-dot' || newVal == 'bind-index') {
+            flag.value = true
+        } else {
+            flag.value = false
+        }
+    }
+)
+
+watch(
+    () => selectItemSettingProps.itemJson?.id,
+    (newVal, oldVal) => {
+        resetCascaders()
+        // 回显
+        globalStore.done_json.forEach((item: any, index: number) => {
+            if (item.id == newVal) {
+                // 回显
+                if (useData.graphicDisplay == 'wx') {
+                    // 无锡多选
+                    deptIds.value = item.lineList
+                } else {
+                    // 单选
+                    deptIds.value = item.lineId
+                }
+
+                item_uid.value = item.UID
+                labelString.value = item.lineName
+                indexString.value = item.UIDNames
+                nextTick(() => {
+                    if (item_title.value == '绑定指标' && deptIds.value) {
+                        indexList()
+                    }
+                })
+            }
+        })
+    },
+    { immediate: true }
+)
+
+onMounted(() => {
+    if (selectItemSettingProps.itemJson?.keyId) {
+        if (
+            selectItemSettingProps.itemJson?.keyId == 'bind-dot' ||
+            selectItemSettingProps.itemJson?.keyId == 'bind-index'
+        ) {
+            flag.value = true
+        } else {
+            flag.value = false
+        }
+    }
+    //fetchData()
+    if (useData.graphicDisplay == 'wx') {
+        fetchData_wx()
+    } else {
+        fetchData()
+    }
+})
+
+interface TreeOption {
+    name: string
+    id: string | number
+    children?: TreeOption[]
+}
+
+const treeData = ref<TreeOption[]>([])
+
+const treeIndexs = ref<TreeOption[]>([])
+
+function transformData(data: any[]): TreeOption[] {
+    return data.map(item => ({
+        name: item.name,
+        id: item.id,
+        children: item.children?.length ? transformData(item.children) : undefined
+    }))
+}
+
+// 过滤没有监测点的数据
+function buildLevel3Tree(nodes: any[]) {
+    const result: any[] = []
+    if (!nodes || !nodes.length) return result
+    nodes.forEach(node => {
+        const filteredChildren = buildLevel3Tree(node.children)
+        if (node.level === 3) {
+            result.push({ ...node, children: filteredChildren })
+        } else if (filteredChildren.length > 0) {
+            result.push({ ...node, children: filteredChildren })
+        }
+    })
+    return result
+}
+
+function transformDataIdex(data: any[]): TreeOption[] {
+    return data.map(item => ({
+        name: item.showName,
+        id: item.id,
+        children: item.children?.length ? transformDataIdex(item.children) : undefined
+    }))
+}
+
+// 监测点数据
+const fetchData = async () => {
+    try {
+        const response = await lineTree({})
+        treeData.value = buildLevel3Tree(response.data) // 转换数据格式并赋值给 transformedData
+    } catch (error) {
+        console.error('Error fetching data:', error)
+    }
+}
+
+// 无锡
+const fetchData_wx = async () => {
+    try {
+        const response = await lineTree_wx({})
+        treeData_wx.value = response.data // 转换数据格式并赋值给 transformedData
+        const res = await eleEpdChooseTree_wx()
+        if (res.data) {
+            treeIndexs.value = res.data // 转换数据格式并赋值给 transformedData
+        }
+    } catch (error) {
+        console.error('Error fetching data:', error)
+    }
+}
+
+// 指标数据
+const indexList = async () => {
+    try {
+        const lineId = deptIds.value[deptIds.value.length - 1]
+        {
+            const response = await targetList({ lineId: lineId })
+            if (response.data) {
+                treeIndexs.value = response.data // 转换数据格式并赋值给 transformedData
+            }
+        }
+    } catch (error) {
+        console.error('Error fetching data:', error)
+    }
+}
+
+const handleDeptChange = (deptId: []) => {
+    // labelString.value = fileRef.value.getCheckedNodes().pathLabels.join(" / ");
+    item_uid.value = []
+    nextTick(() => {
+        //fileRef.value.getCheckedNodes()[0]?.label   最后一层的值
+        let name = []
+        if (fileRef.value) {
+            const nodes = fileRef.value.getCheckedNodes()
+            name = nodes[0]?.pathLabels || []
+        }
+
+        if (selectItemSettingProps.itemJson) {
+            selectItemSettingProps.itemJson.lineId = deptId[deptId.length - 1]
+            selectItemSettingProps.itemJson.lineList = deptId
+            selectItemSettingProps.itemJson.lineName = name.join(' / ')
+        }
+
+        labelString.value = name.join(' / ')
+
+        if (useData.graphicDisplay == 'zl') {
+            // 配置里面的输入框内容更新
+            if (selectItemSettingProps.itemJson && selectItemSettingProps.itemJson.props) {
+                if (selectItemSettingProps.itemJson?.props.text.type == 'input') {
+                    selectItemSettingProps.itemJson.props.text.val = fileRef.value.getCheckedNodes()[0]?.label
+                }
+            }
+
+            if (deptId && item_title.value == '绑定指标') {
+                indexList()
+            }
+        }
+    })
+}
+// 给每一个元件绑定下拉框数据
+const handleSelectUID = (uid: []) => {
+    // 一定要在 nextTick 方法中进行赋值操作
+    nextTick(() => {
+        let name = []
+        let nodes = []
+        if (indexRef.value) {
+            nodes = indexRef.value.getCheckedNodes()
+            console.log('🚀 ~ handleSelectUID ~ indexRef.value.getCheckedNodes():', indexRef.value.getCheckedNodes())
+            name = nodes[0]?.pathLabels || []
+        }
+        if (selectItemSettingProps.itemJson) {
+            selectItemSettingProps.itemJson.UID = uid
+            selectItemSettingProps.itemJson.UIDName =
+                nodes[0].pathNodes[1].data.name + '$' + nodes[0].pathNodes[2].data.name + '$' + nodes[0].data.name //name.join('/')
+            console.log("🚀 ~ handleSelectUID ~ 'nodes[0].pathNodes[0]$' + nodes[0].data.name:", nodes[0])
+            if (is2DArray(uid)) {
+                selectItemSettingProps.itemJson.UIDNames = name.join(' / ')
+            } else {
+                selectItemSettingProps.itemJson.UIDNames = [name.join(' / ')]
+            }
+        }
+
+        // 获取选中的数据名称
+        const nameList = indexRef.value
+            .getCheckedNodes()
+            .map((item: any) => item.text)
+            .filter((text: string) => text !== '' && text !== null && text !== undefined)
+        const unitList = indexRef.value
+            .getCheckedNodes()
+            .map((item: any) => item.data.unit)
+            .filter((text: string) => text !== '' && text !== null && text !== undefined)
+        if (is2DArray(uid)) {
+            if (selectItemSettingProps.itemJson) {
+                selectItemSettingProps.itemJson.UIDNames = nameList
+                selectItemSettingProps.itemJson.unit = unitList
+                indexString.value = selectItemSettingProps.itemJson.UIDNames
+            }
+        } else {
+            indexString.value = nameList
+            // 配置里面的输入框内容更新
+            if (selectItemSettingProps.itemJson && selectItemSettingProps.itemJson.props) {
+                if (selectItemSettingProps.itemJson?.props.text.type == 'input') {
+                    // selectItemSettingProps.itemJson.props.text.val = name.join(' / ')
+                    let names = name.reverse()
+                    let str = ''
+                    if (names[1] == '无相别') {
+                        name[1] = ''
+                        str = names[2] + '-' + names[0] + ':###'
+                    } else {
+                        str = names[1] + '相' + names[2] + '-' + names[0] + ':###'
+                    }
+                    selectItemSettingProps.itemJson.props.text.val = str
+                }
+            }
+        }
+    })
+}
+
+// 添加监测点清除事件处理函数
+const handleDeptClear = () => {
+    // 清空监测点相关数据
+    deptIds.value = []
+    item_uid.value = []
+    labelString.value = ''
+    indexString.value = ''
+
+    // 清空 itemJson 中的相关属性
+    if (selectItemSettingProps.itemJson) {
+        selectItemSettingProps.itemJson.lineId = undefined
+        selectItemSettingProps.itemJson.lineList = []
+        selectItemSettingProps.itemJson.lineName = ''
+        selectItemSettingProps.itemJson.UID = []
+        selectItemSettingProps.itemJson.UIDName = ''
+        selectItemSettingProps.itemJson.UIDNames = []
+
+        // 清空配置中的输入框内容
+        if (selectItemSettingProps.itemJson.props && selectItemSettingProps.itemJson.props.text) {
+            selectItemSettingProps.itemJson.props.text.val = ''
+        }
+    }
+
+    // 重置 tooltip 状态
+    disabledTooltip.value = true
+    disabledTooltip_1.value = true
+
+    // 强制重新渲染组件
+    cascaderKey.value += 2
+}
+
+// 添加指标绑定清除事件处理函数
+const handleIndexClear = () => {
+    // 清空指标绑定相关数据
+    item_uid.value = []
+    indexString.value = ''
+
+    // 清空 itemJson 中的相关属性
+    if (selectItemSettingProps.itemJson) {
+        selectItemSettingProps.itemJson.UID = []
+        selectItemSettingProps.itemJson.UIDName = ''
+        selectItemSettingProps.itemJson.UIDNames = []
+
+        // 清空配置中的输入框内容
+        if (selectItemSettingProps.itemJson.props && selectItemSettingProps.itemJson.props.text) {
+            selectItemSettingProps.itemJson.props.text.val = ''
+        }
+    }
+
+    // 重置 tooltip 状态
+    disabledTooltip_1.value = true
+
+    // 强制重新渲染组件
+    cascaderKey.value += 2
+}
+
+/**
+ * 判断一个数据是否为二维数组
+ * @param {*} data - 需要判断的数据
+ * @returns {boolean} - 是二维数组返回true，否则返回false
+ */
+function is2DArray(data: any) {
+    // 首先判断外层是否为数组
+    if (!Array.isArray(data)) {
+        return false
+    }
+
+    // 然后判断内层每个元素是否都为数组
+    return data.every(item => Array.isArray(item))
+}
+</script>
+<style lang="less" scoped>
+.tipBox {
+    :deep(.el-descriptions__body) {
+        height: calc(100vh - 485px);
+        overflow-y: auto;
+    }
+}
+</style>
diff --git a/src/components/mt-edit/components/layout/right-aside/select-item-event-setting/index.vue b/src/components/mt-edit/components/layout/right-aside/select-item-event-setting/index.vue
new file mode 100644
index 0000000..2b27851
--- /dev/null
+++ b/src/components/mt-edit/components/layout/right-aside/select-item-event-setting/index.vue
@@ -0,0 +1,525 @@
+<template>
+    <div>
+        <el-button type="primary" class="w-1/1" @click="onAddEvent">添加事件</el-button>
+        <el-form label-width="60px" label-position="left">
+            <el-collapse v-model="activeNames">
+                <el-collapse-item
+                    v-for="(event_list_item, event_list_index) in event_list"
+                    :key="event_list_item.id"
+                    :name="event_list_item.id"
+                >
+                    <template #title>
+                        <div class="flex justify-between items-center w-1/1">
+                            <el-text>事件{{ event_list_index + 1 }}</el-text>
+                            <el-popconfirm title="删除该事件?" @confirm="onDelEvent(event_list_index)">
+                                <template #reference>
+                                    <el-button text circle size="small" @click.stop>
+                                        <el-icon title="删除" :class="``" :size="20">
+                                            <svg-analysis name="delete"></svg-analysis>
+                                        </el-icon>
+                                    </el-button>
+                                </template>
+                            </el-popconfirm>
+                        </div>
+                    </template>
+                    <div>
+                        <el-form-item label="事件类型" size="small" class="mt-10px">
+                            <el-select placeholder="事件类型" v-model="event_list[event_list_index].type">
+                                <el-option
+                                    v-for="item in event_type"
+                                    :key="item.value"
+                                    :label="item.label"
+                                    :value="item.value"
+                                />
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item label="事件行为" size="small">
+                            <el-select placeholder="事件行为" v-model="event_list[event_list_index].action">
+                                <el-option
+                                    v-for="item in event_action"
+                                    :key="item.value"
+                                    :label="item.label"
+                                    :value="item.value"
+                                />
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item
+                            label="页面跳转"
+                            size="small"
+                            v-if="event_list[event_list_index].action == 'pageJump'"
+                        >
+                            <el-select
+                                placeholder="页面跳转"
+                                v-model="event_list[event_list_index].jump_to"
+                                @change="onJumpToChange"
+                            >
+                                <el-option
+                                    v-for="item in dataTree"
+                                    :key="item.kId"
+                                    :label="item.name"
+                                    :value="item.kId"
+                                    :disabled="item.kId == currentKid"
+                                />
+                            </el-select>
+                        </el-form-item>
+                        <div v-else>
+                            <el-form-item v-if="event_list_item.action == 'changeAttr'" label="属性更改" size="small">
+                                <el-button @click="onChangeAttrClick(event_list_item, event_list_index)">
+                                    点击配置
+                                </el-button>
+                            </el-form-item>
+                            <el-form-item
+                                v-else-if="event_list_item.action == 'customCode'"
+                                label="代码编写"
+                                size="small"
+                            >
+                                <el-button @click="onCustomCodeClick(event_list_item, event_list_index)">
+                                    点击编写
+                                </el-button>
+                            </el-form-item>
+                            <el-form-item label="触发规则" size="small">
+                                <el-text>(不填直接触发)</el-text>
+                            </el-form-item>
+                            <div>
+                                <el-text>当</el-text>
+                                <el-select
+                                    placeholder="选择图形"
+                                    size="small"
+                                    v-model="event_list[event_list_index].trigger_rule.trigger_id"
+                                    @change="onTriggerIdChange(event_list_index)"
+                                >
+                                    <el-option
+                                        v-for="item in all_component_options"
+                                        :key="item.value"
+                                        :label="item.label"
+                                        :value="item.value"
+                                    />
+                                </el-select>
+                                <el-text>图形</el-text>
+                                <el-select
+                                    placeholder="选择属性"
+                                    size="small"
+                                    v-model="event_list[event_list_index].trigger_rule.trigger_attr"
+                                    @change="onTriggerAttrChange(event_list_index)"
+                                >
+                                    <el-option
+                                        v-for="item in getAttrById(
+                                            event_list[event_list_index].trigger_rule.trigger_id
+                                        )"
+                                        :key="item.value"
+                                        :label="item.label"
+                                        :value="item.value"
+                                    />
+                                </el-select>
+                                <el-text>属性</el-text>
+                                <el-select
+                                    placeholder="运算符"
+                                    size="small"
+                                    v-model="event_list[event_list_index].trigger_rule.operator"
+                                >
+                                    <el-option
+                                        v-for="item in getOperatorList(
+                                            getAttrTypeByValue(
+                                                getAttrById(event_list[event_list_index].trigger_rule.trigger_id),
+                                                event_list[event_list_index].trigger_rule.trigger_attr
+                                            )
+                                        )"
+                                        :key="item.value"
+                                        :label="item.label"
+                                        :value="item.value"
+                                    />
+                                </el-select>
+                                <input-target-value
+                                    v-model="event_list[event_list_index].trigger_rule.value"
+                                    :form-type="
+                                        getAttrTypeByValue(
+                                            getAttrById(event_list[event_list_index].trigger_rule.trigger_id),
+                                            event_list[event_list_index].trigger_rule.trigger_attr
+                                        )
+                                    "
+                                    :options="
+                                        getAttrOptionsByValue(
+                                            getAttrById(event_list[event_list_index].trigger_rule.trigger_id),
+                                            event_list[event_list_index].trigger_rule.trigger_attr
+                                        )
+                                    "
+                                    :disabled="event_list[event_list_index].trigger_rule.trigger_attr == undefined"
+                                    size="small"
+                                ></input-target-value>
+                                <el-text>时</el-text>
+                                <div>
+                                    <el-text>触发该事件</el-text>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </el-collapse-item>
+            </el-collapse>
+        </el-form>
+        <el-drawer v-model="drawer_visiable" :title="drawer_title" direction="ltr" size="50%">
+            <el-button class="w-1/1" @click="onAddChangeAttr">新增一组</el-button>
+            <el-form label-width="60px" label-position="left">
+                <div
+                    v-for="(change_attr_item, change_attr_index) in drawer_change_attr"
+                    :key="change_attr_item.id"
+                    class="flex items-center mt-10px"
+                >
+                    <el-form-item label="目标图形" size="small" class="m-0 pr-10px w-3/10">
+                        <el-select
+                            placeholder="选择目标图形"
+                            v-model="drawer_change_attr[change_attr_index].target_id"
+                            @change="drawer_change_attr[change_attr_index].target_attr = undefined"
+                        >
+                            <el-option
+                                v-for="item in all_component_options"
+                                :key="item.value"
+                                :label="item.label"
+                                :value="item.value"
+                            />
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="目标属性" size="small" class="m-0 pr-10px w-3/10">
+                        <el-select
+                            placeholder="选择目标属性"
+                            v-model="drawer_change_attr[change_attr_index].target_attr"
+                            @change="onTargetAttrChange(change_attr_index)"
+                        >
+                            <el-option
+                                v-for="item in getAttrById(drawer_change_attr[change_attr_index].target_id)"
+                                :key="item.value"
+                                :label="item.label"
+                                :value="item.value"
+                            />
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="期望值" size="small" class="m-0 pr-10px w-3/10">
+                        <input-target-value
+                            v-model="drawer_change_attr[change_attr_index].target_value"
+                            :form-type="
+                                getAttrTypeByValue(
+                                    getAttrById(drawer_change_attr[change_attr_index].target_id),
+                                    drawer_change_attr[change_attr_index].target_attr
+                                )
+                            "
+                            :options="
+                                getAttrOptionsByValue(
+                                    getAttrById(drawer_change_attr[change_attr_index].target_id),
+                                    drawer_change_attr[change_attr_index].target_attr
+                                )
+                            "
+                            :disabled="drawer_change_attr[change_attr_index].target_attr == undefined"
+                        ></input-target-value>
+                    </el-form-item>
+                    <el-popconfirm title="删除该配置?" @confirm="onRemoveChangeAttr(change_attr_index)">
+                        <template #reference>
+                            <el-button text circle size="small" @click.stop>
+                                <el-icon title="删除" :class="``" :size="20">
+                                    <svg-analysis name="delete"></svg-analysis>
+                                </el-icon>
+                            </el-button>
+                        </template>
+                    </el-popconfirm>
+                </div>
+            </el-form>
+        </el-drawer>
+        <el-dialog v-model="dialog_visiable" :title="dialog_title" :before-close="onDialogClose">
+            <v-ace-editor
+                v-model:value="dialog_code"
+                lang="javascript"
+                theme="monokai"
+                style="height: 400px"
+                :options="{
+                    useWorker: true,
+                    enableBasicAutocompletion: true,
+                    enableSnippets: true,
+                    enableLiveAutocompletion: true
+                }"
+            />
+        </el-dialog>
+    </div>
+</template>
+<script setup lang="ts">
+import {
+    ElButton,
+    ElForm,
+    ElFormItem,
+    ElSelect,
+    ElOption,
+    ElText,
+    ElInput,
+    ElCollapse,
+    ElCollapseItem,
+    ElIcon,
+    ElPopconfirm,
+    ElDrawer,
+    ElDialog
+} from 'element-plus'
+import { computed, ref, watch } from 'vue'
+import SvgAnalysis from '@/components/mt-edit/components/svg-analysis/index.vue'
+import { randomString } from '@/components/mt-edit/utils'
+import type {
+    DoneJsonEventListAction,
+    DoneJsonEventListType,
+    IDoneJson,
+    IDoneJsonActionChangeAttr,
+    IDoneJsonEventList,
+    ILeftAsideConfigItemPublicPropsType
+} from '@/components/mt-edit/store/types'
+import InputTargetValue from './input-target-value.vue'
+import '@/components/mt-edit/ace-edit'
+import { VAceEditor } from 'vue3-ace-editor'
+import { useDataStore } from '@/stores/menuList'
+
+type SelectItemEventSettingProps = {
+    doneJson: IDoneJson[]
+    itemEvents?: IDoneJsonEventList[]
+}
+const selectItemEventSettingProps = withDefaults(defineProps<SelectItemEventSettingProps>(), {
+    itemEvents: () => []
+})
+const selectItemEventSettingEmits = defineEmits(['update:itemEvents'])
+interface IActionChangeAttrTarget {
+    label: string
+    value: string
+    type: ILeftAsideConfigItemPublicPropsType
+    options?: { label: string; value: any }[]
+}
+
+const event_type: {
+    label: string
+    value: DoneJsonEventListType
+}[] = [
+    {
+        label: '单击',
+        value: 'click'
+    },
+    {
+        label: '双击',
+        value: 'dblclick'
+    },
+    {
+        label: '鼠标移入',
+        value: 'mouseover'
+    },
+    {
+        label: '鼠标移出',
+        value: 'mouseout'
+    }
+]
+const event_action: {
+    label: string
+    value: DoneJsonEventListAction
+}[] = [
+    {
+        label: '属性更改',
+        value: 'changeAttr'
+    },
+    {
+        label: '自定义代码',
+        value: 'customCode'
+    },
+    {
+        label: '跳转页面',
+        value: 'pageJump'
+    }
+]
+const all_component_options = computed(() => {
+    return selectItemEventSettingProps.doneJson.map(m => {
+        return {
+            label: m.title,
+            value: m.id
+        }
+    })
+})
+const activeNames = ref([])
+const event_list = computed(() => selectItemEventSettingProps.itemEvents)
+const select_event_index = ref(0)
+const drawer_visiable = ref(false)
+const drawer_title = ref('属性更改配置')
+const drawer_change_attr = ref<IDoneJsonActionChangeAttr[]>([]) // 属性更改配置信息
+const dialog_visiable = ref(false)
+const dialog_title = ref('自定义代码编写')
+const dialog_code = ref('')
+
+const dataStore = useDataStore()
+
+const dataTree = computed(() => dataStore.dataTree)
+
+const currentKid = computed(() => dataStore.identifying)
+const onAddEvent = () => {
+    event_list.value.push({
+        id: randomString(),
+        type: 'click',
+        action: 'changeAttr',
+        jump_to: '',
+        change_attr: [],
+        custom_code: '',
+        trigger_rule: {
+            trigger_id: undefined,
+            trigger_attr: undefined,
+            operator: undefined,
+            value: null
+        }
+    })
+}
+const onDelEvent = (event_list_index: number) => {
+    event_list.value.splice(event_list_index, 1)
+}
+const onChangeAttrClick = (item: IDoneJsonEventList, index: number) => {
+    drawer_visiable.value = true
+    drawer_change_attr.value = item.change_attr
+    drawer_title.value = `事件${index + 1}属性更改配置`
+    select_event_index.value = index
+}
+const onAddChangeAttr = () => {
+    drawer_change_attr.value.push({
+        id: randomString(),
+        target_id: '',
+        target_attr: undefined,
+        target_value: undefined
+    })
+}
+const onRemoveChangeAttr = (change_attr_index: number) => {
+    drawer_change_attr.value.splice(change_attr_index, 1)
+}
+const onTargetAttrChange = (change_attr_index: number) => {
+    const type = getAttrTypeByValue(
+        getAttrById(drawer_change_attr.value[change_attr_index].target_id),
+        drawer_change_attr.value[change_attr_index].target_attr
+    )
+    if (type == 'switch') {
+        drawer_change_attr.value[change_attr_index].target_value = false
+    } else if (type == 'number') {
+        drawer_change_attr.value[change_attr_index].target_value = 0
+    } else {
+        drawer_change_attr.value[change_attr_index].target_value = undefined
+    }
+}
+/**
+ * 根据id获取属性
+ * @param id
+ */
+const getAttrById = (id: string | null | undefined) => {
+    if (!id) {
+        return []
+    }
+    const find_item_json = selectItemEventSettingProps.doneJson.find(f => f.id == id)
+    if (!find_item_json) {
+        return []
+    }
+    const attr: IActionChangeAttrTarget[] = [
+        {
+            label: 'x轴坐标',
+            value: 'binfo.left',
+            type: 'number'
+        },
+        {
+            label: 'y轴坐标',
+            value: 'binfo.top',
+            type: 'number'
+        },
+        {
+            label: '宽度',
+            value: 'binfo.width',
+            type: 'number'
+        },
+        {
+            label: '高度',
+            value: 'binfo.height',
+            type: 'number'
+        },
+        {
+            label: '旋转角度',
+            value: 'binfo.angle',
+            type: 'number'
+        }
+    ]
+    for (const props_key in find_item_json.props) {
+        if (find_item_json.props[props_key].disabled) {
+            continue
+        }
+        attr.push({
+            label: find_item_json.props[props_key].title,
+            value: `props.${props_key}.val`,
+            type: find_item_json.props[props_key].type,
+            options: find_item_json.props[props_key].options
+        })
+    }
+    return attr
+}
+/**
+ * 根据值获取属性类型
+ * @param attr
+ * @param val
+ */
+const getAttrTypeByValue = (attr: IActionChangeAttrTarget[], val: any) => {
+    return attr.find(f => f.value == val)?.type ?? ''
+}
+/**
+ * 根据值获取属性选项
+ */
+const getAttrOptionsByValue = (attr: IActionChangeAttrTarget[], val: any) => {
+    return attr.find(f => f.value == val)?.options
+}
+/**
+ * 根据属性类型获取运算符
+ */
+const getOperatorList = (attr_type: ILeftAsideConfigItemPublicPropsType | '') => {
+    if (attr_type == 'number') {
+        return [
+            {
+                label: '大于',
+                value: '>'
+            },
+            {
+                label: '等于',
+                value: '='
+            },
+            {
+                label: '小于',
+                value: '<'
+            },
+            {
+                label: '不等于',
+                value: '!='
+            }
+        ]
+    } else if (attr_type == 'color' || attr_type == 'switch' || attr_type == 'select' || attr_type == 'input') {
+        return [
+            {
+                label: '等于',
+                value: '='
+            },
+            {
+                label: '不等于',
+                value: '!='
+            }
+        ]
+    }
+    return []
+}
+const onTriggerIdChange = (event_list_index: number) => {
+    event_list.value[event_list_index].trigger_rule.trigger_attr = undefined
+    event_list.value[event_list_index].trigger_rule.operator = undefined
+    event_list.value[event_list_index].trigger_rule.value = null
+}
+const onTriggerAttrChange = (event_list_index: number) => {
+    event_list.value[event_list_index].trigger_rule.operator = undefined
+    event_list.value[event_list_index].trigger_rule.value = null
+}
+const onCustomCodeClick = (item: IDoneJsonEventList, index: number) => {
+    dialog_visiable.value = true
+    dialog_code.value = item.custom_code
+    dialog_title.value = `事件${index + 1}自定义代码编写`
+    select_event_index.value = index
+}
+const onDialogClose = () => {
+    event_list.value[select_event_index.value].custom_code = dialog_code.value
+    dialog_visiable.value = false
+}
+watch(event_list.value, val => {
+    selectItemEventSettingEmits('update:itemEvents', val)
+})
+
+const onJumpToChange = async (value: string) => {}
+</script>
diff --git a/src/components/mt-edit/components/layout/right-aside/select-item-event-setting/input-target-value.vue b/src/components/mt-edit/components/layout/right-aside/select-item-event-setting/input-target-value.vue
new file mode 100644
index 0000000..a3494d2
--- /dev/null
+++ b/src/components/mt-edit/components/layout/right-aside/select-item-event-setting/input-target-value.vue
@@ -0,0 +1,26 @@
+<!-- 期望值组件 -->
+<template>
+    <el-input-number v-if="selectItemEventSettingProps.formType == 'number'"></el-input-number>
+    <el-color-picker v-else-if="selectItemEventSettingProps.formType == 'color'"></el-color-picker>
+    <el-switch v-else-if="selectItemEventSettingProps.formType == 'switch'"></el-switch>
+    <el-select v-else-if="selectItemEventSettingProps.formType == 'select'">
+        <el-option v-for="item in select_options" :key="item.value" :label="item.label" :value="item.value"></el-option>
+    </el-select>
+    <el-input v-else></el-input>
+</template>
+<script setup lang="ts">
+import type { ILeftAsideConfigItemPublicPropsType } from '@/components/mt-edit/store/types'
+import { ElInputNumber, ElInput, ElColorPicker, ElSwitch, ElSelect, ElOption } from 'element-plus'
+import { computed } from 'vue'
+type InputTargetValue = {
+    formType: ILeftAsideConfigItemPublicPropsType | ''
+    options?: {
+        label: string
+        value: any
+    }[]
+}
+const selectItemEventSettingProps = withDefaults(defineProps<InputTargetValue>(), {})
+const select_options = computed(() => {
+    return selectItemEventSettingProps.options ?? []
+})
+</script>
diff --git a/src/components/mt-edit/components/layout/right-aside/select-item-props-setting.vue b/src/components/mt-edit/components/layout/right-aside/select-item-props-setting.vue
new file mode 100644
index 0000000..3ef3eb8
--- /dev/null
+++ b/src/components/mt-edit/components/layout/right-aside/select-item-props-setting.vue
@@ -0,0 +1,94 @@
+<template>
+    <div v-for="(attr_item, key) in selectItemPropsSettingProps.propsInfo" :key="key">
+        <el-form-item v-if="!attr_item.disabled" :label="attr_item.title" size="small">
+            <el-select
+                v-if="attr_item.type === 'select' && !attr_item.disabled"
+                v-model="attr_item.val"
+                placeholder="Select"
+                size="small"
+                :disabled="attr_item?.disabled"
+            >
+                <el-option
+                    v-for="item in attr_item.options"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                />
+            </el-select>
+            <el-input-number
+                v-else-if="attr_item.type === 'number' && !attr_item.disabled"
+                v-model="attr_item.val"
+                :disabled="attr_item?.disabled"
+            ></el-input-number>
+            <el-input
+                v-else-if="attr_item.type === 'input' && !attr_item.disabled"
+                v-model="attr_item.val"
+                :disabled="attr_item?.disabled || flag"
+            ></el-input>
+            <el-input
+                v-else-if="attr_item.type === 'textArea' && !attr_item.disabled"
+                v-model="attr_item.val"
+                :disabled="attr_item?.disabled"
+                type="textarea"
+            ></el-input>
+            <el-color-picker
+                v-else-if="attr_item.type === 'color' && !attr_item.disabled"
+                v-model="attr_item.val"
+                :disabled="attr_item?.disabled"
+            ></el-color-picker>
+            <el-switch
+                v-else-if="attr_item.type === 'switch' && !attr_item.disabled"
+                v-model="attr_item.val"
+                :disabled="attr_item?.disabled"
+            ></el-switch>
+            <div v-else-if="attr_item.type === 'jsonEdit' && !attr_item.disabled">
+                <json-edit v-model:contentObj="attr_item.val"></json-edit>
+            </div>
+        </el-form-item>
+    </div>
+</template>
+<script setup lang="ts">
+import type { ILeftAsideConfigItemPublicProps } from '@/components/mt-edit/store/types'
+import {
+    ElTabs,
+    ElTabPane,
+    ElForm,
+    ElFormItem,
+    ElInput,
+    ElInputNumber,
+    ElSelect,
+    ElOption,
+    ElOptionGroup,
+    ElSwitch,
+    ElText,
+    ElColorPicker,
+    ElUpload,
+    ElIcon,
+    type UploadUserFile,
+    ElButton,
+    type UploadFile,
+    ElMessage
+} from 'element-plus'
+import JsonEdit from './json-edit.vue'
+import type { IDoneJson } from '@/components/mt-edit/store/types'
+import { watch, ref } from 'vue'
+type SelectItemPropsSettingProps = {
+    propsInfo: ILeftAsideConfigItemPublicProps | undefined
+    itemJson: IDoneJson | undefined
+}
+const selectItemPropsSettingProps = withDefaults(defineProps<SelectItemPropsSettingProps>(), {})
+
+const flag = ref(false)
+
+// 监测点和指标的时候输入框禁用
+watch(
+    () => selectItemPropsSettingProps.itemJson?.keyId,
+    (newVal, oldVal) => {
+        if (newVal == 'bind-dot' || newVal == 'bind-index') {
+            flag.value = true
+        } else {
+            flag.value = false
+        }
+    }
+)
+</script>
diff --git a/src/components/mt-edit/components/layout/right-aside/select-item-setting.vue b/src/components/mt-edit/components/layout/right-aside/select-item-setting.vue
new file mode 100644
index 0000000..421e64a
--- /dev/null
+++ b/src/components/mt-edit/components/layout/right-aside/select-item-setting.vue
@@ -0,0 +1,314 @@
+<template>
+    <el-tabs v-model="activeName" v-if="selectItemSettingProps.itemJson" class="select-none">
+        <el-tab-pane label="配置" name="config">
+            <el-collapse v-model="activeNames" accordion>
+                <el-collapse-item title="边界和属性" name="1">
+                    <el-form label-width="60px" label-position="left">
+                        <el-form-item label="标题" size="small">
+                            <el-input size="small" v-model="item_title"></el-input>
+                        </el-form-item>
+                        <el-form-item label="x轴坐标" size="small">
+                            <el-input-number
+                                size="small"
+                                v-model="item_binfo_left"
+                                @change="emits('addHistory')"
+                            ></el-input-number>
+                        </el-form-item>
+                        <el-form-item label="y轴坐标" size="small">
+                            <el-input-number
+                                size="small"
+                                v-model="item_binfo_top"
+                                @change="emits('addHistory')"
+                            ></el-input-number>
+                        </el-form-item>
+                        <el-form-item label="宽度" size="small" v-if="!is_line">
+                            <el-input-number
+                                size="small"
+                                v-model="item_binfo_width"
+                                @change="emits('addHistory')"
+                            ></el-input-number>
+                        </el-form-item>
+                        <el-form-item label="高度" size="small" v-if="!is_line">
+                            <el-input-number
+                                size="small"
+                                v-model="item_binfo_height"
+                                @change="emits('addHistory')"
+                            ></el-input-number>
+                        </el-form-item>
+                        <el-form-item label="旋转角度" size="small" v-if="!is_line">
+                            <el-input-number
+                                size="small"
+                                v-model="item_binfo_angle"
+                                @change="emits('addHistory')"
+                            ></el-input-number>
+                        </el-form-item>
+                        <el-form-item label="隐藏" size="small">
+                            <el-switch size="small" v-model="item_hide" @change="emits('addHistory')"></el-switch>
+                        </el-form-item>
+                        <el-form-item label="锁定" size="small">
+                            <el-switch size="small" v-model="item_lock" @change="emits('addHistory')"></el-switch>
+                        </el-form-item>
+                        <el-form-item v-if="!item_lock && !is_line" label="可缩放" size="small">
+                            <el-switch size="small" v-model="item_resize"></el-switch>
+                        </el-form-item>
+                        <el-form-item v-if="item_resize && !item_lock && !is_line" label="等比缩放" size="small">
+                            <el-switch size="small" v-model="item_use_proportional_scaling"></el-switch>
+                        </el-form-item>
+                        <el-form-item v-if="!item_lock && !is_line" label="可旋转" size="small">
+                            <el-switch size="small" v-model="item_rotate"></el-switch>
+                        </el-form-item>
+                        <select-item-props-setting
+                            v-model:propsInfo="item_props"
+                            :item-json="selectItemSettingProps.itemJson"
+                        ></select-item-props-setting>
+                    </el-form>
+                </el-collapse-item>
+                <el-collapse-item title="动画配置" name="2">
+                    <select-item-animate-setting
+                        v-model:common-animates="item_common_animations"
+                    ></select-item-animate-setting>
+                </el-collapse-item>
+            </el-collapse>
+        </el-tab-pane>
+        <el-tab-pane label="事件" name="event">
+            <select-item-event-setting
+                :done-json="selectItemSettingProps.doneJson"
+                v-model:item-events="item_events"
+            ></select-item-event-setting>
+        </el-tab-pane>
+        <el-tab-pane label="绑定" name="bind_device">
+            <!-- <slot v-if="hasDeviceBindSlot" name="deviceBind" :item="selectItemSettingProps.itemJson" />
+      <el-empty v-else description="请传递插槽进行设备绑定页面显示" /> -->
+            <select-item-bind-setting :item-json="selectItemSettingProps.itemJson"></select-item-bind-setting>
+        </el-tab-pane>
+    </el-tabs>
+</template>
+<script setup lang="ts">
+import { computed, ref, useSlots, watch } from 'vue'
+import {
+    ElTabs,
+    ElTabPane,
+    ElForm,
+    ElFormItem,
+    ElInput,
+    ElInputNumber,
+    ElEmpty,
+    ElOption,
+    ElOptionGroup,
+    ElSwitch,
+    ElText,
+    ElColorPicker,
+    ElUpload,
+    ElIcon,
+    type UploadUserFile,
+    ElButton,
+    type UploadFile,
+    ElMessage,
+    ElCollapse,
+    ElCollapseItem
+} from 'element-plus'
+import type { IDoneJson } from '@/components/mt-edit/store/types'
+import SelectItemPropsSetting from './select-item-props-setting.vue'
+import SelectItemAnimateSetting from './select-item-animate-setting/index.vue'
+import SelectItemEventSetting from './select-item-event-setting/index.vue'
+import SelectItemBindSetting from './select-item-bind-setting/index.vue'
+import { bingStore } from '@/components/mt-edit/store/bind'
+const activeName = ref('config')
+const activeNames = ref(['1'])
+type SelectItemSettingProps = {
+    itemJson: IDoneJson | undefined
+    doneJson: IDoneJson[]
+}
+const selectItemSettingProps = withDefaults(defineProps<SelectItemSettingProps>(), {})
+const emits = defineEmits(['update:itemJson', 'addHistory'])
+const slots = useSlots()
+// 自由连线 直角连线都有自定义宽高以及禁止缩放和旋转
+const is_line = computed(() => selectItemSettingProps.itemJson?.type === 'sys-line')
+
+const item_title = computed({
+    get: () => {
+        return selectItemSettingProps.itemJson?.title
+    },
+    set: value => {
+        emits('update:itemJson', {
+            ...selectItemSettingProps.itemJson,
+            title: value
+        })
+    }
+})
+const item_binfo_left = computed({
+    get: () => {
+        return selectItemSettingProps.itemJson?.binfo.left
+    },
+    set: value => {
+        emits('update:itemJson', {
+            ...selectItemSettingProps.itemJson,
+            binfo: {
+                ...selectItemSettingProps.itemJson?.binfo,
+                left: value
+            }
+        })
+    }
+})
+const item_binfo_top = computed({
+    get: () => {
+        return selectItemSettingProps.itemJson?.binfo.top
+    },
+    set: value => {
+        emits('update:itemJson', {
+            ...selectItemSettingProps.itemJson,
+            binfo: {
+                ...selectItemSettingProps.itemJson?.binfo,
+                top: value
+            }
+        })
+    }
+})
+const item_binfo_width = computed({
+    get: () => {
+        return selectItemSettingProps.itemJson?.binfo.width
+    },
+    set: value => {
+        emits('update:itemJson', {
+            ...selectItemSettingProps.itemJson,
+            binfo: {
+                ...selectItemSettingProps.itemJson?.binfo,
+                width: value
+            }
+        })
+    }
+})
+const item_binfo_height = computed({
+    get: () => {
+        return selectItemSettingProps.itemJson?.binfo.height
+    },
+    set: value => {
+        emits('update:itemJson', {
+            ...selectItemSettingProps.itemJson,
+            binfo: {
+                ...selectItemSettingProps.itemJson?.binfo,
+                height: value
+            }
+        })
+    }
+})
+const item_binfo_angle = computed({
+    get: () => {
+        return selectItemSettingProps.itemJson?.binfo.angle
+    },
+    set: value => {
+        emits('update:itemJson', {
+            ...selectItemSettingProps.itemJson,
+            binfo: {
+                ...selectItemSettingProps.itemJson?.binfo,
+                angle: value
+            }
+        })
+    }
+})
+const item_hide = computed({
+    get: () => {
+        return selectItemSettingProps.itemJson?.hide
+    },
+    set: value => {
+        emits('update:itemJson', {
+            ...selectItemSettingProps.itemJson,
+            hide: value
+        })
+    }
+})
+const item_lock = computed({
+    get: () => {
+        return selectItemSettingProps.itemJson?.lock
+    },
+    set: value => {
+        emits('update:itemJson', {
+            ...selectItemSettingProps.itemJson,
+            lock: value
+        })
+    }
+})
+
+const item_resize = computed({
+    get: () => {
+        return selectItemSettingProps.itemJson?.resize
+    },
+    set: value => {
+        emits('update:itemJson', {
+            ...selectItemSettingProps.itemJson,
+            resize: value
+        })
+    }
+})
+const item_use_proportional_scaling = computed({
+    get: () => {
+        return selectItemSettingProps.itemJson?.use_proportional_scaling
+    },
+    set: value => {
+        emits('update:itemJson', {
+            ...selectItemSettingProps.itemJson,
+            use_proportional_scaling: value
+        })
+    }
+})
+const item_rotate = computed({
+    get: () => {
+        return selectItemSettingProps.itemJson?.rotate
+    },
+    set: value => {
+        emits('update:itemJson', {
+            ...selectItemSettingProps.itemJson,
+            rotate: value
+        })
+    }
+})
+const item_props = computed({
+    get: () => {
+        return selectItemSettingProps.itemJson?.props
+    },
+    set: value => {
+        emits('update:itemJson', {
+            ...selectItemSettingProps.itemJson,
+            props: value
+        })
+    }
+})
+const item_common_animations = computed({
+    get: () => {
+        return selectItemSettingProps.itemJson?.common_animations
+    },
+    set: value => {
+        emits('update:itemJson', {
+            ...selectItemSettingProps.itemJson,
+            common_animations: value
+        })
+    }
+})
+const item_events = computed({
+    get: () => {
+        return selectItemSettingProps.itemJson?.events
+    },
+    set: value => {
+        emits('update:itemJson', {
+            ...selectItemSettingProps.itemJson,
+            events: value
+        })
+    }
+})
+
+const item_binds = computed({
+    get: () => {
+        return selectItemSettingProps.itemJson?.bind
+    },
+    set: value => {
+        emits('update:itemJson', {
+            ...selectItemSettingProps.itemJson,
+            bind: value
+        })
+    }
+})
+
+const hasDeviceBindSlot = computed(() => {
+    return !!slots.deviceBind
+})
+</script>
diff --git a/src/components/mt-edit/components/layout/tabs/index.vue b/src/components/mt-edit/components/layout/tabs/index.vue
new file mode 100644
index 0000000..f7c18ae
--- /dev/null
+++ b/src/components/mt-edit/components/layout/tabs/index.vue
@@ -0,0 +1,21 @@
+<template>
+    <div style="width: 100%">
+        <el-tabs v-model="activeName" class="demo-tabs">
+            <el-tab-pane label="图纸" name="1">
+                <left-aside-list></left-aside-list>
+            </el-tab-pane>
+            <el-tab-pane label="基本图元" name="2">
+                <left-aside :leftAsideConfig="leftAsideStore.config"></left-aside>
+            </el-tab-pane>
+        </el-tabs>
+    </div>
+</template>
+<script setup lang="ts">
+import { reactive, ref } from 'vue'
+import LeftAside from '@/components/mt-edit/components/layout/left-aside/index.vue'
+import { ElTabs, ElTabPane } from 'element-plus'
+import { leftAsideStore } from '@/components/mt-edit/store/left-aside'
+import LeftAsideList from '@/components/mt-edit/components/layout/left-aside-list/index.vue'
+
+const activeName = ref('1')
+</script>
diff --git a/src/components/mt-edit/components/line-render/index.vue b/src/components/mt-edit/components/line-render/index.vue
new file mode 100644
index 0000000..c14c064
--- /dev/null
+++ b/src/components/mt-edit/components/line-render/index.vue
@@ -0,0 +1,524 @@
+<template>
+    <svg
+        class="mt-line-render"
+        :style="{
+            position: 'absolute',
+            left: `${-lineRenderProps.itemJson.binfo.left - offset}px`,
+            top: `${-lineRenderProps.itemJson.binfo.top - offset}px`,
+            width: `${lineRenderProps.canvasCfg.width + offset}px`,
+            height: `${lineRenderProps.canvasCfg.height + offset}px`
+        }"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        pointer-events="none"
+    >
+        <g>
+            <defs>
+                <marker
+                    :id="'markerArrowStart' + lineRenderProps.itemJson.id"
+                    viewBox="0 0 10 10"
+                    refX="8"
+                    refY="5"
+                    markerWidth="6"
+                    markerHeight="6"
+                    orient="auto-start-reverse"
+                >
+                    <path d="M 0 0 L 10 5 L 0 10 z" :fill="lineRenderProps.itemJson.props.stroke.val" />
+                </marker>
+                <marker
+                    :id="'markerArrowEnd' + lineRenderProps.itemJson.id"
+                    viewBox="0 0 10 10"
+                    refX="8"
+                    refY="5"
+                    markerWidth="6"
+                    markerHeight="6"
+                    orient="auto"
+                >
+                    <path d="M 0 0 L 10 5 L 0 10 z" :fill="lineRenderProps.itemJson.props.stroke.val" />
+                </marker>
+            </defs>
+
+            <path
+                :d="
+                    positionArrarToPath(
+                        lineRenderProps.itemJson.props.point_position.val,
+                        lineRenderProps.itemJson.binfo.left + offset,
+                        lineRenderProps.itemJson.binfo.top + offset
+                    )
+                "
+                pointer-events="visibleStroke"
+                fill="none"
+                :stroke="
+                    lineRenderProps.itemJson.props.ani_type.val === 'electricity'
+                        ? lineRenderProps.itemJson.props.ani_color.val
+                        : lineRenderProps.itemJson.props.stroke.val
+                "
+                :stroke-width="lineRenderProps.itemJson.props['stroke-width'].val"
+                style="cursor: move"
+                stroke-dashoffset="0"
+                :stroke-dasharray="
+                    lineRenderProps.itemJson.props.ani_type.val === 'electricity'
+                        ? lineRenderProps.itemJson.props['stroke-width'].val * 3
+                        : 0
+                "
+                :marker-start="
+                    lineRenderProps.itemJson.props?.['marker-start']?.val
+                        ? `url(#markerArrowStart${lineRenderProps.itemJson.id})`
+                        : ''
+                "
+                :marker-end="
+                    lineRenderProps.itemJson.props?.['marker-end']?.val
+                        ? `url(#markerArrowEnd${lineRenderProps.itemJson.id})`
+                        : ''
+                "
+                class="real"
+            >
+                <animate
+                    v-if="lineRenderProps.itemJson.props.ani_type.val === 'electricity'"
+                    attributeName="stroke-dashoffset"
+                    :from="lineRenderProps.itemJson.props.ani_reverse.val ? 0 : 1000"
+                    :to="
+                        lineRenderProps.itemJson.props.ani_reverse.val
+                            ? lineRenderProps.itemJson.props.ani_play.val
+                                ? 1000
+                                : 0
+                            : lineRenderProps.itemJson.props.ani_play.val
+                              ? 0
+                              : 1000
+                    "
+                    :dur="`${
+                        lineRenderProps.itemJson.props.ani_dur.val < 1 ? 1 : lineRenderProps.itemJson.props.ani_dur.val
+                    }s`"
+                    repeatCount="indefinite"
+                />
+            </path>
+            <!-- 电流状态不太好选中，所以放个透明的放下面 -->
+            <path
+                :d="
+                    positionArrarToPath(
+                        lineRenderProps.itemJson.props.point_position.val,
+                        lineRenderProps.itemJson.binfo.left + offset,
+                        lineRenderProps.itemJson.binfo.top + offset
+                    )
+                "
+                pointer-events="visibleStroke"
+                fill="none"
+                stroke="transparent"
+                :stroke-width="lineRenderProps.itemJson.props['stroke-width'].val"
+                style="cursor: move"
+                stroke-dashoffset="0"
+                :marker-start="
+                    lineRenderProps.itemJson.props?.['marker-start']?.val
+                        ? `url(#markerArrowStart${lineRenderProps.itemJson.id})`
+                        : ''
+                "
+                :marker-end="
+                    lineRenderProps.itemJson.props?.['marker-end']?.val
+                        ? `url(#markerArrowEnd${lineRenderProps.itemJson.id})`
+                        : ''
+                "
+            ></path>
+            <!-- 水珠 -->
+            <path
+                v-if="lineRenderProps.itemJson.props.ani_type.val === 'waterdrop'"
+                :d="
+                    positionArrarToPath(
+                        lineRenderProps.itemJson.props.point_position.val,
+                        lineRenderProps.itemJson.binfo.left + offset,
+                        lineRenderProps.itemJson.binfo.top + offset
+                    )
+                "
+                fill="none"
+                fill-opacity="0"
+                :stroke="lineRenderProps.itemJson.props.ani_color.val"
+                :stroke-width="lineRenderProps.itemJson.props['stroke-width'].val"
+                :stroke-dasharray="lineRenderProps.itemJson.props['stroke-width'].val * 3"
+                stroke-dashoffset="0"
+                stroke-linecap="round"
+            >
+                <animate
+                    attributeName="stroke-dashoffset"
+                    :from="lineRenderProps.itemJson.props.ani_reverse.val ? 0 : 1000"
+                    :to="
+                        lineRenderProps.itemJson.props.ani_reverse.val
+                            ? lineRenderProps.itemJson.props.ani_play.val
+                                ? 1000
+                                : 0
+                            : lineRenderProps.itemJson.props.ani_play.val
+                              ? 0
+                              : 1000
+                    "
+                    :dur="`${
+                        lineRenderProps.itemJson.props.ani_dur.val < 1 ? 1 : lineRenderProps.itemJson.props.ani_dur.val
+                    }s`"
+                    repeatCount="indefinite"
+                    fill="freeze"
+                />
+            </path>
+            <!-- 轨迹 -->
+            <circle
+                v-else-if="lineRenderProps.itemJson.props.ani_type.val === 'track'"
+                cx="0"
+                cy="0"
+                :r="lineRenderProps.itemJson.props['stroke-width'].val * 2"
+                :fill="lineRenderProps.itemJson.props.ani_color.val"
+            >
+                <animateMotion
+                    :path="
+                        positionArrarToPath(
+                            lineRenderProps.itemJson.props.point_position.val,
+                            lineRenderProps.itemJson.binfo.left + offset,
+                            lineRenderProps.itemJson.binfo.top + offset
+                        )
+                    "
+                    :dur="`${
+                        lineRenderProps.itemJson.props.ani_dur.val < 1 ? 1 : lineRenderProps.itemJson.props.ani_dur.val
+                    }s`"
+                    repeatCount="indefinite"
+                ></animateMotion>
+            </circle>
+            <g v-if="lineRenderProps.itemJson.active">
+                <circle
+                    v-for="(item, index) in addPointPosition"
+                    :key="index"
+                    pointer-events="fill"
+                    :cx="item.x + lineRenderProps.itemJson.binfo.left + offset"
+                    :cy="item.y + lineRenderProps.itemJson.binfo.top + offset"
+                    r="4"
+                    stroke-width="2"
+                    :stroke="lineRenderProps.itemJson.props.stroke.val"
+                    fill="transparent"
+                    class="cursor-crosshair opacity-30"
+                    @mousedown="onMouseDown($event, index, 'add', item)"
+                    @touchstart.passive="onMouseDown($event, index, 'add', item)"
+                />
+            </g>
+            <g v-if="lineRenderProps.itemJson.active">
+                <circle
+                    v-for="(item, index) in lineRenderProps.itemJson.props.point_position.val"
+                    :key="index"
+                    pointer-events="fill"
+                    :id="`point-${lineRenderProps.itemJson.id}-${index}`"
+                    :cx="item.x + lineRenderProps.itemJson.binfo.left + offset"
+                    :cy="item.y + lineRenderProps.itemJson.binfo.top + offset"
+                    r="4"
+                    stroke-width="1"
+                    :stroke="lineRenderProps.itemJson.props.stroke.val"
+                    fill="#fff"
+                    :class="
+                        lineRenderProps.mode === 'line-edit' &&
+                        index !== 0 &&
+                        index !== lineRenderProps.itemJson.props.point_position.val.length - 1
+                            ? 'cursor-remove'
+                            : 'cursor-pointer'
+                    "
+                    @mousedown="onMouseDown($event, index, 'edit', item)"
+                    @touchstart.passive="onMouseDown($event, index, 'edit', item)"
+                />
+            </g>
+        </g>
+    </svg>
+</template>
+<script setup lang="ts">
+import type { MouseTouchEvent } from '@/components/mt-dzr/utils/types'
+import type { IDoneJson, IGlobalStoreCanvasCfg, IGlobalStoreGridCfg } from '../../store/types'
+import {
+    alignToGrid,
+    getCenterXY,
+    getRealityXY,
+    getRectCenterCoordinate,
+    getRectCoordinate,
+    positionArrarToPath,
+    rotatePoint
+} from '@/components/mt-edit/utils'
+import { computed, reactive, ref, watch } from 'vue'
+import { configStore } from '../../store/config'
+type LineRenderProps = {
+    itemJson: IDoneJson
+    canvasCfg: IGlobalStoreCanvasCfg
+    grid: IGlobalStoreGridCfg
+    canvasDom: HTMLElement | null
+    doneJson: IDoneJson[]
+    lockState: boolean
+    mode: 'normal' | 'line-edit'
+}
+const lineRenderProps = withDefaults(defineProps<LineRenderProps>(), {
+    mode: 'normal'
+})
+const lineRenderEmits = defineEmits(['update:itemJson', 'setIntention', 'lineMouseUp'])
+const offset = configStore.lineRenderOffset
+//如果网格关闭或者没有开启网格对齐，网格大小为1
+const grid_align_size = computed(() =>
+    !lineRenderProps.grid.align || !lineRenderProps.grid.enabled ? 1 : lineRenderProps.grid.size
+)
+const addPointPosition = ref()
+const onMouseDown = (
+    de: MouseTouchEvent,
+    point_index: number,
+    type: 'add' | 'edit',
+    item: { x: number; y: number }
+) => {
+    if (lineRenderProps.lockState) {
+        return
+    }
+
+    de.stopPropagation()
+    // 如果是编辑模式 并且不是第一个点或者不是最后一个点
+    if (
+        lineRenderProps.mode === 'line-edit' &&
+        type == 'edit' &&
+        point_index !== 0 &&
+        point_index !== lineRenderProps.itemJson.props.point_position.val.length - 1
+    ) {
+        //删除该点
+        const new_point_position = lineRenderProps.itemJson.props.point_position.val
+        new_point_position.splice(point_index, 1)
+        lineRenderEmits('update:itemJson', {
+            ...lineRenderProps.itemJson,
+            props: {
+                ...lineRenderProps.itemJson.props,
+                point_position: {
+                    ...lineRenderProps.itemJson.props.point_position,
+                    val: new_point_position
+                }
+            }
+        })
+        return
+    }
+    // 记录鼠标按下时实际点的坐标
+    const { x: realityX, y: realityY } = item
+    // 记录最开始点击时鼠标位置
+    const d_x = de instanceof MouseEvent ? de.clientX : de.touches[0].pageX
+    const d_y = de instanceof MouseEvent ? de.clientY : de.touches[0].pageY
+    let new_x = 0
+    let new_y = 0
+    let first_click = true
+    const onMouseMove = (e: MouseTouchEvent) => {
+        // 记录鼠标移动的位置
+        const m_x = e instanceof MouseEvent ? e.clientX : e.touches[0].pageX
+        const m_y = e instanceof MouseEvent ? e.clientY : e.touches[0].pageY
+        // 移动的距离
+        const move_x = de.ctrlKey ? 0 : alignToGrid((m_x - d_x) / lineRenderProps.canvasCfg.scale, 1) //感觉对齐网格有点体验不好 所以固定为一了
+        const move_y = de.shiftKey ? 0 : alignToGrid((m_y - d_y) / lineRenderProps.canvasCfg.scale, 1)
+        new_x = realityX + move_x
+        new_y = realityY + move_y
+        if (type === 'add') {
+            item.x = new_x
+            item.y = new_y
+            if (first_click) {
+                const new_point_position = lineRenderProps.itemJson.props.point_position.val
+                new_point_position.splice(point_index + 1, 0, {
+                    x: new_x,
+                    y: new_y
+                })
+                lineRenderEmits('update:itemJson', {
+                    ...lineRenderProps.itemJson,
+                    props: {
+                        ...lineRenderProps.itemJson.props,
+                        point_position: {
+                            ...lineRenderProps.itemJson.props.point_position,
+                            val: new_point_position
+                        }
+                    }
+                })
+                first_click = false
+            } else {
+                const new_point_position = lineRenderProps.itemJson.props.point_position.val
+                new_point_position[point_index + 1] = {
+                    x: new_x,
+                    y: new_y
+                }
+                lineRenderEmits('update:itemJson', {
+                    ...lineRenderProps.itemJson,
+                    props: {
+                        ...lineRenderProps.itemJson.props,
+                        point_position: {
+                            ...lineRenderProps.itemJson.props.point_position,
+                            val: new_point_position
+                        }
+                    }
+                })
+            }
+        }
+        if (type === 'edit') {
+            const new_point_position = lineRenderProps.itemJson.props.point_position.val
+            if (point_index === 0) {
+                lineRenderEmits('setIntention', 'adsorbStart')
+                if (lineRenderProps.mode === 'line-edit') {
+                    if (first_click) {
+                        const new_point_position = lineRenderProps.itemJson.props.point_position.val
+                        new_point_position.unshift({
+                            x: new_x,
+                            y: new_y
+                        })
+                        lineRenderEmits('update:itemJson', {
+                            ...lineRenderProps.itemJson,
+                            props: {
+                                ...lineRenderProps.itemJson.props,
+                                point_position: {
+                                    ...lineRenderProps.itemJson.props.point_position,
+                                    val: new_point_position
+                                }
+                            }
+                        })
+                        first_click = false
+                        return
+                    }
+                }
+            } else if (point_index === new_point_position.length - 1) {
+                lineRenderEmits('setIntention', 'adsorbEnd')
+                if (lineRenderProps.mode === 'line-edit') {
+                    if (first_click) {
+                        const new_point_position = lineRenderProps.itemJson.props.point_position.val
+                        new_point_position.push({
+                            x: new_x,
+                            y: new_y
+                        })
+                        lineRenderEmits('update:itemJson', {
+                            ...lineRenderProps.itemJson,
+                            props: {
+                                ...lineRenderProps.itemJson.props,
+                                point_position: {
+                                    ...lineRenderProps.itemJson.props.point_position,
+                                    val: new_point_position
+                                }
+                            }
+                        })
+                        point_index += 1
+                        first_click = false
+                        return
+                    }
+                }
+            }
+            new_point_position[point_index].x = new_x
+            new_point_position[point_index].y = new_y
+            lineRenderEmits('update:itemJson', {
+                ...lineRenderProps.itemJson,
+                props: {
+                    ...lineRenderProps.itemJson.props,
+                    point_position: {
+                        ...lineRenderProps.itemJson.props.point_position,
+                        val: new_point_position
+                    }
+                }
+            })
+        }
+    }
+
+    const onMouseUp = () => {
+        document.removeEventListener('mousemove', onMouseMove)
+        document.removeEventListener('mouseup', onMouseUp)
+        document.removeEventListener('touchmove', onMouseMove)
+        document.removeEventListener('touchend', onMouseUp)
+        const itemRect = document.querySelector(`#${lineRenderProps.itemJson.id} g .real`)!.getBoundingClientRect()
+        const canvas_area_bounding_info = lineRenderProps.canvasDom!.getBoundingClientRect()
+        const new_left = (itemRect?.left - canvas_area_bounding_info?.left) / lineRenderProps.canvasCfg.scale
+        const new_top = (itemRect?.top - canvas_area_bounding_info?.top) / lineRenderProps.canvasCfg.scale
+        const move_x = new_left - lineRenderProps.itemJson.binfo.left
+        const move_y = new_top - lineRenderProps.itemJson.binfo.top
+        lineRenderEmits('setIntention', 'none')
+        lineRenderEmits('update:itemJson', {
+            ...lineRenderProps.itemJson,
+            binfo: {
+                ...lineRenderProps.itemJson.binfo,
+                left: new_left,
+                top: new_top,
+                width: itemRect?.width / lineRenderProps.canvasCfg.scale,
+                height: itemRect?.height / lineRenderProps.canvasCfg.scale
+            },
+            props: {
+                ...lineRenderProps.itemJson.props,
+                point_position: {
+                    ...lineRenderProps.itemJson.props.point_position,
+                    val: lineRenderProps.itemJson.props.point_position.val.map((m: { x: number; y: number }) => {
+                        return {
+                            x: m.x - move_x,
+                            y: m.y - move_y
+                        }
+                    })
+                }
+            }
+        })
+    }
+    document.addEventListener('mousemove', onMouseMove)
+    document.addEventListener('mouseup', onMouseUp)
+    document.addEventListener('touchmove', onMouseMove)
+    document.addEventListener('touchend', onMouseUp)
+    lineRenderEmits('lineMouseUp')
+}
+const getCenterPositions = (point_position: { x: number; y: number }[]) => {
+    const res: { x: number; y: number }[] = []
+    //根据当前点坐标计算每两点的中点坐标
+    point_position.forEach((item, index) => {
+        if (index === point_position.length - 1) {
+            return
+        }
+        const center_xy = getCenterXY(item.x, item.y, point_position[index + 1].x, point_position[index + 1].y)
+        res.push(center_xy)
+    })
+    return res
+}
+watch(
+    () => lineRenderProps.itemJson.props.point_position.val,
+    (new_val: { x: number; y: number }[]) => {
+        addPointPosition.value = getCenterPositions(new_val)
+    },
+    {
+        immediate: true,
+        deep: true
+    }
+)
+// watch(
+//   () => lineRenderProps.doneJson,
+//   (new_val) => {
+//     const temp_item_json = lineRenderProps.itemJson;
+//     // 处理起点绑定
+//     if (lineRenderProps.itemJson.props.bind_anchors.val.start) {
+//       // 根据id和类型找到锚点坐标
+//       const find_item = new_val.find(
+//         (m) => m.id === lineRenderProps.itemJson.props.bind_anchors.val.start.id
+//       );
+//       if (find_item) {
+//         // 四个角原始坐标
+//         const { topLeft, topRight, bottomLeft, bottomRight } = getRectCoordinate(find_item);
+//         // 四条边中点坐标
+//         const { topCenter, bottomCenter, leftCenter, rightCenter } = getRectCenterCoordinate(
+//           topLeft,
+//           topRight,
+//           bottomLeft,
+//           bottomRight
+//         );
+//         // 旋转中心
+//         const centerX = topCenter.x;
+//         const centerY = leftCenter.y;
+
+//         // 旋转角度（弧度）
+//         const angleRad = (Math.PI / 180) * find_item.binfo.angle;
+//         if (lineRenderProps.itemJson.props.bind_anchors.val.start.type === 'tc') {
+//           const new_tc = rotatePoint(topCenter.x, topCenter.y, centerX, centerY, angleRad);
+//           temp_item_json.props.point_position.val[0] = {
+//             x: new_tc.x - lineRenderProps.itemJson.binfo.left,
+//             y: new_tc.y - lineRenderProps.itemJson.binfo.top
+//           };
+//         } else if (lineRenderProps.itemJson.props.bind_anchors.val.start.type === 'bc') {
+//           const new_bc = rotatePoint(bottomCenter.x, bottomCenter.y, centerX, centerY, angleRad);
+//           temp_item_json.props.point_position.val[0] = {
+//             x: new_bc.x - lineRenderProps.itemJson.binfo.left,
+//             y: new_bc.y - lineRenderProps.itemJson.binfo.top
+//           };
+//         }
+//       } else {
+//         temp_item_json.props.bind_anchors.val.start = null;
+//       }
+//       lineRenderEmits('update:itemJson', temp_item_json);
+//     }
+//   }
+// );
+</script>
+<style scoped>
+.cursor-remove {
+    cursor:
+        url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPgoJPGcgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1kYXNoYXJyYXk9IjIyIiBzdHJva2UtZGFzaG9mZnNldD0iMjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIj4KCQk8cGF0aCBkPSJNMTkgNUw1IDE5Ij48YW5pbWF0ZSBmaWxsPSJmcmVlemUiIGF0dHJpYnV0ZU5hbWU9InN0cm9rZS1kYXNob2Zmc2V0IiBiZWdpbj0iMC4zcyIgZHVyPSIwLjNzIiB2YWx1ZXM9IjIyOzAiLz48L3BhdGg+CgkJPHBhdGggZD0iTTUgNUwxOSAxOSI+PGFuaW1hdGUgZmlsbD0iZnJlZXplIiBhdHRyaWJ1dGVOYW1lPSJzdHJva2UtZGFzaG9mZnNldCIgZHVyPSIwLjNzIiB2YWx1ZXM9IjIyOzAiLz48L3BhdGg+Cgk8L2c+Cjwvc3ZnPg==),
+        auto;
+}
+</style>
diff --git a/src/components/mt-edit/components/pattern-grid/index.vue b/src/components/mt-edit/components/pattern-grid/index.vue
new file mode 100644
index 0000000..9745503
--- /dev/null
+++ b/src/components/mt-edit/components/pattern-grid/index.vue
@@ -0,0 +1,71 @@
+<template>
+    <div class="grid-rect" :style="rectStyle">
+        <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
+            <defs>
+                <pattern v-if="showSmall" id="smallGrid" :width="grid" :height="grid" patternUnits="userSpaceOnUse">
+                    <path :d="`M ${grid} 0 L 0 0 0 ${grid}`" fill="none" :stroke="color.grid" stroke-width="0.5" />
+                </pattern>
+                <pattern id="grid" :width="bigGrid" :height="bigGrid" patternUnits="userSpaceOnUse">
+                    <rect v-if="showSmall" :width="bigGrid" :height="bigGrid" fill="url(#smallGrid)" />
+                    <path
+                        :d="`M ${bigGrid} 0 L 0 0 0 ${bigGrid}`"
+                        fill="none"
+                        :stroke="color.bigGrid"
+                        stroke-width="1"
+                    />
+                </pattern>
+            </defs>
+            <rect width="100%" height="100%" fill="url(#grid)" />
+        </svg>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useDark } from '@vueuse/core'
+const isDark = useDark({
+    selector: '#mt-edit'
+})
+
+const props = defineProps({
+    grid: {
+        // 小网格的大小
+        type: Number,
+        default: 10
+    },
+    gridCount: {
+        // 小网格的数量，默认为5个
+        type: Number,
+        default: 5
+    },
+    showSmall: {
+        // 是否显示小网格
+        type: Boolean,
+        default: true
+    }
+})
+
+// 计算大网格的大小
+const bigGrid = computed(() => props.grid * props.gridCount)
+
+// 处理网站皮肤，可忽略
+const color = computed(() => {
+    const colors = [
+        ['#e4e4e4', '#ebebeb'],
+        ['#414141', '#363636']
+    ]
+    const [bigGrid, grid] = colors[isDark ? 0 : 1]
+    return { bigGrid, grid }
+})
+
+const rectStyle = computed(() => ({ '--border-color': color.value.bigGrid }))
+</script>
+
+<style scoped>
+.grid-rect {
+    width: 100%;
+    height: 100%;
+    border-right: 1px solid var(--border-color);
+    border-bottom: 1px solid var(--border-color);
+}
+</style>
diff --git a/src/components/mt-edit/components/render-core/index.vue b/src/components/mt-edit/components/render-core/index.vue
new file mode 100644
index 0000000..e7ed03e
--- /dev/null
+++ b/src/components/mt-edit/components/render-core/index.vue
@@ -0,0 +1,296 @@
+<template>
+    <mt-dzr
+        :id="item.id"
+        v-for="(item, index) in renderCoreProps.doneJson"
+        :key="item.id"
+        v-model="item.binfo"
+        :scale-ratio="renderCoreProps.canvasCfg.scale"
+        :grid="renderCoreProps.gridCfg"
+        :resize="item.resize"
+        :rotate="item.rotate"
+        :lock="renderCoreProps.globalLock ? true : item.lock"
+        :active="renderCoreProps.preivewMode ? false : item.active"
+        :useProportionalScaling="item.use_proportional_scaling"
+        :show-ghost-dom="renderCoreProps.showGhostDom"
+        :hide="item.hide"
+        :disabled="renderCoreProps.preivewMode"
+        :adsorp_diff="globalStore.adsorp_diff"
+        @mousedown="onMouseDown(item, $event)"
+        @update:model-value="onUpdateModelValue(item.id, $event)"
+        @on-item-move="(e: any) => onItemMove(e, item.id)"
+        @move-mouse-up="onMoveMouseUp()"
+        @on-mouse-enter="onMouseEnter($event, item)"
+        @on-mouse-leave="onMouseLeave($event, item)"
+        @on-resize-move="onResizeMove($event)"
+        @on-resize-done="onResizeDone(item)"
+        @on-rotate-move="onRotateMove($event)"
+        @on-rotate-done="onRotateDone(item)"
+        @on-right-click="onRightClick($event, item)"
+        :class="`${item.type == 'sys-line' ? 'pointer-events-none' : ''} ${getCommonAni(item)} cursor-pointer`"
+    >
+        <!-- <el-popover
+            v-if="renderCoreProps.preivewMode && renderCoreProps.showPopover"
+            placement="top-start"
+            title="属性信息"
+            :width="200"
+            trigger="hover"
+        >
+            <template #reference>
+                <render-item
+                    :item-json="item"
+                    :canvas-cfg="renderCoreProps.canvasCfg"
+                    :canvas-dom="renderCoreProps.canvasDom"
+                    :grid="renderCoreProps.gridCfg"
+                    :done-json="renderCoreProps.doneJson"
+                    :lock-state="renderCoreProps.globalLock ? true : item.lock"
+                    :line-append-enable="renderCoreProps.lineAppendEnable"
+                    @update:item-json="onUpdateItemJson(index, $event)"
+                    @set-intention="val => renderCoreEmits('setIntention', val)"
+                    @line-mouse-up="onLineMouseUp"
+                    v-on="renderCoreProps.preivewMode ? eventToVOn(item, externalMethod) : {}"
+                ></render-item>
+            </template>
+            <template #default>
+                <div v-for="(prop_item, prop_item_key) in item.props" :key="prop_item_key">
+                    <div v-if="!prop_item.disabled">{{ prop_item.title }}:{{ prop_item.val }}</div>
+                </div>
+            </template>
+        </el-popover> -->
+        <render-item
+            :item-json="item"
+            :canvas-cfg="renderCoreProps.canvasCfg"
+            :canvas-dom="renderCoreProps.canvasDom"
+            :grid="renderCoreProps.gridCfg"
+            :done-json="renderCoreProps.doneJson"
+            :lock-state="renderCoreProps.globalLock ? true : item.lock"
+            :line-append-enable="renderCoreProps.lineAppendEnable"
+            @update:item-json="onUpdateItemJson(index, $event)"
+            @set-intention="val => renderCoreEmits('setIntention', val)"
+            @line-mouse-up="onLineMouseUp"
+            v-on="renderCoreProps.preivewMode ? eventToVOn(item, externalMethod) : {}"
+            @click="() => renderCoreProps.onElementClick && item.lineId && renderCoreProps.onElementClick(item.lineId)"
+        ></render-item>
+    </mt-dzr>
+</template>
+<script setup lang="ts">
+import { nextTick, reactive, ref } from 'vue'
+import MtDzr from '@/components/mt-dzr/index.vue'
+import RenderItem from '@/components/mt-edit/components/render-item/index.vue'
+import type {
+    IDoneJson,
+    IDoneJsonBinfo,
+    IGlobalStoreCanvasCfg,
+    IGlobalStoreGridCfg
+} from '@/components/mt-edit/store/types'
+import type { MouseTouchEvent } from '../types'
+import { globalStore } from '../../store/global'
+import type { onItemMoveParams } from './types'
+import { eventToVOn } from '../../utils'
+import { cacheStore } from '../../store/cache'
+import { getCurrentInstance } from 'vue'
+import { useExportJsonToDoneJson } from '@/components/mt-edit/composables/index'
+import TextVue from '@/components/custom-components/text-vue/index.vue'
+import CardVue from '@/components/custom-components/card-vue/index.vue'
+import NowTimeVue from '@/components/custom-components/now-time-vue/index.vue'
+import KvVue from '@/components/custom-components/kv-vue/index.vue'
+import SysButtonVue from '@/components/custom-components/sys-button-vue/index.vue'
+import BindDotVue from '@/components/custom-components/bind-dot-vue/index.vue'
+import BindIndexVue from '@/components/custom-components/bind-index-vue/index.vue'
+import { ElPopover } from 'element-plus'
+const instance = getCurrentInstance()
+const now_include_keys = Object.keys(instance?.appContext?.components as any)
+if (!now_include_keys.includes('text-vue')) {
+    instance?.appContext.app.component('text-vue', TextVue)
+}
+if (!now_include_keys.includes('card-vue')) {
+    instance?.appContext.app.component('card-vue', CardVue)
+}
+if (!now_include_keys.includes('now-time-vue')) {
+    instance?.appContext.app.component('now-time-vue', NowTimeVue)
+}
+if (!now_include_keys.includes('kv-vue')) {
+    instance?.appContext.app.component('kv-vue', KvVue)
+}
+if (!now_include_keys.includes('sys-button-vue')) {
+    instance?.appContext.app.component('sys-button-vue', SysButtonVue)
+}
+if (!now_include_keys.includes('bind-dot-vue')) {
+    instance?.appContext.app.component('bind-dot-vue', BindDotVue)
+}
+if (!now_include_keys.includes('bind-index-vue')) {
+    instance?.appContext.app.component('bind-index-vue', BindIndexVue)
+}
+type RenderCoreProps = {
+    doneJson: IDoneJson[]
+    canvasCfg: IGlobalStoreCanvasCfg
+    gridCfg: IGlobalStoreGridCfg
+    showGhostDom: boolean
+    canvasDom: HTMLElement | null
+    globalLock: boolean
+    preivewMode?: boolean
+    lineAppendEnable?: boolean
+    showPopover?: boolean
+    onElementClick?: (elementId: string) => void
+}
+const renderCoreProps = withDefaults(defineProps<RenderCoreProps>(), {
+    doneJson: () => [],
+    showGhostDom: true,
+    preivewMode: false,
+    lineAppendEnable: false,
+    showPopover: true,
+    onElementClick: () => {}
+})
+const renderCoreEmits = defineEmits([
+    'update:doneJson',
+    'onMouseDown',
+    'onItemMove',
+    'onMoveMouseUp',
+    'onItemMouseEnter',
+    'onItemMouseLeave',
+    'setIntention',
+    'onItemResizeDone',
+    'onItemRotateDone',
+    'onItemRightClick',
+    'setDoneJson'
+])
+// 记录多选的情况除了本次移动组件其他的组件位置信息
+const other_selected_items_binfo = ref<{ id: string; left: number; top: number }[]>([])
+const onMouseDown = (item: IDoneJson, e: MouseTouchEvent) => {
+    other_selected_items_binfo.value = globalStore.done_json
+        .filter(m => m.id !== item.id)
+        .map(m => {
+            return {
+                id: m.id,
+                left: m.binfo.left,
+                top: m.binfo.top
+            }
+        })
+    e.stopPropagation()
+    renderCoreEmits('onMouseDown', item, e)
+}
+const onUpdateModelValue = (id: string, value: IDoneJsonBinfo) => {
+    renderCoreEmits('update:doneJson', [
+        ...renderCoreProps.doneJson.map(m => {
+            if (m.id === id) {
+                return {
+                    ...m,
+                    binfo: value
+                }
+            }
+            return m
+        })
+    ])
+}
+const onItemMove = (e: any, id: string) => {
+    globalStore.setRealTimeData({
+        show: true,
+        text: `${e.new_lt.left},${e.new_lt.top}`
+    })
+    //如果同时选中多个组件，除去当前正在移动这个，手动更新其它的组件
+    nextTick(() => {
+        // 将所有移动组件的边界信息提供给父组件
+        const item_move_params: onItemMoveParams = {
+            //所有移动组件的信息
+            move_item_bounding_info: globalStore.selected_items_id.map(m => {
+                const { left, top, width, height, right, bottom } = document.getElementById(m)!.getBoundingClientRect()
+                return {
+                    id: m,
+                    type: globalStore.done_json.find(f => f.id === m)!.type,
+                    left,
+                    top,
+                    width,
+                    height,
+                    right,
+                    bottom
+                }
+            }),
+            //当前正在移动的组件的实时坐标信息
+            move_binfo: e.move_binfo
+        }
+        if (globalStore.selected_items_id.length > 1) {
+            // 找到其它的组件的id
+            const other_items_id = globalStore.selected_items_id.filter(m => m !== id)
+            renderCoreEmits('update:doneJson', [
+                ...renderCoreProps.doneJson.map(m => {
+                    if (other_items_id.includes(m.id)) {
+                        //找到初始值
+                        const init_pos = other_selected_items_binfo.value.find(f => f.id === m.id)
+                        return {
+                            ...m,
+                            binfo: {
+                                ...m.binfo,
+                                left: init_pos?.left + e.move_length.x,
+                                top: init_pos?.top + e.move_length.y
+                            }
+                        }
+                    }
+                    return m
+                })
+            ])
+        }
+        renderCoreEmits('onItemMove', item_move_params)
+    })
+}
+const onMoveMouseUp = () => {
+    renderCoreEmits('onMoveMouseUp')
+    globalStore.setRealTimeData({
+        show: false,
+        text: ``
+    })
+}
+const getCommonAni = (item: IDoneJson) => {
+    if (!item.common_animations || !item.common_animations.val) {
+        return ``
+    }
+    return `animate__animated animate__${item.common_animations.val} animate__${item.common_animations.speed} animate__${item.common_animations.repeat} animate__${item.common_animations.delay}`
+}
+const onUpdateItemJson = (index: number, item: IDoneJson) => {
+    const temp_done_json = [...renderCoreProps.doneJson]
+    temp_done_json[index] = item
+    renderCoreEmits('update:doneJson', temp_done_json)
+}
+const onMouseEnter = (e: MouseEvent, item: IDoneJson) => {
+    renderCoreEmits('onItemMouseEnter', e, item)
+}
+const onMouseLeave = (e: MouseEvent, item: IDoneJson) => {
+    renderCoreEmits('onItemMouseLeave', e, item)
+}
+const onResizeMove = (val: any) => {
+    globalStore.setRealTimeData({
+        show: true,
+        text: `${val?.width}x${val?.height}`
+    })
+}
+const onResizeDone = (item: IDoneJson) => {
+    renderCoreEmits('onItemResizeDone', item)
+    globalStore.setRealTimeData({
+        show: false,
+        text: ''
+    })
+}
+const onRotateMove = (val: any) => {
+    globalStore.setRealTimeData({
+        show: true,
+        text: `${val?.angle}°`
+    })
+}
+const onRotateDone = (item: IDoneJson) => {
+    globalStore.setRealTimeData({
+        show: false,
+        text: ``
+    })
+    renderCoreEmits('onItemRotateDone', item)
+}
+const onRightClick = (e: MouseEvent, item: IDoneJson) => {
+    renderCoreEmits('onItemRightClick', e, item)
+}
+const externalMethod = (val: any) => {
+    // console.log('调用外面方法;1');
+    renderCoreEmits('setDoneJson', val)
+}
+const onLineMouseUp = () => {
+    setTimeout(() => {
+        cacheStore.addHistory(globalStore.done_json)
+    }, 1000)
+}
+</script>
diff --git a/src/components/mt-edit/components/render-core/types.ts b/src/components/mt-edit/components/render-core/types.ts
new file mode 100644
index 0000000..ceb24cb
--- /dev/null
+++ b/src/components/mt-edit/components/render-core/types.ts
@@ -0,0 +1,7 @@
+import type { CacheBoundingBox, IDoneJsonBinfo } from '../../store/types'
+
+export interface onItemMoveParams {
+    move_item_bounding_info: MoveItemBoundingInfo[]
+    move_binfo: IDoneJsonBinfo & { id: string }
+}
+export type MoveItemBoundingInfo = CacheBoundingBox
diff --git a/src/components/mt-edit/components/render-item/index.vue b/src/components/mt-edit/components/render-item/index.vue
new file mode 100644
index 0000000..c529132
--- /dev/null
+++ b/src/components/mt-edit/components/render-item/index.vue
@@ -0,0 +1,92 @@
+<template>
+    <div class="w-1/1 h-1/1">
+        <svg-render
+            v-if="item_json.type === 'svg'"
+            draggable="false"
+            :symbol-id="item_json.symbol!.symbol_id"
+            :symbol-str="item_json.symbol!.symbol_str"
+            :width="item_json.symbol!.width"
+            :height="item_json.symbol!.height"
+            :props="item_json.props"
+        ></svg-render>
+        <group-render
+            v-else-if="item_json.type === 'group'"
+            :item-json="item_json"
+            :grid="renderItemProps.grid"
+            :canvas-cfg="renderItemProps.canvasCfg"
+            :canvas-dom="renderItemProps.canvasDom"
+        ></group-render>
+        <component
+            v-else-if="item_json.type === 'vue'"
+            draggable="false"
+            :is="item_json.tag"
+            v-bind="prosToVBind(item_json.props)"
+            @update:modelValue="(val: any) => onUpdateModelValue(item_json.props, val)"
+        ></component>
+        <img v-else-if="item_json.type === 'img'" draggable="false" class="w-1/1 h-1/1" :src="item_json.thumbnail" />
+        <custom-svg-render v-else-if="item_json.type === 'custom-svg'">
+            <component :is="item_json.tag" v-bind="prosToVBind(item_json.props)" :id="item_json.id"></component>
+        </custom-svg-render>
+        <line-render
+            v-else-if="item_json.type === 'sys-line'"
+            v-model:item-json="item_json"
+            :canvas-cfg="renderItemProps.canvasCfg"
+            :grid="renderItemProps.grid"
+            :canvas-dom="renderItemProps.canvasDom"
+            :done-json="renderItemProps.doneJson"
+            :lock-state="renderItemProps.lockState"
+            :mode="renderItemProps.lineAppendEnable ? 'line-edit' : 'normal'"
+            @set-intention="val => emits('setIntention', val)"
+            @line-mouse-up="emits('lineMouseUp')"
+        ></line-render>
+    </div>
+</template>
+<script setup lang="ts">
+import type {
+    IDoneJson,
+    IGlobalStoreCanvasCfg,
+    IGlobalStoreGridCfg,
+    ILeftAsideConfigItemPublicProps
+} from '../../store/types'
+import SvgRender from '@/components/mt-edit/components/svg-render/index.vue'
+import GroupRender from '@/components/mt-edit/components/group-render/index.vue'
+import { prosToVBind } from '@/components/mt-edit/utils'
+import LineRender from '@/components/mt-edit/components/line-render/index.vue'
+import CustomSvgRender from '@/components/mt-edit/components/custom-svg-render/index.vue'
+import { computed } from 'vue'
+type RenderItemProps = {
+    itemJson: IDoneJson
+    canvasCfg: IGlobalStoreCanvasCfg
+    grid: IGlobalStoreGridCfg
+    canvasDom: HTMLElement | null
+    doneJson?: IDoneJson[]
+    lockState: boolean
+    lineAppendEnable?: boolean
+}
+const renderItemProps = withDefaults(defineProps<RenderItemProps>(), {
+    doneJson: () => [],
+    lineAppendEnable: false
+})
+const emits = defineEmits(['update:itemJson', 'setIntention', 'lineMouseUp'])
+const item_json = computed({
+    get: () => renderItemProps.itemJson,
+    set: value => {
+        emits('update:itemJson', value)
+    }
+})
+const onUpdateModelValue = (props: ILeftAsideConfigItemPublicProps, value: any) => {
+    if (props.modelValue) {
+        emits('update:itemJson', {
+            ...item_json.value,
+            props: {
+                ...item_json.value.props,
+                modelValue: {
+                    ...item_json.value.props.modelValue,
+                    val: value
+                }
+            }
+        })
+    }
+}
+</script>
+<style scoped></style>
diff --git a/src/components/mt-edit/components/selected-area/index.vue b/src/components/mt-edit/components/selected-area/index.vue
new file mode 100644
index 0000000..277d0f1
--- /dev/null
+++ b/src/components/mt-edit/components/selected-area/index.vue
@@ -0,0 +1,91 @@
+<template>
+    <div class="mt-selected-area"></div>
+</template>
+
+<script setup lang="ts">
+import { ref, unref } from 'vue'
+import { getRealityXY } from '@/components/mt-edit/utils'
+import type { MouseTouchEvent } from '../types'
+import type { IAreaBinfo } from './types'
+type SelectedAreaProps = {
+    scaleRatio: number
+    targetDom: HTMLElement | null
+}
+const selectedAreaProps = withDefaults(defineProps<SelectedAreaProps>(), {
+    scaleRatio: 1,
+    targetDom: null
+})
+const emits = defineEmits(['selectedAreaMouseUp'])
+const area_binfo = ref<IAreaBinfo>({
+    width: 0,
+    height: 0,
+    top: 0,
+    left: 0
+})
+
+const onMouseDown = (de: MouseTouchEvent) => {
+    // 鼠标按下的位置
+    const { realityX, realityY } = getRealityXY(de, selectedAreaProps.targetDom?.getBoundingClientRect())
+    // 记录最开始点击时鼠标位置
+    const d_x = de instanceof MouseEvent ? de.clientX : de.touches[0].pageX
+    const d_y = de instanceof MouseEvent ? de.clientY : de.touches[0].pageY
+    const onMouseMove = (e: MouseTouchEvent) => {
+        // 记录鼠标移动的位置
+        const m_x = e instanceof MouseEvent ? e.clientX : e.touches[0].pageX
+        const m_y = e instanceof MouseEvent ? e.clientY : e.touches[0].pageY
+        // 移动的距离
+        const move_x = (m_x - d_x) / selectedAreaProps.scaleRatio
+        const move_y = (m_y - d_y) / selectedAreaProps.scaleRatio
+        let left = realityX / selectedAreaProps.scaleRatio,
+            top = realityY / selectedAreaProps.scaleRatio
+        let width = Math.abs(move_x),
+            height = Math.abs(move_y)
+        if (move_x < 0) {
+            left = realityX / selectedAreaProps.scaleRatio - width
+        }
+        if (move_y < 0) {
+            top = realityY / selectedAreaProps.scaleRatio - height
+        }
+        area_binfo.value = {
+            width,
+            height,
+            left,
+            top
+        }
+    }
+
+    const onMouseUp = () => {
+        document.removeEventListener('mousemove', onMouseMove)
+        document.removeEventListener('mouseup', onMouseUp)
+        document.removeEventListener('touchmove', onMouseMove)
+        document.removeEventListener('touchend', onMouseUp)
+        emits('selectedAreaMouseUp', unref(area_binfo))
+        area_binfo.value = {
+            width: 0,
+            height: 0,
+            top: 0,
+            left: 0
+        }
+    }
+    document.addEventListener('mousemove', onMouseMove)
+    document.addEventListener('mouseup', onMouseUp)
+    document.addEventListener('touchmove', onMouseMove)
+    document.addEventListener('touchend', onMouseUp)
+}
+
+defineExpose({
+    onMouseDown
+})
+</script>
+<style scoped>
+.mt-selected-area {
+    width: v-bind('area_binfo.width + "px"');
+    height: v-bind('area_binfo.height + "px"');
+    top: v-bind('area_binfo.top + "px"');
+    left: v-bind('area_binfo.left + "px"');
+    border: 1px solid #00699a;
+    background-color: #59c7f9;
+    opacity: 0.3;
+    position: absolute;
+}
+</style>
diff --git a/src/components/mt-edit/components/selected-area/types.ts b/src/components/mt-edit/components/selected-area/types.ts
new file mode 100644
index 0000000..1e799df
--- /dev/null
+++ b/src/components/mt-edit/components/selected-area/types.ts
@@ -0,0 +1,6 @@
+export interface IAreaBinfo {
+    width: number
+    height: number
+    top: number
+    left: number
+}
diff --git a/src/components/mt-edit/components/svg-analysis/index.vue b/src/components/mt-edit/components/svg-analysis/index.vue
new file mode 100644
index 0000000..2a1e6b1
--- /dev/null
+++ b/src/components/mt-edit/components/svg-analysis/index.vue
@@ -0,0 +1,19 @@
+<template>
+    <svg aria-hidden="true">
+        <use :xlink:href="symbolId" v-bind="props.props" />
+    </svg>
+</template>
+<script setup lang="ts">
+import { computed } from 'vue'
+const props = defineProps({
+    name: {
+        type: String,
+        required: true
+    },
+    props: {
+        type: Object,
+        default: () => {}
+    }
+})
+const symbolId = computed(() => `#mt-edit-${props.name}`)
+</script>
diff --git a/src/components/mt-edit/components/svg-render/index.vue b/src/components/mt-edit/components/svg-render/index.vue
new file mode 100644
index 0000000..5c05f94
--- /dev/null
+++ b/src/components/mt-edit/components/svg-render/index.vue
@@ -0,0 +1,27 @@
+<template>
+    <img class="w-1/1 h-1/1" :src="url" />
+</template>
+<script setup lang="ts">
+import { computed } from 'vue'
+import { symbolGenSvg, svgToImgSrc, genDomPropstr } from '@/components/mt-edit/utils/index'
+import type { ILeftAsideConfigItemPublicProps } from '../../store/types'
+type SvgRenderProps = {
+    symbolId: string
+    symbolStr: string
+    width: string
+    height: string
+    props: ILeftAsideConfigItemPublicProps
+}
+const svgRenderProps = withDefaults(defineProps<SvgRenderProps>(), {})
+const url = computed(() => {
+    return svgToImgSrc(
+        symbolGenSvg(
+            svgRenderProps.symbolId,
+            svgRenderProps.symbolStr,
+            svgRenderProps.width,
+            svgRenderProps.height,
+            genDomPropstr(svgRenderProps.props)
+        )
+    )
+})
+</script>
diff --git a/src/components/mt-edit/components/types.ts b/src/components/mt-edit/components/types.ts
new file mode 100644
index 0000000..92e67ec
--- /dev/null
+++ b/src/components/mt-edit/components/types.ts
@@ -0,0 +1,13 @@
+import type { IDoneJson, IGlobalStoreCanvasCfg, IGlobalStoreGridCfg } from '../store/types'
+
+export type MouseTouchEvent = MouseEvent | TouchEvent
+export interface IExportDoneJson extends Omit<IDoneJson, 'props' | 'symbol'> {
+    props: {
+        [key: string]: any
+    }
+}
+export interface IExportJson {
+    canvasCfg: IGlobalStoreCanvasCfg
+    gridCfg: IGlobalStoreGridCfg
+    json: IExportDoneJson[]
+}
diff --git a/src/components/mt-edit/composables/index.ts b/src/components/mt-edit/composables/index.ts
new file mode 100644
index 0000000..3b6b36b
--- /dev/null
+++ b/src/components/mt-edit/composables/index.ts
@@ -0,0 +1,160 @@
+import type { IExportDoneJson, IExportJson } from '../components/types'
+import { leftAsideStore } from '../store/left-aside'
+import type {
+    IDoneJson,
+    IGlobalStoreCanvasCfg,
+    IGlobalStoreGridCfg,
+    ILeftAsideConfigItem,
+    ILeftAsideConfigItemPublicProps
+} from '../store/types'
+import { objectDeepClone } from '../utils'
+
+export const genExportJson = (
+    canvasCfg: IGlobalStoreCanvasCfg,
+    gridCfg: IGlobalStoreGridCfg,
+    doneJson: IDoneJson[]
+) => {
+    // 先创建原始的 export_done_json
+    let export_done_json: IExportDoneJson[] = []
+    export_done_json = objectDeepClone<IDoneJson[]>(doneJson).map(m => {
+        if (m.symbol) {
+            delete m.symbol
+        }
+        let new_props = {}
+        for (const key in m.props) {
+            new_props = { ...new_props, ...{ [key]: m.props[key].val } }
+        }
+        return {
+            ...m,
+            props: new_props,
+            active: false
+        }
+    })
+
+    // const list = [
+    //     'c53cccb8c65201c192d8c57fbdb4d993-RdNsoqHYOZ',
+    //     'c53cccb8c65201c192d8c57fbdb4d993-O4jAyCBz1A',
+    //     'c53cccb8c65201c192d8c57fbdb4d993-XBd70oZ3kH'
+    // ]
+
+    // const message = [
+    //     { id: 'c53cccb8c65201c192d8c57fbdb4d993-RdNsoqHYOZ', text: '发生时刻:2023-07-05 12:00:00' },
+    //     { id: 'c53cccb8c65201c192d8c57fbdb4d993-O4jAyCBz1A', text: '传输中1111......' },
+    //     { id: 'c53cccb8c65201c192d8c57fbdb4d993-XBd70oZ3kH', text: '发生时刻:2023-07-06 14:20:00' }
+    // ]
+
+    // 查找传输设备图元并添加文字图元
+    // const transportDevices = export_done_json.filter(item =>
+    //     // 假设传输设备有特定的标识，比如ID包含特定关键词或type为特定值
+    //     // item.title?.includes('传输')
+    //     // list.some(id => item.id?.includes(id))
+    //     list.includes(item.id)
+    // )
+
+    // 为每个传输设备添加旁边的文字图元
+    const textElementsToAdd: IExportDoneJson[] = []
+
+    // 先删除旧图元
+    // 用于存储需要移除的旧文本图元的 ID
+    const idsToRemove: string[] = []
+
+    // transportDevices.forEach((device, index) => {
+    //     // 构造预期的旧文本图元 ID 模式 (基于设备 ID)
+    //     const expectedIdPrefix = `auto-text-${device.id}-`
+
+    //     // 查找所有与当前设备关联的现有文本图元
+    //     const existingTextElements = export_done_json.filter(item => item.id?.startsWith(expectedIdPrefix))
+
+    //     // 将这些旧图元的 ID 添加到待删除列表
+    //     idsToRemove.push(...existingTextElements.map(item => item.id!))
+
+    //     // 获取对应的消息文本
+    //     const deviceMessage = message.find(m => m.id === device.id)?.text || '默认提示信息'
+
+    //     // 创建新的文本图元
+    //     const textElement: IExportDoneJson = {
+    //         id: `auto-text-${device.id}-${index}`, // 使用时间戳确保唯一性
+    //         title: '动态文字',
+    //         type: 'vue',
+    //         tag: 'text-vue',
+    //         props: {
+    //             text: deviceMessage || '默认提示信息', // 添加安全检查
+    //             fontFamily: '黑体',
+    //             fontSize: 14,
+    //             fill: 'red',
+    //             vertical: false
+    //         },
+    //         common_animations: {
+    //             val: '',
+    //             delay: 'delay-0s',
+    //             speed: 'slow',
+    //             repeat: 'infinite'
+    //         },
+    //         binfo: {
+    //             left: (device.binfo?.left || 0) + (device.binfo?.width || 0) + 10,
+    //             top: (device.binfo?.top || 0) + (device.binfo?.height || 0) / 2 - 10 + (index % 2 === 0 ? 20 : -20), // 偶数下移20px，奇数上移20px
+    //             width: 200,
+    //             height: 50,
+    //             angle: 0
+    //         },
+    //         resize: true,
+    //         rotate: true,
+    //         lock: false,
+    //         active: false,
+    //         hide: false,
+    //         UIDName: '',
+    //         events: []
+    //     }
+    //     textElementsToAdd.push(textElement)
+    // })
+
+    // // 从 export_done_json 中移除旧的文本图元
+    // export_done_json = export_done_json.filter(item => !idsToRemove.includes(item.id!))
+
+    // // 合并原始图元和新增的文字图元
+    // export_done_json = [...export_done_json, ...textElementsToAdd]
+
+    const exportJson: IExportJson = {
+        canvasCfg,
+        gridCfg,
+        json: export_done_json
+    }
+    return { exportJson }
+}
+export const useExportJsonToDoneJson = (json: IExportJson) => {
+    // 取出所有图形的初始配置
+    let init_configs: ILeftAsideConfigItem[] = []
+    for (const iterator of leftAsideStore.config.values()) {
+        if (iterator.length > 0) {
+            init_configs = [...init_configs, ...iterator]
+        }
+    }
+    const importDoneJson: IDoneJson[] = json.json.map(m => {
+        let props: ILeftAsideConfigItemPublicProps = {}
+        let symbol = undefined
+        // 找到原始的props
+        const find_item = init_configs.find(f => f?.id == m.tag)
+        const find_props = find_item?.props
+        if (find_props) {
+            props = { ...props, ...objectDeepClone(find_props) }
+        }
+        for (const key in m.props) {
+            if (props[key] !== undefined) {
+                props[key].val = m.props[key]
+            }
+        }
+        if (find_item?.symbol) {
+            symbol = find_item.symbol
+        }
+        return {
+            ...m,
+            props,
+            symbol
+        }
+    })
+    return {
+        canvasCfg: json.canvasCfg,
+        gridCfg: json.gridCfg,
+        importDoneJson
+    }
+}
diff --git a/src/components/mt-edit/composables/sys-line.ts b/src/components/mt-edit/composables/sys-line.ts
new file mode 100644
index 0000000..1be377f
--- /dev/null
+++ b/src/components/mt-edit/composables/sys-line.ts
@@ -0,0 +1,200 @@
+import { nextTick } from 'vue'
+import type { IDoneJson, IDoneJsonBinfo } from '../store/types'
+import { getRectCenterCoordinate, getRectCoordinate, rotatePoint } from '../utils'
+
+/**
+ * 更新系统连线实际宽高
+ * @param sys_lines
+ * @param scale
+ */
+export const useUpdateSysLineRect = (sys_lines: IDoneJson[], canvasDom: HTMLElement, scale: number) => {
+    sys_lines.forEach(f => {
+        const itemRect = document.querySelector(`#${f.id} g .real`)!.getBoundingClientRect()
+        const canvas_area_bounding_info = canvasDom!.getBoundingClientRect()
+        const new_left = (itemRect?.left - canvas_area_bounding_info?.left) / scale
+        const new_top = (itemRect?.top - canvas_area_bounding_info?.top) / scale
+        const move_x = new_left - f.binfo.left
+        const move_y = new_top - f.binfo.top
+        f.binfo.left = new_left
+        f.binfo.top = new_top
+        f.binfo.width = itemRect?.width / scale
+        f.binfo.height = itemRect?.height / scale
+        f.props.point_position = {
+            ...f.props.point_position,
+            val: f.props.point_position.val.map((m: { x: number; y: number }) => {
+                return {
+                    x: m.x - move_x,
+                    y: m.y - move_y
+                }
+            })
+        }
+    })
+}
+/**
+ * 更新系统连线
+ * @param sys_lines 要更新的连线列表
+ * @param done_json 所有组件信息
+ * @param canvasDom 画布dom
+ * @param scale 画布缩放
+ */
+export const useUpdateSysLine = (
+    sys_lines: IDoneJson[],
+    done_json: IDoneJson[],
+    canvasDom: HTMLElement,
+    scale: number,
+    move_binfo?: IDoneJsonBinfo & { id: string }
+) => {
+    const temp_done_json = [...done_json]
+    sys_lines.forEach(f => {
+        if (!f.props.bind_anchors.val.start && !f.props.bind_anchors.val.end) {
+            return
+        }
+        const itemRect = document.querySelector(`#${f.id} g .real`)!.getBoundingClientRect()
+        const canvas_area_bounding_info = canvasDom!.getBoundingClientRect()
+        const new_left = (itemRect?.left - canvas_area_bounding_info?.left) / scale
+        const new_top = (itemRect?.top - canvas_area_bounding_info?.top) / scale
+
+        // 处理起点绑定
+        if (f.props.bind_anchors.val.start) {
+            // 根据id和类型找到锚点坐标
+            const find_item = temp_done_json.find(m => m.id === f.props.bind_anchors.val.start.id)
+            if (find_item) {
+                const b_info = find_item.id === move_binfo?.id ? move_binfo : find_item.binfo
+                // 四个角原始坐标
+                const { topLeft, topRight, bottomLeft, bottomRight } = getRectCoordinate(b_info)
+                // 四条边中点坐标
+                const { topCenter, bottomCenter, leftCenter, rightCenter } = getRectCenterCoordinate(
+                    topLeft,
+                    topRight,
+                    bottomLeft,
+                    bottomRight
+                )
+                // 旋转中心
+                const centerX = topCenter.x
+                const centerY = leftCenter.y
+
+                // 旋转角度（弧度）
+                const angleRad = (Math.PI / 180) * find_item.binfo.angle
+
+                if (f.props.bind_anchors.val.start.type === 'tc') {
+                    const new_tc = rotatePoint(topCenter.x, topCenter.y, centerX, centerY, angleRad)
+                    f.props.point_position.val[0] = {
+                        x: new_tc.x - f.binfo.left,
+                        y: new_tc.y - f.binfo.top
+                    }
+                } else if (f.props.bind_anchors.val.start.type === 'bc') {
+                    const new_bc = rotatePoint(bottomCenter.x, bottomCenter.y, centerX, centerY, angleRad)
+                    f.props.point_position.val[0] = {
+                        x: new_bc.x - f.binfo.left,
+                        y: new_bc.y - f.binfo.top
+                    }
+                } else if (f.props.bind_anchors.val.start.type === 'lc') {
+                    const new_lc = rotatePoint(leftCenter.x, leftCenter.y, centerX, centerY, angleRad)
+                    f.props.point_position.val[0] = {
+                        x: new_lc.x - f.binfo.left,
+                        y: new_lc.y - f.binfo.top
+                    }
+                } else if (f.props.bind_anchors.val.start.type === 'rc') {
+                    const new_rc = rotatePoint(rightCenter.x, rightCenter.y, centerX, centerY, angleRad)
+                    f.props.point_position.val[0] = {
+                        x: new_rc.x - f.binfo.left,
+                        y: new_rc.y - f.binfo.top
+                    }
+                }
+                const move_x = new_left - f.binfo.left
+                const move_y = new_top - f.binfo.top
+                f.binfo = {
+                    ...f.binfo,
+                    left: new_left,
+                    top: new_top,
+                    width: itemRect?.width / scale,
+                    height: itemRect?.height / scale
+                }
+                f.props.point_position = {
+                    ...f.props.point_position,
+                    val: f.props.point_position.val.map((m: { x: number; y: number }) => {
+                        return {
+                            x: m.x - move_x,
+                            y: m.y - move_y
+                        }
+                    })
+                }
+            } else {
+                f.props.bind_anchors.val.start = null
+            }
+        }
+        // 处理终点绑定
+        if (f.props.bind_anchors.val.end) {
+            // 根据id和类型找到锚点坐标
+            const find_item = temp_done_json.find(m => m.id === f.props.bind_anchors.val.end.id)
+            if (find_item) {
+                const b_info = find_item.id === move_binfo?.id ? move_binfo : find_item.binfo
+                // 四个角原始坐标
+                const { topLeft, topRight, bottomLeft, bottomRight } = getRectCoordinate(b_info)
+                // 四条边中点坐标
+                const { topCenter, bottomCenter, leftCenter, rightCenter } = getRectCenterCoordinate(
+                    topLeft,
+                    topRight,
+                    bottomLeft,
+                    bottomRight
+                )
+                // 旋转中心
+                const centerX = topCenter.x
+                const centerY = leftCenter.y
+
+                // 旋转角度（弧度）
+                const angleRad = (Math.PI / 180) * find_item.binfo.angle
+
+                if (f.props.bind_anchors.val.end.type === 'tc') {
+                    const new_tc = rotatePoint(topCenter.x, topCenter.y, centerX, centerY, angleRad)
+                    f.props.point_position.val[f.props.point_position.val.length - 1] = {
+                        x: new_tc.x - f.binfo.left,
+                        y: new_tc.y - f.binfo.top
+                    }
+                } else if (f.props.bind_anchors.val.end.type === 'bc') {
+                    const new_bc = rotatePoint(bottomCenter.x, bottomCenter.y, centerX, centerY, angleRad)
+                    f.props.point_position.val[f.props.point_position.val.length - 1] = {
+                        x: new_bc.x - f.binfo.left,
+                        y: new_bc.y - f.binfo.top
+                    }
+                } else if (f.props.bind_anchors.val.end.type === 'lc') {
+                    const new_lc = rotatePoint(leftCenter.x, leftCenter.y, centerX, centerY, angleRad)
+                    f.props.point_position.val[f.props.point_position.val.length - 1] = {
+                        x: new_lc.x - f.binfo.left,
+                        y: new_lc.y - f.binfo.top
+                    }
+                } else if (f.props.bind_anchors.val.end.type === 'rc') {
+                    const new_rc = rotatePoint(rightCenter.x, rightCenter.y, centerX, centerY, angleRad)
+                    f.props.point_position.val[f.props.point_position.val.length - 1] = {
+                        x: new_rc.x - f.binfo.left,
+                        y: new_rc.y - f.binfo.top
+                    }
+                }
+                const move_x = new_left - f.binfo.left
+                const move_y = new_top - f.binfo.top
+                f.binfo = {
+                    ...f.binfo,
+                    left: new_left,
+                    top: new_top,
+                    width: itemRect?.width / scale,
+                    height: itemRect?.height / scale
+                }
+                f.props.point_position = {
+                    ...f.props.point_position,
+                    val: f.props.point_position.val.map((m: { x: number; y: number }) => {
+                        return {
+                            x: m.x - move_x,
+                            y: m.y - move_y
+                        }
+                    })
+                }
+            } else {
+                f.props.bind_anchors.val.end = null
+            }
+        }
+    })
+    // 直接写在这里会损失一部分性能 也可以注释掉下面的 然后根据需求在useUpdateSysLine之后手动调用useUpdateSysLineRect
+    nextTick(() => {
+        useUpdateSysLineRect(sys_lines, canvasDom, scale)
+    })
+}
diff --git a/src/components/mt-edit/composables/thumbnail.ts b/src/components/mt-edit/composables/thumbnail.ts
new file mode 100644
index 0000000..4aea344
--- /dev/null
+++ b/src/components/mt-edit/composables/thumbnail.ts
@@ -0,0 +1,72 @@
+import { Canvg } from 'canvg'
+import html2canvas from 'html2canvas'
+import { ElMessage } from 'element-plus'
+export const useGenThumbnail = async (canvas_id: string = 'mtCanvasArea') => {
+    const el = <HTMLElement | null>document.querySelector(`#${canvas_id}`)
+    if (!el) {
+        ElMessage.error('没有找到canvas元素,请检查！')
+        return
+    }
+    // //记录要移除的svg元素
+    const shouldRemoveSvgNodes = []
+    // 获取到所有的SVG 得到一个数组 目前只有自定义连线需要特殊处理 别的元素直接使用html2canvas就可以
+    const svgElements: NodeListOf<HTMLElement> = document.body.querySelectorAll(`#${canvas_id} .mt-line-render`)
+    // 遍历这个数组
+    for (const item of svgElements) {
+        //去除空白字符
+        const svg = item.outerHTML.trim()
+        // 创建一个 canvas DOM元素
+        const canvas = document.createElement('canvas')
+        //设置 canvas 元素的宽高
+        canvas.width = item.getBoundingClientRect().width
+        canvas.height = item.getBoundingClientRect().height
+        const ctx = canvas.getContext('2d')
+        // 将 SVG转化 成 canvas
+        const v = Canvg.fromString(ctx!, svg)
+        await v.render()
+
+        //设置生成 canvas 元素的坐标  保证与原SVG坐标保持一致
+        if (item.style.position) {
+            canvas.style.position += item.style.position
+            canvas.style.left += item.style.left
+            canvas.style.top += item.style.top
+        }
+
+        //添加到需要截图的DOM节点中
+        item.parentNode!.appendChild(canvas)
+        // 删除这个元素
+        shouldRemoveSvgNodes.push(canvas)
+    }
+
+    const width = el.offsetWidth
+    const height = el.offsetHeight
+    const canvas = await html2canvas(el, {
+        useCORS: true,
+        scale: 2,
+        width,
+        height,
+        allowTaint: true,
+        windowHeight: height,
+        logging: false,
+        ignoreElements: element => {
+            if (element.classList.contains('mt-line-render')) {
+                return true
+            }
+            return false
+        }
+    })
+    // const img_link = document.createElement('a')
+    // img_link.href = canvas.toDataURL('image/png') // 转换后的图片地址
+    // img_link.download = Date.now().toString()
+    // document.body.appendChild(img_link)
+    // // 触发点击
+    // img_link.click()
+    // // 然后移除
+    // document.body.removeChild(img_link)
+    // 移除需要移除掉的svg节点
+    shouldRemoveSvgNodes.forEach(item => {
+        item.remove()
+    })
+
+    return canvas.toDataURL('image/png')
+}
diff --git a/src/components/mt-edit/index.ts b/src/components/mt-edit/index.ts
new file mode 100644
index 0000000..2d7aa83
--- /dev/null
+++ b/src/components/mt-edit/index.ts
@@ -0,0 +1,3 @@
+import MtEdit from './index.vue'
+
+export default MtEdit
diff --git a/src/components/mt-edit/index.vue b/src/components/mt-edit/index.vue
new file mode 100644
index 0000000..674b359
--- /dev/null
+++ b/src/components/mt-edit/index.vue
@@ -0,0 +1,257 @@
+<template>
+    <div id="mt-edit" class="relative flex-auto w-1/1 h-1/1 dark">
+        <el-container class="h-1/1">
+            <el-header
+                height="45px"
+                class="dark:bg-myDarkBgColor cb-border p-0 select-none"
+                @mousedown="mainPanelRef?.stopListenerKeyDown()"
+            >
+                <header-panel
+                    v-model:leftAside="aside_state.left_show"
+                    v-model:rightAside="aside_state.right_show"
+                    v-model:lock-state="globalStore.lock"
+                    :selected-items-id="globalStore.selected_items_id"
+                    :group-enabled="header_group_enabled"
+                    :un-group-enabled="header_un_group_enabled"
+                    :align-enabled="header_align_enabled"
+                    :delete-enabled="header_delete_enabled"
+                    :undo-enabled="cacheStore.historyIndex > 0"
+                    :redo-enabled="cacheStore.historyIndex < cacheStore.history.length - 1"
+                    :real-time-data="globalStore.real_time_data"
+                    :use-thumbnail="mtEidtProps.useThumbnail"
+                    @on-group-click="mainPanelRef?.createGroupItem"
+                    @on-ungroup-click="mainPanelRef?.onUngroup"
+                    @on-delete-click="onDeleteClick"
+                    @on-export-click="onExportClick"
+                    @on-tree-click="done_json_tree_visiable = true"
+                    @on-help-click="onHelpClick"
+                    @align-selected="onAlignSelected"
+                    @on-redo-click="onRedoClick"
+                    @on-undo-click="onUndoClick"
+                    @on-import-click="onImportClick"
+                    @on-return-click="emits('onReturnClick')"
+                    @on-save-click="onSaveClick"
+                    @on-preview-click="onPreviewClick"
+                    @on-thumbnail-click="onThumbnailClick"
+                    @on-draw-line-click="onDrawLineClick"
+                    @on-save-all="onSaveAll"
+                ></header-panel>
+            </el-header>
+            <el-container class="h-[calc(100%-45px-40px)]">
+                <el-aside
+                    :width="aside_state.left_show ? '300px' : '0px'"
+                    class="dark:bg-myDarkBgColor cr-border mt-edit-aside h-1/1 select-none mt-edit-aside-left"
+                    @mousedown="mainPanelRef?.stopListenerKeyDown()"
+                >
+                    <tabs></tabs>
+
+                    <!-- <left-aside :leftAsideConfig="leftAsideStore.config"></left-aside> -->
+                </el-aside>
+                <el-main class="dark:bg-myMainDarkBgColor" @mousedown="mainPanelRef?.beginListenerKeyDown()">
+                    <main-panel
+                        ref="mainPanelRef"
+                        :group-enabled="header_group_enabled"
+                        :un-group-enabled="header_un_group_enabled"
+                        :delete-enabled="header_delete_enabled"
+                        :line-append-enable="line_append_enable"
+                    ></main-panel>
+                </el-main>
+                <el-aside
+                    :width="aside_state.right_show ? '300px' : '0px'"
+                    class="dark:bg-myDarkBgColor cl-border mt-edit-aside select-none"
+                    @mousedown="mainPanelRef?.stopListenerKeyDown()"
+                >
+                    <right-aside>
+                        <template v-if="hasDeviceBindSlot" #deviceBind="{ item }">
+                            <slot name="deviceBind" :item="item" />
+                        </template>
+                    </right-aside>
+                </el-aside>
+            </el-container>
+            <el-footer height="40px" class="dark:bg-myDarkBgColor ct-border select-none">
+                <footer-panel></footer-panel>
+            </el-footer>
+        </el-container>
+        <el-dialog v-model="import_visible" title="数据导入" @close="mainPanelRef?.beginListenerKeyDown()">
+            <import-json ref="importJsonRef"></import-json>
+            <template #footer>
+                <el-button type="primary" @click="onImportYes">确定</el-button>
+            </template>
+        </el-dialog>
+        <el-dialog v-model="export_visible" title="数据导出" @close="mainPanelRef?.beginListenerKeyDown()">
+            <export-json
+                :done-json="objectDeepClone(globalStore.done_json)"
+                :canvas-cfg="globalStore.canvasCfg"
+                :grid-cfg="globalStore.gridCfg"
+            ></export-json>
+        </el-dialog>
+        <el-drawer v-model="done_json_tree_visiable" title="图形结构树" direction="ltr" size="30%">
+            <done-tree
+                :done-json="globalStore.done_json"
+                :selected-items-id="globalStore.selected_items_id"
+                @update-selected-items-id="onTreeUpdateSelectedItemsId"
+                @update-selected-id-hide="onDoneTreeUpdateSelectedIdHide"
+            ></done-tree>
+        </el-drawer>
+    </div>
+</template>
+<script setup lang="ts">
+import HeaderPanel from '@/components/mt-edit/components/layout/header-panel/index.vue'
+import LeftAside from '@/components/mt-edit/components/layout/left-aside/index.vue'
+import MainPanel from '@/components/mt-edit/components/layout/main-panel/index.vue'
+import RightAside from '@/components/mt-edit/components/layout/right-aside/index.vue'
+import FooterPanel from '@/components/mt-edit/components/layout/footer-panel/index.vue'
+import Tabs from '@/components/mt-edit/components/layout/tabs/index.vue'
+import { leftAsideStore } from '@/components/mt-edit/store/left-aside'
+import { ElContainer, ElHeader, ElAside, ElMain, ElFooter, ElDialog, ElDrawer, ElButton, ElMessage } from 'element-plus'
+import { globalStore } from '@/components/mt-edit/store/global'
+import { computed, reactive, ref, useSlots } from 'vue'
+import DoneTree from '@/components/mt-edit/components/done-tree/index.vue'
+import { cacheStore } from './store/cache'
+import ExportJson from '@/components/mt-edit/components/export-json/index.vue'
+import ImportJson from '@/components/mt-edit/components/import-json/index.vue'
+import { objectDeepClone } from './utils'
+import { genExportJson, useExportJsonToDoneJson } from './composables'
+import type { IExportJson } from './components/types'
+import { useDataStore } from '@/stores/menuList'
+type MtEditProps = {
+    useThumbnail?: boolean
+}
+const mtEidtProps = withDefaults(defineProps<MtEditProps>(), {
+    useThumbnail: false
+})
+const emits = defineEmits(['onPreviewClick', 'onReturnClick', 'onSaveClick', 'onThumbnailClick', 'onSaveAll'])
+const slots = useSlots()
+const mainPanelRef = ref<InstanceType<typeof MainPanel>>()
+const importJsonRef = ref<InstanceType<typeof ImportJson>>()
+const aside_state = reactive({
+    left_show: true,
+    right_show: true
+})
+const hasDeviceBindSlot = computed(() => {
+    return !!slots.deviceBind
+})
+const header_delete_enabled = computed(() => {
+    return globalStore.selected_items_id.length > 0
+})
+const header_group_enabled = computed(() => {
+    return globalStore.selected_items_id.length > 1
+})
+const header_un_group_enabled = computed(() => {
+    if (globalStore.selected_items_id.length === 1) {
+        const item = globalStore.done_json.find(f => f.id === globalStore.selected_items_id[0])
+        return item?.type === 'group'
+    }
+    return false
+})
+const header_align_enabled = computed(() => {
+    const selected_items = globalStore.done_json.filter(
+        f => globalStore.selected_items_id.includes(f.id) && f.type !== 'sys-line'
+    )
+    return selected_items.length > 1
+})
+const import_visible = ref(false)
+const export_visible = ref(false)
+const done_json_tree_visiable = ref(false)
+const line_append_enable = ref(false)
+const onDeleteClick = () => {
+    globalStore.deleteSelectedItems()
+    cacheStore.addHistory(globalStore.done_json)
+}
+const onImportClick = () => {
+    import_visible.value = true
+    mainPanelRef.value?.stopListenerKeyDown()
+}
+const onExportClick = () => {
+    export_visible.value = true
+    mainPanelRef.value?.stopListenerKeyDown()
+}
+const onTreeUpdateSelectedItemsId = (id: string) => {
+    globalStore.setSingleSelect(id)
+}
+const onDoneTreeUpdateSelectedIdHide = (id: string) => {
+    const item = globalStore.done_json.find(f => f.id === id)
+    if (item) {
+        item.hide = !item.hide
+    }
+}
+const onAlignSelected = (
+    type:
+        | 'left'
+        | 'horizontally'
+        | 'right'
+        | 'top'
+        | 'vertically'
+        | 'bottom'
+        | 'horizontal-distribution'
+        | 'vertical-distribution'
+) => {
+    mainPanelRef.value?.onAlignSelected(type)
+}
+const onHelpClick = () => {
+    window.open('http://mt.yaolm.top')
+}
+const onRedoClick = () => {
+    mainPanelRef.value?.onRedo()
+}
+const onUndoClick = () => {
+    mainPanelRef.value?.onUndo()
+}
+const onImportYes = async () => {
+    const res = await importJsonRef.value?.onImport()
+    if (res) {
+        import_visible.value = false
+        cacheStore.addHistory(globalStore.done_json)
+    } else {
+        ElMessage.error('导入失败,请检查数据格式')
+    }
+}
+const onPreviewClick = () => {
+    // 获取导出json
+    const { exportJson } = genExportJson(globalStore.canvasCfg, globalStore.gridCfg, globalStore.done_json)
+    emits('onPreviewClick', exportJson)
+}
+
+const onSaveClick = () => {
+    // 获取导出json
+    const { exportJson } = genExportJson(globalStore.canvasCfg, globalStore.gridCfg, globalStore.done_json)
+    emits('onSaveClick', exportJson)
+}
+
+const useData = useDataStore()
+const onSaveAll = () => {
+    let form = new FormData()
+    let blob = new Blob([JSON.stringify(useData.dataTree)], {
+        type: 'application/json'
+    })
+    form.append('multipartFile', blob)
+    form.append('name', useData.name)
+    form.append('pid', useData.pid)
+    emits('onSaveAll', form)
+}
+const onThumbnailClick = () => {
+    emits('onThumbnailClick')
+}
+const onDrawLineClick = (val: boolean) => {
+    line_append_enable.value = val
+}
+const setImportJson = (exportJson: IExportJson) => {
+    const { canvasCfg, gridCfg, importDoneJson } = useExportJsonToDoneJson(exportJson)
+    globalStore.canvasCfg = canvasCfg
+    globalStore.gridCfg = gridCfg
+    globalStore.setGlobalStoreDoneJson(importDoneJson)
+    cacheStore.history[0] = importDoneJson
+    return true
+}
+defineExpose({
+    setImportJson
+})
+</script>
+<style scoped>
+.mt-edit-aside {
+    transition: width 0.3s;
+}
+.mt-edit-aside-left {
+    padding-left: 5px;
+}
+</style>
diff --git a/src/components/mt-edit/store/bind.ts b/src/components/mt-edit/store/bind.ts
new file mode 100644
index 0000000..b8324c4
--- /dev/null
+++ b/src/components/mt-edit/store/bind.ts
@@ -0,0 +1,244 @@
+import { reactive } from 'vue'
+import type { IConfig, ILeftAsideConfigItem } from './types'
+const sysComponentItems: ILeftAsideConfigItem[] = [
+    // {
+    //     id: 'sys-line',
+    //     title: '连线',
+    //     type: 'sys-line',
+    //     thumbnail: `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgZD0iTTQgMThhMiAyIDAgMSAwIDQgMGEyIDIgMCAxIDAtNCAwTTE2IDZhMiAyIDAgMSAwIDQgMGEyIDIgMCAxIDAtNCAwTTcuNSAxNi41bDktOSIvPjwvc3ZnPg==`,
+    //     props: {
+    //         stroke: {
+    //             title: '线条颜色',
+    //             type: 'color',
+    //             val: '#ff0000'
+    //         },
+    //         'stroke-width': {
+    //             title: '线条宽度',
+    //             type: 'number',
+    //             val: 2
+    //         },
+    //         'marker-start': {
+    //             title: '起点箭头',
+    //             type: 'switch',
+    //             val: false
+    //         },
+    //         'marker-end': {
+    //             title: '终点箭头',
+    //             type: 'switch',
+    //             val: true
+    //         },
+    //         point_position: {
+    //             title: '点坐标',
+    //             type: 'jsonEdit',
+    //             val: [
+    //                 {
+    //                     x: 0,
+    //                     y: 0
+    //                 },
+    //                 {
+    //                     x: 100,
+    //                     y: 0
+    //                 }
+    //             ],
+    //             disabled: true
+    //         },
+    //         ani_type: {
+    //             title: '动画类型',
+    //             type: 'select',
+    //             val: 'none',
+    //             options: [
+    //                 {
+    //                     label: '无',
+    //                     value: 'none'
+    //                 },
+    //                 {
+    //                     label: '电流',
+    //                     value: 'electricity'
+    //                 },
+    //                 {
+    //                     label: '轨迹',
+    //                     value: 'track'
+    //                 },
+    //                 {
+    //                     label: '水珠',
+    //                     value: 'waterdrop'
+    //                 }
+    //             ]
+    //         },
+    //         ani_dur: { title: '持续时间', type: 'number', val: 20 },
+    //         ani_color: { title: '动画颜色', type: 'color', val: '#0a7ae2' },
+    //         ani_reverse: { title: '动画反转', type: 'switch', val: false },
+    //         ani_play: { title: '动画播放', type: 'switch', val: true },
+    //         bind_anchors: {
+    //             title: '锚点绑定',
+    //             type: 'jsonEdit',
+    //             val: {
+    //                 start: null,
+    //                 end: null
+    //             },
+    //             disabled: true
+    //         }
+    //     },
+    //     common_animations: {
+    //         val: '',
+    //         delay: 'delay-0s',
+    //         speed: 'slow',
+    //         repeat: 'infinite'
+    //     }
+    // },
+    // {
+    //     id: 'sys-button-vue',
+    //     title: '按钮',
+    //     type: 'vue',
+    //     thumbnail: `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik0yIDhhMyAzIDAgMCAxIDMtM2gxMGEzIDMgMCAwIDEgMyAzdjNhMyAzIDAgMCAxLTMgM0g1YTMgMyAwIDAgMS0zLTNWOFptNyAxLjVhLjUuNSAwIDAgMCAuNS41SDE0YS41LjUgMCAwIDAgMC0xSDkuNWEuNS41IDAgMCAwLS41LjVabS0xIDBhMS41IDEuNSAwIDEgMC0zIDBhMS41IDEuNSAwIDAgMCAzIDBaIi8+PC9zdmc+`,
+    //     props: {
+    //         text: {
+    //             title: '按钮文本',
+    //             type: 'input',
+    //             val: '按钮文本'
+    //         },
+    //         type: {
+    //             title: '按钮类型',
+    //             type: 'select',
+    //             val: '',
+    //             options: [
+    //                 {
+    //                     value: '',
+    //                     label: '默认'
+    //                 },
+    //                 {
+    //                     value: 'primary',
+    //                     label: '主要'
+    //                 },
+    //                 {
+    //                     value: 'success',
+    //                     label: '成功'
+    //                 },
+    //                 {
+    //                     value: 'warning',
+    //                     label: '警告'
+    //                 },
+    //                 {
+    //                     value: 'danger',
+    //                     label: '危险'
+    //                 }
+    //             ]
+    //         },
+    //         round: {
+    //             title: '圆角',
+    //             type: 'switch',
+    //             val: false
+    //         }
+    //     },
+    //     common_animations: {
+    //         val: '',
+    //         delay: 'delay-0s',
+    //         speed: 'slow',
+    //         repeat: 'infinite'
+    //     }
+    // },
+    {
+        id: 'bind-dot-vue',
+        keyId: 'bind-dot',
+        title: '绑定监测点',
+        type: 'vue',
+        thumbnail: `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIzMiIgZD0ibTMyIDQxNS41bDEyMC0zMjBsMTIwIDMyMG0tNDItMTEySDc0bTI1Mi02NGMxMi4xOS0yOC42OSA0MS00OCA3NC00OGgwYzQ2IDAgODAgMzIgODAgODB2MTQ0Ii8+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIzMiIgZD0iTTMyMCAzNTguNWMwIDM2IDI2Ljg2IDU4IDYwIDU4YzU0IDAgMTAwLTI3IDEwMC0xMDZ2LTE1Yy0yMCAwLTU4IDEtOTIgNWMtMzIuNzcgMy44Ni02OCAxOS02OCA1OCIvPjwvc3ZnPg==`,
+        props: {
+            text: {
+                title: '监测内容',
+                type: 'input',
+                val: '绑定监测点'
+            },
+            fontFamily: {
+                title: '字体',
+                type: 'select',
+                val: '黑体',
+                options: [
+                    {
+                        value: '黑体',
+                        label: '黑体'
+                    },
+                    {
+                        value: '宋体',
+                        label: '宋体'
+                    }
+                ]
+            },
+            fontSize: {
+                title: '文字大小',
+                type: 'number',
+                val: 14
+            },
+            fill: {
+                title: '文字颜色',
+                type: 'color',
+                val: '#ff0000'
+            },
+            vertical: {
+                title: '竖排展示',
+                type: 'switch',
+                val: false
+            }
+        },
+        common_animations: {
+            val: '',
+            delay: 'delay-0s',
+            speed: 'slow',
+            repeat: 'infinite'
+        }
+    },
+    {
+        id: 'bind-index-vue',
+        keyId: 'bind-index',
+        title: '绑定指标',
+        type: 'vue',
+        thumbnail: `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIzMiIgZD0ibTMyIDQxNS41bDEyMC0zMjBsMTIwIDMyMG0tNDItMTEySDc0bTI1Mi02NGMxMi4xOS0yOC42OSA0MS00OCA3NC00OGgwYzQ2IDAgODAgMzIgODAgODB2MTQ0Ii8+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIzMiIgZD0iTTMyMCAzNTguNWMwIDM2IDI2Ljg2IDU4IDYwIDU4YzU0IDAgMTAwLTI3IDEwMC0xMDZ2LTE1Yy0yMCAwLTU4IDEtOTIgNWMtMzIuNzcgMy44Ni02OCAxOS02OCA1OCIvPjwvc3ZnPg==`,
+        props: {
+            text: {
+                title: '指标内容',
+                type: 'input',
+                val: '绑定指标'
+            },
+            fontFamily: {
+                title: '字体',
+                type: 'select',
+                val: '黑体',
+                options: [
+                    {
+                        value: '黑体',
+                        label: '黑体'
+                    },
+                    {
+                        value: '宋体',
+                        label: '宋体'
+                    }
+                ]
+            },
+            fontSize: {
+                title: '文字大小',
+                type: 'number',
+                val: 14
+            },
+            fill: {
+                title: '文字颜色',
+                type: 'color',
+                val: '#ff0000'
+            },
+            vertical: {
+                title: '竖排展示',
+                type: 'switch',
+                val: false
+            }
+        },
+        common_animations: {
+            val: '',
+            delay: 'delay-0s',
+            speed: 'slow',
+            repeat: 'infinite'
+        }
+    }
+]
+export const bingStore: IConfig = reactive({
+    sysComponent: sysComponentItems,
+    lineRenderOffset: 10
+})
diff --git a/src/components/mt-edit/store/cache.ts b/src/components/mt-edit/store/cache.ts
new file mode 100644
index 0000000..e0a748f
--- /dev/null
+++ b/src/components/mt-edit/store/cache.ts
@@ -0,0 +1,33 @@
+import { nextTick, reactive } from 'vue'
+import type { CacheBoundingBox, ICache, IDoneJson } from './types'
+import { objectDeepClone } from '../utils'
+
+export const cacheStore: ICache = reactive({
+    boundingBox: [],
+    setBoundingBox: (val: CacheBoundingBox[]) => {
+        cacheStore.boundingBox = val
+    },
+    adsorbPoint: [],
+    setAdsorbPoint(val) {
+        cacheStore.adsorbPoint = val
+    },
+    copy: [],
+    setCopy(val) {
+        cacheStore.copy = val
+    },
+    history: [[]],
+    historyIndex: 0,
+    addHistory(val: IDoneJson[]) {
+        nextTick(() => {
+            if (cacheStore.historyIndex + 1 < cacheStore.history.length) {
+                cacheStore.history.splice(cacheStore.historyIndex + 1)
+            }
+            cacheStore.history.push(objectDeepClone(val))
+            cacheStore.historyIndex = cacheStore.history.length - 1
+            if (cacheStore.history.length > 20) {
+                cacheStore.history.shift()
+                cacheStore.historyIndex = cacheStore.history.length - 1
+            }
+        })
+    }
+})
diff --git a/src/components/mt-edit/store/config.ts b/src/components/mt-edit/store/config.ts
new file mode 100644
index 0000000..1607bbf
--- /dev/null
+++ b/src/components/mt-edit/store/config.ts
@@ -0,0 +1,415 @@
+import { reactive } from 'vue'
+import type { IConfig, ILeftAsideConfigItem } from './types'
+const sysComponentItems: ILeftAsideConfigItem[] = [
+    {
+        id: 'sys-line',
+        title: '自由连线',
+        type: 'sys-line',
+        thumbnail: `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgZD0iTTQgMThhMiAyIDAgMSAwIDQgMGEyIDIgMCAxIDAtNCAwTTE2IDZhMiAyIDAgMSAwIDQgMGEyIDIgMCAxIDAtNCAwTTcuNSAxNi41bDktOSIvPjwvc3ZnPg==`,
+        props: {
+            stroke: {
+                title: '线条颜色',
+                type: 'color',
+                val: '#ff0000'
+            },
+            'stroke-width': {
+                title: '线条宽度',
+                type: 'number',
+                val: 2
+            },
+            'marker-start': {
+                title: '起点箭头',
+                type: 'switch',
+                val: false
+            },
+            'marker-end': {
+                title: '终点箭头',
+                type: 'switch',
+                val: true
+            },
+            point_position: {
+                title: '点坐标',
+                type: 'jsonEdit',
+                val: [
+                    {
+                        x: 0,
+                        y: 0
+                    },
+                    {
+                        x: 100,
+                        y: 0
+                    }
+                ],
+                disabled: true
+            },
+            ani_type: {
+                title: '动画类型',
+                type: 'select',
+                val: 'none',
+                options: [
+                    {
+                        label: '无',
+                        value: 'none'
+                    },
+                    {
+                        label: '电流',
+                        value: 'electricity'
+                    },
+                    {
+                        label: '轨迹',
+                        value: 'track'
+                    },
+                    {
+                        label: '水珠',
+                        value: 'waterdrop'
+                    }
+                ]
+            },
+            ani_dur: { title: '持续时间', type: 'number', val: 20 },
+            ani_color: { title: '动画颜色', type: 'color', val: '#0a7ae2' },
+            ani_reverse: { title: '动画反转', type: 'switch', val: false },
+            ani_play: { title: '动画播放', type: 'switch', val: true },
+            bind_anchors: {
+                title: '锚点绑定',
+                type: 'jsonEdit',
+                val: {
+                    start: null,
+                    end: null
+                },
+                disabled: true
+            }
+        },
+        common_animations: {
+            val: '',
+            delay: 'delay-0s',
+            speed: 'slow',
+            repeat: 'infinite'
+        }
+    },
+    {
+        id: 'sys-line-vertical',
+        title: '自由连线-竖线',
+        type: 'sys-line',
+        thumbnail: `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgZD0iTTQgMThhMiAyIDAgMSAwIDQgMGEyIDIgMCAxIDAtNCAwTTE2IDZhMiAyIDAgMSAwIDQgMGEyIDIgMCAxIDAtNCAwTTcuNSAxNi41bDktOSIvPjwvc3ZnPg==`,
+        props: {
+            stroke: {
+                title: '线条颜色',
+                type: 'color',
+                val: '#ff0000'
+            },
+            'stroke-width': {
+                title: '线条宽度',
+                type: 'number',
+                val: 2
+            },
+            'marker-start': {
+                title: '起点箭头',
+                type: 'switch',
+                val: false
+            },
+            'marker-end': {
+                title: '终点箭头',
+                type: 'switch',
+                val: true
+            },
+            point_position: {
+                title: '点坐标',
+                type: 'jsonEdit',
+                val: [
+                    {
+                        x: 0,
+                        y: 0
+                    },
+                    {
+                        x: 0,
+                        y: 100
+                    }
+                ],
+                disabled: true
+            },
+            ani_type: {
+                title: '动画类型',
+                type: 'select',
+                val: 'none',
+                options: [
+                    {
+                        label: '无',
+                        value: 'none'
+                    },
+                    {
+                        label: '电流',
+                        value: 'electricity'
+                    },
+                    {
+                        label: '轨迹',
+                        value: 'track'
+                    },
+                    {
+                        label: '水珠',
+                        value: 'waterdrop'
+                    }
+                ]
+            },
+            ani_dur: { title: '持续时间', type: 'number', val: 20 },
+            ani_color: { title: '动画颜色', type: 'color', val: '#0a7ae2' },
+            ani_reverse: { title: '动画反转', type: 'switch', val: false },
+            ani_play: { title: '动画播放', type: 'switch', val: true },
+            bind_anchors: {
+                title: '锚点绑定',
+                type: 'jsonEdit',
+                val: {
+                    start: null,
+                    end: null
+                },
+                disabled: true
+            }
+        },
+        common_animations: {
+            val: '',
+            delay: 'delay-0s',
+            speed: 'slow',
+            repeat: 'infinite'
+        }
+    },
+    {
+        id: 'text-vue',
+        title: '文字',
+        type: 'vue',
+        thumbnail: `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIzMiIgZD0ibTMyIDQxNS41bDEyMC0zMjBsMTIwIDMyMG0tNDItMTEySDc0bTI1Mi02NGMxMi4xOS0yOC42OSA0MS00OCA3NC00OGgwYzQ2IDAgODAgMzIgODAgODB2MTQ0Ii8+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIzMiIgZD0iTTMyMCAzNTguNWMwIDM2IDI2Ljg2IDU4IDYwIDU4YzU0IDAgMTAwLTI3IDEwMC0xMDZ2LTE1Yy0yMCAwLTU4IDEtOTIgNWMtMzIuNzcgMy44Ni02OCAxOS02OCA1OCIvPjwvc3ZnPg==`,
+        props: {
+            text: {
+                title: '文字内容',
+                type: 'input',
+                val: '文字'
+            },
+            fontFamily: {
+                title: '字体',
+                type: 'select',
+                val: '黑体',
+                options: [
+                    {
+                        value: '黑体',
+                        label: '黑体'
+                    },
+                    {
+                        value: '宋体',
+                        label: '宋体'
+                    }
+                ]
+            },
+            fontSize: {
+                title: '文字大小',
+                type: 'number',
+                val: 14
+            },
+            fill: {
+                title: '文字颜色',
+                type: 'color',
+                val: '#ff0000'
+            },
+            vertical: {
+                title: '竖排展示',
+                type: 'switch',
+                val: false
+            }
+        },
+        common_animations: {
+            val: '',
+            delay: 'delay-0s',
+            speed: 'slow',
+            repeat: 'infinite'
+        }
+    },
+    {
+        id: 'card-vue',
+        title: '卡片',
+        type: 'vue',
+        thumbnail: `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMTYgMTYiPjxnIGZpbGw9ImN1cnJlbnRDb2xvciI+PHBhdGggZD0iTTE0LjUgM2EuNS41IDAgMCAxIC41LjV2OWEuNS41IDAgMCAxLS41LjVoLTEzYS41LjUgMCAwIDEtLjUtLjV2LTlhLjUuNSAwIDAgMSAuNS0uNXptLTEzLTFBMS41IDEuNSAwIDAgMCAwIDMuNXY5QTEuNSAxLjUgMCAwIDAgMS41IDE0aDEzYTEuNSAxLjUgMCAwIDAgMS41LTEuNXYtOUExLjUgMS41IDAgMCAwIDE0LjUgMnoiLz48cGF0aCBkPSJNMyA1LjVhLjUuNSAwIDAgMSAuNS0uNWg5YS41LjUgMCAwIDEgMCAxaC05YS41LjUgMCAwIDEtLjUtLjVNMyA4YS41LjUgMCAwIDEgLjUtLjVoOWEuNS41IDAgMCAxIDAgMWgtOUEuNS41IDAgMCAxIDMgOG0wIDIuNWEuNS41IDAgMCAxIC41LS41aDZhLjUuNSAwIDAgMSAwIDFoLTZhLjUuNSAwIDAgMS0uNS0uNSIvPjwvZz48L3N2Zz4=`,
+        props: {
+            shadow: {
+                title: '阴影显示时机',
+                type: 'select',
+                val: 'always',
+                options: [
+                    { label: '总是显示', value: 'always' },
+                    { label: '鼠标悬浮', value: 'hover' },
+                    { label: '不显示', value: 'never' }
+                ]
+            },
+            backGroundColor: {
+                title: '背景颜色',
+                type: 'color',
+                val: '#ffffff'
+            },
+            boxShadow: {
+                title: '阴影颜色',
+                type: 'color',
+                val: '#ffffff'
+            }
+        },
+        common_animations: {
+            val: '',
+            delay: 'delay-0s',
+            speed: 'slow',
+            repeat: 'infinite'
+        }
+    },
+    {
+        id: 'now-time-vue',
+        title: '当前时间',
+        type: 'vue',
+        thumbnail: `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLXdpZHRoPSIzMiIgZD0iTTI1NiA2NEMxNTAgNjQgNjQgMTUwIDY0IDI1NnM4NiAxOTIgMTkyIDE5MnMxOTItODYgMTkyLTE5MlMzNjIgNjQgMjU2IDY0WiIvPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMzIiIGQ9Ik0yNTYgMTI4djE0NGg5NiIvPjwvc3ZnPg==`,
+        props: {
+            fontColor: {
+                title: '文字颜色',
+                type: 'color',
+                val: '#000000'
+            },
+            dateSize: {
+                title: '日期文字大小',
+                type: 'number',
+                val: 12
+            },
+            weekSize: {
+                title: '星期文字大小',
+                type: 'number',
+                val: 12
+            },
+            timeSize: {
+                title: '时间文字大小',
+                type: 'number',
+                val: 24
+            }
+        },
+        common_animations: {
+            val: '',
+            delay: 'delay-0s',
+            speed: 'slow',
+            repeat: 'infinite'
+        }
+    },
+    {
+        id: 'kv-vue',
+        title: '键值对',
+        type: 'vue',
+        thumbnail: `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjAgMjAiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZD0iTTMgNmEzIDMgMCAwIDEgMy0zaDhhMyAzIDAgMCAxIDMgM3Y4YTMgMyAwIDAgMS0zIDNINmEzIDMgMCAwIDEtMy0zem0zLTJhMiAyIDAgMCAwLTIgMnYzLjVoNS41VjR6bTMuNSA2LjVINFYxNGEyIDIgMCAwIDAgMiAyaDMuNXptMSAwVjE2SDE0YTIgMiAwIDAgMCAyLTJ2LTMuNXptNS41LTFWNmEyIDIgMCAwIDAtMi0yaC0zLjV2NS41eiIvPjwvc3ZnPg==`,
+        props: {
+            border: {
+                title: '边框',
+                type: 'switch',
+                val: true
+            },
+            fontFamily: {
+                title: '字体',
+                type: 'select',
+                val: '黑体',
+                options: [
+                    {
+                        value: '黑体',
+                        label: '黑体'
+                    },
+                    {
+                        value: '宋体',
+                        label: '宋体'
+                    }
+                ]
+            },
+            fontSize: {
+                title: '文字大小',
+                type: 'number',
+                val: 14
+            },
+            label: {
+                title: '键名',
+                type: 'input',
+                val: '键名'
+            },
+            labelWidth: {
+                title: '键名宽度',
+                type: 'number',
+                val: 50
+            },
+            value: {
+                title: '键值',
+                type: 'input',
+                val: '键值'
+            },
+            valueWidth: {
+                title: '键值宽度',
+                type: 'number',
+                val: 50
+            },
+            color: {
+                title: '文字颜色',
+                type: 'color',
+                val: '#ff0000'
+            },
+            borderColor: {
+                title: '边框颜色',
+                type: 'color',
+                val: '#000000'
+            }
+        },
+        common_animations: {
+            val: '',
+            delay: 'delay-0s',
+            speed: 'slow',
+            repeat: 'infinite'
+        }
+    },
+    {
+        id: 'sys-button-vue',
+        title: '按钮',
+        type: 'vue',
+        thumbnail: `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik0yIDhhMyAzIDAgMCAxIDMtM2gxMGEzIDMgMCAwIDEgMyAzdjNhMyAzIDAgMCAxLTMgM0g1YTMgMyAwIDAgMS0zLTNWOFptNyAxLjVhLjUuNSAwIDAgMCAuNS41SDE0YS41LjUgMCAwIDAgMC0xSDkuNWEuNS41IDAgMCAwLS41LjVabS0xIDBhMS41IDEuNSAwIDEgMC0zIDBhMS41IDEuNSAwIDAgMCAzIDBaIi8+PC9zdmc+`,
+        props: {
+            text: {
+                title: '按钮文本',
+                type: 'input',
+                val: '按钮文本'
+            },
+            type: {
+                title: '按钮类型',
+                type: 'select',
+                val: '',
+                options: [
+                    {
+                        value: '',
+                        label: '默认'
+                    },
+                    {
+                        value: 'primary',
+                        label: '主要'
+                    },
+                    {
+                        value: 'success',
+                        label: '成功'
+                    },
+                    {
+                        value: 'warning',
+                        label: '警告'
+                    },
+                    {
+                        value: 'danger',
+                        label: '危险'
+                    }
+                ]
+            },
+            round: {
+                title: '圆角',
+                type: 'switch',
+                val: false
+            }
+        },
+        common_animations: {
+            val: '',
+            delay: 'delay-0s',
+            speed: 'slow',
+            repeat: 'infinite'
+        }
+    }
+]
+export const configStore: IConfig = reactive({
+    sysComponent: sysComponentItems,
+    lineRenderOffset: 10
+})
diff --git a/src/components/mt-edit/store/context-menu.ts b/src/components/mt-edit/store/context-menu.ts
new file mode 100644
index 0000000..e8f2e2d
--- /dev/null
+++ b/src/components/mt-edit/store/context-menu.ts
@@ -0,0 +1,73 @@
+import { reactive } from 'vue'
+import type { ContextMenuInfoType, IContextMenu } from './types'
+
+export const contextMenuStore: IContextMenu = reactive({
+    menuInfo: {
+        display: false,
+        left: 0,
+        top: 0,
+        info: {
+            selectAll: {
+                title: '全选',
+                hot_key: 'Ctrl + A',
+                enable: false
+            },
+            copy: {
+                title: '复制',
+                hot_key: 'Ctrl + C',
+                enable: false
+            },
+            paste: {
+                title: '粘贴',
+                hot_key: 'Ctrl + V',
+                enable: false
+            },
+            delete: {
+                title: '删除',
+                hot_key: 'Delete',
+                enable: false
+            },
+            group: {
+                title: '组合',
+                hot_key: 'Ctrl + G',
+                enable: false
+            },
+            ungroup: {
+                title: '取消组合',
+                hot_key: 'Ctrl + U',
+                enable: false
+            },
+            moveTop: {
+                title: '置顶',
+                hot_key: 'Ctrl + Right',
+                enable: false
+            },
+            moveUp: {
+                title: '上移',
+                hot_key: 'Ctrl + Up',
+                enable: false
+            },
+            moveDown: {
+                title: '下移',
+                hot_key: 'Ctrl + Down',
+                enable: false
+            },
+            moveBottom: {
+                title: '置底',
+                hot_key: 'Ctrl + Left',
+                enable: false
+            }
+        }
+    },
+    setMenuInfo: (val: IContextMenu['menuInfo']) => {
+        contextMenuStore.menuInfo = val
+    },
+    setDisplayItem: (val: ContextMenuInfoType[]) => {
+        for (const key in contextMenuStore.menuInfo.info) {
+            contextMenuStore.menuInfo.info[key as ContextMenuInfoType].enable = false
+        }
+        val.forEach(f => {
+            contextMenuStore.menuInfo.info[f].enable = true
+        })
+    }
+})
diff --git a/src/components/mt-edit/store/global.ts b/src/components/mt-edit/store/global.ts
new file mode 100644
index 0000000..07828e1
--- /dev/null
+++ b/src/components/mt-edit/store/global.ts
@@ -0,0 +1,104 @@
+import { reactive } from 'vue'
+import type { GlobalStoreIntention, IDoneJson, IGlobalStore, IGlobalStoreCreateItemInfo, IRealTimeData } from './types'
+export const globalStore: IGlobalStore = reactive({
+    intention: 'none',
+    create_item_info: null,
+    selected_items_id: [],
+    done_json: [],
+    canvasCfg: {
+        width: 1920,
+        height: 1080,
+        scale: 1,
+        color: '',
+        img: '',
+        guide: true,
+        adsorp: true,
+        adsorp_diff: 5,
+        transform_origin: {
+            x: 0,
+            y: 0
+        },
+        drag_offset: {
+            x: 0,
+            y: 0
+        }
+    },
+    gridCfg: {
+        enabled: true,
+        align: true,
+        size: 10
+    },
+    guideCfg: {
+        x: {
+            display: false,
+            top: 0
+        },
+        y: {
+            display: false,
+            left: 0
+        }
+    },
+    lock: false,
+    real_time_data: {
+        show: false,
+        text: ''
+    },
+    adsorp_diff: {
+        x: 0,
+        y: 0
+    },
+    setIntention: (val: GlobalStoreIntention) => {
+        globalStore.intention = val
+    },
+    setCreateItemInfo: (val: IGlobalStoreCreateItemInfo | null) => {
+        globalStore.create_item_info = val
+    },
+    setGlobalStoreDoneJson: (val: IDoneJson[]) => {
+        globalStore.done_json = val
+    },
+    //取消所有组件选中
+    cancelAllSelect: () => {
+        const done_json_temp = [...globalStore.done_json].map(m => {
+            if (m.active) {
+                m.active = false
+            }
+            return m
+        })
+        globalStore.setGlobalStoreDoneJson(done_json_temp)
+        globalStore.selected_items_id = []
+    },
+    //刷新选中的id
+    refreshSelectedItemsId: () => {
+        globalStore.selected_items_id = globalStore.done_json.filter(m => m.active).map(m => m.id)
+    },
+    //删除选中的组件
+    deleteSelectedItems: () => {
+        const done_json_temp = [...globalStore.done_json].filter(m => !globalStore.selected_items_id.includes(m.id))
+        globalStore.setGlobalStoreDoneJson(done_json_temp)
+        globalStore.selected_items_id = []
+    },
+    // 设置单个选中
+    setSingleSelect: (id: string) => {
+        globalStore.done_json.forEach(m => {
+            if (m.id === id) {
+                m.active = true
+            } else {
+                m.active = false
+            }
+        })
+        globalStore.selected_items_id = [id]
+    },
+    setSelectItems: (ids: string[]) => {
+        globalStore.done_json.forEach(m => {
+            if (ids.includes(m.id)) {
+                m.active = true
+            } else {
+                m.active = false
+            }
+        })
+        globalStore.selected_items_id = ids
+    },
+    setRealTimeData: (val: IRealTimeData) => {
+        globalStore.real_time_data = val
+    }
+})
diff --git a/src/components/mt-edit/store/left-aside.ts b/src/components/mt-edit/store/left-aside.ts
new file mode 100644
index 0000000..af1b5bb
--- /dev/null
+++ b/src/components/mt-edit/store/left-aside.ts
@@ -0,0 +1,98 @@
+import { getCurrentInstance, reactive } from 'vue'
+import type { ILeftAside, ILeftAsideConfigItemPublic, ILeftAsideConfigItem } from './types'
+import { ElMessage } from 'element-plus'
+import { svgToSymbol } from '../utils'
+import { configStore } from './config'
+import { bingStore } from './bind'
+
+export const leftAsideStore: ILeftAside = reactive({
+    config: new Map<string, ILeftAsideConfigItem[]>([
+        // ['本地文件', []],
+        ['基础图元', configStore.sysComponent],
+        ['数据绑定图元', bingStore.sysComponent]
+    ]),
+    registerConfig: (title: string, config: ILeftAsideConfigItemPublic[]) => {
+        if (title == '本地文件' || title == '基础图元') {
+            ElMessage.info(`title:${title}已被系统占用，请更换名称！`)
+            return
+        }
+
+        if (leftAsideStore.config.has(title)) {
+            ElMessage.info(`title:${title}已存在，已经将其配置覆盖`)
+        }
+        const cfg: ILeftAsideConfigItem[] = config.map(m => {
+            if (m.type == 'svg') {
+                const { symbol_str, width, height } = svgToSymbol(m.svg!, m.id)
+                return {
+                    ...m,
+                    symbol: {
+                        symbol_id: m.id,
+                        symbol_str,
+                        width,
+                        height
+                    },
+                    common_animations: {
+                        val: '',
+                        delay: 'delay-0s',
+                        speed: 'slow',
+                        repeat: 'infinite'
+                    }
+                }
+            }
+            return {
+                ...m,
+                common_animations: {
+                    val: '',
+                    delay: 'delay-0s',
+                    speed: 'slow',
+                    repeat: 'infinite'
+                }
+            }
+        })
+        leftAsideStore.config.set(title, cfg)
+    },
+    svgPush: (title: string, config: ILeftAsideConfigItemPublic[]) => {
+        const targetConfig = leftAsideStore.config.get(title)
+        if (!targetConfig) {
+            console.warn(`未找到标题为 "${title}" 的配置项`)
+            return
+        }
+
+        const cfg: ILeftAsideConfigItem[] = config.map(m => {
+            if (m.type === 'svg') {
+                const { symbol_str, width, height } = svgToSymbol(m.svg!, m.id)
+                return {
+                    ...m,
+                    symbol: {
+                        symbol_id: m.id,
+                        symbol_str,
+                        width,
+                        height
+                    },
+                    common_animations: {
+                        val: '',
+                        delay: 'delay-0s',
+                        speed: 'slow',
+                        repeat: 'infinite'
+                    }
+                }
+            }
+            return {
+                ...m,
+                common_animations: {
+                    val: '',
+                    delay: 'delay-0s',
+                    speed: 'slow',
+                    repeat: 'infinite'
+                }
+            }
+        })
+
+        targetConfig.push(...cfg)
+    },
+    svgDelete: (title: string, id: string) => {
+        const cfg = leftAsideStore.config.get(title)!.filter(m => m.id !== id)
+        console.log('🚀 ~ cfg:', cfg)
+        leftAsideStore.config.set(title, cfg)
+    }
+})
diff --git a/src/components/mt-edit/store/types.ts b/src/components/mt-edit/store/types.ts
new file mode 100644
index 0000000..9bc28b6
--- /dev/null
+++ b/src/components/mt-edit/store/types.ts
@@ -0,0 +1,265 @@
+export type ILeftAsideConfig = Map<string, ILeftAsideConfigItem[]>
+export type ILeftAsideConfigItemPublicPropsType =
+    | 'input'
+    | 'color'
+    | 'select'
+    | 'switch'
+    | 'number'
+    | 'jsonEdit'
+    | 'textArea'
+// 开放注册配置
+export type ILeftAsideConfigItemPublicProps = Record<
+    string,
+    {
+        title: string //显示在属性面板的标题
+        type: ILeftAsideConfigItemPublicPropsType //属性的类型决定了修改属性的方式
+        val: any
+        options?: any //比如说修改属性的时候用到了下拉框，这里面就可以放下拉框的选项
+        disabled?: boolean //如果禁用了将不会显示到右侧属性面板里，但是仍然可以通过代码修改属性
+    }
+>
+export type ILeftAsideConfigItemPublicType = 'svg' | 'vue' | 'img' | 'custom-svg'
+export type ILeftAsideConfigItemPrivateType = 'group' | 'sys-line'
+export interface ILeftAsideConfigItemPublic {
+    id: string //图形的标识 值必须唯一
+    title: string //要显示的标题，一般用中文表示
+    type: ILeftAsideConfigItemPublicType | ILeftAsideConfigItemPrivateType //图形的类型
+    thumbnail: string //显示到左侧时候的缩略图
+    svg?: string //图形的svg代码
+    props: ILeftAsideConfigItemPublicProps
+    keyId?: string
+    use_proportional_scaling?: boolean //是否使用等比例缩放
+    lineId?: string //监测点id
+    lineList?: [] //监测点id  多层
+    lineName?: string
+    UID?: [] //指标id
+    UIDName?: string
+    UIDNames?: string[]
+    unit?: string[]
+}
+export interface ILeftAsideConfigItemPrivateSymbol {
+    symbol_id: string
+    symbol_str: string
+    width: string
+    height: string
+}
+export interface ICommonAnimations {
+    val: string
+    delay: string
+    speed: string
+    repeat: string
+}
+export interface ILeftAsideConfigItemPrivate {
+    symbol?: ILeftAsideConfigItemPrivateSymbol
+    common_animations: ICommonAnimations
+}
+export type ILeftAsideConfigItem = ILeftAsideConfigItemPublic & ILeftAsideConfigItemPrivate
+
+export type GlobalStoreIntention =
+    | 'none'
+    | 'create'
+    | 'beginMulSelect'
+    | 'adsorbStart'
+    | 'adsorbEnd'
+    | 'beginDragCanvas'
+    | 'runDragCanvas'
+    | 'endDragCanvas'
+    | 'showContextMenu'
+    | 'drawSysLineStart'
+export interface IGlobalStoreCreateItemInfo {
+    config_key: string //也就是折叠面板的值
+    item_id: string //要创建组件的id
+}
+
+export interface IGlobalStoreCanvasCfg {
+    width: number
+    height: number
+    scale: number
+    color: string
+    img: string
+    guide: boolean //参考线
+    adsorp: boolean //吸附
+    adsorp_diff: number
+    // 缩放中心
+    transform_origin: {
+        x: number
+        y: number
+    }
+    // 拖动偏移量
+    drag_offset: {
+        x: number
+        y: number
+    }
+}
+export interface IGlobalStoreGridCfg {
+    enabled: boolean
+    align: boolean
+    size: number
+}
+export type DoneJsonEventListType = 'click' | 'dblclick' | 'mouseover' | 'mouseout'
+export type DoneJsonEventListAction = 'changeAttr' | 'customCode' | 'pageJump'
+export interface IDoneJsonActionChangeAttr {
+    id: string
+    target_id: string
+    target_attr: string | undefined
+    target_value: any
+}
+export interface IDoneJsonEventList {
+    id: string
+    type: DoneJsonEventListType // 事件类型
+    action: DoneJsonEventListAction // 事件行为
+    jump_to?: string //跳转页面
+    change_attr: IDoneJsonActionChangeAttr[] //属性更改
+    custom_code: string
+    trigger_rule: {
+        trigger_id?: string //触发图形的id
+        trigger_attr?: string //触发图形的属性
+        operator?: string //运算符
+        value?: any //期望值
+    }
+}
+export interface IDoneJson {
+    id: string //必须唯一
+    title: string //标题
+    type: ILeftAsideConfigItemPublicType | ILeftAsideConfigItemPrivateType //类型 由配置文件决定
+    symbol?: ILeftAsideConfigItemPrivateSymbol //类型是svg的时候需要用这个将svg转换成symbol
+    binfo: IDoneJsonBinfo
+    props: ILeftAsideConfigItemPublicProps
+    resize: boolean //开启缩放
+    rotate: boolean //开启旋转
+    lock: boolean //锁定
+    active: boolean //激活
+    hide: boolean //隐藏
+    common_animations: ICommonAnimations //通用动画
+    use_proportional_scaling?: boolean //使用等比缩放
+    children?: IDoneJson[]
+    tag?: string
+    thumbnail?: string
+    events: IDoneJsonEventList[]
+    bind?: string //绑定事件
+    keyId?: string
+    lineId?: string //监测点id
+    lineList?: [] //监测点id  多层
+    lineName?: string
+    UID?: [] //指标id
+    UIDName?: string
+    UIDNames?: string[]
+    unit?: string[]
+}
+//图形边界信息
+export interface IDoneJsonBinfo {
+    left: number
+    top: number
+    width: number
+    height: number
+    angle: number
+}
+export interface CacheBoundingBox {
+    id: string
+    type: ILeftAsideConfigItemPublicType | ILeftAsideConfigItemPrivateType
+    left: number
+    top: number
+    width: number
+    height: number
+    bottom: number
+    right: number
+}
+export type AdsorbPointType = 'tc' | 'bc' | 'lc' | 'rc'
+export interface IContextMenuInfo {
+    title: string
+    hot_key: string
+    enable: boolean
+}
+export type ContextMenuInfoType =
+    | 'copy'
+    | 'paste'
+    | 'delete'
+    | 'group'
+    | 'ungroup'
+    | 'selectAll'
+    | 'moveTop'
+    | 'moveUp'
+    | 'moveDown'
+    | 'moveBottom'
+export interface IContextMenuDetail {
+    left: number
+    top: number
+    info: {
+        [key in ContextMenuInfoType]: IContextMenuInfo
+    }
+}
+export interface IRealTimeData {
+    show: boolean
+    text: string
+}
+// 全局状态
+export interface IGlobalStore {
+    intention: GlobalStoreIntention
+    create_item_info: IGlobalStoreCreateItemInfo | null
+    done_json: IDoneJson[]
+    selected_items_id: string[]
+    canvasCfg: IGlobalStoreCanvasCfg
+    gridCfg: IGlobalStoreGridCfg
+    guideCfg: {
+        x: {
+            display: boolean
+            top: number
+        }
+        y: {
+            display: boolean
+            left: number
+        }
+    }
+    lock: boolean
+    real_time_data: IRealTimeData
+    adsorp_diff: {
+        x: number
+        y: number
+    }
+    setIntention: (val: GlobalStoreIntention) => void
+    setCreateItemInfo: (val: IGlobalStoreCreateItemInfo | null) => void
+    setGlobalStoreDoneJson: (val: IDoneJson[]) => void
+    cancelAllSelect: () => void
+    refreshSelectedItemsId: () => void
+    deleteSelectedItems: () => void
+    setSingleSelect: (id: string) => void
+    setSelectItems: (ids: string[]) => void
+    setRealTimeData: (val: IRealTimeData) => void
+}
+// 左侧配置
+export interface ILeftAside {
+    config: ILeftAsideConfig
+    registerConfig: (title: string, config: ILeftAsideConfigItemPublic[]) => void
+    svgPush: (title: string, config: ILeftAsideConfigItemPublic[]) => void
+    svgDelete: (title: string, id: string) => void
+}
+// 缓存配置
+export interface ICache {
+    boundingBox: CacheBoundingBox[]
+    setBoundingBox: (val: CacheBoundingBox[]) => void
+    adsorbPoint: { type: AdsorbPointType; x: number; y: number; id: string }[]
+    setAdsorbPoint: (val: { type: AdsorbPointType; x: number; y: number; id: string }[]) => void
+    copy: IDoneJson[]
+    setCopy: (val: IDoneJson[]) => void
+    history: IDoneJson[][]
+    historyIndex: number
+    addHistory: (done_json: IDoneJson[]) => void
+}
+// 杂项配置
+export interface IConfig {
+    sysComponent: ILeftAsideConfigItem[]
+    lineRenderOffset: number //因为连线是使用svg进行渲染的，所以需要一个偏移量和div的画布进行重叠
+}
+/**
+ * 右键菜单
+ */
+export interface IContextMenu {
+    menuInfo: IContextMenuDetail
+    setMenuInfo: (val: IContextMenuDetail) => void
+    setDisplayItem: (val: ContextMenuInfoType[]) => void
+}
+
+export interface IDoneJsonBindList {
+    id: string //图形的标识 值必须唯一
+    title: string //要显示的标题，一般用中文表示
+}
diff --git a/src/components/mt-edit/utils/index.ts b/src/components/mt-edit/utils/index.ts
new file mode 100644
index 0000000..2dc688a
--- /dev/null
+++ b/src/components/mt-edit/utils/index.ts
@@ -0,0 +1,853 @@
+import type { MoveItemBoundingInfo } from '../components/render-core/types'
+import type { CacheBoundingBox, IDoneJson, IDoneJsonBinfo, ILeftAsideConfigItemPublicProps } from '../store/types'
+import { useUpdateSysLine } from '@/components/mt-edit/composables/sys-line'
+export const createGroupInfo = (
+    selected_items: IDoneJson[],
+    canvas_dom: HTMLElement,
+    scale_ratio: number
+): IDoneJson => {
+    //定义组合后的组件信息
+    let min_left = Infinity
+    let min_top = Infinity
+    let max_left = -Infinity
+    let max_top = -Infinity
+    //获取画布的信息
+    const canvas_dom_rect = canvas_dom.getBoundingClientRect()
+    selected_items.forEach(item => {
+        // 获取旋转后left和top
+        const itemRect = document.getElementById(item.id!)!.getBoundingClientRect()
+        // 最小left
+        min_left = Math.min(min_left, (itemRect.left - canvas_dom_rect.left) / scale_ratio)
+        // 最大left
+        max_left = Math.max(max_left, (itemRect.right - canvas_dom_rect.left) / scale_ratio)
+        // 最小top
+        min_top = Math.min(min_top, (itemRect.top - canvas_dom_rect.top) / scale_ratio)
+        // 最大top
+        max_top = Math.max(max_top, (itemRect.bottom - canvas_dom_rect.top) / scale_ratio)
+    })
+    //定义组合元素的边界信息
+    const group_binfo = {
+        left: min_left,
+        top: min_top,
+        width: max_left - min_left,
+        height: max_top - min_top,
+        angle: 0
+    }
+    // 计算子元素相对父元素的位置
+    selected_items.forEach(item => {
+        item.binfo.left = item.binfo.left! - min_left
+        item.binfo.top = item.binfo.top! - min_top
+        item.binfo = {
+            width: 100 * (item.binfo.width / group_binfo.width),
+            height: 100 * (item.binfo.height / group_binfo.height),
+            left: 100 * (item.binfo.left / group_binfo.width),
+            top: 100 * (item.binfo.top / group_binfo.height),
+            angle: item.binfo.angle || 0
+        }
+        item.active = false
+    })
+
+    // 组合组件信息
+    return {
+        id: 'group-' + randomString(),
+        title: '组合',
+        type: 'group',
+        binfo: group_binfo,
+        resize: true,
+        rotate: true,
+        lock: false,
+        active: true,
+        hide: false,
+        use_proportional_scaling: true,
+        props: {},
+        common_animations: {
+            val: '',
+            delay: 'delay-0s',
+            speed: 'slow',
+            repeat: 'infinite'
+        },
+        children: [...selected_items],
+        events: [],
+        tag: 'group'
+    }
+}
+/**
+ * 取消组合
+ * @param elements 元素列表
+ * @param editorRect 画布react信息
+ * @returns 拆分后的列表
+ */
+export const cancelGroup = (
+    selected_item: IDoneJson,
+    canvas_dom: HTMLElement,
+    scale_ratio: number,
+    grid_align_size: number
+) => {
+    //获取画布的信息
+    const canvas_dom_rect = canvas_dom.getBoundingClientRect()
+    // 获取组合元素的子元素列表
+    const split_items = selected_item.children!.map(item => {
+        // 子组件相对于浏览器视口位置大小
+        const itemRect = document.getElementById(item.id!)!.getBoundingClientRect()
+        // 获取元素的中心点坐标
+        const center = {
+            x: itemRect.left - canvas_dom_rect.left + itemRect.width / 2,
+            y: itemRect.top - canvas_dom_rect.top + itemRect.height / 2
+        }
+        // 拆分后的宽高
+        const width = alignToGrid(selected_item.binfo.width * (item.binfo.width / 100), grid_align_size)
+        const height = alignToGrid(selected_item.binfo.height * (item.binfo.height / 100), grid_align_size)
+        // 根据拆分后的宽高计算边界信息
+        const binfo = {
+            width,
+            height,
+            left: center.x / scale_ratio - width / 2,
+            top: center.y / scale_ratio - height / 2,
+            angle: (item.binfo.angle || 0) + (selected_item.binfo.angle || 0)
+        }
+        //让拆分后的图形处于选中状态
+        return {
+            ...item,
+            active: true,
+            binfo
+        }
+    })
+    return split_items
+}
+export const svgToSymbol = (svgStr: string, id: string) => {
+    const svgDocument = new DOMParser().parseFromString(svgStr, 'image/svg+xml').children[0]
+    let width = '0'
+    let height = '0'
+    const viewBox = svgDocument.getAttribute('viewBox')
+    const symbol = document.createElementNS('http://www.w3.org/2000/svg', 'symbol')
+    if (viewBox) {
+        const [, , w, h] = viewBox.split(' ')
+        symbol.setAttributeNS(null, 'viewBox', viewBox)
+        width = w
+        height = h
+    } else {
+        width = svgDocument.getAttribute('width') || '0'
+        height = svgDocument.getAttribute('height') || '0'
+        symbol.setAttributeNS(null, 'viewBox', '0 0 ' + width + ' ' + height)
+    }
+    symbol.setAttributeNS(null, 'id', id)
+    symbol.innerHTML = svgDocument.innerHTML
+        .replaceAll('stroke:currentColor', '')
+        .replaceAll('stroke: currentColor', '')
+        .replaceAll('stroke="currentColor"', '')
+    return { symbol_str: symbol.outerHTML, width, height }
+}
+export const symbolGenSvg = (
+    symbol_id: string,
+    symbol_str: string,
+    width: string,
+    height: string,
+    props_str: string
+) => {
+    return `<svg
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink"
+  version="1.1"
+  width="${width}"
+  height="${height}"
+>
+  ${symbol_str}
+  <use
+  xlink:href="#${symbol_id}"
+  ${props_str}
+  x="0"
+  y="0"
+></use>
+</svg>
+`
+}
+export const svgToImgSrc = (svgStr: string) => {
+    return 'data:image/svg+xml;utf8,' + encodeURIComponent(svgStr)
+}
+/**
+ * 生成dom可用的属性字符串
+ * @param props
+ * @returns
+ */
+export const genDomPropstr = (props: ILeftAsideConfigItemPublicProps) => {
+    let res = ''
+    for (const key in props) {
+        res += ` ${key}="${props[key].val}"`
+    }
+    return res
+}
+/**
+ * 生成随机字符串
+ * @param len 生成个数
+ */
+export const randomString = (len?: number) => {
+    len = len || 10
+    const str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
+    const maxPos = str.length
+    let random_str = ''
+    for (let i = 0; i < len; i++) {
+        random_str += str.charAt(Math.floor(Math.random() * maxPos))
+    }
+    return random_str
+}
+function isTouchEvent(val: unknown): val is TouchEvent {
+    const typeStr = Object.prototype.toString.call(val)
+    return typeStr.substring(8, typeStr.length - 1) === 'TouchEvent'
+}
+/**
+ * 获取当前点击坐标 根据pc端和移动端获取
+ * @param e
+ * @returns
+ */
+export function getRealityXY(e: DragEvent | TouchEvent | MouseEvent, canvas_dom_rect: DOMRect | undefined) {
+    let realityX = 0,
+        realityY = 0
+    if (isTouchEvent(e)) {
+        const touch = e.targetTouches[0]
+        realityX = canvas_dom_rect ? touch.pageX - canvas_dom_rect.x : 0
+        realityY = canvas_dom_rect ? touch.pageY - canvas_dom_rect.y : 0
+    } else {
+        realityX = canvas_dom_rect ? e.clientX - canvas_dom_rect.x : e.clientX
+        realityY = canvas_dom_rect ? e.clientY - canvas_dom_rect.y : e.clientY
+    }
+
+    return { realityX, realityY }
+}
+export const blobToBase64 = (file: Blob) => {
+    return new Promise(function (resolve, reject) {
+        const reader = new FileReader()
+        let img_src: string | ArrayBuffer = ''
+        reader.readAsDataURL(file)
+        reader.onload = function () {
+            img_src = reader.result ?? ''
+        }
+        reader.onerror = function (error) {
+            reject(error)
+        }
+        reader.onloadend = function () {
+            resolve(img_src)
+        }
+    })
+}
+/**
+ * 根据坐标对齐到网格
+ * @param position 当前坐标
+ * @param grid 网格大小
+ * @returns 对应网格的坐标
+ */
+export const alignToGrid = (position: number, grid = 1) => {
+    const integerPart = Math.floor(position / grid)
+    const fractionalPart = position % grid
+
+    if (fractionalPart >= grid / 2) {
+        return (integerPart + 1) * grid
+    } else {
+        return integerPart * grid
+    }
+}
+/**
+ * json对象深拷贝
+ * @param object
+ * @param default_val
+ * @returns
+ */
+export const objectDeepClone = <T>(object: object, default_val: any = {}) => {
+    if (!object) {
+        return default_val as T
+    }
+    return JSON.parse(JSON.stringify(object)) as T
+}
+export const prosToVBind = (item: ILeftAsideConfigItemPublicProps) => {
+    let temp = {}
+    for (const key in item) {
+        temp = { ...temp, ...{ [key]: item[key].val } }
+    }
+    return temp
+}
+/**
+ * 计算y轴参考线属性和需要吸附的偏移距离
+ * @param cacheStore_boundingBox
+ * @param adsorp_diff
+ * @param move_item_bounding_info
+ */
+export const calculateGuideY = (
+    cacheStore_boundingBox: CacheBoundingBox[],
+    adsorp_diff: number,
+    move_item_bounding_info: MoveItemBoundingInfo[],
+    canvas_bounding_info: DOMRect,
+    scale: number
+) => {
+    for (let index = 0; index < move_item_bounding_info.length; index++) {
+        // 拿到移动时的边界信息
+        const { left, right, width } = move_item_bounding_info[index]
+        // 左左 左中 左右
+        const ll = cacheStore_boundingBox.find(f => Math.abs(f.left - left) < adsorp_diff)
+        const lc = cacheStore_boundingBox.find(f => Math.abs(f.left - (left + width / 2)) < adsorp_diff)
+        const lr = cacheStore_boundingBox.find(f => Math.abs(f.left - right) < adsorp_diff)
+        // 中左 中中 中右
+        const cl = cacheStore_boundingBox.find(f => Math.abs(f.left + f.width / 2 - left) < adsorp_diff)
+        const cc = cacheStore_boundingBox.find(f => Math.abs(f.left + f.width / 2 - (left + width / 2)) < adsorp_diff)
+        const cr = cacheStore_boundingBox.find(f => Math.abs(f.left + f.width / 2 - right) < adsorp_diff)
+        // 右左 右中 右右
+        const rr = cacheStore_boundingBox.find(f => Math.abs(f.right - right) < adsorp_diff)
+        const rc = cacheStore_boundingBox.find(f => Math.abs(f.right - (left + width / 2)) < adsorp_diff)
+        const rl = cacheStore_boundingBox.find(f => Math.abs(f.right - left) < adsorp_diff)
+        if (ll) {
+            return {
+                y_info: {
+                    display: true,
+                    left: (ll.left - canvas_bounding_info.left) / scale
+                },
+                move_x: ll.left - left
+            }
+        } else if (lc) {
+            return {
+                y_info: {
+                    display: true,
+                    left: (lc.left - canvas_bounding_info.left) / scale
+                },
+                move_x: lc.left - (left + width / 2)
+            }
+        } else if (lr) {
+            return {
+                y_info: {
+                    display: true,
+                    left: (lr.left - canvas_bounding_info.left) / scale
+                },
+                move_x: lr.left - right
+            }
+        } else if (cl) {
+            return {
+                y_info: {
+                    display: true,
+                    left: (cl.left + cl.width / 2 - canvas_bounding_info.left) / scale
+                },
+                move_x: cl.left + cl.width / 2 - left
+            }
+        } else if (cc) {
+            return {
+                y_info: {
+                    display: true,
+                    left: (cc.left + cc.width / 2 - canvas_bounding_info.left) / scale
+                },
+                move_x: cc.left + cc.width / 2 - (left + width / 2)
+            }
+        } else if (cr) {
+            return {
+                y_info: {
+                    display: true,
+                    left: (cr.left + cr.width / 2 - canvas_bounding_info.left) / scale
+                },
+                move_x: cr.left + cr.width / 2 - right
+            }
+        } else if (rl) {
+            return {
+                y_info: {
+                    display: true,
+                    left: (rl.right - canvas_bounding_info.left) / scale
+                },
+                move_x: rl.right - left
+            }
+        } else if (rc) {
+            return {
+                y_info: {
+                    display: true,
+                    left: (rc.right - canvas_bounding_info.left) / scale
+                },
+                move_x: rc.right - (left + width / 2)
+            }
+        } else if (rr) {
+            return {
+                y_info: {
+                    display: true,
+                    left: (rr.right - canvas_bounding_info.left) / scale
+                },
+                move_x: rr.right - right
+            }
+        }
+    }
+    return {
+        y_info: {
+            display: false,
+            left: 0
+        },
+        move_x: 0
+    }
+}
+/**
+ * 计算x轴参考线属性和需要吸附的偏移距离
+ * @param cacheStore_boundingBox
+ * @param adsorp_diff
+ * @param move_item_bounding_info
+ */
+export const calculateGuideX = (
+    cacheStore_boundingBox: CacheBoundingBox[],
+    adsorp_diff: number,
+    move_item_bounding_info: MoveItemBoundingInfo[],
+    canvas_bounding_info: DOMRect,
+    scale: number
+) => {
+    for (let index = 0; index < move_item_bounding_info.length; index++) {
+        // 拿到移动时的边界信息
+        const { top, bottom, height } = move_item_bounding_info[index]
+        // 上上 上中 上下
+        const tt = cacheStore_boundingBox.find(f => Math.abs(f.top - top) < adsorp_diff)
+        const tc = cacheStore_boundingBox.find(f => Math.abs(f.top - (top + height / 2)) < adsorp_diff)
+        const tb = cacheStore_boundingBox.find(f => Math.abs(f.top - bottom) < adsorp_diff)
+        // 中上 中中 中下
+        const ct = cacheStore_boundingBox.find(f => Math.abs(f.top + f.height / 2 - top) < adsorp_diff)
+        const cc = cacheStore_boundingBox.find(f => Math.abs(f.top + f.height / 2 - (top + height / 2)) < adsorp_diff)
+        const cb = cacheStore_boundingBox.find(f => Math.abs(f.top + f.height / 2 - bottom) < adsorp_diff)
+        // 下上 下中 下右
+        const bt = cacheStore_boundingBox.find(f => Math.abs(f.bottom - bottom) < adsorp_diff)
+        const bc = cacheStore_boundingBox.find(f => Math.abs(f.bottom - (top + height / 2)) < adsorp_diff)
+        const br = cacheStore_boundingBox.find(f => Math.abs(f.bottom - top) < adsorp_diff)
+        if (tt) {
+            return {
+                x_info: {
+                    display: true,
+                    top: (tt.top - canvas_bounding_info.top) / scale
+                },
+                move_y: tt.top - top
+            }
+        } else if (tc) {
+            return {
+                x_info: {
+                    display: true,
+                    top: (tc.top - canvas_bounding_info.top) / scale
+                },
+                move_y: tc.top - (top + height / 2)
+            }
+        } else if (tb) {
+            return {
+                x_info: {
+                    display: true,
+                    top: (tb.top - canvas_bounding_info.top) / scale
+                },
+                move_y: tb.top - bottom
+            }
+        } else if (ct) {
+            return {
+                x_info: {
+                    display: true,
+                    top: (ct.top + ct.height / 2 - canvas_bounding_info.top) / scale
+                },
+                move_y: ct.top + ct.height / 2 - top
+            }
+        } else if (cc) {
+            return {
+                x_info: {
+                    display: true,
+                    top: (cc.top + cc.height / 2 - canvas_bounding_info.top) / scale
+                },
+                move_y: cc.top + cc.height / 2 - (top + height / 2)
+            }
+        } else if (cb) {
+            return {
+                x_info: {
+                    display: true,
+                    top: (cb.top + cb.height / 2 - canvas_bounding_info.top) / scale
+                },
+                move_y: cb.top + cb.height / 2 - bottom
+            }
+        } else if (br) {
+            return {
+                x_info: {
+                    display: true,
+                    top: (br.bottom - canvas_bounding_info.top) / scale
+                },
+                move_y: br.bottom - top
+            }
+        } else if (bc) {
+            return {
+                x_info: {
+                    display: true,
+                    top: (bc.bottom - canvas_bounding_info.top) / scale
+                },
+                move_y: bc.bottom - (top + height / 2)
+            }
+        } else if (bt) {
+            return {
+                x_info: {
+                    display: true,
+                    top: (bt.bottom - canvas_bounding_info.top) / scale
+                },
+                move_y: bt.bottom - bottom
+            }
+        }
+    }
+    return {
+        x_info: {
+            display: false,
+            top: 0
+        },
+        move_y: 0
+    }
+}
+/**
+ * 坐标数组转换成path路径
+ * @param position_arr
+ * @returns
+ */
+export const positionArrarToPath = (position_arr: { x: number; y: number }[], offset_x = 0, offset_y = 0) => {
+    let path_str = ''
+    for (let index = 0; index < position_arr.length; index++) {
+        if (index === 0) {
+            path_str += `M ${position_arr[index].x + offset_x} ${position_arr[index].y + offset_y}`
+        } else {
+            path_str += ` L ${position_arr[index].x + offset_x} ${position_arr[index].y + offset_y}`
+        }
+    }
+    return path_str
+}
+/**
+ * 取两点之间坐标
+ * @param x1
+ * @param y1
+ * @param x2
+ * @param y2
+ * @returns
+ */
+export const getCenterXY = (x1: number, y1: number, x2: number, y2: number) => {
+    return {
+        x: (x1 + x2) / 2,
+        y: (y1 + y2) / 2
+    }
+}
+/**
+ * 计算旋转之后的坐标
+ * @param x 旋转之前x坐标
+ * @param y 旋转之前y坐标
+ * @param centerX 旋转中心x坐标
+ * @param centerY 旋转中心y坐标
+ * @param angleRad 旋转角度
+ * @returns 旋转之后的xy坐标
+ */
+export const rotatePoint = (x: number, y: number, centerX: number, centerY: number, angleRad: number) => {
+    const newX = centerX + (x - centerX) * Math.cos(angleRad) - (y - centerY) * Math.sin(angleRad)
+    const newY = centerY + (x - centerX) * Math.sin(angleRad) + (y - centerY) * Math.cos(angleRad)
+    return { x: newX, y: newY }
+}
+// 获取四角坐标
+export const getRectCoordinate = (item: IDoneJsonBinfo) => {
+    const topLeft = { x: item.left, y: item.top }
+    const topRight = { x: item.left + item.width, y: item.top }
+    const bottomLeft = { x: item.left, y: item.top + item.height }
+    const bottomRight = {
+        x: item.left + item.width,
+        y: item.top + item.height
+    }
+    return {
+        topLeft,
+        topRight,
+        bottomLeft,
+        bottomRight
+    }
+}
+//获取四条边中点坐标
+export const getRectCenterCoordinate = (
+    topLeft: { x: any; y: any },
+    topRight: { x: any; y: any },
+    bottomLeft: { x: any; y: any },
+    bottomRight: { x: any; y: any }
+) => {
+    const topCenter = {
+        x: (topLeft.x + topRight.x) / 2,
+        y: (topLeft.y + topRight.y) / 2
+    }
+    const bottomCenter = {
+        x: (bottomLeft.x + bottomRight.x) / 2,
+        y: (bottomLeft.y + bottomRight.y) / 2
+    }
+    const leftCenter = {
+        x: (topLeft.x + bottomLeft.x) / 2,
+        y: (topLeft.y + bottomLeft.y) / 2
+    }
+    const rightCenter = {
+        x: (topRight.x + bottomRight.x) / 2,
+        y: (topRight.y + bottomRight.y) / 2
+    }
+    return {
+        topCenter,
+        bottomCenter,
+        leftCenter,
+        rightCenter
+    }
+}
+
+export const handleAlign = (
+    type:
+        | 'left'
+        | 'horizontally'
+        | 'right'
+        | 'top'
+        | 'vertically'
+        | 'bottom'
+        | 'horizontal-distribution'
+        | 'vertical-distribution',
+    selected_done_json: IDoneJson[],
+    canvasDom: HTMLElement,
+    scale: number,
+    global_done_json: IDoneJson[]
+) => {
+    switch (type) {
+        case 'left': {
+            // 取出最左边的元素 记录最左边的坐标
+            const left_x = Math.min(...selected_done_json.filter(f => f.type !== 'sys-line').map(m => m.binfo.left))
+            // 将所有元素的坐标都设置成最左边
+            selected_done_json
+                .filter(f => f.type !== 'sys-line')
+                .forEach(m => {
+                    m.binfo.left = left_x
+                })
+            break
+        }
+        case 'horizontally': {
+            // 取出第一个元素的中点坐标 将其余元素的中点坐标都设置成这个
+            const center_x =
+                selected_done_json.filter(f => f.type !== 'sys-line')[0].binfo.left +
+                selected_done_json[0].binfo.width / 2
+            selected_done_json
+                .filter(f => f.type !== 'sys-line')
+                .forEach(m => {
+                    m.binfo.left = center_x - m.binfo.width / 2
+                })
+            break
+        }
+
+        case 'right': {
+            // 取出最右边的元素 记录最右边的坐标
+            const right_x = Math.max(
+                ...selected_done_json.filter(f => f.type !== 'sys-line').map(m => m.binfo.left + m.binfo.width)
+            )
+            // 将所有元素的坐标都设置成最右边
+            selected_done_json
+                .filter(f => f.type !== 'sys-line')
+                .forEach(m => {
+                    m.binfo.left = right_x - m.binfo.width
+                })
+            break
+        }
+
+        case 'top': {
+            // 取出最上边的元素 记录最上边的坐标
+            const top_y = Math.min(...selected_done_json.filter(f => f.type !== 'sys-line').map(m => m.binfo.top))
+            // 将所有元素的坐标都设置成最上边
+            selected_done_json
+                .filter(f => f.type !== 'sys-line')
+                .forEach(m => {
+                    m.binfo.top = top_y
+                })
+            break
+        }
+
+        case 'vertically': {
+            // 取出第一个元素的中点坐标 将其余元素的中点坐标都设置成这个
+            const center_y =
+                selected_done_json.filter(f => f.type !== 'sys-line')[0].binfo.top +
+                selected_done_json[0].binfo.height / 2
+            selected_done_json
+                .filter(f => f.type !== 'sys-line')
+                .forEach(m => {
+                    m.binfo.top = center_y - m.binfo.height / 2
+                })
+            break
+        }
+
+        case 'bottom': {
+            // 取出最下边的元素 记录最下边的坐标
+            const bottom_y = Math.max(
+                ...selected_done_json.filter(f => f.type !== 'sys-line').map(m => m.binfo.top + m.binfo.height)
+            )
+            // 将所有元素的坐标都设置成最下边
+            selected_done_json
+                .filter(f => f.type !== 'sys-line')
+                .forEach(m => {
+                    m.binfo.top = bottom_y - m.binfo.height
+                })
+            break
+        }
+        case 'horizontal-distribution': {
+            // 将选中的元素按照水平方向中点坐标从小到大排序
+            selected_done_json.sort((a, b) => a.binfo.left + a.binfo.width / 2 - b.binfo.left + b.binfo.width / 2)
+            const max_info = selected_done_json[selected_done_json.length - 1]
+            const min_info = selected_done_json[0]
+            const point_interval_x =
+                (max_info.binfo.left + max_info.binfo.width / 2 - (min_info.binfo.left + min_info.binfo.width / 2)) /
+                (selected_done_json.length - 1)
+            selected_done_json.forEach((f, index) => {
+                if (index == 0 || index == selected_done_json.length - 1) {
+                    return
+                }
+                const new_x = min_info.binfo.left + min_info.binfo.width / 2 + point_interval_x * index
+                f.binfo = {
+                    ...f.binfo,
+                    left: new_x - f.binfo.width / 2
+                }
+            })
+            break
+        }
+        case 'vertical-distribution': {
+            // 将选中的元素按照垂直方向中点坐标从小到大排序
+            selected_done_json.sort((a, b) => a.binfo.top + a.binfo.height / 2 - b.binfo.top + b.binfo.height / 2)
+            const max_info = selected_done_json[selected_done_json.length - 1]
+            const min_info = selected_done_json[0]
+            const point_interval_y =
+                (max_info.binfo.top + max_info.binfo.height / 2 - (min_info.binfo.top + min_info.binfo.height / 2)) /
+                (selected_done_json.length - 1)
+            selected_done_json.forEach((f, index) => {
+                if (index == 0 || index == selected_done_json.length - 1) {
+                    return
+                }
+                const new_y = min_info.binfo.top + min_info.binfo.height / 2 + point_interval_y * index
+                f.binfo = {
+                    ...f.binfo,
+                    top: new_y - f.binfo.height / 2
+                }
+            })
+            break
+        }
+    }
+    // 更新绑定连线
+    const sys_lines = global_done_json.filter(f => f.type === 'sys-line')
+    useUpdateSysLine(sys_lines, selected_done_json, canvasDom, scale)
+    return selected_done_json
+}
+/**
+ * 设置图形属性
+ * @param id
+ * @param key
+ * @param val
+ * @param json_arr
+ * @returns
+ */
+export const setItemAttr = (id: string, key: string, val: any, json_arr: IDoneJson[]) => {
+    return new Promise(res => {
+        const find_item = json_arr.find(f => f.id === id)
+        if (!find_item) {
+            res({
+                status: false,
+                msg: '要设置的id不存在'
+            })
+        }
+        eval(`find_item.${key} = val;`)
+        res({
+            status: true,
+            msg: '操作成功'
+        })
+    })
+}
+export const getItemAttr = (id: string, key: string, json_arr: IDoneJson[]) => {
+    const find_item = json_arr.find(f => f.id === id)
+    if (!find_item) {
+        return null
+    }
+    return eval(`find_item.${key}`)
+}
+export const previewCompareVal = (val1: any, operator: '>' | '<' | '=' | '!=', val2: any) => {
+    if (operator === '=') {
+        return String(val1) == String(val2)
+    } else if (operator === '>') {
+        return Number(val1) > Number(val2)
+    } else if (operator === '<') {
+        return Number(val1) < Number(val2)
+    } else if (operator === '!=') {
+        return String(val1) != String(val2)
+    }
+    return false
+}
+/**
+ * 将事件转换成v-on
+ * @param item
+ * @returns
+ */
+export const eventToVOn = (item: IDoneJson, externalMethod: (kid?: string) => void) => {
+    const event_obj: Record<string, string> = {}
+    item.events.forEach(event => {
+        let code_str = ''
+        if (event.action === 'changeAttr') {
+            if (event.change_attr.length < 1) {
+                return
+            }
+            event.change_attr.forEach(attr => {
+                if (!attr.target_id || !attr.target_attr || attr.target_value === undefined) {
+                    return
+                }
+                if (
+                    !event.trigger_rule ||
+                    !event.trigger_rule.trigger_id ||
+                    !event.trigger_rule.trigger_attr ||
+                    event.trigger_rule.value === undefined ||
+                    !event.trigger_rule.operator
+                ) {
+                    if (typeof attr.target_value == 'boolean') {
+                        code_str += `$setItemAttrByID('${attr.target_id}', '${attr.target_attr}', ${attr.target_value});`
+                    } else {
+                        code_str += `$setItemAttrByID('${attr.target_id}', '${attr.target_attr}', '${attr.target_value}');`
+                    }
+                } else {
+                    if (typeof attr.target_value == 'boolean') {
+                        code_str += `if($previewCompareVal($getItemAttrByID('${event.trigger_rule.trigger_id}', '${event.trigger_rule.trigger_attr}'), '${event.trigger_rule.operator}', '${event.trigger_rule.value}')){$setItemAttrByID('${attr.target_id}', '${attr.target_attr}', ${attr.target_value})};`
+                    } else {
+                        code_str += `if($previewCompareVal($getItemAttrByID('${event.trigger_rule.trigger_id}', '${event.trigger_rule.trigger_attr}'), '${event.trigger_rule.operator}', '${event.trigger_rule.value}')){$setItemAttrByID('${attr.target_id}', '${attr.target_attr}', '${attr.target_value}')};`
+                    }
+                }
+            })
+        } else if (event.action === 'customCode') {
+            if (
+                !event.trigger_rule ||
+                !event.trigger_rule.trigger_id ||
+                !event.trigger_rule.trigger_attr ||
+                event.trigger_rule.value === undefined ||
+                !event.trigger_rule.operator
+            ) {
+                code_str += event.custom_code + ';'
+            } else {
+                code_str += `if($previewCompareVal($getItemAttrByID('${event.trigger_rule.trigger_id}', '${event.trigger_rule.trigger_attr}'), '${event.trigger_rule.operator}', '${event.trigger_rule.value}')){${event.custom_code}};`
+            }
+        } else if (event.action === 'pageJump') {
+            // 页面跳转逻辑
+            if (
+                !event.trigger_rule ||
+                !event.trigger_rule.trigger_id ||
+                !event.trigger_rule.trigger_attr ||
+                event.trigger_rule.value === undefined ||
+                !event.trigger_rule.operator
+            ) {
+                code_str += event.jump_to
+            }
+        }
+        if (!Object.prototype.hasOwnProperty.call(event_obj, event.type)) {
+            event_obj[event.type] = code_str
+        } else {
+            event_obj[event.type] += code_str
+        }
+    })
+    let on_event = {}
+
+    for (const event_key in event_obj) {
+        on_event = {
+            ...on_event,
+            ...{
+                [event_key]: () => {
+                    // 抛出跳转页面的kid出去
+                    externalMethod(event_obj[event_key])
+                } //dynamicEvent(event_obj[event_key])(item)
+            }
+        }
+    }
+    return on_event
+}
+/**
+ * 创建动态事件，可以根据$item_info获取当前图形信息
+ * @param code_str
+ * @returns
+ */
+const dynamicEvent = (code_str: string) => {
+    try {
+        return new Function('$item_info', code_str)
+    } catch (error) {
+        console.error(error)
+        return new Function('$item_info', `console.error('${error}')`)
+    }
+}
diff --git a/src/components/mt-preview/index.ts b/src/components/mt-preview/index.ts
new file mode 100644
index 0000000..d66ddb0
--- /dev/null
+++ b/src/components/mt-preview/index.ts
@@ -0,0 +1,3 @@
+import MtPreview from './index.vue'
+
+export default MtPreview
diff --git a/src/components/mt-preview/index.vue b/src/components/mt-preview/index.vue
new file mode 100644
index 0000000..e1ca99c
--- /dev/null
+++ b/src/components/mt-preview/index.vue
@@ -0,0 +1,1156 @@
+<template>
+    <div
+        style="overflow: hidden; display: flex; flex-direction: column; height: 100vh"
+        v-loading="useData.loading"
+        element-loading-background="#343849c7"
+        :style="{ backgroundColor: useData.display ? '' : canvas_cfg.color }"
+    >
+        <el-button type="primary" class="backBtn" @click="onBack" v-if="!useData.display">返回</el-button>
+        <!-- 缩放控制按钮 (默认注释，需要时可开启) -->
+        <!-- <div class="zoom-controls">
+            <el-button icon="ZoomIn" size="small" @click="zoomIn"></el-button>
+            <el-button icon="ZoomOut" size="small" @click="zoomOut"></el-button>
+            <el-button icon="RefreshLeft" size="small" @click="resetTransform"></el-button>
+        </div>
+         -->
+        <!-- <el-scrollbar ref="elScrollbarRef" class="w-1/1 h-1/1"  @scroll="onScroll" > -->
+        <div
+            ref="canvasAreaRef"
+            :class="`canvasArea ${isDragging ? 'cursor-grabbing' : mtPreviewProps.canDrag ? 'cursor-grab' : ''} `"
+            style=""
+            @mousedown="onMouseDown"
+            @mousemove="onMouseMove"
+            @mouseup="onMouseUp"
+            @mouseleave="onMouseUp"
+            @wheel="onMouseWheel"
+            :style="canvasStyle"
+        >
+            <render-core
+                v-model:done-json="done_json"
+                :canvas-cfg="canvas_cfg"
+                :grid-cfg="grid_cfg"
+                :show-ghost-dom="false"
+                :canvas-dom="canvasAreaRef"
+                :global-lock="false"
+                :preivew-mode="true"
+                :show-popover="mtPreviewProps.showPopover"
+                @setDoneJson="setDoneJson"
+                @element-click="handleElementClick"
+            ></render-core>
+        </div>
+        <drag-canvas
+            ref="dragCanvasRef"
+            :scale-ratio="canvas_cfg.scale"
+            @drag-canvas-mouse-down="dragCanvasMouseDown"
+            @drag-canvas-mouse-move="dragCanvasMouseMove"
+            @drag-canvas-mouse-up="dragCanvasMouseUp"
+        ></drag-canvas>
+        <!-- </el-scrollbar> -->
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted, watch, computed, onUnmounted, nextTick } from 'vue'
+import RenderCore from '@/components/mt-edit/components/render-core/index.vue'
+import type { IExportJson, IExportDoneJson } from '../mt-edit/components/types'
+import { useExportJsonToDoneJson } from '../mt-edit/composables'
+import type { IDoneJson } from '../mt-edit/store/types'
+import { getItemAttr, previewCompareVal, setItemAttr } from '../mt-edit/utils'
+import { ElScrollbar, ElMessage, ElMessageBox, ElButton } from 'element-plus'
+import DragCanvas from '@/components/mt-edit/components/drag-canvas/index.vue'
+import { useDataStore } from '@/stores/menuList'
+import { globalStore } from '../mt-edit/store/global'
+import type { IDoneJsonEventList } from '../mt-edit/store/types'
+
+import MQTT from '@/utils/mqtt'
+
+const tableData = [
+    {
+        date: '2023-05-03 13:33:44:853',
+        name: '1#主变分支I',
+        address: '发生暂降，特征幅值:39.87%,持续时间:10.019s'
+    },
+    {
+        date: '2023-05-02 13:31:50:155',
+        name: '1#主变分支I',
+        address: '发生暂降，特征幅值:39.95%,持续时间:5.02s'
+    }
+    // {
+    //     date: '2016-05-04',
+    //     name: '110kV杨镇变',
+    //     address: 'No. 189, Grove St, Los Angeles'
+    // },
+    // {
+    //     date: '2016-05-01',
+    //     name: '110kV加工区变',
+    //     address: 'No. 189, Grove St, Los Angeles'
+    // },
+    // {
+    //     date: '2016-05-01',
+    //     name: '110kV加工区变',
+    //     address: 'No. 189, Grove St, Los Angeles'
+    // }
+]
+
+const showDetail = ref(false)
+
+const showDetailClick = () => {
+    showDetail.value = !showDetail.value
+}
+// 节流函数实现 (替代lodash，减少依赖)
+const throttle = (func: (...args: any[]) => void, wait: number) => {
+    let lastTime = 0
+    return (...args: any[]) => {
+        const now = Date.now()
+        if (now - lastTime >= wait) {
+            func.apply(this, args)
+            lastTime = now
+        }
+    }
+}
+
+type MtPreviewProps = {
+    exportJson?: IExportJson
+    canZoom?: boolean
+    canDrag?: boolean
+    showPopover?: boolean
+}
+const mtPreviewProps = withDefaults(defineProps<MtPreviewProps>(), {
+    canDrag: true,
+    canZoom: true,
+    showPopover: true
+})
+const emits = defineEmits(['onEventCallBack'])
+const useData = useDataStore()
+const canvasAreaRef = ref<HTMLDivElement | null>(null)
+const savedExportJson = ref<IExportJson>()
+
+// 画布配置 - 扩展支持平移
+const canvas_cfg = ref({
+    // width: 1920,
+    // height: 1080,
+    width: globalStore.canvasCfg.width,
+    height: globalStore.canvasCfg.height,
+    scale: 0.73,
+    color: '',
+    img: '',
+    guide: true,
+    adsorp: true,
+    adsorp_diff: 3,
+    transform_origin: {
+        x: 0,
+        y: 0
+    },
+    drag_offset: {
+        x: 0,
+        y: 0
+    },
+    // 平移属性
+    pan: {
+        x: 0,
+        y: 0
+    }
+})
+const grid_cfg = ref({
+    enabled: true,
+    align: true,
+    size: 10
+})
+const done_json = ref<IDoneJson[]>([])
+const elScrollbarRef = ref<InstanceType<typeof ElScrollbar>>()
+const dragCanvasRef = ref<InstanceType<typeof DragCanvas>>()
+const scroll_info = reactive({
+    begin_left: 0,
+    begin_top: 0,
+    left: 0,
+    top: 0
+})
+
+// 拖拽状态变量
+const isDragging = ref(false)
+const startPos = ref({ x: 0, y: 0 })
+// 非响应式临时变量，减少响应式更新频率
+const tempPan = { x: 0, y: 0 }
+let animationFrameId: number | null = null
+
+// 计算画布样式
+const canvasStyle = computed(() => ({
+    transform: `translate(${canvas_cfg.value.pan.x}px, ${canvas_cfg.value.pan.y}px) scale(${canvas_cfg.value.scale})`,
+    transformOrigin: '0 0',
+    // width: `100vw`,
+    // height: `100vh`,
+    width: canvas_cfg.value.width + 'px',
+    height: canvas_cfg.value.height + 'px',
+    backgroundColor: useData.display ? '' : canvas_cfg.value.color,
+    backgroundImage: canvas_cfg.value.img ? `url(${canvas_cfg.value.img})` : 'none',
+    backgroundSize: '100% 100%',
+    backgroundPosition: 'center',
+    backgroundRepeat: 'no-repeat'
+}))
+
+const onScroll = ({ scrollLeft, scrollTop }: { scrollLeft: number; scrollTop: number }) => {
+    scroll_info.left = scrollLeft
+    scroll_info.top = scrollTop
+}
+
+// 鼠标按下事件 - 开始拖拽
+const onMouseDown = (e: MouseEvent) => {
+    if (mtPreviewProps.canDrag && e.button === 0) {
+        // 仅响应左键
+        e.preventDefault()
+        e.stopPropagation()
+        isDragging.value = true
+        startPos.value = {
+            x: e.clientX - canvas_cfg.value.pan.x,
+            y: e.clientY - canvas_cfg.value.pan.y
+        }
+        // 初始化临时位置
+        tempPan.x = canvas_cfg.value.pan.x
+        tempPan.y = canvas_cfg.value.pan.y
+
+        // 隐藏默认拖拽行为
+        if (canvasAreaRef.value) {
+            canvasAreaRef.value.style.userSelect = 'none'
+        }
+
+        // 启动动画帧同步
+        if (!animationFrameId) {
+            const syncPosition = () => {
+                if (isDragging.value) {
+                    canvas_cfg.value.pan.x = tempPan.x
+                    canvas_cfg.value.pan.y = tempPan.y
+                    animationFrameId = requestAnimationFrame(syncPosition)
+                } else {
+                    animationFrameId = null
+                }
+            }
+            animationFrameId = requestAnimationFrame(syncPosition)
+        }
+    }
+}
+
+// 节流处理鼠标移动事件 (16ms约等于60fps)
+const throttledMouseMove = throttle((e: MouseEvent) => {
+    if (isDragging.value && mtPreviewProps.canDrag) {
+        e.preventDefault()
+        e.stopPropagation()
+        // 只更新临时变量，通过动画帧同步到响应式对象
+        tempPan.x = e.clientX - startPos.value.x
+        tempPan.y = e.clientY - startPos.value.y
+    }
+}, 16)
+
+// 鼠标移动事件 - 处理拖拽
+const onMouseMove = throttledMouseMove
+
+// 鼠标释放事件 - 结束拖拽
+const onMouseUp = (e: MouseEvent) => {
+    if (isDragging.value) {
+        isDragging.value = false
+
+        // 恢复选择功能
+        if (canvasAreaRef.value) {
+            canvasAreaRef.value.style.userSelect = ''
+        }
+
+        // 取消动画帧
+        if (animationFrameId) {
+            cancelAnimationFrame(animationFrameId)
+            animationFrameId = null
+        }
+    }
+}
+
+// 缩放控制函数
+const zoomIn = () => {
+    if (mtPreviewProps.canZoom) {
+        canvas_cfg.value.scale = Math.min(canvas_cfg.value.scale + 0.1, 3) // 最大放大到3倍
+    }
+}
+
+const zoomOut = () => {
+    if (mtPreviewProps.canZoom) {
+        canvas_cfg.value.scale = Math.max(canvas_cfg.value.scale - 0.1, 0.3) // 最小缩小到0.3倍
+    }
+}
+
+// 重置变换
+const resetTransform = () => {
+    // 定义重置变换的函数
+    canvas_cfg.value.scale = useData.display
+        ? 0.73
+        : document.documentElement.clientHeight / globalStore.canvasCfg.height
+    canvas_cfg.value.pan = { x: 0, y: 0 }
+    tempPan.x = 0
+    tempPan.y = 0
+}
+
+// 鼠标滚轮事件 - 缩放
+const onMouseWheel = (e: WheelEvent) => {
+    if (mtPreviewProps.canZoom) {
+        e.preventDefault()
+        e.stopPropagation()
+
+        // 计算缩放因子
+        const delta = e.deltaY < 0 ? 0.1 : -0.1
+        const newScale = Math.max(0.3, Math.min(3, canvas_cfg.value.scale + delta))
+
+        // 如果缩放中心是鼠标位置，计算新的平移值以保持视觉中心
+        if (canvasAreaRef.value) {
+            const rect = canvasAreaRef.value.getBoundingClientRect()
+            const mouseX = e.clientX - rect.left
+            const mouseY = e.clientY - rect.top
+
+            // 计算缩放前后的鼠标位置差异，调整平移量
+            const scaleRatio = newScale / canvas_cfg.value.scale
+            canvas_cfg.value.pan.x = mouseX - (mouseX - canvas_cfg.value.pan.x) * scaleRatio
+            canvas_cfg.value.pan.y = mouseY - (mouseY - canvas_cfg.value.pan.y) * scaleRatio
+
+            // 同步到临时变量
+            tempPan.x = canvas_cfg.value.pan.x
+            tempPan.y = canvas_cfg.value.pan.y
+
+            // 应用新缩放值
+            canvas_cfg.value.scale = newScale
+        }
+    }
+}
+
+const dragCanvasMouseDown = () => {
+    scroll_info.begin_left = scroll_info.left
+    scroll_info.begin_top = scroll_info.top
+}
+const dragCanvasMouseMove = (move_x: number, move_y: number) => {
+    let new_left = scroll_info.begin_left - move_x
+    let new_top = scroll_info.begin_top - move_y
+    elScrollbarRef.value?.setScrollLeft(new_left)
+    elScrollbarRef.value?.setScrollTop(new_top)
+}
+/**
+ * 画布拖动结束事件
+ */
+const dragCanvasMouseUp = () => {}
+const setItemAttrByID = (id: string, key: string, val: any) => {
+    return setItemAttr(id, key, val, done_json.value)
+}
+const setItemAttrs = (info: { id: string; key: string; val: any }[]) => {
+    info.forEach(f => {
+        setItemAttr(f.id, f.key, f.val, done_json.value)
+    })
+}
+const getItemAttrByID = (id: string, key: string, val: any) => {
+    return getItemAttr(id, key, done_json.value)
+}
+
+const setItemAttrByIDAsync = (id: string, key: string, val: any) => {
+    // 通过改变属性的事件去设置值时 需要转换成宏任务 不然多个事件判断会有问题
+    setTimeout(() => {
+        setItemAttrByID(id, key, val)
+    }, 0)
+}
+;(window as any).$mtElMessage = ElMessage
+;(window as any).$mtElMessageBox = ElMessageBox
+;(window as any).$setItemAttrByID = (id: string, key: string, val: any) => setItemAttrByIDAsync(id, key, val)
+;(window as any).$getItemAttrByID = getItemAttrByID
+;(window as any).$previewCompareVal = previewCompareVal
+;(window as any).$mtEventCallBack = (type: string, item_id: string, ...args: any[]) =>
+    emits('onEventCallBack', type, item_id, ...args)
+
+onMounted(async () => {
+    // 启动消息监听  iframe传过来的参数
+    receiveMessage()
+
+    if (mtPreviewProps.exportJson) {
+        await setImportJson(mtPreviewProps.exportJson)
+    }
+    await sendTableData()
+    if (useData.graphicDisplay == 'zl') {
+        // // 治理项目连接mqtt
+        await setMqtt()
+    }
+    // window.parent.postMessage({ action: useData, data: tableData }, '*') // 发送数据给父页面
+})
+
+// 无锡大屏通过iframe传过来的数据
+// let keyList = [
+//     '5f99b9ba4e563439ec8490a0c598da8d',
+//     '401a696fe9918bb4cce7d9393d0d5df7',
+//     '74203b186428c1684aa450ad05257b06'
+// ]
+// 无锡大屏通过iframe传过来的数据  lineId
+let keyList = ref<any>([])
+
+// 闪烁点 lineId
+let list = ref<any>([])
+
+// 最大点闪烁点lineId
+let listMax = ref<any>([])
+
+// 初始颜色
+let sendColor = ref<any>('')
+// 最大监测点颜色
+let sendMaxColor = ref<any>('')
+
+// 背景色
+let backgroundPointId = ref<any>([])
+let backgroundPointColor = ref<any>('')
+
+// let list = [
+//     'c53cccb8c65201c192d8c57fbdb4d993-RdNsoqHYOZ',
+//     'c53cccb8c65201c192d8c57fbdb4d993-O4jAyCBz1A',
+//     // 'c53cccb8c65201c192d8c57fbdb4d993-XBd70oZ3kH',
+//     'c53cccb8c65201c192d8c57fbdb4d993-LH9I0qD86s'
+// ]
+
+const sendTableData = () => {
+    try {
+        // 确保只传输可序列化的数据
+        const cleanData = tableData.map(item => ({
+            name: item.name,
+            date: item.date,
+            address: item.address
+        }))
+
+        // 只发送 useData 中需要的可序列化数据
+        const serializableUseData = {
+            display: useData.display,
+            loading: useData.loading
+            // 添加其他需要的简单属性
+        }
+
+        window.parent.postMessage(
+            {
+                action: 'securityDetailData',
+                data: cleanData
+                // data1: serializableUseData
+            },
+            '*'
+        )
+    } catch (error) {
+        console.error('数据传输失败:', error)
+    }
+}
+
+let message = [
+    { id: 'c53cccb8c65201c192d8c57fbdb4d993-RdNsoqHYOZ', text: '发生时刻:2023-07-05 12:00:00' },
+    { id: 'c53cccb8c65201c192d8c57fbdb4d993-O4jAyCBz1A', text: '传输中1111......' }
+    // { id: 'c53cccb8c65201c192d8c57fbdb4d993-XBd70oZ3kH', text: '发生时刻:2023-07-06 14:20:00' }
+]
+
+// 传输设备相关的连接线ID列表
+let list_sys = ref<any>([])
+
+let transmissionDeviceIds: string[] = []
+
+let eventListAll = ref<any>([])
+
+let flagValue = ref('')
+
+const receiveMessage = () => {
+    // 在 iframe 内的页面中
+    window.addEventListener('message', function (event) {
+        // 验证消息来源（在生产环境中应该验证 origin）
+        // if (event.origin !== 'trusted-origin') return;
+
+        const { type, payload } = event.data
+
+        if (type === 'ANALYSIS_KEYS') {
+            // 在处理新数据前，先清理现有的动态文字
+            if (savedExportJson.value) {
+                savedExportJson.value.json =
+                    savedExportJson.value.json?.filter(item => !item.id?.startsWith('auto-text-')) || []
+                done_json.value = done_json.value.filter(item => !item.id?.startsWith('auto-text-'))
+            }
+            // console.log('payload1111', payload)
+            // 处理接收到的 keyList 数据
+            keyList.value = payload.eventList
+            list.value = payload.eventList
+            sendColor.value = payload.color
+            // 点击行的全部数据
+            if (payload.eventListAll) {
+                eventListAll.value = payload.eventListAll
+                // 在数据接收后重新更新文本
+                setTimeout(() => {
+                    if (savedExportJson.value) {
+                        addTextNextToTransport()
+
+                        setImportJson(savedExportJson.value)
+                    }
+                }, 100)
+            } else {
+                eventListAll.value = []
+            }
+            if (payload.maxColor) {
+                sendMaxColor.value = payload.maxColor
+            } else {
+                sendMaxColor.value = ''
+            }
+            if (payload.maxResponsibilityMonitorId) {
+                listMax.value = payload.maxResponsibilityMonitorId
+            } else {
+                listMax.value = []
+            }
+            if (payload.backgroundPointId) {
+                backgroundPointId.value = payload.backgroundPointId
+            } else {
+                backgroundPointId.value = []
+            }
+            if (payload.backgroundPointColor) {
+                backgroundPointColor.value = payload.backgroundPointColor
+            } else {
+                backgroundPointColor.value = ''
+            }
+            if (payload.flagValue) {
+                flagValue.value = payload.flagValue
+            } else {
+                flagValue.value = ''
+            }
+        }
+        init()
+    })
+}
+
+//根据 lineId 查找传输设备 ID 的函数
+const findTransmissionDeviceIdsByKeyList = (array: any) => {
+    if (!savedExportJson.value?.json) return []
+
+    const deviceIds = savedExportJson.value.json.filter(item => array.includes(item.lineId ?? '')).map(item => item.id)
+
+    // console.log('传输设备 ID 列表:', deviceIds)
+
+    return deviceIds
+}
+
+// 为每个图元动态添加点击事件
+const addClickEventsToElements = () => {
+    if (savedExportJson.value && savedExportJson.value.json) {
+        savedExportJson.value.json.forEach(item => {
+            // 检查是否已经有点击事件
+            const hasClickEvent = item.events && item.events.some(event => event.type === 'click')
+
+            if (!hasClickEvent) {
+                // 创建点击事件对象
+                const clickEvent: IDoneJsonEventList = {
+                    id: generateRandomId(), // 生成随机ID
+                    type: 'click', // 明确指定为字面量类型
+                    action: 'customCode', // 自定义操作
+                    jump_to: '',
+                    change_attr: [],
+                    custom_code: '', // 可以在这里添加自定义代码
+                    trigger_rule: {
+                        value: null
+                    }
+                }
+
+                // 如果图元还没有events数组，则创建一个
+                if (!item.events) {
+                    item.events = []
+                }
+
+                // 添加点击事件
+                item.events.push(clickEvent)
+            }
+        })
+    }
+}
+
+// 生成随机ID的辅助函数
+const generateRandomId = () => {
+    return Math.random().toString(36).substr(2, 10)
+}
+
+const setImportJson = (exportJson: IExportJson) => {
+    // 保存exportJson供后续使用
+    savedExportJson.value = exportJson
+    // 定义要执行的操作函数
+    const executeOperations = () => {
+        const { canvasCfg, gridCfg, importDoneJson } = useExportJsonToDoneJson(savedExportJson.value)
+        // 保留现有的平移和缩放设置
+        const currentPan = canvas_cfg.value.pan
+        const currentScale = canvas_cfg.value.scale
+
+        canvas_cfg.value = {
+            ...canvasCfg,
+            pan: currentPan,
+            scale: currentScale
+        }
+        grid_cfg.value = gridCfg
+        done_json.value = importDoneJson
+
+        // 为图元添加点击事件
+        addClickEventsToElements()
+
+        // 首页初始化的时候
+        setTimeout(() => {
+            done_json.value.forEach(item => {
+                //报警设备闪烁
+                if (findTransmissionDeviceIdsByKeyList(list.value).includes(item.id)) {
+                    // item.props.fill.val = '#fcfc57'
+                    item.props.fill.val = sendColor.value
+                    item.common_animations.val = 'flash'
+                    if (findTransmissionDeviceIdsByKeyList(listMax.value).includes(item.id)) {
+                        item.props.fill.val = sendMaxColor.value
+                        item.common_animations.val = 'flash'
+                    }
+
+                    // 查找与该设备连接的线
+                    const connectedLines = searchDevicesConnect([item.id!])
+                    // console.log('该设备连接的线:', connectedLines)
+
+                    // 通过连接的线找到开关，再找到开关连接的所有线
+                    const allRelatedLines: string[] = [...connectedLines]
+
+                    for (const lineId of connectedLines) {
+                        // 通过线找到连接的开关
+                        const switchId = findSwitchByLineEndpoint(lineId)
+                        if (switchId) {
+                            // console.log('找到连接的开关:', switchId)
+
+                            // 找到开关连接的所有线
+                            const switchLines = findLinesBySwitchId(switchId)
+                            // console.log('开关连接的线:', switchLines)
+
+                            // 合并所有相关的线
+                            switchLines.forEach(line => {
+                                if (!allRelatedLines.includes(line)) {
+                                    allRelatedLines.push(line)
+                                }
+                            })
+                        }
+                    }
+
+                    //console.log('所有相关的线:', allRelatedLines)
+
+                    // 高亮显示所有相关的线
+                    //只有当 flagValue 不等于 '2' 时才高亮显示所有相关的线
+                    if (flagValue.value !== '2') {
+                        highlightLines(allRelatedLines)
+                    }
+                } else {
+                    item.common_animations.val = ''
+                }
+
+                if (findTransmissionDeviceIdsByKeyList(backgroundPointId.value).includes(item.id)) {
+                    item.props.fill.val = backgroundPointColor.value
+                    item.common_animations.val = 'flash'
+                }
+
+                // 报警设备连线电流
+                // if (list_sys.value.includes(item.id)) {
+                //     item.props.ani_type.val = 'electricity'
+                //     item.props.ani_color.val = '#d0e20a'
+                // }
+                // if(item.id=='sys-line-vertical-v9oPMlvQL1'){
+                //      item.props.ani_color.val = '#8c0ae2'
+                // }
+            })
+        }, 1000)
+    }
+
+    if (!useData.loading) {
+        if (exportJson == null) {
+            setDoneJson(useData.dataTree[0].kId)
+            publish(useData.dataTree[0].id)
+        } else {
+            executeOperations()
+        }
+    } else {
+        // 如果不是true，添加监听
+        const stopWatch = watch(
+            () => useData.loading,
+            newVal => {
+                if (newVal === false) {
+                    // 当loading变为true时执行操作
+                    if (exportJson == null) {
+                        setDoneJson(useData.dataTree[0].kId)
+                        publish(useData.dataTree[0].id)
+                    } else {
+                        executeOperations()
+                    }
+                    // 执行后停止监听
+                    stopWatch()
+                }
+            }
+        )
+    }
+
+    return true
+}
+
+// 根据线的起点或终点查找连接的开关
+const findSwitchByLineEndpoint = (lineId: string): string | null => {
+    if (!savedExportJson.value?.json) return null
+
+    const line = savedExportJson.value.json.find(item => item.id === lineId)
+    if (!line || !line.props?.bind_anchors) return null
+
+    const bindAnchors = line.props.bind_anchors as { start?: { id: string }; end?: { id: string } } | undefined
+    if (!bindAnchors) return null
+
+    // 查找起点连接的开关
+    const startId = bindAnchors.start?.id
+    if (startId) {
+        const startElement = savedExportJson.value.json.find(item => item.id === startId)
+        if (startElement && startElement.title?.includes('开关')) {
+            return startElement.id!
+        }
+    }
+
+    // 如果起点不是开关，查找终点连接的开关
+    const endId = bindAnchors.end?.id
+    if (endId) {
+        const endElement = savedExportJson.value.json.find(item => item.id === endId)
+        if (endElement && endElement.title?.includes('开关')) {
+            return endElement.id!
+        }
+    }
+
+    return null
+}
+
+// 根据开关ID查找所有连接的线
+const findLinesBySwitchId = (switchId: string): string[] => {
+    if (!savedExportJson.value?.json) return []
+
+    const lineElements = savedExportJson.value.json.filter(item => item.type === 'sys-line' && item.props?.bind_anchors)
+
+    const connectedLines: string[] = []
+
+    for (const line of lineElements) {
+        const bindAnchors = line.props.bind_anchors as { start?: { id: string }; end?: { id: string } } | undefined
+        if (!bindAnchors) continue
+
+        const startId = bindAnchors.start?.id
+        const endId = bindAnchors.end?.id
+
+        if (startId === switchId || endId === switchId) {
+            connectedLines.push(line.id!)
+        }
+    }
+
+    // console.log('连接的线:', connectedLines)
+
+    return connectedLines
+}
+
+// 高亮显示连线的函数
+const highlightLines = (lineIds: string[]) => {
+    lineIds.forEach(id => {
+        const line = done_json.value.find(item => item.id === id)
+        if (line) {
+            line.props.ani_type.val = 'electricity'
+            line.props.ani_color.val = '#d0e20a'
+
+            // 置顶显示 - 将连线元素移到数组末尾（因为渲染顺序是按数组顺序）
+            const index = done_json.value.findIndex(item => item.id === id)
+            if (index !== -1) {
+                const [item] = done_json.value.splice(index, 1)
+                done_json.value.push(item)
+            }
+        }
+    })
+}
+
+// 添加一个新的 ref 来存储当前点击的设备ID
+const currentClickedElementId = ref<string | null>(null)
+
+// 图纸的kId
+let storedSelectedId = ''
+
+storedSelectedId = localStorage.getItem('selectedId') || ''
+
+// 当前点击的元素lineId   通过mt-edit/render-core/index.vue传过来的click事件
+const handleElementClick = (elementId: string) => {
+    // 保存当前点击的设备ID
+    currentClickedElementId.value = elementId
+    const item = done_json.value.find(item => item.lineId === elementId)
+    if (item && item.events && item.events.some(event => event.type === 'click')) {
+        // 发送设备ID到父级iframe
+        window.parent.postMessage(
+            {
+                action: 'coreClick',
+                coreId: elementId.toString(), // 确保是字符串
+                selectedId: storedSelectedId // 新增的字段
+                // elementData: item // 可以发送整个元素数据
+            },
+            '*'
+        )
+    }
+}
+const searchDevicesConnect = (transmissionDeviceIds: string[]) => {
+    // 确保 savedExportJson.value 存在
+    if (!savedExportJson.value?.json) {
+        console.warn('savedExportJson.value 或 json 未定义')
+        return []
+    }
+
+    // 查找所有连线元素
+    const lineElements = savedExportJson.value.json.filter(item => item.type === 'sys-line' && item.props?.bind_anchors)
+
+    // 查找所有开关元素
+    const switchElements = savedExportJson.value.json.filter(item => item.title?.includes('开关'))
+
+    // 存储连接线的ID
+    const connectedLineIds: string[] = []
+
+    // 存储找到的开关ID
+    const switchIds: string[] = []
+
+    // 首先找出所有传输设备连接的开关
+    for (const deviceId of transmissionDeviceIds) {
+        for (const line of lineElements) {
+            const bindAnchors = line.props.bind_anchors as { start?: { id: string }; end?: { id: string } } | undefined
+            if (!bindAnchors) continue
+
+            const startId = bindAnchors.start?.id
+            const endId = bindAnchors.end?.id
+
+            // 检查连线是否连接传输设备和开关
+            if (startId === deviceId && switchElements.some(s => s.id === endId)) {
+                if (endId && !switchIds.includes(endId)) {
+                    switchIds.push(endId)
+                }
+                if (!connectedLineIds.includes(line.id!)) {
+                    connectedLineIds.push(line.id!)
+                }
+            } else if (endId === deviceId && switchElements.some(s => s.id === startId)) {
+                if (startId && !switchIds.includes(startId)) {
+                    switchIds.push(startId)
+                }
+                if (!connectedLineIds.includes(line.id!)) {
+                    connectedLineIds.push(line.id!)
+                }
+            }
+        }
+    }
+
+    // 然后找出开关之间的连线
+    for (const line of lineElements) {
+        const bindAnchors = line.props.bind_anchors as { start?: { id: string }; end?: { id: string } } | undefined
+        if (!bindAnchors) continue
+
+        const startId = bindAnchors.start?.id
+        const endId = bindAnchors.end?.id
+
+        // 检查连线是否连接两个开关
+        if (startId && endId && switchIds.includes(startId) && switchIds.includes(endId)) {
+            if (!connectedLineIds.includes(line.id!)) {
+                connectedLineIds.push(line.id!)
+            }
+        }
+    }
+
+    // console.log('连接的连线ID列表:', connectedLineIds)
+
+    return connectedLineIds
+}
+
+// 添加针对传输设备旁边添加文字的方法
+const addTextNextToTransport = () => {
+    // 确保 savedExportJson.value 存在后再进行操作
+    if (!savedExportJson.value) {
+        console.warn('savedExportJson.value is undefined')
+        return []
+    }
+    let transportDevices = []
+    // 查找传输设备图元并添加文字图元
+    transportDevices =
+        savedExportJson.value.json?.filter(item =>
+            findTransmissionDeviceIdsByKeyList(keyList.value).includes(item.id)
+        ) || []
+
+    // 为每个传输设备添加旁边的文字图元
+    const textElementsToAdd: IExportDoneJson[] = []
+    const idsToRemove: string[] = []
+
+    transportDevices.forEach((device, index) => {
+        // 构造预期的旧文本图元 ID 模式 (基于设备 ID)
+        const expectedIdPrefix = `auto-text-${device.id}-`
+
+        // 查找所有与当前设备关联的现有文本图元
+        const existingTextElements =
+            savedExportJson.value?.json?.filter(item => item.id?.startsWith(expectedIdPrefix)) || []
+
+        // 将这些旧图元的 ID 添加到待删除列表
+        idsToRemove.push(...existingTextElements.map(item => item.id!))
+
+        // 获取对应的消息文本
+        const deviceMessage =
+            eventListAll.value[0].find((m: any) => m.monitorId === device.lineId)?.responsibilityData || 0
+
+        // 创建新的文本图元
+        const textElement: IExportDoneJson = {
+            id: `auto-text-${device.id}-${index}`, // 使用时间戳确保唯一性
+            title: '动态文字',
+            type: 'vue',
+            tag: 'text-vue',
+            props: {
+                // text: deviceMessage.toFixed(1) + '%',
+                text: '占比:' + Math.floor(deviceMessage * 10) / 10 + '%',
+                fontFamily: '黑体',
+                fontSize: 14,
+                fill: 'red',
+                vertical: false
+            },
+            common_animations: {
+                val: '',
+                delay: 'delay-0s',
+                speed: 'slow',
+                repeat: 'infinite'
+            },
+            binfo: {
+                left: (device.binfo?.left || 0) + (device.binfo?.width / 2 || 0) + 10,
+                //top: (device.binfo?.top || 0) + (device.binfo?.height || 0) / 2 - 10 + (index % 2 === 0 ? 20 : -20),
+                top: (device.binfo?.top || 0) + (device.binfo?.height || 0) - 10,
+                width: 200,
+                height: 50,
+                angle: 0
+            },
+            resize: true,
+            rotate: true,
+            lock: false,
+            active: false,
+            hide: false,
+            UIDName: '',
+            UIDNames: [],
+            events: []
+        }
+        textElementsToAdd.push(textElement)
+    })
+
+    // 从 savedExportJson.value.json 中移除旧的文本图元
+    if (savedExportJson.value.json) {
+        done_json.value = savedExportJson.value.json.filter(item => !idsToRemove.includes(item.id!))
+    }
+
+    // 合并原始图元和新增的文字图元
+    const updatedJson = [...done_json.value, ...textElementsToAdd]
+
+    // 更新 savedExportJson.value
+    if (savedExportJson.value) {
+        savedExportJson.value.json = updatedJson
+    }
+
+    return updatedJson
+}
+
+// 预览时候绑定指标等的点击事件
+const setDoneJson = async (kId: string) => {
+    const filteredItems = useData.dataTree.filter(item => item.kId == kId)
+
+    if (filteredItems.length === 0) {
+        console.error(`No item found with kId: ${kId}`)
+        return
+    }
+
+    const item = filteredItems[0]
+
+    // 根据传过来的kId找到所在的id
+    const foundId = item.id
+
+    if (foundId) {
+        // 将当前选中的行数据存储到本地存储
+        localStorage.setItem('selectedId', foundId)
+    }
+
+    storedSelectedId = localStorage.getItem('selectedId') || ''
+
+    if (!item.path) {
+        console.error(`Item with kId: ${kId} does not have a path property`)
+        return
+    }
+
+    setImportJson(JSON.parse(item.path))
+}
+
+const init = async () => {
+    setTimeout(() => {
+        // 执行动态添加文本的操作
+        // const updatedDoneJson = addTextNextToTransport()
+
+        // 调用函数获取传输设备 ID
+        transmissionDeviceIds = findTransmissionDeviceIdsByKeyList(keyList.value)
+
+        //传入参数: transmissionDeviceIds - 一个包含传输设备ID的数组
+        // 功能: 查找与这些传输设备相关的连接线（包括直接连接和间接连接的线）
+        list_sys.value = searchDevicesConnect(transmissionDeviceIds)
+
+        // 将结果赋值给 savedExportJson.value
+        // if (savedExportJson.value) {
+        //     // 创建一个新的对象，避免直接修改原始对象
+        //     savedExportJson.value = {
+        //         ...savedExportJson.value,
+        //         json: updatedDoneJson
+        //     }
+        // } else {
+        //     // 如果 savedExportJson.value 不存在，创建一个新的对象
+        //     savedExportJson.value = {
+        //         canvasCfg: canvas_cfg.value,
+        //         gridCfg: grid_cfg.value,
+        //         json: updatedDoneJson
+        //     }
+        // }
+
+        // 重新设置导入的JSON以触发界面更新
+        setImportJson(savedExportJson.value)
+    }, 100)
+}
+const timer = ref()
+
+// 连接mqtt
+const mqttClient = ref()
+const setMqtt = async () => {
+    mqttClient.value = new MQTT('/zl/rtData/#')
+
+    // 设置消息接收回调
+    try {
+        await mqttClient.value.init()
+
+        // 订阅主题
+        await mqttClient.value.subscribe('/zl/rtData/#')
+
+        // 设置消息接收回调
+        mqttClient.value.onMessage((subscribe: string, message: any) => {
+            const msg: any = uint8ArrayToObject(message)
+            console.log('🚀 ~ 接受消息:', msg)
+            setTimeout(() => {
+                done_json.value.forEach(item => {
+                    msg.forEach((msgValue: any) => {
+                        if (item.id == msgValue.id) {
+                            item.props.text.val = item.props.text.val.replace(/#{3}/g, msgValue.value) //'B相负载电流-CP95:31'
+                        }
+                    })
+                })
+            }, 100)
+        })
+    } catch (error) {
+        console.error('MQTT 初始化失败:', error)
+    }
+}
+const publish = async (id: string) => {
+    if (useData.graphicDisplay != 'zl') return //质量项目进入
+    if (mqttClient.value) {
+        await mqttClient.value.subscribe('zl/askRtData/' + id)
+        // 发送消息
+        await mqttClient.value.publish('/zl/askRtData/' + id, '{}')
+        if (timer.value) {
+            clearInterval(timer.value)
+            timer.value = null
+        }
+        timer.value = setInterval(
+            () => {
+                mqttClient.value.publish('/zl/askRtData/' + id, '{}')
+            },
+            3 * 60 * 1000
+        )
+    }
+}
+onUnmounted(() => {
+    if (timer.value) {
+        clearInterval(timer.value)
+        timer.value = null
+    }
+})
+// 方法1: 使用 mqtt消息转换
+function uint8ArrayToObject(uint8Array: Uint8Array) {
+    try {
+        // 将 Uint8Array 解码为字符串
+        const decoder = new TextDecoder('utf-8')
+        const jsonString = decoder.decode(uint8Array)
+
+        // 将 JSON 字符串解析为对象
+        return JSON.parse(jsonString)
+    } catch (error) {
+        console.error('转换失败:', error)
+        return null
+    }
+}
+const onBack = () => {
+    window.close()
+}
+
+watch(
+    () => useData.display,
+    newVal => {
+        if (newVal) {
+            canvas_cfg.value.scale = 0.73
+            canvas_cfg.value.pan = {
+                x: 0,
+                y: 50
+            }
+        } else {
+            canvas_cfg.value.scale = document.documentElement.clientHeight / globalStore.canvasCfg.height
+        }
+    },
+    { immediate: true }
+)
+defineExpose({
+    setItemAttrByID,
+    setImportJson,
+    setItemAttrs,
+    zoomIn,
+    zoomOut,
+    resetTransform
+})
+</script>
+
+<style scoped>
+.canvasArea {
+    position: relative;
+    /* 移除过渡效果，避免拖拽延迟 */
+    will-change: transform;
+    /* 提示浏览器优化transform属性 */
+}
+
+.backBtn {
+    position: absolute;
+    top: 20px;
+    right: 10px;
+    z-index: 2;
+}
+
+.zoom-controls {
+    position: fixed;
+    top: 20px;
+    left: 20px;
+    z-index: 1;
+    display: flex;
+    gap: 5px;
+}
+
+.cursor-grab {
+    cursor: grab;
+}
+
+.cursor-grabbing {
+    cursor: grabbing;
+}
+
+.el-table {
+    /* --el-table-border-color: #0a73ff;
+    --el-table-row-hover-bg-color: #3d4862;
+    --el-table-header-bg-color: #2a3b62;
+    --el-table-bg-color: #343849c7; */
+    --el-table-border-color: #0a73ff;
+    --el-table-row-hover-bg-color: #0a73ff20;
+    --el-table-header-bg-color: #0a73ff40;
+    --el-table-bg-color: #ffffff00;
+    text-align: center;
+    color: #ffffff;
+}
+
+:deep(.el-table tr) {
+    /* background-color: #242936; */
+    background-color: #00000090 !important;
+}
+
+:deep(.el-table .cell) {
+    color: #ffffff;
+    text-align: center;
+}
+
+:deep(.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell) {
+    /* background-color: #303b54; */
+    background-color: #5aa1ff29;
+}
+</style>
diff --git a/src/components/test/custom-demo/index.vue b/src/components/test/custom-demo/index.vue
new file mode 100644
index 0000000..355e939
--- /dev/null
+++ b/src/components/test/custom-demo/index.vue
@@ -0,0 +1,43 @@
+<template>
+    <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
+                :fill="props.circleFill"
+                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"
+                :fill="props.pathFill1"
+                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
+                v-if="props.showLine2"
+                id="line2"
+                :fill="props.pathFill2"
+                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"
+                :fill="props.pathFill3"
+                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>
+</template>
+<script setup lang="ts">
+const props = defineProps({
+    id: String,
+    circleFill: String,
+    pathFill1: String,
+    pathFill2: String,
+    pathFill3: String,
+    showLine2: Boolean
+})
+</script>
diff --git a/src/components/test/my-button/index.vue b/src/components/test/my-button/index.vue
new file mode 100644
index 0000000..2a725fb
--- /dev/null
+++ b/src/components/test/my-button/index.vue
@@ -0,0 +1,18 @@
+<template>
+    <div style="width: 100%; height: 100%">
+        <button class="my-button" style="width: 100%; height: 100%">{{ props.text }}</button>
+    </div>
+</template>
+<script setup lang="ts">
+const props = defineProps({
+    text: String,
+    bgColor: String,
+    fontFamily: String
+})
+</script>
+<style scoped>
+.my-button {
+    background-color: v-bind('props.bgColor');
+    font-family: v-bind('props.fontFamily');
+}
+</style>
diff --git a/src/components/test/my-input/index.vue b/src/components/test/my-input/index.vue
new file mode 100644
index 0000000..c2093b0
--- /dev/null
+++ b/src/components/test/my-input/index.vue
@@ -0,0 +1,18 @@
+<template>
+    <div style="width: 100%; height: 100%">
+        <el-input v-model="val" style="width: 100%; height: 100%"></el-input>
+    </div>
+</template>
+<script setup lang="ts">
+import { computed } from 'vue'
+import { ElInput } from 'element-plus'
+const props = defineProps(['modelValue'])
+const emits = defineEmits(['update:modelValue'])
+const val = computed({
+    get: () => props.modelValue,
+    set: value => {
+        emits('update:modelValue', value)
+    }
+})
+</script>
+<style scoped></style>
diff --git a/src/components/test/pie-charts/index.vue b/src/components/test/pie-charts/index.vue
new file mode 100644
index 0000000..9c13bef
--- /dev/null
+++ b/src/components/test/pie-charts/index.vue
@@ -0,0 +1,71 @@
+<template>
+    <v-chart class="chart" :option="option" autoresize />
+</template>
+
+<script lang="ts" setup>
+import { use } from 'echarts/core'
+import { SVGRenderer } from 'echarts/renderers'
+import { PieChart } from 'echarts/charts'
+import { TitleComponent, TooltipComponent, LegendComponent } from 'echarts/components'
+import VChart, { THEME_KEY } from 'vue-echarts'
+import { watch, provide, reactive } from 'vue'
+use([SVGRenderer, PieChart, TitleComponent, TooltipComponent, LegendComponent])
+
+const props = defineProps({
+    title: {
+        type: String,
+        default: '标题'
+    },
+    seriesName: {
+        type: String,
+        default: '详情'
+    },
+    seriesData: {
+        type: Array,
+        default: () => []
+    }
+})
+
+const option = reactive({
+    title: {
+        text: props.title,
+        left: 'center'
+    },
+    tooltip: {
+        trigger: 'item',
+        formatter: '{a} <br/>{b} : {c} ({d}%)'
+    },
+    legend: {
+        orient: 'vertical',
+        left: 'left'
+    },
+    series: [
+        {
+            name: props.seriesName,
+            type: 'pie',
+            radius: '55%',
+            center: ['50%', '60%'],
+            data: props.seriesData,
+            emphasis: {
+                itemStyle: {
+                    shadowBlur: 10,
+                    shadowOffsetX: 0,
+                    shadowColor: 'rgba(0, 0, 0, 0.5)'
+                }
+            }
+        }
+    ]
+})
+watch(props, new_val => {
+    option.title.text = new_val.title
+    option.series[0].name = new_val.seriesName
+    option.series[0].data = new_val.seriesData
+})
+</script>
+
+<style scoped>
+.chart {
+    height: 100%;
+    width: 100%;
+}
+</style>
diff --git a/src/export.ts b/src/export.ts
new file mode 100644
index 0000000..edf5db8
--- /dev/null
+++ b/src/export.ts
@@ -0,0 +1,11 @@
+import 'element-plus/dist/index.css'
+import 'virtual:uno.css'
+import '@/assets/css-vars.css'
+import 'virtual:svg-icons-register'
+import 'animate.css'
+import '@/components/mt-edit/assets/css/custom_ani.css'
+import MtDzr from '@/components/mt-dzr'
+import MtEdit from '@/components/mt-edit'
+import MtPreview from '@/components/mt-preview'
+import { leftAsideStore } from '@/components/mt-edit/store/left-aside'
+export { MtDzr, MtEdit, MtPreview, leftAsideStore }
diff --git a/src/main.ts b/src/main.ts
new file mode 100644
index 0000000..244b989
--- /dev/null
+++ b/src/main.ts
@@ -0,0 +1,27 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import './assets/main.css'
+import router from './router/index'
+import MyButton from '@/components/test/my-button/index.vue'
+import MyInput from '@/components/test/my-input/index.vue'
+import CustomDemo from '@/components/test/custom-demo/index.vue'
+import PieCharts from '@/components/test/pie-charts/index.vue'
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+import { createPinia } from 'pinia'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+const pinia = createPinia()
+
+const app = createApp(App)
+app.use(router)
+app.use(pinia)
+app.use(ElementPlus)
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+    app.component(key, component)
+}
+
+app.component('my-input', MyInput)
+app.component('my-button', MyButton)
+app.component('custom-demo', CustomDemo)
+app.component('pie-charts', PieCharts)
+app.mount('#app')
diff --git a/src/router/index.ts b/src/router/index.ts
new file mode 100644
index 0000000..9a4a122
--- /dev/null
+++ b/src/router/index.ts
@@ -0,0 +1,48 @@
+import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'
+export const constantRoutes = [
+    {
+        path: '/',
+        component: () => import('../views/edit/index.vue')
+    },
+    {
+        name: 'edit',
+        path: '/edit',
+        component: () => import('../views/edit/index.vue')
+    },
+    {
+        name: 'demo',
+        path: '/demo',
+        component: () => import('../views/demo/index.vue')
+    },
+    {
+        name: 'preview',
+        path: '/preview',
+        component: () => import('../views/preview/index.vue')
+    },
+    {
+        name: 'edit-load',
+        path: '/edit-load',
+        component: () => import('../views/demo/edit-load.vue')
+    },
+    {
+        name: 'set-node-attr',
+        path: '/set-node-attr',
+        component: () => import('../views/demo/set-node-attr.vue')
+    },
+    {
+        name: 'event-callback',
+        path: '/event-callback',
+        component: () => import('../views/demo/event-callback.vue')
+    },
+    {
+        name: 'change-attr',
+        path: '/change-attr',
+        component: () => import('../views/demo/change-attr.vue')
+    }
+]
+const router = createRouter({
+    history: createWebHashHistory(), // hash模式：createWebHashHistory，history模式：createWebHistory
+    routes: constantRoutes
+})
+
+export default router
diff --git a/src/stores/menuList/index.ts b/src/stores/menuList/index.ts
new file mode 100644
index 0000000..e2645c4
--- /dev/null
+++ b/src/stores/menuList/index.ts
@@ -0,0 +1,86 @@
+import { defineStore } from 'pinia'
+import type { DataStoreState } from './types'
+// 图例
+export const useDataStore = defineStore('data-store', {
+    state: (): DataStoreState => {
+        return {
+            dataTree: [],
+            pid: '',
+            id: '',
+            name: '',
+            identifying: '0',
+            mqttID: '',
+            preview: '',
+            wxqr: '',
+            loading: true,
+            display: false, //无锡项目进去是true，其他项目是false  控制预览的时候返回按钮的展示
+            graphicDisplay: 'zl' //无锡项目进去是true，其他项目是false  控制点击设计的时候左侧列表数据绑定图元的展示
+        }
+    },
+    actions: {
+        set(key: keyof DataStoreState, val: any) {
+            ;(this as any)[key] = val
+        },
+        setmqttID(val: string) {
+            this.mqttID = val
+        },
+        //
+        interface(val: any) {
+            this.dataTree = val
+        },
+        // 追加
+        append(val: string) {
+            this.dataTree.push({
+                pid: this.pid,
+                kId: Math.random(),
+                name: val,
+                path: JSON.stringify({
+                    canvasCfg: {
+                        width: 1920,
+                        height: 1080,
+                        scale: 1,
+                        color: '',
+                        img: '',
+                        guide: true,
+                        adsorp: true,
+                        adsorp_diff: 5,
+                        transform_origin: {
+                            x: 0,
+                            y: 0
+                        },
+                        drag_offset: {
+                            x: 0,
+                            y: 0
+                        }
+                    },
+                    gridCfg: {
+                        enabled: true,
+                        align: true,
+                        size: 10
+                    },
+                    json: []
+                })
+            })
+            // console.log(this.dataTree, 123)
+        },
+        // 修改
+        modify(kId: number, val: string) {
+            this.dataTree.forEach((item: any) => {
+                if (item.kId == kId) {
+                    item.name = val
+                }
+            })
+        },
+        // 放置kid
+        placeKid(id: String) {
+            this.identifying = id
+        },
+        setUpPath(data: String) {
+            this.dataTree.forEach((item: any) => {
+                if (item.kId == this.identifying) {
+                    item.path = data
+                }
+            })
+        }
+    }
+})
diff --git a/src/stores/menuList/types.ts b/src/stores/menuList/types.ts
new file mode 100644
index 0000000..d96f928
--- /dev/null
+++ b/src/stores/menuList/types.ts
@@ -0,0 +1,14 @@
+export interface DataStoreState {
+    dataTree: any[]
+    pid?: String
+    id?: String
+    name?: String
+    createLine?: boolean
+    identifying?: String
+    mqttID?: String
+    preview?: String
+    wxqr?: String
+    loading?: boolean
+    display?: Boolean //是否展示返回按钮
+    graphicDisplay?: string //是否展示数据绑定图元
+}
diff --git a/src/utils/loadSvg.ts b/src/utils/loadSvg.ts
new file mode 100644
index 0000000..77f068b
--- /dev/null
+++ b/src/utils/loadSvg.ts
@@ -0,0 +1,340 @@
+import { leftAsideStore } from '@/export'
+import demo from '/svgs/demo.svg?raw'
+import { find, download, queryPage } from '@/api/index'
+import { useDataStore } from '@/stores/menuList'
+// 定义类型接口
+interface ElementItem {
+    id: string
+    elementName: string
+    elementSonType: string
+    path: string
+}
+
+interface SvgConfig {
+    id: string
+    title: string
+    type: 'svg'
+    thumbnail: string
+    svg: string
+    props: {
+        fill: {
+            type: 'color'
+            val: string
+            title: string
+        }
+    }
+}
+// 处理单个SVG元素的函数
+const processSvgItem = async (item: ElementItem): Promise<SvgConfig> => {
+    try {
+        const svgContent = await download({ filePath: item.path })
+
+        // 替换填充色用于缩略图
+        const filledSvg = svgContent.replace(/(\sfill=(["']))[^"']*(\2)/g, '$1#000000$3')
+        // 移除原始填充色
+        const cleanSvg = svgContent.replace(/\sfill=(["'])[^"']*\1/g, '')
+
+        return {
+            id: item.id,
+            title: item.elementName,
+            type: 'svg',
+            thumbnail: `data:image/svg+xml;utf8,${encodeURIComponent(filledSvg)}`,
+            svg: cleanSvg,
+            props: {
+                fill: {
+                    type: 'color',
+                    val: '#FF0000',
+                    title: '填充色'
+                }
+            }
+        }
+    } catch (error) {
+        console.error(`处理SVG元素${item.id}失败:`, error)
+        throw error // 允许上层处理错误
+    }
+}
+const loadSvg = async () => {
+    // 设置mqtt地址
+    const response = await fetch('/')
+    const MqttUrl: any = response.headers.get('X-MqttUrl-Url')
+    localStorage.setItem('MqttUrl', MqttUrl)
+
+    // 获取传参
+    const useData = useDataStore()
+    const params = new URLSearchParams(window.location.search)
+    useData.set('pid', params.get('id'))
+    useData.set('name', params.get('name'))
+    useData.set('preview', params.get('preview'))
+    useData.set('display', params.get('display'))
+    useData.set('graphicDisplay', params.get('graphicDisplay'))
+
+    // 左侧树查询
+    if (params.get('id')) {
+        queryPage({ pageNum: 1, pageSize: 100000, pid: params.get('id') }).then(res => {
+            const data = res.data
+            if (data && data.records) {
+                if (data.records.length > 0 && data.records[0].id) {
+                    // 将当前选中的行数据存储到本地存储
+                    localStorage.setItem('selectedId', data.records[0].id)
+                }
+                useData.interface(data.records) // 使用 store 提供的方法更新 dataTree
+            }
+        })
+    }
+
+    // // 添加页面svg
+    // await find().then(async res => {
+    //     let result: any = {}
+    //     res.data.forEach((item: any) => {
+    //         const type = item.elementSonType
+
+    //         // 如果该类型还没有在结果中，初始化一个空数组
+    //         if (!result[type]) {
+    //             result[type] = []
+    //         }
+
+    //         // 将当前项添加到对应类型的数组中
+    //         result[type].push(item)
+    //     })
+    //     for (const key in result) {
+    //         // 创建一个存放所有Promise的数组
+    //         const promises = result[key].map((item: any) => {
+    //             return download({ filePath: item.path }).then((Svg: any) => {
+    //                 return {
+    //                     id: item.id,
+    //                     title: item.elementName,
+    //                     type: 'svg',
+    //                     thumbnail:
+    //                         'data:image/svg+xml;utf8,' +
+    //                         encodeURIComponent(Svg.replace(/(\sfill=(["']))[^"']*(\2)/g, '$1#FF0000$3')),
+    //                     svg: Svg.replace(/\sfill=(["'])[^"']*\1/g, ''),
+    //                     props: {
+    //                         fill: {
+    //                             type: 'color',
+    //                             val: '#FF0000',
+    //                             title: '填充色'
+    //                         }
+    //                     }
+    //                 }
+    //             })
+    //         })
+
+    //         // 等待所有下载操作完成
+    //         const svgList = await Promise.all(promises)
+
+    //         // 所有异步操作完成后再执行注册
+    //         leftAsideStore.registerConfig(key, svgList)
+    //     }
+    // })
+    // 主逻辑
+    try {
+        const res = await find()
+        const groupedElements: Record<string, ElementItem[]> = {}
+
+        // 按类型分组元素
+        res.data.forEach((item: ElementItem) => {
+            const { elementSonType: type } = item
+            if (!groupedElements[type]) {
+                groupedElements[type] = []
+            }
+            groupedElements[type].push(item)
+        })
+
+        // 处理每个类型的元素并注册
+        for (const [type, items] of Object.entries(groupedElements)) {
+            const svgConfigs = await Promise.all(items.map(item => processSvgItem(item)))
+            leftAsideStore.registerConfig(type, svgConfigs)
+        }
+    } catch (error) {
+        console.error('加载和处理SVG元素时发生错误:', error)
+        // 可以在这里添加错误恢复逻辑或用户提示
+    }
+    await useData.set('loading', false)
+
+    // const electrical_modules_files = import.meta.glob('@/assets/svgs/electrical/face/**.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: '#FF0000',
+    //                 title: '边框色'
+    //             }
+    //         }
+    //     })
+    // }
+    // leftAsideStore.registerConfig('电力系统基础图元1', 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: '食堂'
+    //                     }
+    //                 ]
+    //             }
+    //         }
+    //     }
+    // ])
+}
+export default loadSvg
diff --git a/src/utils/mqtt.ts b/src/utils/mqtt.ts
new file mode 100644
index 0000000..7d89e32
--- /dev/null
+++ b/src/utils/mqtt.ts
@@ -0,0 +1,247 @@
+import type { MqttClient, OnMessageCallback, IClientOptions, IClientSubscribeOptions } from 'mqtt'
+import mqtt from 'mqtt'
+
+interface MQTTOptions {
+    protocolId?: string
+    qos?: 0 | 1 | 2
+    clean?: boolean
+    connectTimeout?: number
+    clientId?: string
+    username?: string
+    password?: string
+    reconnectPeriod?: number // 重连间隔(ms)
+    maxReconnectTimes?: number // 最大重连次数
+}
+
+class MQTT {
+    private topic: string
+    private client: MqttClient | null = null
+    private isConnected: boolean = false
+    private reconnectCount: number = 0
+    private maxReconnectTimes: number
+    private reconnectPeriod: number
+    private isManuallyDisconnected: boolean = false
+    private defaultOptions: MQTTOptions = {
+        protocolId: 'MQTT',
+        qos: 1,
+        clean: true,
+        connectTimeout: 30 * 1000,
+        clientId: `mqttjs_${Math.random().toString(16).substr(2, 8)}`,
+        username: 't_user',
+        password: 'njcnpqs',
+        reconnectPeriod: 1000, // 默认1秒重试一次
+        maxReconnectTimes: 3 // 默认最大重连5次
+    }
+
+    constructor(topic: string, options: MQTTOptions = {}) {
+        this.topic = topic
+        this.maxReconnectTimes = options.maxReconnectTimes || this.defaultOptions.maxReconnectTimes!
+        this.reconnectPeriod = options.reconnectPeriod || this.defaultOptions.reconnectPeriod!
+
+        // 合并选项
+        this.defaultOptions = { ...this.defaultOptions, ...options }
+    }
+
+    /**
+     * 初始化 MQTT 客户端
+     * @returns Promise<void>
+     */
+    async init(): Promise<void> {
+        if (this.client) {
+            throw new Error('MQTT 客户端已初始化')
+        }
+
+        try {
+            // const mqttUrl = 'ws://192.168.1.103:8083/mqtt'
+            const mqttUrl =
+                localStorage.getItem('MqttUrl') == 'null'
+                    ? 'ws://192.168.1.24:8085/mqtt'
+                    : localStorage.getItem('MqttUrl')
+            console.log('🚀 ~ MQTT ~ init ~ mqttUrl:', mqttUrl)
+            this.client = mqtt.connect(mqttUrl, this.defaultOptions as IClientOptions)
+            this.setupEventListeners()
+
+            // 等待连接成功或超时
+            return new Promise((resolve, reject) => {
+                const timeout = setTimeout(() => {
+                    if (!this.isConnected) {
+                        reject(new Error('MQTT 连接超时'))
+                    }
+                }, this.defaultOptions.connectTimeout)
+
+                this.client?.on('connect', () => {
+                    clearTimeout(timeout)
+                    this.isConnected = true
+                    this.reconnectCount = 0 // 连接成功重置重连计数
+                    resolve()
+                })
+
+                this.client?.on('error', error => {
+                    clearTimeout(timeout)
+                    console.error('MQTT 连接错误:', error)
+                    reject(error)
+                })
+            })
+        } catch (error) {
+            console.error('初始化 MQTT 失败:', error)
+            throw error
+        }
+    }
+
+    /**
+     * 设置事件监听器
+     */
+    private setupEventListeners(): void {
+        if (!this.client) return
+
+        this.client.on('close', () => {
+            console.log('MQTT 连接已关闭')
+            this.isConnected = false
+        })
+
+        this.client.on('offline', () => {
+            console.log('MQTT 客户端离线')
+            this.isConnected = false
+        })
+
+        this.client.on('reconnect', () => {
+            console.log(`MQTT 正在尝试重连 (${this.reconnectCount + 1}/${this.maxReconnectTimes})...`)
+
+            // 检查是否超过最大重连次数
+            if (this.reconnectCount >= this.maxReconnectTimes) {
+                console.log('已达到最大重连次数，停止重连')
+                this.client?.end(true)
+                this.client = null
+                return
+            }
+
+            this.reconnectCount++
+        })
+    }
+
+    /**
+     * 订阅主题
+     * @param subscribeOptions 可选的订阅选项
+     * @returns Promise<void>
+     */
+    async subscribe(subscribe: string, subscribeOptions: IClientSubscribeOptions = { qos: 1 }): Promise<void> {
+        if (!this.client || !this.isConnected) {
+            throw new Error('MQTT 客户端未连接')
+        }
+
+        return new Promise((resolve, reject) => {
+            this.client?.subscribe(subscribe, subscribeOptions, error => {
+                if (error) {
+                    console.error('订阅失败:', error)
+                    reject(error)
+                } else {
+                    console.log('订阅成功')
+                    resolve()
+                }
+            })
+        })
+    }
+
+    /**
+     * 取消订阅
+     * @returns Promise<void>
+     */
+    async unsubscribe(subscribe: string): Promise<void> {
+        if (!this.client || !this.isConnected) {
+            throw new Error('MQTT 客户端未连接')
+        }
+
+        return new Promise((resolve, reject) => {
+            this.client?.unsubscribe(subscribe, error => {
+                if (error) {
+                    console.error('取消订阅失败:', error)
+                    reject(error)
+                } else {
+                    console.log('取消订阅成功')
+                    resolve()
+                }
+            })
+        })
+    }
+
+    /**
+     * 设置消息回调
+     * @param callback 消息回调函数
+     */
+    onMessage(callback: OnMessageCallback): void {
+        if (!this.client) {
+            throw new Error('MQTT 客户端未初始化')
+        }
+        this.client.on('message', callback)
+    }
+
+    /**
+     * 发布消息
+     * topic: string, 发送地址
+     * @param message 要发布的消息
+     * @param options 发布选项
+     * @returns Promise<void>
+     */
+    async publish(
+        topic: string,
+        message: any,
+        options: { qos?: 0 | 1 | 2; retain?: boolean } = { qos: 1 }
+    ): Promise<void> {
+        if (!this.client || !this.isConnected) {
+            throw new Error('MQTT 客户端未连接')
+        }
+
+        return new Promise((resolve, reject) => {
+            this.client?.publish(topic, message, options, error => {
+                if (error) {
+                    console.error('消息发布失败:', error)
+                    reject(error)
+                } else {
+                    console.log('消息发布成功')
+                    resolve()
+                }
+            })
+        })
+    }
+
+    /**
+     * 断开连接
+     * @param force 是否强制断开
+     */
+    disconnect(force: boolean = false): void {
+        this.isManuallyDisconnected = true
+
+        if (this.client) {
+            this.client.end(force, () => {
+                console.log('MQTT 连接已断开')
+                this.isConnected = false
+                this.client = null
+            })
+        }
+    }
+
+    /**
+     * 检查连接状态
+     * @returns boolean
+     */
+    isConnectedToBroker(): boolean {
+        return this.isConnected
+    }
+
+    /**
+     * 获取当前重连次数
+     * @returns number
+     */
+    getReconnectCount(): number {
+        return this.reconnectCount
+    }
+
+    /**
+     * 重置重连计数器
+     */
+    resetReconnectCount(): void {
+        this.reconnectCount = 0
+    }
+}
+
+export default MQTT
diff --git a/src/utils/request.ts b/src/utils/request.ts
new file mode 100644
index 0000000..997bd4d
--- /dev/null
+++ b/src/utils/request.ts
@@ -0,0 +1,63 @@
+import axios from 'axios'
+import type { AxiosInstance, AxiosRequestConfig } from 'axios'
+
+class HttpRequest {
+    private readonly baseUrl: string
+    constructor() {
+        this.baseUrl = '/api'
+    }
+    getInsideConfig() {
+        const config = {
+            baseURL: this.baseUrl, // 所有的请求地址前缀部分(没有后端请求不用写)
+            timeout: 80000 // 请求超时时间(毫秒)
+        }
+        return config
+    }
+
+    // 请求拦截
+    interceptors(instance: AxiosInstance, url: string | number | undefined) {
+        instance.interceptors.request.use(
+            config => {
+                // 添加全局的loading..
+                // config.headers['Authorization'] =
+                //     'bearer ' + JSON.parse(window.localStorage.getItem('adminInfo') || '{}').access_token; // 请求头带上token token要在登录的时候保存在localStorage中
+                // console.log(
+                //   "🚀 ~ requestHandler ~ config.headers['Authorization']:",
+                //   JSON.parse(window.localStorage.getItem('adminInfo') || '{}'),
+                //   config.headers
+                // );
+
+                config.headers['Authorization'] =
+                    'bearer eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySW5kZXgiOiJmYTM3YjkzY2M5MGQ0YzE3ODRjYThmNmRlYmRkZWUxYSIsInVzZXJfbmFtZSI6InJvb3QiLCJzY29wZSI6WyJhbGwiXSwibmlja25hbWUiOiLotoXnuqfnrqHnkIblkZgiLCJ1c2VyVHlwZSI6MCwiZGVwdEluZGV4IjoiNTY5OWU1OTE2YTE4YTYzODFlMWFjOTJkYTViZDI2MjgiLCJleHAiOjE4MjE4MTc2MTksImF1dGhvcml0aWVzIjpbInJvb3QiXSwianRpIjoiMmJiM2Q5ZTYtNmY3Yy00Yjg1LThiM2EtZDI2ODdmMTUzMDg5IiwiY2xpZW50X2lkIjoibmpjbnRlc3QiLCJoZWFkU2N1bHB0dXJlIjoicmVzb3VyY2VEYXRhLzMxNzRDRUFFOUQ0MjRGMjJCQjkxQTU4OURENjdCMDUxLmpwZyJ9.WjeYl1lvvJdDE1FUGIhS99rE5qKaBXOypWxmxK0svWweGqEbu1XCLjKm_YkiTwjZJ_oIcn5JOO9rvHFkkea76BUsYo5wlzuBBiy7sKqM1fFzOFQq6hdFevNTJAbYH9FiBxYxI-e9DZ5mvLGE6umOjUfn_FAsku2w6Uj5DtvpOKBWYzLEPTEifOqNI9he4zJAmVZniUUMf26SDoEdfu0TyrIS1j_qKaEb-cqR1XDhivdthEBK5m9vxJyXFZ5kofNxwQQkit_oiqJRkCZIt9TWAjCh-frzMHCvA30hkAr-VCD2JfCmmEr3hW_lmwfINaPtFVbHCdCKqdrl6VmF1HObaQ'
+                // 请求头携带token
+                return config
+            },
+            (error: any) => {
+                return Promise.reject(error)
+            }
+        )
+        //响应拦截
+        instance.interceptors.response.use(
+            res => {
+                //返回数据
+                const { data } = res
+                // console.log('返回数据处理', res)
+                return data
+            },
+            (error: any) => {
+                console.log('error==>', error)
+                return Promise.reject(error)
+            }
+        )
+    }
+
+    request(options: AxiosRequestConfig) {
+        const instance = axios.create()
+        options = Object.assign(this.getInsideConfig(), options)
+        this.interceptors(instance, options.url)
+        return instance(options)
+    }
+}
+
+const http = new HttpRequest()
+export default http
diff --git a/src/views/demo/change-attr.vue b/src/views/demo/change-attr.vue
new file mode 100644
index 0000000..a90c21d
--- /dev/null
+++ b/src/views/demo/change-attr.vue
@@ -0,0 +1,218 @@
+<template>
+    <div class="w-1/1 h-100vh">
+        <mt-edit ref="MtEditRef" @on-return-click="onReturnClick" @on-preview-click="onPreviewClick"></mt-edit>
+    </div>
+</template>
+<script setup lang="ts">
+import type { IExportJson } from '@/components/mt-edit/components/types'
+import { MtEdit } from '@/export'
+import { onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+const router = useRouter()
+const MtEditRef = ref<InstanceType<typeof MtEdit>>()
+const onPreviewClick = (exportJson: IExportJson) => {
+    sessionStorage.setItem('exportJson', JSON.stringify(exportJson))
+    const routeUrl = router.resolve({
+        name: 'preview'
+    })
+    window.open(routeUrl.href, '_blank')
+}
+
+const onReturnClick = () => {
+    router.go(-1)
+}
+onMounted(() => {
+    MtEditRef.value?.setImportJson({
+        canvasCfg: {
+            width: 1920,
+            height: 1080,
+            scale: 1,
+            color: '#000000',
+            img: '',
+            guide: false,
+            adsorp: false,
+            adsorp_diff: 3,
+            transform_origin: {
+                x: 0,
+                y: 0
+            },
+            drag_offset: {
+                x: 0,
+                y: 0
+            }
+        },
+        gridCfg: {
+            enabled: false,
+            align: true,
+            size: 10
+        },
+        json: [
+            {
+                id: 'sys-button-vue-mDvwKZN8o8',
+                title: '按钮',
+                type: 'vue',
+                binfo: {
+                    left: 551,
+                    top: 301,
+                    width: 230,
+                    height: 50,
+                    angle: 0
+                },
+                resize: true,
+                rotate: true,
+                lock: false,
+                active: false,
+                hide: false,
+                props: {
+                    text: '连续点我更改发电机颜色',
+                    type: 'primary',
+                    round: false
+                },
+                tag: 'sys-button-vue',
+                common_animations: {
+                    val: '',
+                    delay: 'delay-0s',
+                    speed: 'slow',
+                    repeat: 'infinite'
+                },
+                events: [
+                    {
+                        id: 'B3WIAOMhsX',
+                        type: 'click',
+                        action: 'changeAttr',
+                        change_attr: [
+                            {
+                                id: 'urxZScYkBI',
+                                target_id: '交流发电机-n3chkyZXmm',
+                                target_attr: 'props.fill.val',
+                                target_value: '#FF0000'
+                            }
+                        ],
+                        custom_code: '',
+                        trigger_rule: {
+                            trigger_id: '交流发电机-n3chkyZXmm',
+                            trigger_attr: 'props.fill.val',
+                            operator: '=',
+                            value: '#0000FF'
+                        }
+                    },
+                    {
+                        id: '8sTLbGQJlg',
+                        type: 'click',
+                        action: 'changeAttr',
+                        change_attr: [
+                            {
+                                id: 'mSEryeWrAq',
+                                target_id: '交流发电机-n3chkyZXmm',
+                                target_attr: 'props.fill.val',
+                                target_value: '#0000FF'
+                            }
+                        ],
+                        custom_code: '',
+                        trigger_rule: {
+                            trigger_id: '交流发电机-n3chkyZXmm',
+                            trigger_attr: 'props.fill.val',
+                            operator: '=',
+                            value: '#FF0000'
+                        }
+                    }
+                ]
+            },
+            {
+                id: '交流发电机-n3chkyZXmm',
+                title: '交流发电机',
+                type: 'svg',
+                binfo: {
+                    left: 320,
+                    top: 140,
+                    width: 50,
+                    height: 50,
+                    angle: 0
+                },
+                resize: true,
+                rotate: true,
+                lock: false,
+                active: false,
+                hide: false,
+                props: {
+                    fill: '#FF0000'
+                },
+                tag: '交流发电机',
+                common_animations: {
+                    val: '',
+                    delay: 'delay-0s',
+                    speed: 'slow',
+                    repeat: 'infinite'
+                },
+                events: []
+            },
+            {
+                id: 'text-vue-11VSQoJxa6',
+                title: '文字',
+                type: 'vue',
+                binfo: {
+                    left: 560,
+                    top: 60,
+                    width: 600,
+                    height: 50,
+                    angle: 0
+                },
+                resize: true,
+                rotate: true,
+                lock: false,
+                active: false,
+                hide: false,
+                props: {
+                    text: '请先将点击右上角预览，再点击按钮查看效果',
+                    fontFamily: '黑体',
+                    fontSize: 18,
+                    fill: '#FFF700',
+                    vertical: false
+                },
+                tag: 'text-vue',
+                common_animations: {
+                    val: '',
+                    delay: 'delay-0s',
+                    speed: 'slow',
+                    repeat: 'infinite'
+                },
+                events: []
+            },
+            {
+                id: 'text-vue-eoZAkwVSHu',
+                title: '文字',
+                type: 'vue',
+                binfo: {
+                    left: 964,
+                    top: 194,
+                    width: 341,
+                    height: 50,
+                    angle: 0
+                },
+                resize: true,
+                rotate: true,
+                lock: false,
+                active: false,
+                hide: false,
+                props: {
+                    text: '编辑模式下选中按钮可查看事件如何配置',
+                    fontFamily: '黑体',
+                    fontSize: 18,
+                    fill: '#FFF700',
+                    vertical: false
+                },
+                tag: 'text-vue',
+                common_animations: {
+                    val: '',
+                    delay: 'delay-0s',
+                    speed: 'slow',
+                    repeat: 'infinite'
+                },
+                events: []
+            }
+        ]
+    })
+})
+</script>
+
+<style scoped></style>
diff --git a/src/views/demo/edit-load.vue b/src/views/demo/edit-load.vue
new file mode 100644
index 0000000..982b3e0
--- /dev/null
+++ b/src/views/demo/edit-load.vue
@@ -0,0 +1,259 @@
+<template>
+    <div class="w-1/1 h-100vh">
+        <mt-edit ref="MtEditRef" @on-return-click="onReturnClick"></mt-edit>
+    </div>
+</template>
+<script setup lang="ts">
+import { MtEdit } from '@/export'
+import { onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+const router = useRouter()
+const MtEditRef = ref<InstanceType<typeof MtEdit>>()
+const onReturnClick = () => {
+    router.go(-1)
+}
+onMounted(() => {
+    const res = MtEditRef.value?.setImportJson({
+        canvasCfg: {
+            width: 1920,
+            height: 1080,
+            scale: 1,
+            color: '#000000',
+            img: '',
+            guide: true,
+            adsorp: true,
+            adsorp_diff: 3,
+            transform_origin: {
+                x: 0,
+                y: 0
+            },
+            drag_offset: {
+                x: -333,
+                y: -4
+            }
+        },
+        gridCfg: {
+            enabled: false,
+            align: true,
+            size: 10
+        },
+        json: [
+            {
+                id: 'text-vue-rfEqQD4y2G',
+                title: '文字',
+                type: 'vue',
+                binfo: {
+                    left: 738,
+                    top: 38,
+                    width: 383,
+                    height: 50,
+                    angle: 0
+                },
+                resize: true,
+                rotate: true,
+                lock: false,
+                active: false,
+                hide: false,
+                props: {
+                    text: '加载已有数据',
+                    fontFamily: '黑体',
+                    fontSize: 18,
+                    fill: '#FFF700',
+                    vertical: false
+                },
+                tag: 'text-vue',
+                common_animations: {
+                    val: '',
+                    delay: 'delay-0s',
+                    speed: 'slow',
+                    repeat: 'infinite'
+                },
+                events: []
+            },
+            {
+                id: 'sys-line-kgIM4cL60s',
+                title: '自由连线',
+                type: 'sys-line',
+                binfo: {
+                    left: 501,
+                    top: 177,
+                    width: 711,
+                    height: 0,
+                    angle: 0
+                },
+                resize: false,
+                rotate: false,
+                lock: false,
+                active: false,
+                hide: false,
+                props: {
+                    stroke: '#ff0000',
+                    'stroke-width': 2,
+                    'marker-start': false,
+                    'marker-end': true,
+                    point_position: [
+                        {
+                            x: 0,
+                            y: 0
+                        },
+                        {
+                            x: 711,
+                            y: 0
+                        }
+                    ],
+                    ani_type: 'none',
+                    ani_dur: 20,
+                    ani_color: '#0a7ae2',
+                    ani_reverse: false,
+                    ani_play: true,
+                    bind_anchors: {
+                        start: null,
+                        end: null
+                    }
+                },
+                tag: 'sys-line',
+                common_animations: {
+                    val: '',
+                    delay: 'delay-0s',
+                    speed: 'slow',
+                    repeat: 'infinite'
+                },
+                events: []
+            },
+            {
+                id: 'sys-line-sfHoJjRCDO',
+                title: '自由连线',
+                type: 'sys-line',
+                binfo: {
+                    left: 501,
+                    top: 233,
+                    width: 735,
+                    height: 0,
+                    angle: 0
+                },
+                resize: false,
+                rotate: false,
+                lock: false,
+                active: false,
+                hide: false,
+                props: {
+                    stroke: '#ff0000',
+                    'stroke-width': 2,
+                    'marker-start': false,
+                    'marker-end': false,
+                    point_position: [
+                        {
+                            x: 0,
+                            y: 0
+                        },
+                        {
+                            x: 735,
+                            y: 0
+                        }
+                    ],
+                    ani_type: 'electricity',
+                    ani_dur: 20,
+                    ani_color: '#FF0000',
+                    ani_reverse: false,
+                    ani_play: true,
+                    bind_anchors: {
+                        start: null,
+                        end: null
+                    }
+                },
+                tag: 'sys-line',
+                common_animations: {
+                    val: '',
+                    delay: 'delay-0s',
+                    speed: 'slow',
+                    repeat: 'infinite'
+                },
+                events: []
+            },
+            {
+                id: 'sys-line-Rr3SVNwuSU',
+                title: '自由连线',
+                type: 'sys-line',
+                binfo: {
+                    left: 498,
+                    top: 313,
+                    width: 742,
+                    height: 0,
+                    angle: 0
+                },
+                resize: false,
+                rotate: false,
+                lock: false,
+                active: false,
+                hide: false,
+                props: {
+                    stroke: '#FFFFFF',
+                    'stroke-width': 10,
+                    'marker-start': false,
+                    'marker-end': false,
+                    point_position: [
+                        {
+                            x: 0,
+                            y: 0
+                        },
+                        {
+                            x: 742,
+                            y: 0
+                        }
+                    ],
+                    ani_type: 'waterdrop',
+                    ani_dur: 20,
+                    ani_color: '#0a7ae2',
+                    ani_reverse: true,
+                    ani_play: true,
+                    bind_anchors: {
+                        start: null,
+                        end: null
+                    }
+                },
+                tag: 'sys-line',
+                common_animations: {
+                    val: '',
+                    delay: 'delay-0s',
+                    speed: 'slow',
+                    repeat: 'infinite'
+                },
+                events: []
+            },
+            {
+                id: 'demo-6bmwf6LJ0M',
+                title: '演示svg文件',
+                type: 'svg',
+                binfo: {
+                    left: 791,
+                    top: 401,
+                    width: 50,
+                    height: 50,
+                    angle: 0
+                },
+                resize: true,
+                rotate: true,
+                lock: false,
+                active: false,
+                hide: false,
+                props: {
+                    fill: '#FF0000'
+                },
+                tag: 'demo',
+                common_animations: {
+                    val: 'rotate360',
+                    delay: 'delay-0s',
+                    speed: 'slow',
+                    repeat: 'infinite'
+                },
+                events: []
+            }
+        ]
+    })
+    if (res) {
+        console.log('加载成功')
+    }
+})
+</script>
+
+<style scoped></style>
diff --git a/src/views/demo/event-callback.vue b/src/views/demo/event-callback.vue
new file mode 100644
index 0000000..9c0caad
--- /dev/null
+++ b/src/views/demo/event-callback.vue
@@ -0,0 +1,126 @@
+<template>
+    <div class="w-1/1 h-100vh">
+        <mt-edit ref="MtEditRef" @on-return-click="onReturnClick" @on-preview-click="onPreviewClick"></mt-edit>
+    </div>
+</template>
+<script setup lang="ts">
+import type { IExportJson } from '@/components/mt-edit/components/types'
+import { MtEdit } from '@/export'
+import { onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+const router = useRouter()
+const MtEditRef = ref<InstanceType<typeof MtEdit>>()
+const onPreviewClick = (exportJson: IExportJson) => {
+    sessionStorage.setItem('exportJson', JSON.stringify(exportJson))
+    const routeUrl = router.resolve({
+        name: 'preview'
+    })
+    window.open(routeUrl.href, '_blank')
+}
+
+const onReturnClick = () => {
+    router.go(-1)
+}
+onMounted(() => {
+    MtEditRef.value?.setImportJson({
+        canvasCfg: {
+            width: 1920,
+            height: 1080,
+            scale: 1,
+            color: '#000000',
+            img: '',
+            guide: true,
+            adsorp: true,
+            adsorp_diff: 3,
+            transform_origin: {
+                x: 0,
+                y: 0
+            },
+            drag_offset: {
+                x: 0,
+                y: 0
+            }
+        },
+        gridCfg: {
+            enabled: false,
+            align: true,
+            size: 10
+        },
+        json: [
+            {
+                id: 'demo-nPL9aqhnSl',
+                title: '演示svg文件',
+                type: 'svg',
+                binfo: {
+                    left: 650,
+                    top: 160,
+                    width: 50,
+                    height: 50,
+                    angle: 0
+                },
+                resize: true,
+                rotate: true,
+                lock: false,
+                active: false,
+                hide: false,
+                props: {
+                    fill: '#FF0000'
+                },
+                tag: 'demo',
+                common_animations: {
+                    val: '',
+                    delay: 'delay-0s',
+                    speed: 'slow',
+                    repeat: 'infinite'
+                },
+                events: [
+                    {
+                        id: 'pJwJOIUIat',
+                        type: 'click',
+                        action: 'customCode',
+                        change_attr: [],
+                        custom_code: "$mtEventCallBack('test-dialog',$item_info.id)\nconsole.log(111)",
+                        trigger_rule: {
+                            value: null
+                        }
+                    }
+                ]
+            },
+            {
+                id: 'text-vue-T19K6wCQZ2',
+                title: '文字',
+                type: 'vue',
+                binfo: {
+                    left: 590,
+                    top: 80,
+                    width: 250,
+                    height: 50,
+                    angle: 0
+                },
+                resize: true,
+                rotate: true,
+                lock: false,
+                active: false,
+                hide: false,
+                props: {
+                    text: '请点击预览查看事件触发',
+                    fontFamily: '黑体',
+                    fontSize: 18,
+                    fill: '#FFF700',
+                    vertical: false
+                },
+                tag: 'text-vue',
+                common_animations: {
+                    val: '',
+                    delay: 'delay-0s',
+                    speed: 'slow',
+                    repeat: 'infinite'
+                },
+                events: []
+            }
+        ]
+    })
+})
+</script>
+
+<style scoped></style>
diff --git a/src/views/demo/index.vue b/src/views/demo/index.vue
new file mode 100644
index 0000000..f7d683c
--- /dev/null
+++ b/src/views/demo/index.vue
@@ -0,0 +1,74 @@
+<template>
+    <div>
+        <el-divider>插件能力展示</el-divider>
+        <div class="flex flex-wrap mx-20px justify-center items-center">
+            <el-card
+                v-for="item in ability"
+                :key="item.title"
+                class="flex justify-center items-center m-10px cursor-pointer"
+                @click="item.onClick"
+            >
+                <img :src="item.img" class="w-300px h-300px" />
+                <div>{{ item.title }}</div>
+            </el-card>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ElDivider, ElCard } from 'element-plus'
+import { useRouter } from 'vue-router'
+const router = useRouter()
+const ability = [
+    {
+        title: '基础编辑页',
+        img: '/imgs/edit.png',
+        onClick: () => {
+            router.push({
+                name: 'edit',
+                params: {}
+            })
+        }
+    },
+    {
+        title: '加载已保存数据',
+        img: '/imgs/edit-load.png',
+        onClick: () => {
+            router.push({
+                name: 'edit-load',
+                params: {}
+            })
+        }
+    },
+    {
+        title: '外部修改图形属性',
+        img: '/imgs/set-node-attr.gif',
+        onClick: () => {
+            router.push({
+                name: 'set-node-attr',
+                params: {}
+            })
+        }
+    },
+    {
+        title: '回调外部项目函数',
+        img: '/imgs/event-callback.png',
+        onClick: () => {
+            router.push({
+                name: 'event-callback',
+                params: {}
+            })
+        }
+    },
+    {
+        title: '事件-属性更改',
+        img: '/imgs/change-attr.png',
+        onClick: () => {
+            router.push({
+                name: 'change-attr',
+                params: {}
+            })
+        }
+    }
+]
+</script>
diff --git a/src/views/demo/set-node-attr.vue b/src/views/demo/set-node-attr.vue
new file mode 100644
index 0000000..720c295
--- /dev/null
+++ b/src/views/demo/set-node-attr.vue
@@ -0,0 +1,79 @@
+<!-- eslint-disable vue/html-indent -->
+<template>
+    <div>
+        <el-button @click="changeRed">改成红色</el-button>
+        <el-button @click="changeGreen">改成绿色</el-button>
+        <mt-preview ref="svgPreviewRef" :export-json="export_json"></mt-preview>
+    </div>
+</template>
+<script setup lang="ts">
+import { MtPreview } from '@/export'
+import { ElButton } from 'element-plus'
+import { ref } from 'vue'
+const svgPreviewRef = ref<InstanceType<typeof MtPreview>>()
+const export_json = ref<any>({
+    canvasCfg: {
+        width: 1920,
+        height: 1080,
+        scale: 1,
+        color: '',
+        img: '',
+        guide: true,
+        adsorp: true,
+        adsorp_diff: 3,
+        transform_origin: {
+            x: 0,
+            y: 0
+        },
+        drag_offset: {
+            x: 0,
+            y: 0
+        }
+    },
+    gridCfg: {
+        enabled: true,
+        align: true,
+        size: 10
+    },
+    json: [
+        {
+            id: 'demo-4Y2Eq7UPBm',
+            title: '演示svg文件',
+            type: 'svg',
+            binfo: {
+                left: 510,
+                top: 200,
+                width: 50,
+                height: 50,
+                angle: 0
+            },
+            resize: true,
+            rotate: true,
+            lock: false,
+            active: false,
+            hide: false,
+            props: {
+                fill: '#FF0000'
+            },
+            tag: 'demo',
+            common_animations: {
+                val: '',
+                delay: 'delay-0s',
+                speed: 'slow',
+                repeat: 'infinite'
+            },
+            events: []
+        }
+    ]
+})
+const changeRed = () => {
+    svgPreviewRef.value?.setItemAttrByID('demo-4Y2Eq7UPBm', 'props.fill.val', '#FF0000').then(res => {
+        console.log(res)
+    })
+}
+const changeGreen = () => {
+    svgPreviewRef.value?.setItemAttrByID('demo-4Y2Eq7UPBm', 'props.fill.val', '#00FF00').then(res => {
+        console.log(res)
+    })
+}
+</script>
diff --git a/src/views/edit/index.vue b/src/views/edit/index.vue
new file mode 100644
index 0000000..a049c99
--- /dev/null
+++ b/src/views/edit/index.vue
@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import type { IExportJson } from '@/components/mt-edit/components/types'
+import { useGenThumbnail } from '@/components/mt-edit/composables/thumbnail'
+import { MtEdit } from '@/export'
+import { useRouter } from 'vue-router'
+import { addCanvas, audit } from '@/api/index'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { useDataStore } from '@/stores/menuList'
+
+const router = useRouter()
+const useData = useDataStore()
+const onPreviewClick = (exportJson: IExportJson) => {
+    sessionStorage.setItem('exportJson', JSON.stringify(exportJson))
+    const routeUrl = router.resolve({
+        name: 'preview'
+    })
+    window.open(routeUrl.href, '_blank')
+}
+const onSaveClick = (e: IExportJson) => {
+    console.log(e, '这是要保存的数据')
+}
+
+const onSaveAll = (data: any) => {
+    let params = { fileContent: '', id: useData.pid, name: useData.name }
+    addCanvas(data).then((res: any) => {
+        if (res.code == 'A0000') {
+            ElMessage({
+                message: '保存成功',
+                type: 'success'
+            })
+            // 获取截图参数
+            useGenThumbnail().then(item => {
+                params.fileContent = item ?? ''
+                audit(params).then(() => {
+                    if (res.code == 'A0000') {
+                        //
+                    }
+                })
+            })
+            ElMessageBox.confirm('是否关闭页面?', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            })
+                .then(() => {
+                    try {
+                        // 尝试关闭窗口
+                        window.close()
+                        // 检查是否关闭成功（某些情况下窗口可能未关闭）
+                        setTimeout(() => {
+                            if (!window.closed) {
+                                // 如果未成功关闭，使用替代方案
+                                window.location.href = 'about:blank'
+                            }
+                        }, 1000)
+                    } catch (error) {
+                        // 出现异常时使用替代方案
+                        window.location.href = 'about:blank'
+                    }
+                })
+                .catch(() => {})
+        }
+    })
+}
+
+const onReturnClick = () => {
+    router.go(-1)
+}
+const onThumbnailClick = () => {
+    useGenThumbnail()
+}
+</script>
+
+<template>
+    <div class="w-1/1 h-100vh" v-loading="useData.loading">
+        <mt-edit
+            :use-thumbnail="true"
+            @on-preview-click="onPreviewClick"
+            @on-return-click="onReturnClick"
+            @on-save-click="onSaveClick"
+            @on-thumbnail-click="onThumbnailClick"
+            @on-save-all="onSaveAll"
+        ></mt-edit>
+    </div>
+</template>
+
+<style scoped></style>
diff --git a/src/views/preview/index.vue b/src/views/preview/index.vue
new file mode 100644
index 0000000..7973ff0
--- /dev/null
+++ b/src/views/preview/index.vue
@@ -0,0 +1,19 @@
+<template>
+    <mt-preview ref="MtPreviewRef" @on-event-call-back="onEventCallBack"></mt-preview>
+</template>
+<script setup lang="ts">
+import { MtPreview } from '@/export'
+import { onMounted, ref } from 'vue'
+import { ElMessage } from 'element-plus'
+const MtPreviewRef = ref<InstanceType<typeof MtPreview>>()
+const onEventCallBack = (type: string, item_id: string) => {
+    console.log(type, item_id)
+
+    if (type == 'test-dialog') {
+        ElMessage.success(`获取到了id:${item_id}`)
+    }
+}
+onMounted(() => {
+    MtPreviewRef.value?.setImportJson(JSON.parse(sessionStorage.getItem('exportJson') as any))
+})
+</script>
diff --git a/tsconfig.app.json b/tsconfig.app.json
new file mode 100644
index 0000000..3e5b621
--- /dev/null
+++ b/tsconfig.app.json
@@ -0,0 +1,12 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "exclude": ["src/**/__tests__/*"],
+  "compilerOptions": {
+    "composite": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..100cf6a
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    },
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.vitest.json"
+    }
+  ]
+}
diff --git a/tsconfig.node.json b/tsconfig.node.json
new file mode 100644
index 0000000..85f6bc8
--- /dev/null
+++ b/tsconfig.node.json
@@ -0,0 +1,19 @@
+{
+  "extends": "@tsconfig/node18/tsconfig.json",
+  "include": [
+    "vite.config.*",
+    "vitest.config.*",
+    "cypress.config.*",
+    "nightwatch.conf.*",
+    "playwright.config.*"
+  ],
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "types": ["node"]
+  },
+  "paths":{
+    "@/*":["src/*"]
+  }
+}
diff --git a/tsconfig.vitest.json b/tsconfig.vitest.json
new file mode 100644
index 0000000..d080d61
--- /dev/null
+++ b/tsconfig.vitest.json
@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.app.json",
+  "exclude": [],
+  "compilerOptions": {
+    "composite": true,
+    "lib": [],
+    "types": ["node", "jsdom"]
+  }
+}
diff --git a/uno.config.ts b/uno.config.ts
new file mode 100644
index 0000000..ca292c5
--- /dev/null
+++ b/uno.config.ts
@@ -0,0 +1,24 @@
+// uno.config.ts
+import { defineConfig, presetAttributify, presetUno } from 'unocss';
+
+export default defineConfig({
+  theme: {
+    colors: {
+      // ...
+      myDarkBgColor: '#141414',
+      myMainDarkBgColor: '#1c1c1c'
+    }
+  },
+  presets: [
+    presetAttributify({
+      /* preset options */
+    }),
+    presetUno()
+  ],
+  shortcuts: {
+    'ct-border': 'border-t-1px border-t-solid border-t-gray-300',
+    'cr-border': 'border-r-1px border-r-solid border-r-gray-300 ',
+    'cl-border': 'border-l-1px border-l-solid border-l-gray-300',
+    'cb-border': 'border-b-1px border-b-solid border-b-gray-300'
+  }
+});
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 0000000..c1108b1
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,82 @@
+import { fileURLToPath, URL } from 'node:url'
+
+import { defineConfig, UserConfigExport } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { resolve } from 'path'
+import dts from 'vite-plugin-dts'
+import UnoCSS from 'unocss/vite'
+import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
+// https://vitejs.dev/config/
+export default defineConfig(({ mode }) => {
+    let config: UserConfigExport = {
+        plugins: [
+            vue(),
+            dts({
+                tsconfigPath: 'tsconfig.app.json'
+            }),
+            UnoCSS({
+                // 在低版本浏览器上开发时会报错 Unexpected reserved word
+                // 如果在开发环境需要兼容不支持顶级await的低版本浏览器例如Chrome(v87)，就将下面的配置打开
+                // hmrTopLevelAwait: false
+            }),
+            createSvgIconsPlugin({
+                // 指定需要缓存的图标文件夹
+                iconDirs: [resolve(process.cwd(), 'src/assets/icons')],
+                // 指定symbolId格式
+                symbolId: 'mt-edit-[name]',
+                // 禁用压缩 否则想要修改无状态组件的stroke或者fill会影响到预设样式 例如stroke-width
+                svgoOptions: false,
+                customDomId: '___mt__edit__icons__dom__'
+            })
+        ],
+        base: '/zutai/',
+        server: {
+            host: '0.0.0.0',
+            open: true,
+            proxy: {
+                '/api': {
+                    // target: 'http://10.95.53.49:10215', //海南服务器ip
+                    // target: 'http://10.118.135.128:10215', ///hsw
+                    target: 'http://192.168.1.126:10215', ///hsw
+                    // target: 'http://192.168.1.127:19001', ///hsw
+                    //  target: 'http://10.119.65.152:10215', //数据中心
+                    changeOrigin: true,
+                    rewrite: path => path.replace(/^\/api/, '') //路径重写，把'/api'替换为''
+                }
+            }
+        },
+        resolve: {
+            alias: {
+                '@': fileURLToPath(new URL('./src', import.meta.url))
+            },
+            dedupe: ['vue']
+        }
+    }
+    if (mode === 'lib' || mode === 'npm') {
+        config = {
+            ...config,
+            ...{
+                build: {
+                    lib: {
+                        entry: resolve(__dirname, 'src/export.ts'),
+                        name: 'maotu',
+                        fileName: (format: any) => `maotu.${format}.js`
+                    },
+                    rollupOptions: {
+                        // 确保外部化处理那些你不想打包进库的依赖
+                        external: ['vue', 'pinia'],
+                        output: {
+                            // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
+                            globals: {
+                                vue: 'Vue',
+                                pinia: 'Pinia'
+                            },
+                            inlineDynamicImports: true
+                        }
+                    }
+                }
+            }
+        }
+    }
+    return config
+})
diff --git a/vitest.config.ts b/vitest.config.ts
new file mode 100644
index 0000000..10067d5
--- /dev/null
+++ b/vitest.config.ts
@@ -0,0 +1,14 @@
+import { fileURLToPath } from 'node:url'
+import { mergeConfig, defineConfig, configDefaults } from 'vitest/config'
+import viteConfig from './vite.config'
+
+export default mergeConfig(
+  viteConfig,
+  defineConfig({
+    test: {
+      environment: 'jsdom',
+      exclude: [...configDefaults.exclude, 'e2e/*'],
+      root: fileURLToPath(new URL('./', import.meta.url))
+    }
+  })
+)