clear: 替换ID生成工具

package-lock.json

@@ -4461,14 +4461,6 @@
         "randomfill": "^1.0.3"
       }
     },
-    "crypto-random-string": {
-      "version": "3.3.1",
-      "resolved": "https://r.cnpmjs.org/crypto-random-string/download/crypto-random-string-3.3.1.tgz",
-      "integrity": "sha1-E87pTKyAAeSEJQFgjvd54O0I+C0=",
-      "requires": {
-        "type-fest": "^0.8.1"
-      }
-    },
     "css": {
       "version": "3.0.0",
       "resolved": "https://r.cnpmjs.org/css/download/css-3.0.0.tgz",
@@ -5436,7 +5428,7 @@
     },
     "esbuild-android-arm64": {
       "version": "0.13.15",
-      "resolved": "https://r.cnpmjs.org/esbuild-android-arm64/download/esbuild-android-arm64-0.13.15.tgz",
+      "resolved": "https://rg.cnpmjs.org/esbuild-android-arm64/download/esbuild-android-arm64-0.13.15.tgz",
       "integrity": "sha512-m602nft/XXeO8YQPUDVoHfjyRVPdPgjyyXOxZ44MK/agewFFkPa8tUo6lAzSWh5Ui5PB4KR9UIFTSBKh/RrCmg==",
       "optional": true
     },
