实现了基本的通过拖拽变更结构的能力

.eslintignore

@@ -0,0 +1 @@
+*.vue

package-lock.json

@@ -1239,30 +1239,6 @@
         "fastq": "^1.6.0"
       }
     },
-    "@npmcli/move-file": {
-      "version": "1.1.2",
-      "resolved": "http://npm.xesv5.com/@npmcli%2fmove-file/-/move-file-1.1.2.tgz",
-      "integrity": "sha1-GoLD43L3yuklPrZtclQ9a4aFxnQ=",
-      "requires": {
-        "mkdirp": "^1.0.4",
-        "rimraf": "^3.0.2"
-      },
-      "dependencies": {
-        "mkdirp": {
-          "version": "1.0.4",
-          "resolved": "https://registry.npm.taobao.org/mkdirp/download/mkdirp-1.0.4.tgz",
-          "integrity": "sha1-PrXtYmInVteaXw4qIh3+utdcL34="
-        },
-        "rimraf": {
-          "version": "3.0.2",
-          "resolved": "https://registry.npm.taobao.org/rimraf/download/rimraf-3.0.2.tgz",
-          "integrity": "sha1-8aVAK6YiCtUswSgrrBrjqkn9Bho=",
-          "requires": {
-            "glob": "^7.1.3"
-          }
-        }
-      }
-    },
     "@samverschueren/stream-to-observable": {
       "version": "0.3.1",
       "resolved": "http://npm.xesv5.com/@samverschueren%2fstream-to-observable/-/stream-to-observable-0.3.1.tgz",
@@ -1455,7 +1431,8 @@
     "@types/json-schema": {
       "version": "7.0.6",
       "resolved": "http://npm.xesv5.com/@types%2fjson-schema/-/json-schema-7.0.6.tgz",
-      "integrity": "sha1-9MfsQ+gbMZqYFRFQMXCfJph4kfA="
+      "integrity": "sha1-9MfsQ+gbMZqYFRFQMXCfJph4kfA=",
+      "dev": true
     },
     "@types/json5": {
       "version": "0.0.29",
@@ -2594,6 +2571,7 @@
       "version": "3.1.0",
       "resolved": "https://registry.npm.taobao.org/aggregate-error/download/aggregate-error-3.1.0.tgz",
       "integrity": "sha1-kmcP9Q9TWb23o+DUDQ7DDFc3aHo=",
+      "dev": true,
       "requires": {
         "clean-stack": "^2.0.0",
         "indent-string": "^4.0.0"
@@ -2603,6 +2581,7 @@
       "version": "6.12.4",
       "resolved": "https://registry.npm.taobao.org/ajv/download/ajv-6.12.4.tgz?cache=0&sync_timestamp=1597480769003&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fajv%2Fdownload%2Fajv-6.12.4.tgz",
       "integrity": "sha1-BhT6zEUiEn+nE0Rca/0+vTduIjQ=",
+      "dev": true,
       "requires": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -2619,7 +2598,8 @@
     "ajv-keywords": {
       "version": "3.5.2",
       "resolved": "https://registry.npm.taobao.org/ajv-keywords/download/ajv-keywords-3.5.2.tgz?cache=0&sync_timestamp=1595907014086&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fajv-keywords%2Fdownload%2Fajv-keywords-3.5.2.tgz",
-      "integrity": "sha1-MfKdpatuANHC0yms97WSlhTVAU0="
+      "integrity": "sha1-MfKdpatuANHC0yms97WSlhTVAU0=",
+      "dev": true
     },
     "alphanum-sort": {
       "version": "1.0.2",
@@ -3842,7 +3822,8 @@
     "clean-stack": {
       "version": "2.2.0",
       "resolved": "https://registry.npm.taobao.org/clean-stack/download/clean-stack-2.2.0.tgz?cache=0&sync_timestamp=1592035220754&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fclean-stack%2Fdownload%2Fclean-stack-2.2.0.tgz",
-      "integrity": "sha1-7oRy27Ep5yezHooQpCfe6d/kAIs="
+      "integrity": "sha1-7oRy27Ep5yezHooQpCfe6d/kAIs=",
+      "dev": true
     },
     "cli-cursor": {
       "version": "2.1.0",
@@ -4136,7 +4117,8 @@
     "commondir": {
       "version": "1.0.1",
       "resolved": "https://registry.npm.taobao.org/commondir/download/commondir-1.0.1.tgz",
-      "integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs="
+      "integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=",
+      "dev": true
     },
     "component-classes": {
       "version": "1.2.6",
@@ -4204,152 +4186,6 @@
         }
       }
     },
-    "compression-webpack-plugin": {
-      "version": "5.0.1",
-      "resolved": "https://registry.nlark.com/compression-webpack-plugin/download/compression-webpack-plugin-5.0.1.tgz?cache=0&sync_timestamp=1624626650884&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fcompression-webpack-plugin%2Fdownload%2Fcompression-webpack-plugin-5.0.1.tgz",
-      "integrity": "sha1-MWwaTkzMlFEKl4yWf8FDWB0eNkM=",
-      "requires": {
-        "cacache": "^15.0.5",
-        "find-cache-dir": "^3.3.1",
-        "schema-utils": "^2.7.0",
-        "serialize-javascript": "^4.0.0",
-        "webpack-sources": "^1.4.3"
-      },
-      "dependencies": {
-        "cacache": {
-          "version": "15.2.0",
-          "resolved": "https://registry.nlark.com/cacache/download/cacache-15.2.0.tgz?cache=0&sync_timestamp=1621949655085&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fcacache%2Fdownload%2Fcacache-15.2.0.tgz",
-          "integrity": "sha1-c69193xY5y2MYwp6KFjLGO9SM4k=",
-          "requires": {
-            "@npmcli/move-file": "^1.0.1",
-            "chownr": "^2.0.0",
-            "fs-minipass": "^2.0.0",
-            "glob": "^7.1.4",
-            "infer-owner": "^1.0.4",
-            "lru-cache": "^6.0.0",
-            "minipass": "^3.1.1",
-            "minipass-collect": "^1.0.2",
-            "minipass-flush": "^1.0.5",
-            "minipass-pipeline": "^1.2.2",
-            "mkdirp": "^1.0.3",
-            "p-map": "^4.0.0",
-            "promise-inflight": "^1.0.1",
-            "rimraf": "^3.0.2",
-            "ssri": "^8.0.1",
-            "tar": "^6.0.2",
-            "unique-filename": "^1.1.1"
-          }
-        },
-        "chownr": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npm.taobao.org/chownr/download/chownr-2.0.0.tgz",
-          "integrity": "sha1-Fb++U9LqtM9w8YqM1o6+Wzyx3s4="
-        },
-        "find-cache-dir": {
-          "version": "3.3.1",
-          "resolved": "https://registry.npm.taobao.org/find-cache-dir/download/find-cache-dir-3.3.1.tgz",
-          "integrity": "sha1-ibM/rUpGcNqpT4Vff74x1thP6IA=",
-          "requires": {
-            "commondir": "^1.0.1",
-            "make-dir": "^3.0.2",
-            "pkg-dir": "^4.1.0"
-          }
-        },
-        "find-up": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npm.taobao.org/find-up/download/find-up-4.1.0.tgz?cache=0&sync_timestamp=1597170240264&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffind-up%2Fdownload%2Ffind-up-4.1.0.tgz",
-          "integrity": "sha1-l6/n1s3AvFkoWEt8jXsW6KmqXRk=",
-          "requires": {
-            "locate-path": "^5.0.0",
-            "path-exists": "^4.0.0"
-          }
-        },
-        "locate-path": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npm.taobao.org/locate-path/download/locate-path-5.0.0.tgz?cache=0&sync_timestamp=1597082033698&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Flocate-path%2Fdownload%2Flocate-path-5.0.0.tgz",
-          "integrity": "sha1-Gvujlq/WdqbUJQTQpno6frn2KqA=",
-          "requires": {
-            "p-locate": "^4.1.0"
-          }
-        },
-        "lru-cache": {
-          "version": "6.0.0",
-          "resolved": "https://registry.npm.taobao.org/lru-cache/download/lru-cache-6.0.0.tgz?cache=0&sync_timestamp=1594427519396&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Flru-cache%2Fdownload%2Flru-cache-6.0.0.tgz",
-          "integrity": "sha1-bW/mVw69lqr5D8rR2vo7JWbbOpQ=",
-          "requires": {
-            "yallist": "^4.0.0"
-          }
-        },
-        "make-dir": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npm.taobao.org/make-dir/download/make-dir-3.1.0.tgz",
-          "integrity": "sha1-QV6WcEazp/HRhSd9hKpYIDcmoT8=",
-          "requires": {
-            "semver": "^6.0.0"
-          }
-        },
-        "mkdirp": {
-          "version": "1.0.4",
-          "resolved": "https://registry.npm.taobao.org/mkdirp/download/mkdirp-1.0.4.tgz",
-          "integrity": "sha1-PrXtYmInVteaXw4qIh3+utdcL34="
-        },
-        "p-locate": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npm.taobao.org/p-locate/download/p-locate-4.1.0.tgz?cache=0&sync_timestamp=1597081369770&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fp-locate%2Fdownload%2Fp-locate-4.1.0.tgz",
-          "integrity": "sha1-o0KLtwiLOmApL2aRkni3wpetTwc=",
-          "requires": {
-            "p-limit": "^2.2.0"
-          }
-        },
-        "p-map": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npm.taobao.org/p-map/download/p-map-4.0.0.tgz",
-          "integrity": "sha1-uy+Vpe2i7BaOySdOBqdHw+KQTSs=",
-          "requires": {
-            "aggregate-error": "^3.0.0"
-          }
-        },
-        "path-exists": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npm.taobao.org/path-exists/download/path-exists-4.0.0.tgz",
-          "integrity": "sha1-UTvb4tO5XXdi6METfvoZXGxhtbM="
-        },
-        "pkg-dir": {
-          "version": "4.2.0",
-          "resolved": "https://registry.npm.taobao.org/pkg-dir/download/pkg-dir-4.2.0.tgz?cache=0&sync_timestamp=1602859008602&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpkg-dir%2Fdownload%2Fpkg-dir-4.2.0.tgz",
-          "integrity": "sha1-8JkTPfft5CLoHR2ESCcO6z5CYfM=",
-          "requires": {
-            "find-up": "^4.0.0"
-          }
-        },
-        "rimraf": {
-          "version": "3.0.2",
-          "resolved": "https://registry.npm.taobao.org/rimraf/download/rimraf-3.0.2.tgz",
-          "integrity": "sha1-8aVAK6YiCtUswSgrrBrjqkn9Bho=",
-          "requires": {
-            "glob": "^7.1.3"
-          }
-        },
-        "semver": {
-          "version": "6.3.0",
-          "resolved": "https://registry.npm.taobao.org/semver/download/semver-6.3.0.tgz?cache=0&sync_timestamp=1616463540350&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsemver%2Fdownload%2Fsemver-6.3.0.tgz",
-          "integrity": "sha1-7gpkyK9ejO6mdoexM3YeG+y9HT0="
-        },
-        "ssri": {
-          "version": "8.0.1",
-          "resolved": "https://registry.nlark.com/ssri/download/ssri-8.0.1.tgz?cache=0&sync_timestamp=1621364918494&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fssri%2Fdownload%2Fssri-8.0.1.tgz",
-          "integrity": "sha1-Y45OQ54v+9LNKJd21cpFfE9Roq8=",
-          "requires": {
-            "minipass": "^3.1.1"
-          }
-        },
-        "yallist": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npm.taobao.org/yallist/download/yallist-4.0.0.tgz",
-          "integrity": "sha1-m7knkNnA7/7GO+c1GeEaNQGaOnI="
-        }
-      }
-    },
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npm.taobao.org/concat-map/download/concat-map-0.0.1.tgz",
@@ -6418,7 +6254,8 @@
     "fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npm.taobao.org/fast-deep-equal/download/fast-deep-equal-3.1.3.tgz?cache=0&sync_timestamp=1591599675178&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffast-deep-equal%2Fdownload%2Ffast-deep-equal-3.1.3.tgz",
