node节点操作

hookehuyr
Commit c454a2b2f81b57d9c6a4b84ddbc117e63e2522d1 c454a2b2 1 parent 7ae260cc
Showing 14 changed files with 530 additions and 6 deletions
package-lock.json
package.json
src/main.js
src/router/index.js
src/views/home.vue
src/views/node-model/customRect.js
src/views/node-model/data.js
src/views/node-model/index.vue
src/views/node-view/data.js
src/views/node-view/index.less
src/views/node-view/index.vue
src/views/node-view/userTask.js
src/views/temp.vue
yarn.lock
--- a/package-lock.json
View file @c454a2b
+++ b/package-lock.json
View file @c454a2b
--- a/package.json
View file @c454a2b
+++ b/package.json
View file @c454a2b
@@ -17,6 +17,7 @@
     "autoprefixer": "^10.4.21",
     "echarts": "^5.6.0",
     "element-plus": "^2.9.6",
+    "lodash-es": "^4.17.21",
     "postcss": "^8.5.3",
     "tailwindcss": "^4.0.12",
     "vue": "^3.5.13",
@@ -24,6 +25,7 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.2.1",
+    "less": "^4.2.2",
     "sass-embedded": "^1.85.1",
     "unplugin-auto-import": "^19.1.1",
     "vite": "^6.2.0",
--- a/src/main.js
View file @c454a2b
+++ b/src/main.js
View file @c454a2b
 /*
  * @Date: 2025-03-10 13:07:05
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-03-10 18:07:51
+ * @LastEditTime: 2025-03-11 17:23:23
  * @FilePath: /logic-flow2/src/main.js
  * @Description: 文件描述
  */
@@ -10,6 +10,7 @@ import './style.css'
 import App from './App.vue'
 import router from './router'
 import "@logicflow/core/lib/style/index.css";
+import '@logicflow/core/es/index.css'
 import '@logicflow/extension/lib/style/index.css'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
@@ -19,7 +20,7 @@ import { Menu, DndPanel, SelectionSelect, Control, InsertNodeInPolyline, Highlig
 LogicFlow.use(Menu) // 右键菜单
 LogicFlow.use(DndPanel) // 拖拽面板
 LogicFlow.use(SelectionSelect) // 选中元素
-LogicFlow.use(Control) // 控制面板
+// LogicFlow.use(Control) // 控制面板
 LogicFlow.use(InsertNodeInPolyline) // 边上插入节点
 LogicFlow.use(Highlight) // 高亮
--- a/src/router/index.js
View file @c454a2b
+++ b/src/router/index.js
View file @c454a2b
 /*
  * @Date: 2025-03-10 13:15:30
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-03-10 17:13:56
+ * @LastEditTime: 2025-03-11 17:45:38
  * @FilePath: /logic-flow2/src/router/index.js
  * @Description: 文件描述
  */
@@ -30,6 +30,21 @@ const router = createRouter({
       name: 'control',
       component: () => import('../views/control.vue')
     },
+    {
+      path: '/node-model',
+      name: 'node-model',
+      component: () => import('../views/node-model/index.vue')
+    },
+    {
+      path: '/node-view',
+      name: 'node-view',
+      component: () => import('../views/node-view/index.vue')
+    },
+    {
+      path: '/node-vue',
+      name: 'node-vue',
+      component: () => import('../views/node-vue/index.vue')
+    }
   ]
 })
--- a/src/views/home.vue
View file @c454a2b
+++ b/src/views/home.vue
View file @c454a2b
 <!--
  * @Date: 2025-03-10 14:37:31
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-03-10 17:14:06
+ * @LastEditTime: 2025-03-11 17:46:33
  * @FilePath: /logic-flow2/src/views/home.vue
  * @Description: 文件描述
 -->
@@ -10,6 +10,9 @@
   <el-button type="primary" @click="goTo('menu')">Menu</el-button>
   <el-button type="primary" @click="goTo('DndPanel')">DndPanel</el-button>
   <el-button type="primary" @click="goTo('control')">control</el-button>
+  <el-button type="primary" @click="goTo('node-model')">node-model</el-button>
+  <el-button type="primary" @click="goTo('node-view')">node-view</el-button>
+  <el-button type="primary" @click="goTo('node-vue')">node-vue</el-button>
 </template>
 <script setup>