@@ -5448,91 +5440,91 @@
     },
     "esbuild-darwin-arm64": {
       "version": "0.13.15",
-      "resolved": "https://r.cnpmjs.org/esbuild-darwin-arm64/download/esbuild-darwin-arm64-0.13.15.tgz",
+      "resolved": "https://rg.cnpmjs.org/esbuild-darwin-arm64/download/esbuild-darwin-arm64-0.13.15.tgz",
       "integrity": "sha512-i1FZssTVxUqNlJ6cBTj5YQj4imWy3m49RZRnHhLpefFIh0To05ow9DTrXROTE1urGTQCloFUXTX8QfGJy1P8dQ==",
       "optional": true
     },
     "esbuild-freebsd-64": {
       "version": "0.13.15",
-      "resolved": "https://r.cnpmjs.org/esbuild-freebsd-64/download/esbuild-freebsd-64-0.13.15.tgz",
+      "resolved": "https://rg.cnpmjs.org/esbuild-freebsd-64/download/esbuild-freebsd-64-0.13.15.tgz",
       "integrity": "sha512-G3dLBXUI6lC6Z09/x+WtXBXbOYQZ0E8TDBqvn7aMaOCzryJs8LyVXKY4CPnHFXZAbSwkCbqiPuSQ1+HhrNk7EA==",
       "optional": true
     },
     "esbuild-freebsd-arm64": {
       "version": "0.13.15",
-      "resolved": "https://r.cnpmjs.org/esbuild-freebsd-arm64/download/esbuild-freebsd-arm64-0.13.15.tgz",
+      "resolved": "https://rg.cnpmjs.org/esbuild-freebsd-arm64/download/esbuild-freebsd-arm64-0.13.15.tgz",
       "integrity": "sha512-KJx0fzEDf1uhNOZQStV4ujg30WlnwqUASaGSFPhznLM/bbheu9HhqZ6mJJZM32lkyfGJikw0jg7v3S0oAvtvQQ==",
       "optional": true
     },
     "esbuild-linux-32": {
       "version": "0.13.15",
-      "resolved": "https://r.cnpmjs.org/esbuild-linux-32/download/esbuild-linux-32-0.13.15.tgz",
+      "resolved": "https://rg.cnpmjs.org/esbuild-linux-32/download/esbuild-linux-32-0.13.15.tgz",
       "integrity": "sha512-ZvTBPk0YWCLMCXiFmD5EUtB30zIPvC5Itxz0mdTu/xZBbbHJftQgLWY49wEPSn2T/TxahYCRDWun5smRa0Tu+g==",
       "optional": true
     },
     "esbuild-linux-64": {
       "version": "0.13.15",
-      "resolved": "https://r.cnpmjs.org/esbuild-linux-64/download/esbuild-linux-64-0.13.15.tgz",
+      "resolved": "https://rg.cnpmjs.org/esbuild-linux-64/download/esbuild-linux-64-0.13.15.tgz",
       "integrity": "sha512-eCKzkNSLywNeQTRBxJRQ0jxRCl2YWdMB3+PkWFo2BBQYC5mISLIVIjThNtn6HUNqua1pnvgP5xX0nHbZbPj5oA==",
       "optional": true
     },
     "esbuild-linux-arm": {
       "version": "0.13.15",
-      "resolved": "https://r.cnpmjs.org/esbuild-linux-arm/download/esbuild-linux-arm-0.13.15.tgz",
+      "resolved": "https://rg.cnpmjs.org/esbuild-linux-arm/download/esbuild-linux-arm-0.13.15.tgz",
       "integrity": "sha512-wUHttDi/ol0tD8ZgUMDH8Ef7IbDX+/UsWJOXaAyTdkT7Yy9ZBqPg8bgB/Dn3CZ9SBpNieozrPRHm0BGww7W/jA==",
       "optional": true
     },
     "esbuild-linux-arm64": {
       "version": "0.13.15",
-      "resolved": "https://r.cnpmjs.org/esbuild-linux-arm64/download/esbuild-linux-arm64-0.13.15.tgz",
+      "resolved": "https://rg.cnpmjs.org/esbuild-linux-arm64/download/esbuild-linux-arm64-0.13.15.tgz",
       "integrity": "sha512-bYpuUlN6qYU9slzr/ltyLTR9YTBS7qUDymO8SV7kjeNext61OdmqFAzuVZom+OLW1HPHseBfJ/JfdSlx8oTUoA==",
       "optional": true
     },
     "esbuild-linux-mips64le": {
       "version": "0.13.15",
-      "resolved": "https://r.cnpmjs.org/esbuild-linux-mips64le/download/esbuild-linux-mips64le-0.13.15.tgz",
+      "resolved": "https://rg.cnpmjs.org/esbuild-linux-mips64le/download/esbuild-linux-mips64le-0.13.15.tgz",
       "integrity": "sha512-KlVjIG828uFPyJkO/8gKwy9RbXhCEUeFsCGOJBepUlpa7G8/SeZgncUEz/tOOUJTcWMTmFMtdd3GElGyAtbSWg==",
       "optional": true
     },
     "esbuild-linux-ppc64le": {
       "version": "0.13.15",
-      "resolved": "https://r.cnpmjs.org/esbuild-linux-ppc64le/download/esbuild-linux-ppc64le-0.13.15.tgz",
+      "resolved": "https://rg.cnpmjs.org/esbuild-linux-ppc64le/download/esbuild-linux-ppc64le-0.13.15.tgz",
       "integrity": "sha512-h6gYF+OsaqEuBjeesTBtUPw0bmiDu7eAeuc2OEH9S6mV9/jPhPdhOWzdeshb0BskRZxPhxPOjqZ+/OqLcxQwEQ==",
       "optional": true
     },
     "esbuild-netbsd-64": {
       "version": "0.13.15",
-      "resolved": "https://r.cnpmjs.org/esbuild-netbsd-64/download/esbuild-netbsd-64-0.13.15.tgz",
+      "resolved": "https://rg.cnpmjs.org/esbuild-netbsd-64/download/esbuild-netbsd-64-0.13.15.tgz",
       "integrity": "sha512-3+yE9emwoevLMyvu+iR3rsa+Xwhie7ZEHMGDQ6dkqP/ndFzRHkobHUKTe+NCApSqG5ce2z4rFu+NX/UHnxlh3w==",
       "optional": true
     },
     "esbuild-openbsd-64": {
       "version": "0.13.15",
-      "resolved": "https://r.cnpmjs.org/esbuild-openbsd-64/download/esbuild-openbsd-64-0.13.15.tgz",
+      "resolved": "https://rg.cnpmjs.org/esbuild-openbsd-64/download/esbuild-openbsd-64-0.13.15.tgz",
       "integrity": "sha512-wTfvtwYJYAFL1fSs8yHIdf5GEE4NkbtbXtjLWjM3Cw8mmQKqsg8kTiqJ9NJQe5NX/5Qlo7Xd9r1yKMMkHllp5g==",
       "optional": true
     },
     "esbuild-sunos-64": {
       "version": "0.13.15",
-      "resolved": "https://r.cnpmjs.org/esbuild-sunos-64/download/esbuild-sunos-64-0.13.15.tgz",
+      "resolved": "https://rg.cnpmjs.org/esbuild-sunos-64/download/esbuild-sunos-64-0.13.15.tgz",
       "integrity": "sha512-lbivT9Bx3t1iWWrSnGyBP9ODriEvWDRiweAs69vI+miJoeKwHWOComSRukttbuzjZ8r1q0mQJ8Z7yUsDJ3hKdw==",
       "optional": true
     },
     "esbuild-windows-32": {
       "version": "0.13.15",
-      "resolved": "https://r.cnpmjs.org/esbuild-windows-32/download/esbuild-windows-32-0.13.15.tgz",
+      "resolved": "https://rg.cnpmjs.org/esbuild-windows-32/download/esbuild-windows-32-0.13.15.tgz",
       "integrity": "sha512-fDMEf2g3SsJ599MBr50cY5ve5lP1wyVwTe6aLJsM01KtxyKkB4UT+fc5MXQFn3RLrAIAZOG+tHC+yXObpSn7Nw==",
       "optional": true
     },
     "esbuild-windows-64": {
       "version": "0.13.15",
-      "resolved": "https://r.cnpmjs.org/esbuild-windows-64/download/esbuild-windows-64-0.13.15.tgz",
+      "resolved": "https://rg.cnpmjs.org/esbuild-windows-64/download/esbuild-windows-64-0.13.15.tgz",
       "integrity": "sha512-9aMsPRGDWCd3bGjUIKG/ZOJPKsiztlxl/Q3C1XDswO6eNX/Jtwu4M+jb6YDH9hRSUflQWX0XKAfWzgy5Wk54JQ==",
       "optional": true
     },
     "esbuild-windows-arm64": {
       "version": "0.13.15",
-      "resolved": "https://r.cnpmjs.org/esbuild-windows-arm64/download/esbuild-windows-arm64-0.13.15.tgz",
+      "resolved": "https://rg.cnpmjs.org/esbuild-windows-arm64/download/esbuild-windows-arm64-0.13.15.tgz",
       "integrity": "sha512-zzvyCVVpbwQQATaf3IG8mu1IwGEiDxKkYUdA4FpoCHi1KtPa13jeScYDjlW0Qh+ebWzpKfR2ZwvqAQkSWNcKjA==",
       "optional": true
     },