-      "integrity": "sha1-On1WtVnWy8PrUSMlJE5hmmXGxSU="
+      "integrity": "sha1-On1WtVnWy8PrUSMlJE5hmmXGxSU=",
+      "dev": true
     },
     "fast-glob": {
       "version": "2.2.7",
@@ -6460,7 +6297,8 @@
     "fast-json-stable-stringify": {
       "version": "2.1.0",
       "resolved": "https://registry.npm.taobao.org/fast-json-stable-stringify/download/fast-json-stable-stringify-2.1.0.tgz",
-      "integrity": "sha1-h0v2nG9ATCtdmcSBNBOZ/VWJJjM="
+      "integrity": "sha1-h0v2nG9ATCtdmcSBNBOZ/VWJJjM=",
+      "dev": true
     },
     "fast-levenshtein": {
       "version": "2.0.6",
@@ -6752,6 +6590,7 @@
       "version": "2.1.0",
       "resolved": "https://registry.npm.taobao.org/fs-minipass/download/fs-minipass-2.1.0.tgz",
       "integrity": "sha1-f1A2/b8SxjwWkZDL5BmchSJx+fs=",
+      "dev": true,
       "requires": {
         "minipass": "^3.0.0"
       }
@@ -7346,6 +7185,11 @@
       "integrity": "sha1-dQ49tYYgh7RzfrrIIH/9HvJ7Jfw=",
       "dev": true
     },
+    "immutability-helper": {
+      "version": "3.1.1",
+      "resolved": "https://r.cnpmjs.org/immutability-helper/download/immutability-helper-3.1.1.tgz",
+      "integrity": "sha1-K4ayKG7TsSQcniO3sh4ERPUvd7c="
+    },
     "import-cwd": {
       "version": "2.1.0",
       "resolved": "https://registry.npm.taobao.org/import-cwd/download/import-cwd-2.1.0.tgz",
@@ -7387,12 +7231,14 @@
     "imurmurhash": {
       "version": "0.1.4",
       "resolved": "https://registry.npm.taobao.org/imurmurhash/download/imurmurhash-0.1.4.tgz",
-      "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o="
+      "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=",
+      "dev": true
     },
     "indent-string": {
       "version": "4.0.0",
       "resolved": "https://registry.npm.taobao.org/indent-string/download/indent-string-4.0.0.tgz",
-      "integrity": "sha1-Yk+PRJfWGbLZdoUx1Y9BIoVNclE="
+      "integrity": "sha1-Yk+PRJfWGbLZdoUx1Y9BIoVNclE=",
+      "dev": true
     },
     "indexes-of": {
       "version": "1.0.1",
@@ -7403,7 +7249,8 @@
     "infer-owner": {
       "version": "1.0.4",
       "resolved": "https://registry.npm.taobao.org/infer-owner/download/infer-owner-1.0.4.tgz",
-      "integrity": "sha1-xM78qo5RBRwqQLos6KPScpWvlGc="
+      "integrity": "sha1-xM78qo5RBRwqQLos6KPScpWvlGc=",
+      "dev": true
     },
     "inflight": {
       "version": "1.0.6",
@@ -8049,7 +7896,8 @@
     "json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npm.taobao.org/json-schema-traverse/download/json-schema-traverse-0.4.1.tgz",
-      "integrity": "sha1-afaofZUTq4u4/mO9sJecRI5oRmA="
+      "integrity": "sha1-afaofZUTq4u4/mO9sJecRI5oRmA=",
+      "dev": true
     },
     "json-stable-stringify": {
       "version": "1.0.1",
@@ -9148,6 +8996,7 @@
       "version": "3.1.3",
       "resolved": "https://registry.npm.taobao.org/minipass/download/minipass-3.1.3.tgz",
       "integrity": "sha1-fUL/HzljVILhX5zbUxhN7r1YFf0=",
+      "dev": true,
       "requires": {
         "yallist": "^4.0.0"
       },
@@ -9155,7 +9004,8 @@
         "yallist": {
           "version": "4.0.0",
           "resolved": "https://registry.npm.taobao.org/yallist/download/yallist-4.0.0.tgz",
-          "integrity": "sha1-m7knkNnA7/7GO+c1GeEaNQGaOnI="
+          "integrity": "sha1-m7knkNnA7/7GO+c1GeEaNQGaOnI=",
+          "dev": true
         }
       }
     },
@@ -9163,6 +9013,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npm.taobao.org/minipass-collect/download/minipass-collect-1.0.2.tgz",
       "integrity": "sha1-IrgTv3Rdxu26JXa5QAIq1u3Ixhc=",
+      "dev": true,
       "requires": {
         "minipass": "^3.0.0"
       }
@@ -9171,6 +9022,7 @@
       "version": "1.0.5",
       "resolved": "https://registry.npm.taobao.org/minipass-flush/download/minipass-flush-1.0.5.tgz",
       "integrity": "sha1-gucTXX6JpQ/+ZGEKeHlTxMTLs3M=",
+      "dev": true,
       "requires": {
         "minipass": "^3.0.0"
       }
@@ -9179,26 +9031,11 @@
       "version": "1.2.4",
       "resolved": "https://registry.npm.taobao.org/minipass-pipeline/download/minipass-pipeline-1.2.4.tgz?cache=0&sync_timestamp=1595998565446&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fminipass-pipeline%2Fdownload%2Fminipass-pipeline-1.2.4.tgz",
       "integrity": "sha1-aEcveXEcCEZXwGfFxq2Tzd6oIUw=",
+      "dev": true,
       "requires": {
         "minipass": "^3.0.0"
       }
     },
-    "minizlib": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npm.taobao.org/minizlib/download/minizlib-2.1.2.tgz",
-      "integrity": "sha1-6Q00Zrogm5MkUVCKEc49NjIUWTE=",
-      "requires": {
-        "minipass": "^3.0.0",
-        "yallist": "^4.0.0"
-      },
-      "dependencies": {
-        "yallist": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npm.taobao.org/yallist/download/yallist-4.0.0.tgz",
-          "integrity": "sha1-m7knkNnA7/7GO+c1GeEaNQGaOnI="
-        }
-      }
-    },
     "mississippi": {
       "version": "3.0.0",
       "resolved": "https://registry.npm.taobao.org/mississippi/download/mississippi-3.0.0.tgz",
@@ -9777,6 +9614,7 @@
       "version": "2.3.0",
       "resolved": "https://registry.npm.taobao.org/p-limit/download/p-limit-2.3.0.tgz?cache=0&sync_timestamp=1594559733720&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fp-limit%2Fdownload%2Fp-limit-2.3.0.tgz",
       "integrity": "sha1-PdM8ZHohT9//2DWTPrCG2g3CHbE=",
+      "dev": true,
       "requires": {
         "p-try": "^2.0.0"
       }
@@ -9811,7 +9649,8 @@
     "p-try": {
       "version": "2.2.0",
       "resolved": "https://registry.npm.taobao.org/p-try/download/p-try-2.2.0.tgz",
-      "integrity": "sha1-yyhoVA4xPWHeWPr741zpAE1VQOY="
+      "integrity": "sha1-yyhoVA4xPWHeWPr741zpAE1VQOY=",
+      "dev": true
     },
     "pako": {
       "version": "1.0.11",
@@ -10728,7 +10567,8 @@
     "promise-inflight": {
       "version": "1.0.1",
       "resolved": "https://registry.npm.taobao.org/promise-inflight/download/promise-inflight-1.0.1.tgz",
-      "integrity": "sha1-mEcocL8igTL8vdhoEputEsPAKeM="
+      "integrity": "sha1-mEcocL8igTL8vdhoEputEsPAKeM=",
+      "dev": true
     },
     "proxy-addr": {
       "version": "2.0.6",
@@ -10816,7 +10656,8 @@
     "punycode": {
       "version": "2.1.1",
       "resolved": "https://registry.npm.taobao.org/punycode/download/punycode-2.1.1.tgz",
-      "integrity": "sha1-tYsBCsQMIsVldhbI0sLALHv0eew="
+      "integrity": "sha1-tYsBCsQMIsVldhbI0sLALHv0eew=",
+      "dev": true
     },
     "q": {
       "version": "1.5.1",
@@ -10870,6 +10711,7 @@
       "version": "2.1.0",
       "resolved": "https://registry.npm.taobao.org/randombytes/download/randombytes-2.1.0.tgz",
       "integrity": "sha1-32+ENy8CcNxlzfYpE0mrekc9Tyo=",
+      "dev": true,
       "requires": {
         "safe-buffer": "^5.1.0"
       }
@@ -11371,7 +11213,8 @@
     "safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npm.taobao.org/safe-buffer/download/safe-buffer-5.1.2.tgz?cache=0&sync_timestamp=1589129010497&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsafe-buffer%2Fdownload%2Fsafe-buffer-5.1.2.tgz",
-      "integrity": "sha1-mR7GnSluAxN0fVm9/St0XDX4go0="
+      "integrity": "sha1-mR7GnSluAxN0fVm9/St0XDX4go0=",
+      "dev": true
     },
     "safe-regex": {
       "version": "1.1.0",
@@ -11428,6 +11271,7 @@
       "version": "2.7.1",
       "resolved": "https://registry.npm.taobao.org/schema-utils/download/schema-utils-2.7.1.tgz?cache=0&sync_timestamp=1598871845041&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fschema-utils%2Fdownload%2Fschema-utils-2.7.1.tgz",
       "integrity": "sha1-HKTzLRskxZDCA7jnpQvw6kzTlNc=",
+      "dev": true,
       "requires": {
         "@types/json-schema": "^7.0.5",
         "ajv": "^6.12.4",
@@ -11523,6 +11367,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npm.taobao.org/serialize-javascript/download/serialize-javascript-4.0.0.tgz?cache=0&sync_timestamp=1599740666792&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fserialize-javascript%2Fdownload%2Fserialize-javascript-4.0.0.tgz",
       "integrity": "sha1-tSXhI4SJpez8Qq+sw/6Z5mb0sao=",
+      "dev": true,
       "requires": {
         "randombytes": "^2.1.0"
       }
@@ -11913,7 +11758,8 @@
     "source-list-map": {
       "version": "2.0.1",
       "resolved": "https://registry.npm.taobao.org/source-list-map/download/source-list-map-2.0.1.tgz",
-      "integrity": "sha1-OZO9hzv8SEecyp6jpUeDXHwVSzQ="
+      "integrity": "sha1-OZO9hzv8SEecyp6jpUeDXHwVSzQ=",
+      "dev": true
     },
     "source-map": {
       "version": "0.5.7",
@@ -12400,36 +12246,6 @@
       "integrity": "sha1-ofzMBrWNth/XpF2i2kT186Pme6I=",
       "dev": true
     },
-    "tar": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npm.taobao.org/tar/download/tar-6.1.0.tgz?cache=0&sync_timestamp=1610045517836&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ftar%2Fdownload%2Ftar-6.1.0.tgz",
-      "integrity": "sha1-0XJOm8wEuXexjVxXOzM6IgcimoM=",
-      "requires": {
-        "chownr": "^2.0.0",
-        "fs-minipass": "^2.0.0",
-        "minipass": "^3.0.0",
-        "minizlib": "^2.1.1",
-        "mkdirp": "^1.0.3",
-        "yallist": "^4.0.0"
-      },
-      "dependencies": {
-        "chownr": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npm.taobao.org/chownr/download/chownr-2.0.0.tgz",
-          "integrity": "sha1-Fb++U9LqtM9w8YqM1o6+Wzyx3s4="
-        },
-        "mkdirp": {
-          "version": "1.0.4",
-          "resolved": "https://registry.npm.taobao.org/mkdirp/download/mkdirp-1.0.4.tgz",
-          "integrity": "sha1-PrXtYmInVteaXw4qIh3+utdcL34="
-        },
-        "yallist": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npm.taobao.org/yallist/download/yallist-4.0.0.tgz",
-          "integrity": "sha1-m7knkNnA7/7GO+c1GeEaNQGaOnI="
-        }
-      }
-    },
     "terser": {
       "version": "4.8.0",
       "resolved": "https://registry.npm.taobao.org/terser/download/terser-4.8.0.tgz?cache=0&sync_timestamp=1599751634645&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fterser%2Fdownload%2Fterser-4.8.0.tgz",
@@ -12799,6 +12615,7 @@
       "version": "1.1.1",
       "resolved": "https://registry.npm.taobao.org/unique-filename/download/unique-filename-1.1.1.tgz",
       "integrity": "sha1-HWl2k2mtoFgxA6HmrodoG1ZXMjA=",
+      "dev": true,
       "requires": {
         "unique-slug": "^2.0.0"
       }
@@ -12807,6 +12624,7 @@
       "version": "2.0.2",
       "resolved": "https://registry.npm.taobao.org/unique-slug/download/unique-slug-2.0.2.tgz",
       "integrity": "sha1-uqvOkQg/xk6UWw861hPiZPfNTmw=",
+      "dev": true,
       "requires": {
         "imurmurhash": "^0.1.4"
       }
@@ -12885,6 +12703,7 @@
       "version": "4.4.0",
       "resolved": "https://registry.npm.taobao.org/uri-js/download/uri-js-4.4.0.tgz?cache=0&sync_timestamp=1598814527552&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Furi-js%2Fdownload%2Furi-js-4.4.0.tgz",
       "integrity": "sha1-qnFCYd55PoqCNHp7zJznTobyhgI=",
+      "dev": true,
       "requires": {
         "punycode": "^2.1.0"
       }
@@ -13166,6 +12985,15 @@
         }
       }
     },