--- a/src/views/node-model/customRect.js 0 → 100644
View file @c454a2b
+++ b/src/views/node-model/customRect.js 0 → 100644
View file @c454a2b
+/*
+ * @Date: 2025-03-11 15:09:41
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2025-03-11 15:36:53
+ * @FilePath: /logic-flow2/src/views/node/customRect.js
+ * @Description: 文件描述
+ */
+import { RectNode, RectNodeModel } from '@logicflow/core';
+
+class CustomRectModel extends RectNodeModel {
+  getNodeStyle() {
+    const style = super.getNodeStyle();
+
+    const properties = this.properties;
+    if (properties.status === 'pass') {
+      // 业务属性status为‘pass’时 展示边框颜色为green
+      style.stroke = 'green';
+    } else if (properties.status === 'reject') {
+      // 业务属性status为‘reject’时 展示边框颜色为red
+      style.stroke = 'red';
+    } else {
+      style.stroke = 'rgb(24, 125, 255)';
+    }
+    return style;
+  }
+}
+
+class CustomRectNode extends RectNode {}
+
+export default {
+  type: 'custom-rect',
+  view: CustomRectNode,
+  model: CustomRectModel,
+};
--- a/src/views/node-model/data.js 0 → 100644
View file @c454a2b
+++ b/src/views/node-model/data.js 0 → 100644
View file @c454a2b
+/*
+ * @Date: 2025-03-11 15:09:49
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2025-03-11 15:45:06
+ * @FilePath: /logic-flow2/src/views/node/data.js
+ * @Description: 文件描述
+ */
+export default {
+  nodes: [
+    {
+      id: '1',
+      type: 'custom-rect',
+      x: 100,
+      y: 100,
+      text: 'default',
+      properties: {
+        width: 70,
+        height: 70,
+      },
+    },
+    {
+      id: '2',
+      type: 'custom-rect',
+      x: 300,
+      y: 100,
+      text: 'pass',
+      properties: {
+        status: 'pass', // 业务属性
+        width: 100, // 形状属性
+        height: 100,
+        radius: 20,
+        style: {
+          // 样式属性
+          strokeWidth: 5,
+        },
+      },
+    },
+    {
+      id: '3',
+      type: 'custom-rect',
+      x: 500,
+      y: 100,
+      text: 'reject',
+      properties: {
+        status: 'reject',
+        width: 130,
+        height: 130,
+      },
+    },
+  ],
+};
--- a/src/views/node-model/index.vue 0 → 100644
View file @c454a2b
+++ b/src/views/node-model/index.vue 0 → 100644
View file @c454a2b
+<!--
+ * @Date: 2025-03-11 15:07:29
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2025-03-11 16:18:37
+ * @FilePath: /logic-flow2/src/views/node/index.vue
+ * @Description: 自定义节点model
+-->
+<template>
+  <div class="container">
+    <div ref="container" class="flow-container"></div>
+  </div>
+</template>
+
+<script setup>
+import LogicFlow from '@logicflow/core';
+import UserTask from './customRect';
+import data from './data';
+
+const SilentConfig = {
+  isSilentMode: true,
+  stopScrollGraph: true,
+  stopMoveGraph: true,
+  stopZoomGraph: true,
+  adjustNodePosition: true,
+};
+
+const container = ref(null);
+let lf = null;
+
+onMounted(() => {
+  lf = new LogicFlow({
+    container: container.value,
+    grid: true,
+    ...SilentConfig,
+  });
+
+  lf.register(UserTask);
+  lf.render(data);
+  lf.translateCenter();
+});
+</script>
+
+<style scoped>
+.container {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.flow-container {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+}
+</style>
--- a/src/views/node-view/data.js 0 → 100644
View file @c454a2b
+++ b/src/views/node-view/data.js 0 → 100644
View file @c454a2b
+/*
+ * @Date: 2025-03-11 15:09:49
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2025-03-11 16:23:53
+ * @FilePath: /logic-flow2/src/views/node-view/data.js
+ * @Description: 文件描述
+ */
+const data = {
+  nodes: [
+    {
+      id: 'node_id_1',
+      type: 'UserTask',
+      x: 100,
+      y: 100,
+      text: { x: 100, y: 100, value: '节点1' },
+      properties: {
+        width: 100,
+        height: 100,
+        scale: 1, // 自定义放大倍数
+        isClicked: false, // 自定义是否被点击
+      },
+    },
+    {
+      id: 'node_id_2',
+      type: 'circle',
+      x: 200,
+      y: 300,
+      text: { x: 200, y: 300, value: '节点2' },
+    },
+  ],
+  edges: [
+    {
+      id: 'edge_id',
+      type: 'polyline',
+      sourceNodeId: 'node_id_1',
+      targetNodeId: 'node_id_2',
+      text: { x: 139, y: 200, value: '连线' },
+      startPoint: { x: 100, y: 140 },
+      endPoint: { x: 200, y: 250 },
+      pointsList: [
+        { x: 100, y: 140 },
+        { x: 100, y: 200 },
+        { x: 200, y: 200 },
+        { x: 200, y: 250 },
+      ],
+    },
+  ],
+};
+export default data;
--- a/src/views/node-view/index.less 0 → 100644
View file @c454a2b
+++ b/src/views/node-view/index.less 0 → 100644
View file @c454a2b
+.helloworld-app {
+  width: 100%;
+
+  .app-content {
+    height: 380px;
+  }
+}
+
+.viewport {
+  position: relative;
+  height: 80vh;
+  overflow: hidden;
+}
--- a/src/views/node-view/index.vue 0 → 100644
View file @c454a2b
+++ b/src/views/node-view/index.vue 0 → 100644
View file @c454a2b
+<!--
+ * @Date: 2025-03-11 15:07:29
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2025-03-11 16:21:43
+ * @FilePath: /logic-flow2/src/views/node-view/index.vue
+ * @Description: 自定义节点model
+-->
+<template>
+  <div class="container">
+    <div ref="container" class="flow-container"></div>
+  </div>
+</template>
+
+<script setup>
+import LogicFlow from '@logicflow/core';
+import UserTask from './userTask';
+import data from './data';
+import './index.less';
+
+const SilentConfig = {
+  stopScrollGraph: true,
+  stopMoveGraph: true,
+  stopZoomGraph: true,
+};
+
+const container = ref(null);
+let lf = null;
+
+onMounted(() => {
+  lf = new LogicFlow({
+    container: container.value,
+    grid: true,
+    ...SilentConfig,
+  });
+
+  lf.register(UserTask);
+  lf.render(data);
+  lf.translateCenter();
+
+  // node 点击事件
+  lf.on('node:click', ({ data }) => {
+    lf.setProperties(data.id, {
+      // 改变业务属性
+      isClicked: !data.properties.isClicked,
+      scale: 0.8, // 缩小
+    });
+  });
+});
+</script>
+
+<style scoped>
+.container {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.flow-container {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+}
+</style>
--- a/src/views/node-view/userTask.js 0 → 100644
View file @c454a2b
+++ b/src/views/node-view/userTask.js 0 → 100644
View file @c454a2b
+/*
+ * @Date: 2025-03-11 16:21:23
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2025-03-11 16:42:03
+ * @FilePath: /logic-flow2/src/views/node-view/userTask.js
+ * @Description: 文件描述
+ */
+import { RectNode, RectNodeModel, h } from '@logicflow/core';
+
+class UserTaskView extends RectNode {
+  // 自定义一个用户图案
+  getLabelShape() {
+    const { model } = this.props;
+    const { x, y, width, height } = model;
+    const style = model.getNodeStyle();
+    return h(
+      'svg',
+      {
+        x: x - width / 2 + 5,
+        y: y - height / 2 + 5,
+        width: 25,
+        height: 25,
+        viewBox: '0 0 1274 1024',
+      },
+      [
+        h('path', {
+          fill: style.stroke,
+          d: 'M690.366075 350.568358c0-98.876614-79.937349-179.048571-178.558027-179.048571-98.59935 0-178.515371 80.150629-178.515371 179.048571 0 98.833958 79.916021 178.963259 178.515371 178.963259C610.428726 529.531617 690.366075 449.380988 690.366075 350.568358M376.140632 350.568358c0-75.159877 60.72082-136.072649 135.667416-136.072649 74.989253 0 135.667416 60.912772 135.667416 136.072649 0 75.117221-60.678164 136.029993-135.667416 136.029993C436.861451 486.577022 376.140632 425.664251 376.140632 350.568358M197.284012 762.923936 197.284012 778.472049l15.526785 0 291.255186 0.127968L819.784387 778.472049l15.569441 0 0-15.548113c0-139.783721-136.413897-285.581938-311.026243-273.275681-10.002833 0.703824-24.740482 9.128385-34.658002 9.938849-8.573857 0.74648 13.692577 8.232609 14.396401 16.827793 9.021745-0.789136 6.313088 13.095393 15.505457 13.095393 150.597017 0 263.14488 103.07823 263.14488 224.62651l15.441473-15.590769-285.816546-0.042656-278.991585 1.81288 15.526785 15.612097c0-82.752645 75.095893-152.70849 136.861785-191.824044 7.25152-4.58552 8.659169-17.659585 4.862784-22.906273-6.846288-9.426977-19.877697-8.701825-28.046322-6.014496C285.262018 560.521203 197.284012 667.758394 197.284012 762.923936',
+        }),
+        h('path', {
+          fill: style.stroke,
+          d: 'M512.31992 1.535616c-282.766642 0-512.021328 228.89211-512.021328 511.210864 0 282.46805 229.254686 511.25352 512.021328 511.25352 117.431975 0 228.828126-39.606098 318.810964-111.204199 10.791969-8.488545 12.540865-24.22861 3.988336-34.99925-8.616513-10.770641-24.356578-12.540865-35.127218-3.94568-81.174373 64.538532-181.586603 100.241606-287.650754 100.241606-255.210864 0-462.028493-206.561693-462.028493-461.367325 0-254.762976 206.817629-461.303341 462.028493-461.303341 255.210864 0 462.092477 206.561693 462.092477 461.303341 0 87.380821-24.33525 171.093227-69.614596 243.651087-7.272848 11.645089-3.668416 27.086562 8.040657 34.35941 11.709073 7.272848 27.10789 3.62576 34.402066-7.976672 50.184787-80.406565 77.143381-173.247355 77.143381-270.055153C1024.383904 230.427726 795.10789 1.535616 512.31992 1.535616z',
+        }),
+      ],
+    );
+  }
+
+  // 自定义节点外观
+  getShape() {
+    const { model } = this.props;
+    const { x, y, width, height, radius } = model;
+    const style = model.getNodeStyle();
+    return h('g', {}, [
+      h('rect', {
+        ...style,
+        x: x - width / 2, // 矩形默认x，y代表左上角顶点坐标，切换为中心点
+        y: y - height / 2,
+        rx: radius,
+        ry: radius,
+        width,
+        height,
+      }),
+      this.getLabelShape(),
+    ])
+  }
+}
+
+class UserTaskModel extends RectNodeModel {
+  // 设置 model 形状属性，每次 properties 发生变化会触发, 初始化 properties 也会执行
+  setAttributes() {
+    const { scale = 1, width = 100, height = 80 } = this.properties;
+    // 需要手动设置形状属性
+    this.width = width * scale;
+    this.height = height * scale;
+  }
+
+  // 自定义文本样式：依赖业务属性 isClicked 改变文本颜色
+  getTextStyle() {
+    const style = super.getTextStyle();
+    style.fontSize = 12;
+    const { isClicked } = this.properties;
+    style.color = isClicked ? 'red' : 'rgb(24, 125, 255)';
+    return style;
+  }
+
+  // 自定义节点样式：依赖业务属性 isClicked 改变边框颜色
+  getNodeStyle() {
+    const style = super.getNodeStyle();
+    const { isClicked } = this.properties;
+    if (isClicked) {
+      style.stroke = 'red';
+    } else {
+      style.stroke = 'rgb(24, 125, 255)';
+    }
+    return style;
+  }
+
+  // 自定义锚点样式属性：锚点（节点连线的点）
+  getAnchorStyle() {
+    const style = super.getAnchorStyle();
+    const newStyle = Object.assign({}, style, {
+      stroke: 'rgb(24, 125, 255)',
+      r: 3,
+      hover: {
+        r: 8,
+        fill: 'rgb(24, 125, 255)',
+        stroke: 'rgb(24, 125, 255)',
+      },
+    });
+    return newStyle;
+  }
+
+  // 自定义节点锚点拖出连接线的样式属性
+  getAnchorLineStyle() {
+    const style = super.getAnchorLineStyle();
+    style.stroke = 'rgb(24, 125, 255)';
+    return style;
+  }
+
+  // 自定义节点轮廓框的样式属性
+  getOutlineStyle() {
+    const style = super.getOutlineStyle();
+    const newStyle = Object.assign({}, style, {
+      stroke: 'red',
+      hover: {
+        stroke: 'red',
+      },
+    });
+    return newStyle;
+  }
+}
+
+export default {
+  type: 'UserTask',
+  view: UserTaskView,
+  model: UserTaskModel,
+};
--- a/src/views/temp.vue
View file @c454a2b
+++ b/src/views/temp.vue
View file @c454a2b
 <!--
  * @Date: 2025-03-10 16:52:35
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-03-10 16:58:14
+ * @LastEditTime: 2025-03-11 15:40:10
  * @FilePath: /logic-flow2/src/views/temp.vue
  * @Description: 拖拽面板
 -->
--- a/yarn.lock
View file @c454a2b
+++ b/yarn.lock
View file @c454a2b
@@ -366,6 +366,13 @@ confbox@^0.2.1:
   resolved "https://mirrors.cloud.tencent.com/npm/confbox/-/confbox-0.2.1.tgz"
   integrity sha512-hkT3yDPFbs95mNCy1+7qNKC6Pro+/ibzYxtM2iqEigpf0sVw+bg4Zh9/snjsBcf990vfIsg5+1U7VyiyBb3etg==
+copy-anything@^2.0.1:
+  version "2.0.6"
+  resolved "https://mirrors.cloud.tencent.com/npm/copy-anything/-/copy-anything-2.0.6.tgz"
+  integrity sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==
+  dependencies:
+    is-what "^3.14.1"
+
 csstype@^3.1.3:
   version "3.1.3"
   resolved "https://mirrors.cloud.tencent.com/npm/csstype/-/csstype-3.1.3.tgz"
@@ -415,6 +422,13 @@ entities@^4.5.0:
   resolved "https://mirrors.cloud.tencent.com/npm/entities/-/entities-4.5.0.tgz"
   integrity sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==
+errno@^0.1.1:
+  version "0.1.8"
+  resolved "https://mirrors.cloud.tencent.com/npm/errno/-/errno-0.1.8.tgz"
+  integrity sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==
+  dependencies:
+    prr "~1.0.1"
+
 es-module-lexer@^1.5.4:
   version "1.6.0"
   resolved "https://mirrors.cloud.tencent.com/npm/es-module-lexer/-/es-module-lexer-1.6.0.tgz"
@@ -530,6 +544,11 @@ glob-parent@^5.1.2:
   dependencies:
     is-glob "^4.0.1"
+graceful-fs@^4.1.2:
+  version "4.2.11"
+  resolved "https://mirrors.cloud.tencent.com/npm/graceful-fs/-/graceful-fs-4.2.11.tgz"
+  integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==
+
 has-flag@^4.0.0:
   version "4.0.0"
   resolved "https://mirrors.cloud.tencent.com/npm/has-flag/-/has-flag-4.0.0.tgz"
@@ -540,6 +559,18 @@ hoist-non-react-statics@^2.3.1:
   resolved "https://mirrors.cloud.tencent.com/npm/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz"
   integrity sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==
+iconv-lite@^0.6.3:
+  version "0.6.3"
+  resolved "https://mirrors.cloud.tencent.com/npm/iconv-lite/-/iconv-lite-0.6.3.tgz"
+  integrity sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==
+  dependencies:
+    safer-buffer ">= 2.1.2 < 3.0.0"
+
+image-size@~0.5.0:
+  version "0.5.5"
+  resolved "https://mirrors.cloud.tencent.com/npm/image-size/-/image-size-0.5.5.tgz"
+  integrity sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==
+
 immutable@^5.0.2:
   version "5.0.3"
   resolved "https://mirrors.cloud.tencent.com/npm/immutable/-/immutable-5.0.3.tgz"
@@ -562,11 +593,33 @@ is-number@^7.0.0:
   resolved "https://mirrors.cloud.tencent.com/npm/is-number/-/is-number-7.0.0.tgz"
   integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
+is-what@^3.14.1:
+  version "3.14.1"
+  resolved "https://mirrors.cloud.tencent.com/npm/is-what/-/is-what-3.14.1.tgz"
+  integrity sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==
+
 js-tokens@^9.0.1:
   version "9.0.1"
   resolved "https://mirrors.cloud.tencent.com/npm/js-tokens/-/js-tokens-9.0.1.tgz"
   integrity sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ==
+less@*, less@^4.2.2:
+  version "4.2.2"
+  resolved "https://mirrors.cloud.tencent.com/npm/less/-/less-4.2.2.tgz"
+  integrity sha512-tkuLHQlvWUTeQ3doAqnHbNn8T6WX1KA8yvbKG9x4VtKtIjHsVKQZCH11zRgAfbDAXC2UNIg/K9BYAAcEzUIrNg==
+  dependencies:
+    copy-anything "^2.0.1"
+    parse-node-version "^1.0.1"
+    tslib "^2.3.0"
+  optionalDependencies:
+    errno "^0.1.1"
+    graceful-fs "^4.1.2"
+    image-size "~0.5.0"
+    make-dir "^2.1.0"
+    mime "^1.4.1"
+    needle "^3.1.0"
+    source-map "~0.6.0"
+
 local-pkg@^1.0.0:
   version "1.1.1"
   resolved "https://mirrors.cloud.tencent.com/npm/local-pkg/-/local-pkg-1.1.1.tgz"
@@ -598,6 +651,14 @@ magic-string@^0.30.11, magic-string@^0.30.17:
   dependencies:
     "@jridgewell/sourcemap-codec" "^1.5.0"
+make-dir@^2.1.0:
+  version "2.1.0"
+  resolved "https://mirrors.cloud.tencent.com/npm/make-dir/-/make-dir-2.1.0.tgz"
+  integrity sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==
+  dependencies:
+    pify "^4.0.1"
+    semver "^5.6.0"
+
 medium-editor@^5.23.3:
   version "5.23.3"
   resolved "https://mirrors.cloud.tencent.com/npm/medium-editor/-/medium-editor-5.23.3.tgz"
@@ -621,6 +682,11 @@ micromatch@^4.0.8:
     braces "^3.0.3"
     picomatch "^2.3.1"
+mime@^1.4.1:
+  version "1.6.0"
+  resolved "https://mirrors.cloud.tencent.com/npm/mime/-/mime-1.6.0.tgz"
+  integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
+
 mlly@^1.7.4:
   version "1.7.4"
   resolved "https://mirrors.cloud.tencent.com/npm/mlly/-/mlly-1.7.4.tgz"
@@ -658,6 +724,14 @@ nanoid@^3.3.8:
   resolved "https://mirrors.cloud.tencent.com/npm/nanoid/-/nanoid-3.3.9.tgz"
   integrity sha512-SppoicMGpZvbF1l3z4x7No3OlIjP7QJvC9XR7AhZr1kL133KHnKPztkKDc+Ir4aJ/1VhTySrtKhrsycmrMQfvg==
+needle@^3.1.0:
+  version "3.3.1"
+  resolved "https://mirrors.cloud.tencent.com/npm/needle/-/needle-3.3.1.tgz"
+  integrity sha512-6k0YULvhpw+RoLNiQCRKOl09Rv1dPLr8hHnVjHqdolKwDrdNyk+Hmrthi4lIGPPz3r39dLx0hsF5s40sZ3Us4Q==
+  dependencies:
+    iconv-lite "^0.6.3"
+    sax "^1.2.4"
+
 node-releases@^2.0.19:
   version "2.0.19"
   resolved "https://mirrors.cloud.tencent.com/npm/node-releases/-/node-releases-2.0.19.tgz"
@@ -673,6 +747,11 @@ normalize-wheel-es@^1.2.0:
   resolved "https://mirrors.cloud.tencent.com/npm/normalize-wheel-es/-/normalize-wheel-es-1.2.0.tgz"
   integrity sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw==
+parse-node-version@^1.0.1:
+  version "1.0.1"
+  resolved "https://mirrors.cloud.tencent.com/npm/parse-node-version/-/parse-node-version-1.0.1.tgz"
+  integrity sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==
+
 pathe@^2.0.1, pathe@^2.0.2, pathe@^2.0.3:
   version "2.0.3"
   resolved "https://mirrors.cloud.tencent.com/npm/pathe/-/pathe-2.0.3.tgz"
@@ -693,6 +772,11 @@ picomatch@^2.3.1:
   resolved "https://mirrors.cloud.tencent.com/npm/picomatch/-/picomatch-4.0.2.tgz"
   integrity sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==
+pify@^4.0.1:
+  version "4.0.1"
+  resolved "https://mirrors.cloud.tencent.com/npm/pify/-/pify-4.0.1.tgz"
+  integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==
+
 pkg-types@^1.3.0:
   version "1.3.1"
   resolved "https://mirrors.cloud.tencent.com/npm/pkg-types/-/pkg-types-1.3.1.tgz"
@@ -739,6 +823,11 @@ preact@^10.17.1, preact@>=8:
   resolved "https://mirrors.cloud.tencent.com/npm/preact/-/preact-10.26.4.tgz"
   integrity sha512-KJhO7LBFTjP71d83trW+Ilnjbo+ySsaAgCfXOXUlmGzJ4ygYPWmysm77yg4emwfmoz3b22yvH5IsVFHbhUaH5w==
+prr@~1.0.1:
+  version "1.0.1"
+  resolved "https://mirrors.cloud.tencent.com/npm/prr/-/prr-1.0.1.tgz"
+  integrity sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==
+
 quansync@^0.2.8:
   version "0.2.8"
   resolved "https://mirrors.cloud.tencent.com/npm/quansync/-/quansync-0.2.8.tgz"
@@ -801,6 +890,11 @@ rxjs@^7.4.0:
   dependencies:
     tslib "^2.1.0"
+"safer-buffer@>= 2.1.2 < 3.0.0":
+  version "2.1.2"
+  resolved "https://mirrors.cloud.tencent.com/npm/safer-buffer/-/safer-buffer-2.1.2.tgz"
+  integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
+
 sass-embedded-darwin-arm64@1.85.1:
   version "1.85.1"
   resolved "https://mirrors.cloud.tencent.com/npm/sass-embedded-darwin-arm64/-/sass-embedded-darwin-arm64-1.85.1.tgz"
@@ -841,16 +935,31 @@ sass-embedded@*, sass-embedded@^1.85.1:
     sass-embedded-win32-ia32 "1.85.1"
     sass-embedded-win32-x64 "1.85.1"
+sax@^1.2.4:
+  version "1.4.1"
+  resolved "https://mirrors.cloud.tencent.com/npm/sax/-/sax-1.4.1.tgz"
+  integrity sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg==
+
 scule@^1.3.0:
   version "1.3.0"
   resolved "https://mirrors.cloud.tencent.com/npm/scule/-/scule-1.3.0.tgz"
   integrity sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==
+semver@^5.6.0:
+  version "5.7.2"
+  resolved "https://mirrors.cloud.tencent.com/npm/semver/-/semver-5.7.2.tgz"
+  integrity sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==
+
 source-map-js@^1.2.0, source-map-js@^1.2.1:
   version "1.2.1"
   resolved "https://mirrors.cloud.tencent.com/npm/source-map-js/-/source-map-js-1.2.1.tgz"
   integrity sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==
+source-map@~0.6.0:
+  version "0.6.1"
+  resolved "https://mirrors.cloud.tencent.com/npm/source-map/-/source-map-0.6.1.tgz"
+  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
+
 strip-literal@^3.0.0:
   version "3.0.0"
   resolved "https://mirrors.cloud.tencent.com/npm/strip-literal/-/strip-literal-3.0.0.tgz"
@@ -897,7 +1006,7 @@ to-regex-range@^5.0.1:
   dependencies:
     is-number "^7.0.0"
-tslib@^2.1.0, tslib@2.3.0:
+tslib@^2.1.0, tslib@^2.3.0, tslib@2.3.0:
   version "2.3.0"
   resolved "https://mirrors.cloud.tencent.com/npm/tslib/-/tslib-2.3.0.tgz"
   integrity sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==