@@ -11344,9 +11336,9 @@
       }
     },
     "rollup": {
-      "version": "2.60.1",
+      "version": "2.60.2",
-      "resolved": "https://r.cnpmjs.org/rollup/download/rollup-2.60.1.tgz",
+      "resolved": "https://rg.cnpmjs.org/rollup/download/rollup-2.60.2.tgz",
-      "integrity": "sha512-akwfnpjY0rXEDSn1UTVfKXJhPsEBu+imi1gqBA1ZkHGydUnkV/fWCC90P7rDaLEW8KTwBcS1G3N4893Ndz+jwg==",
+      "integrity": "sha512-1Bgjpq61sPjgoZzuiDSGvbI1tD91giZABgjCQBKM5aYLnzjq52GoDuWVwT/cm/MCxCMPU8gqQvkj8doQ5C8Oqw==",
       "requires": {
         "fsevents": "~2.3.2"
       }
@@ -12771,7 +12763,8 @@
     "type-fest": {
       "version": "0.8.1",
       "resolved": "https://r.cnpmjs.org/type-fest/download/type-fest-0.8.1.tgz",
-      "integrity": "sha1-CeJJ696FHTseSNJ8EFREZn8XuD0="
+      "integrity": "sha1-CeJJ696FHTseSNJ8EFREZn8XuD0=",
+      "dev": true
     },
     "type-is": {
       "version": "1.6.18",
@@ -13165,26 +13158,31 @@
       }
     },
     "vite": {
-      "version": "2.6.14",
+      "version": "2.7.0-beta.10",
-      "resolved": "https://r.cnpmjs.org/vite/download/vite-2.6.14.tgz",
+      "resolved": "https://rg.cnpmjs.org/vite/download/vite-2.7.0-beta.10.tgz",
-      "integrity": "sha512-2HA9xGyi+EhY2MXo0+A2dRsqsAG3eFNEVIo12olkWhOmc8LfiM+eMdrXf+Ruje9gdXgvSqjLI9freec1RUM5EA==",
+      "integrity": "sha512-BiZ0SOnvNtB4Q5Y8YJDYf9O2h7Abld6wsT3SCEM5k4KJstMt1oZdO1M3+L3mhSu0mVJX5wHsyt9CEv5o1lz8vg==",
       "requires": {
-        "esbuild": "^0.13.2",
+        "esbuild": "^0.13.12",
         "fsevents": "~2.3.2",
-        "postcss": "^8.3.8",
+        "postcss": "^8.3.11",
         "resolve": "^1.20.0",
-        "rollup": "^2.57.0"
+        "rollup": "^2.59.0"
       },
       "dependencies": {
         "postcss": {
-          "version": "8.3.11",
+          "version": "8.4.4",
-          "resolved": "https://r.cnpmjs.org/postcss/download/postcss-8.3.11.tgz",
+          "resolved": "https://r.cnpmjs.org/postcss/download/postcss-8.4.4.tgz",
-          "integrity": "sha1-w77KfqgRzV4cSj7G0udZnvH4+Fg=",
+          "integrity": "sha512-joU6fBsN6EIer28Lj6GDFoC/5yOZzLCfn0zHAn/MYXI7aPt4m4hK5KC5ovEZXy+lnCjmYIbQWngvju2ddyEr8Q==",
           "requires": {
             "nanoid": "^3.1.30",
             "picocolors": "^1.0.0",
-            "source-map-js": "^0.6.2"
+            "source-map-js": "^1.0.1"
           }
+        },
+        "source-map-js": {
+          "version": "1.0.1",
+          "resolved": "https://r.cnpmjs.org/source-map-js/download/source-map-js-1.0.1.tgz",
+          "integrity": "sha512-4+TN2b3tqOCd/kaGRJ/sTYA0tR0mdXx26ipdolxcwtJVqEnqNYvlCAt1q3ypy4QMlYus+Zh34RNtYLoq2oQ4IA=="
         }
       }
     },