+    "vue-nestable": {
+      "version": "2.6.0",
+      "resolved": "https://r.cnpmjs.org/vue-nestable/download/vue-nestable-2.6.0.tgz",
+      "integrity": "sha1-cxmJ5/i5dM0P0M1xD85iS3Uu/Pw=",
+      "requires": {
+        "immutability-helper": "^3.1.1",
+        "vue": "^2.6.12"
+      }
+    },
     "vue-ref": {
       "version": "2.0.0",
       "resolved": "https://registry.npm.taobao.org/vue-ref/download/vue-ref-2.0.0.tgz",
@@ -13869,6 +13697,7 @@
       "version": "1.4.3",
       "resolved": "http://npm.xesv5.com/webpack-sources/-/webpack-sources-1.4.3.tgz",
       "integrity": "sha1-7t2OwLko+/HL/plOItLYkPMwqTM=",
+      "dev": true,
       "requires": {
         "source-list-map": "^2.0.0",
         "source-map": "~0.6.1"
@@ -13877,7 +13706,8 @@
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npm.taobao.org/source-map/download/source-map-0.6.1.tgz",
-          "integrity": "sha1-dHIq8y6WFOnCh6jQu95IteLxomM="
+          "integrity": "sha1-dHIq8y6WFOnCh6jQu95IteLxomM=",
+          "dev": true
         }
       }
     },

package.json

@@ -51,6 +51,7 @@
     "vant": "^2.10.7",
     "view-design": "^4.3.2",
     "vue": "^2.6.11",
+    "vue-nestable": "^2.6.0",
     "vue-router": "^3.4.9",
     "vuex": "^3.1.2"
   },

public/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title>拖拽式Vue组件代码生成编辑器(VCC)</title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

src/assets/nestable.css

@@ -0,0 +1,106 @@
+/*
+* Style for nestable
+*/
+.nestable {
+  position: relative;
+}
+
+.nestable-rtl {
+  direction: rtl;
+}
+
+.nestable .nestable-list {
+  margin: 0;
+  padding: 0 0 0 40px;
+  list-style-type: none;
+}
+
+.nestable-rtl .nestable-list {
+  padding: 0 40px 0 0;
+}
+
+.nestable>.nestable-list {
+  padding: 0;
+}
+
+.nestable-item,
+.nestable-item-copy {
+  margin: 10px 0 0;
+}
+
+.nestable-item:first-child,
+.nestable-item-copy:first-child {
+  margin-top: 0;
+}
+
+.nestable-item .nestable-list,
+.nestable-item-copy .nestable-list {
+  margin-top: 10px;
+}
+
+.nestable-item {
+  position: relative;
+}
+
+.nestable-item.is-dragging .nestable-list {
+  pointer-events: none;
+}
+
+.nestable-item.is-dragging * {
+  opacity: 0;
+  filter: alpha(opacity=0);
+}
+
+.nestable-item.is-dragging:before {
+  content: ' ';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(106, 127, 233, 0.274);
+  border: 1px dashed rgb(73, 100, 241);
+  -webkit-border-radius: 5px;
+  border-radius: 5px;
+}
+
+.nestable-drag-layer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 100;
+  pointer-events: none;
+}
+
+.nestable-rtl .nestable-drag-layer {
+  left: auto;
+  right: 0;
+}
+
+.nestable-drag-layer>.nestable-list {
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 0;
+  background-color: rgba(106, 127, 233, 0.274);
+}
+
+.nestable-rtl .nestable-drag-layer>.nestable-list {
+  padding: 0;
+}
+
+.nestable [draggable="true"] {
+  cursor: move;
+}
+
+.nestable-handle {
+  display: inline;
+}
+
+.expandable .has-children ol {
+  display: none;
+}
+
+.expandable .has-children.is-active>ol {
+  display: block;
+}