package.json

@@ -32,7 +32,6 @@
     "codemirror-editor-vue3": "^0.2.4",
     "copy-to-clipboard": "^3.3.1",
     "core-js": "^3.6.4",
-    "crypto-random-string": "^3.3.0",
     "css": "^3.0.0",
     "element-plus": "^1.2.0-beta.3",
     "escodegen": "^2.0.0",
@@ -49,6 +48,7 @@
     "lodash-es": "^4.17.21",
     "md5": "^2.3.0",
     "modern-normalize": "^1.0.0",
+    "nanoid": "^3.1.30",
     "object-inspect": "^1.11.0",
     "parse-package-name": "^0.1.0",
     "prettier": "^2.4.0",

src/rawComponents/element/button.vue

@@ -27,15 +27,6 @@
               <el-button lc-mark type="warning" round lc_id="jkBcMy35Fs">警告按钮</el-button>
               <el-button lc-mark type="danger" round lc_id="NbMTA5OJFM">危险按钮</el-button>
           </div>
-          <div lc_id="dtI0sv1JGj">
-              <div class="demonstration-element" lc_id="/J59dGf5Ux">Button 图标按钮</div>
-              <el-button lc-mark icon="el-icon-search" circle lc_id="zKuPwfsOg/"></el-button>
-              <el-button lc-mark type="primary" icon="el-icon-edit" circle lc_id="TEEu3UmtSm"></el-button>
-              <el-button lc-mark type="success" icon="el-icon-check" circle lc_id="Gcle27RxOV"></el-button>
-              <el-button lc-mark type="info" icon="el-icon-message" circle lc_id="iYwWDqh7Cj"></el-button>
-              <el-button lc-mark type="warning" icon="el-icon-star-off" circle lc_id="c0jB+EoGdn"></el-button>
-              <el-button lc-mark type="danger" icon="el-icon-delete" circle lc_id="UOzcHamJuB"></el-button>
-          </div>
           <div lc_id="W3QyOQzQlk">
               <div class="demonstration-element" lc_id="smimycex4t">Button 文字按钮</div>
               <el-button lc-mark type="text" lc_id="t0TXebSot2">文字按钮</el-button>
@@ -55,19 +46,6 @@
                   <el-button type="primary" icon="el-icon-delete" lc_id="rp+8TRHMji"></el-button>
               </el-button-group>
           </div>
-          <div lc_id="k4SqegBXaV">
-              <div class="demonstration-element" lc_id="oFxF0LI+dm">Icon 图标</div>
-              <i class="icon el-icon-edit" lc-mark lc_id="a6mb6XhfMc"></i>
-              <i class="icon el-icon-share" lc-mark lc_id="oXLeLY13kj"></i>
-              <i class="icon el-icon-delete" lc-mark lc_id="s8KebZ+PS1"></i>
-              <i class="icon el-icon-info" lc-mark lc_id="WXq43J9XzJ"></i>
-              <i class="icon el-icon-eleme" lc-mark lc_id="4hI/AencQZ"></i>
-              <i class="icon el-icon-setting" lc-mark lc_id="511YTr9sW9"></i>
-              <i class="icon el-icon-video-camera-solid" lc-mark lc_id="/k6h8zYM65"></i>
-              <i class="icon el-icon-message-solid" lc-mark lc_id="blqIQB6Vhj"></i>
-              <i class="icon el-icon-s-data" lc-mark lc_id="gbq6whZDAm"></i>
-              <el-link href="https://element.eleme.cn/#/zh-CN/component/icon" style="margin-left: 10px;" class="el-icon-d-arrow-right" type="info" target="_blank" lc_id="t+j3VEq1No">查看所有图标</el-link>
-          </div>
           <div lc_id="D9dpNStd1t">
               <div class="demonstration-element" lc_id="MPmrgZvo8q">Link 文字链接</div>
               <el-link lc-mark lc_id="rtsG+iZyEB">默认链接</el-link>