src/components-v2/VCC.vue

@@ -38,7 +38,7 @@
       <lc-code :rawCode="code" :codeDialogVisible.sync="codeDialogVisible">
       </lc-code>
       <code-structure @save="onSaveAttr" @remove="onRemove" ref="codeStructure" :visible.sync="structureVisible"
-        @codeRefresh="generateVueCode">
+        @codeRefresh="generateVueCode" @onLevelChange="onLevelChange">
       </code-structure>
     </div>
 
@@ -55,6 +55,7 @@ import { splitInit } from "../libs/split-init";
 import { MainPanelProvider } from "../libs/main-panel";
 import ToolsBar from "./ToolsBar";
 import { initContainerForLine } from "@/utils/lineHelper";
+
 const keymaster = require('keymaster');
 
 import AttributeInput from "../components/AttributeInput";
@@ -207,6 +208,11 @@ export default {
     onSaveAttr({ resultList, lc_id }) {
       this.mainPanelProvider.saveAttribute(resultList, lc_id);
     },
+
+    onLevelChange(removeID, movePath){
+      this.mainPanelProvider.onLevelChange(removeID, movePath);
+    },
+
     generateVueCode() { },
     onRemove({ lc_id }) {
       this.mainPanelProvider.remove(lc_id);

src/components/CodeStructure.vue

@@ -11,8 +11,21 @@
       <el-row :gutter="20" style="height:0px;flex-grow:1;">
         <el-col :span="16" style="height: 100%;">
           <div style="overflow: scroll;height:100%; margin: 0 20px;padding: 10px;">
-            <v-tree :radio="true" :canDeleteRoot="false" :data='treeData' :draggable='false' :halfcheck='false'
+
-              :multiple="false" @node-click="onNodeClick" />
+            <vue-nestable v-model="treeData" @change="onLevelChange">
+              <template slot-scope="{ item }">
+                <vue-nestable-handle :item="item">
+                  拖
+                </vue-nestable-handle>
+
+                <span @click="onNodeClick(item)">{{ item.text }}</span>
+              </template>
+
+              <div slot="placeholder">
+                <b>The editor is empty.</b>
+              </div>
+            </vue-nestable>
+
           </div>
         </el-col>
         <el-col :span="8">
@@ -29,14 +42,15 @@
 
 <script>
 import "./halower-tree.min.css";
-import { VTree } from '@/libs/v2-tree'
+import { isObject, getRawComponentKey, getRawComponentContent } from "@/utils/common";
-import { isObject } from "@/utils/common";
+import { VueNestable, VueNestableHandle } from 'vue-nestable';
 
 export default {
   props: ['visible'],
   components: {
-    VTree,
     AttributeInput: resolve => { require(["./AttributeInput"], resolve) },
+    VueNestable,
+    VueNestableHandle
   },
 
   data() {
@@ -61,14 +75,12 @@ export default {
     codeRefresh() {
       this.$emit('codeRefresh');
     },
-
+    onLevelChange(value, options) {
-    // 获取这个节点的key
+      this.$emit('onLevelChange', value.id, options.pathTo);
-    getRawComponentKey(__rawVueInfo__) {
-      return Object.keys(__rawVueInfo__)[0];
     },
 
     convertStructure(rawInfo) {
-      const title = this.getRawComponentKey(rawInfo);
+      const title = getRawComponentKey(rawInfo);
       const object = rawInfo[title];
       const children = [];
       if (isObject(object)) {
@@ -92,10 +104,11 @@ export default {
         }
 
         return {
-          title: title,
+          text: title,
           expanded: true,
           children: children,
           rawInfo: rawInfo,
+          id: getRawComponentContent(rawInfo).lc_id
         }
       } else {
         return null;

src/libs/main-panel.js

@@ -211,7 +211,7 @@ export class MainPanelProvider {
 
         // 拖入预览容器释放时的处理
         renderControlPanel.addEventListener("drop", (event) => {
-            if(!this.currentPointDropInfo.target){
+            if (!this.currentPointDropInfo.target) {
                 return;
             }
 
@@ -356,11 +356,39 @@ export class MainPanelProvider {
         return this;
     }
 
+    /**
+     * 移动一个节点到另一个节点
+     * @param {*} removeID 被移动的节点
+     * @param {*} movePath 移动的路径
+     */
+    onLevelChange(removeID, movePath) {
+        this.backup();
+
+        const removedNodeArray = this.remove(removeID, false);
+        // 去除根节点路径，以便完全匹配
+        movePath.splice(0, 1)
+
+        let rootNode = this._rawDataStructure;
+        let lastIndex = -1;
+        for (let i = 0; i < movePath.length - 1; i++) {
+            rootNode = getRawComponentContent(rootNode).__children[movePath[i]];
+            lastIndex = movePath[i + 1];
+        }
+
+        if (rootNode && removedNodeArray.length > 0) {
+            getRawComponentContent(rootNode).__children.splice(lastIndex, 0, removedNodeArray[0]);
+        }
+
+        // 渲染当前的变更
+        this.render(this._rawDataStructure);
+    }
+
     /**
      * 移除一个节点
      * @param {*} lc_id 
      */
-    remove(lc_id) {
+    remove(lc_id, backup = true) {
+        let removeNodes = null;
         const readyForDeleteElement = document.querySelector(`[lc_id="${lc_id}"]`);
         if (readyForDeleteElement) {
             const parentElementNode = findCodeElemNode(readyForDeleteElement.parentElement);
@@ -376,8 +404,8 @@ export class MainPanelProvider {
                         return getRawComponentContent(item).lc_id == lc_id;
                     });
 
-                    this.backup();
+                    backup && this.backup();
-                    childrenArray.splice(index, 1);
+                    removeNodes = childrenArray.splice(index, 1);
                     this.eventEmitter.emit("onNodeDeleted");
 
                     // 渲染当前的变更
@@ -391,6 +419,8 @@ export class MainPanelProvider {
         } else {
             console.warn(`没有发现lc_id: ${lc_id}所对应的Dom节点`);
         }
+
+        return removeNodes;
     }
 
     /**

src/main.js

@@ -6,6 +6,8 @@ import AntdUI from "ant-design-vue";
 import "ant-design-vue/dist/antd.css";
 import APP from "./App.vue";
 
+import "./assets/nestable.css"
+
 Vue.use(ElementUI);
 Vue.use(AntdUI);