src/rawComponents/element/index.vue

@@ -2,14 +2,14 @@
   <div lc_id="v91WiYWqPM" class="element-class">
     <lc-button lc_id="pclmcAeMlS"></lc-button>
     <lc-table lc_id="pclmcAeMlS"></lc-table>
-    <lc-form lc_id="ZyKgG7bSXm"></lc-form>
+    <!-- <lc-form lc_id="ZyKgG7bSXm"></lc-form>
     <lc-image></lc-image>
     <lc-form-base></lc-form-base>
     <lc-dialog></lc-dialog>
     <lc-icon lc_id="v31NGzWvBh"></lc-icon>
     <lc-layout lc_id="SBCyi1cZac"></lc-layout>
     <lc-container lc_id="ZyKgG7bSXm"></lc-container>
-    <lc-final></lc-final>
+    <lc-final></lc-final> -->
   </div>
 </template>
 <script>
@@ -24,7 +24,7 @@ import table from "./table";
 // import image from "./image";
 // import final from "./final";
 
-// import { deepLCEle } from "@/utils/initRawComponent";
+import { deepLCEle } from "@/utils/initRawComponent";
 
 export default {
   data() {
@@ -33,10 +33,8 @@ export default {
   mounted() {
     this.$emit('mounted');
     // 对所有拥有lc-mark的元素进行初始化
-    let countComponentCount = 0;
+    deepLCEle(document.querySelector('.element-class'), () => {
-    // deepLCEle(document.querySelector('.element-class'), () => {
+    });
-    //   countComponentCount++;
-    // });
   },
   methods: {},
   components: {

src/utils/common.js

@@ -1,5 +1,5 @@
 import isEqual from "lodash-es/isEqual";
-// import cryptoRandomString from "crypto-random-string";
+import { customAlphabet, nanoid } from 'nanoid';
 
 export function getRawComponentKey(__rawVueInfo__) {
     return Object.keys(__rawVueInfo__)[0];
@@ -24,6 +24,14 @@ export function isObject(obj) {
     return Object.prototype.toString.apply(obj) === "[object Object]";
 }
 
+/**
+ * @description 生成唯一ID
+ */
+ export function createUniqueId() {
+  const nanoid = customAlphabet('1234567890abcdefghijklmnopqrstuvwxyz', 10);
+  return nanoid();
+}
+
  /**
 * 遍历对象，添加ID
 * @param {*} jsonObj
@@ -50,7 +58,7 @@ export function ergodic(jsonObj) {
 
    // 添加ID
    if (!jsonObj["lc_id"]) {
-    //  jsonObj["lc_id"] = cryptoRandomString({ length: 10, type: "base64" });
+     jsonObj["lc_id"] = createUniqueId();
    }
  }
 }

src/utils/forCode.js

@@ -1,7 +1,6 @@
 
-import { isObject, isArray, getRawComponentKey } from '@/utils/common';
+import { isObject, isArray, getRawComponentKey, createUniqueId } from '@/utils/common';
 import presetAttribute from "../libs/presetAttribute";
-// const cryptoRandomString = require("crypto-random-string");
 
 // 将预生成的ID替换，否则当有两个组件挂在同一个树上时，后一个会将前一个的属性覆盖
 export function replaceRowID(codeObj, html) {
@@ -14,7 +13,7 @@ export function replaceRowID(codeObj, html) {
                     const element = obj[key];
                     if (key == "lc_id") {
                         const oldID = obj[key];
-                        const newID = 3333;
+                        const newID = createUniqueId();
                         newHtml = newHtml.replace(oldID, newID);
                         obj[key] = newID;
                     } else if (isObject(element)) {

src/utils/initRawComponent.js

@@ -1,5 +1,4 @@
 import { generateRawInfo, getSplitTag } from './forCode';
-import { getRawComponentKey } from './common';
 
 
 // 遍历DOM树，初始化lc-mark标记的元素