refactor: use tsx refactor selector component

package-lock.json

@@ -9,16 +9,438 @@
       "resolved": "http://192.168.250.101:4873/@amap%2famap-jsapi-loader/-/amap-jsapi-loader-1.0.1.tgz",
       "integrity": "sha1-nsS01dJGfqxFH2yFLjXbaen58MA="
     },
+    "@babel/code-frame": {
+      "version": "7.12.13",
+      "resolved": "http://192.168.250.101:4873/@babel%2fcode-frame/-/code-frame-7.12.13.tgz",
+      "integrity": "sha1-3PyCa+72XnXFDiHTg319lXmN1lg=",
+      "dev": true,
+      "requires": {
+        "@babel/highlight": "^7.12.13"
+      }
+    },
+    "@babel/compat-data": {
+      "version": "7.13.15",
+      "resolved": "http://192.168.250.101:4873/@babel%2fcompat-data/-/compat-data-7.13.15.tgz",
+      "integrity": "sha1-fo7qQtC2T9orN1si0GxgUiLoSPQ=",
+      "dev": true
+    },
+    "@babel/core": {
+      "version": "7.13.15",
+      "resolved": "http://192.168.250.101:4873/@babel%2fcore/-/core-7.13.15.tgz",
+      "integrity": "sha1-ptQJF98CdIe1QxIgKgaBLE93ktA=",
+      "dev": true,
+      "requires": {
+        "@babel/code-frame": "^7.12.13",
+        "@babel/generator": "^7.13.9",
+        "@babel/helper-compilation-targets": "^7.13.13",
+        "@babel/helper-module-transforms": "^7.13.14",
+        "@babel/helpers": "^7.13.10",
+        "@babel/parser": "^7.13.15",
+        "@babel/template": "^7.12.13",
+        "@babel/traverse": "^7.13.15",
+        "@babel/types": "^7.13.14",
+        "convert-source-map": "^1.7.0",
+        "debug": "^4.1.0",
+        "gensync": "^1.0.0-beta.2",
+        "json5": "^2.1.2",
+        "semver": "^6.3.0",
+        "source-map": "^0.5.0"
+      },
+      "dependencies": {
+        "@babel/parser": {
+          "version": "7.13.15",
+          "resolved": "http://192.168.250.101:4873/@babel%2fparser/-/parser-7.13.15.tgz",
+          "integrity": "sha1-jmZ3X7UjWZrLaiieEpKfpasJVNg=",
+          "dev": true
+        },
+        "@babel/types": {
+          "version": "7.13.14",
+          "resolved": "http://192.168.250.101:4873/@babel%2ftypes/-/types-7.13.14.tgz",
+          "integrity": "sha1-w1pKuxXHzUWidG14qzKONiy6zg0=",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.12.11",
+            "lodash": "^4.17.19",
+            "to-fast-properties": "^2.0.0"
+          }
+        },
+        "json5": {
+          "version": "2.2.0",
+          "resolved": "http://192.168.250.101:4873/json5/-/json5-2.2.0.tgz",
+          "integrity": "sha1-Lf7+cgxrpSXZ69kJlQ8FFTFsiaM=",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.5"
+          }
+        },
+        "source-map": {
+          "version": "0.5.7",
+          "resolved": "http://192.168.250.101:4873/source-map/-/source-map-0.5.7.tgz",
+          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
+          "dev": true
+        }
+      }
+    },
+    "@babel/generator": {
+      "version": "7.13.9",
+      "resolved": "http://192.168.250.101:4873/@babel%2fgenerator/-/generator-7.13.9.tgz",
+      "integrity": "sha1-Onqpb577jivkLTjYDizrTGTY3jk=",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.13.0",
+        "jsesc": "^2.5.1",
+        "source-map": "^0.5.0"
+      },
+      "dependencies": {
+        "@babel/types": {
+          "version": "7.13.14",
+          "resolved": "http://192.168.250.101:4873/@babel%2ftypes/-/types-7.13.14.tgz",
+          "integrity": "sha1-w1pKuxXHzUWidG14qzKONiy6zg0=",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.12.11",
+            "lodash": "^4.17.19",
+            "to-fast-properties": "^2.0.0"
+          }
+        },
+        "source-map": {
+          "version": "0.5.7",
+          "resolved": "http://192.168.250.101:4873/source-map/-/source-map-0.5.7.tgz",
+          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
+          "dev": true
+        }
+      }
+    },
+    "@babel/helper-compilation-targets": {
+      "version": "7.13.13",
+      "resolved": "http://192.168.250.101:4873/@babel%2fhelper-compilation-targets/-/helper-compilation-targets-7.13.13.tgz",
+      "integrity": "sha1-KylyoJJkdIU/QeStvGkzj1IGAOU=",
+      "dev": true,
+      "requires": {
+        "@babel/compat-data": "^7.13.12",
+        "@babel/helper-validator-option": "^7.12.17",
+        "browserslist": "^4.14.5",
+        "semver": "^6.3.0"
+      }
+    },
+    "@babel/helper-create-class-features-plugin": {
+      "version": "7.13.11",
+      "resolved": "http://192.168.250.101:4873/@babel%2fhelper-create-class-features-plugin/-/helper-create-class-features-plugin-7.13.11.tgz",
+      "integrity": "sha1-MNMKAFvKLJU/VlP8JQkaSSF39PY=",
+      "dev": true,
+      "requires": {
+        "@babel/helper-function-name": "^7.12.13",
+        "@babel/helper-member-expression-to-functions": "^7.13.0",
+        "@babel/helper-optimise-call-expression": "^7.12.13",
+        "@babel/helper-replace-supers": "^7.13.0",
+        "@babel/helper-split-export-declaration": "^7.12.13"
+      }
+    },
+    "@babel/helper-function-name": {
+      "version": "7.12.13",
+      "resolved": "http://192.168.250.101:4873/@babel%2fhelper-function-name/-/helper-function-name-7.12.13.tgz",
+      "integrity": "sha1-k61lbbPDwiMlWf17LD29y+DrN3o=",
+      "dev": true,
+      "requires": {
+        "@babel/helper-get-function-arity": "^7.12.13",
+        "@babel/template": "^7.12.13",
+        "@babel/types": "^7.12.13"
+      },
+      "dependencies": {
+        "@babel/types": {
+          "version": "7.13.14",
+          "resolved": "http://192.168.250.101:4873/@babel%2ftypes/-/types-7.13.14.tgz",
+          "integrity": "sha1-w1pKuxXHzUWidG14qzKONiy6zg0=",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.12.11",
+            "lodash": "^4.17.19",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
+      }
+    },
+    "@babel/helper-get-function-arity": {
+      "version": "7.12.13",
+      "resolved": "http://192.168.250.101:4873/@babel%2fhelper-get-function-arity/-/helper-get-function-arity-7.12.13.tgz",
+      "integrity": "sha1-vGNFHUA6OzCCuX4diz/lvUCR5YM=",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.12.13"
+      },
+      "dependencies": {
+        "@babel/types": {
+          "version": "7.13.14",
+          "resolved": "http://192.168.250.101:4873/@babel%2ftypes/-/types-7.13.14.tgz",
+          "integrity": "sha1-w1pKuxXHzUWidG14qzKONiy6zg0=",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.12.11",
+            "lodash": "^4.17.19",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
+      }
+    },
+    "@babel/helper-member-expression-to-functions": {
+      "version": "7.13.12",
+      "resolved": "http://192.168.250.101:4873/@babel%2fhelper-member-expression-to-functions/-/helper-member-expression-to-functions-7.13.12.tgz",
+      "integrity": "sha1-3+No8m1CagcpnY1lE4IXaCFubXI=",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.13.12"
+      },
+      "dependencies": {
+        "@babel/types": {
+          "version": "7.13.14",
+          "resolved": "http://192.168.250.101:4873/@babel%2ftypes/-/types-7.13.14.tgz",
+          "integrity": "sha1-w1pKuxXHzUWidG14qzKONiy6zg0=",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.12.11",
+            "lodash": "^4.17.19",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
+      }
+    },
+    "@babel/helper-module-imports": {
+      "version": "7.13.12",
+      "resolved": "http://192.168.250.101:4873/@babel%2fhelper-module-imports/-/helper-module-imports-7.13.12.tgz",
+      "integrity": "sha1-xqNppvNiHLJdoBQHhoTakZa2GXc=",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.13.12"
+      },
+      "dependencies": {
+        "@babel/types": {
+          "version": "7.13.14",
+          "resolved": "http://192.168.250.101:4873/@babel%2ftypes/-/types-7.13.14.tgz",
+          "integrity": "sha1-w1pKuxXHzUWidG14qzKONiy6zg0=",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.12.11",
+            "lodash": "^4.17.19",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
+      }
+    },
+    "@babel/helper-module-transforms": {
+      "version": "7.13.14",
+      "resolved": "http://192.168.250.101:4873/@babel%2fhelper-module-transforms/-/helper-module-transforms-7.13.14.tgz",
+      "integrity": "sha1-5gBlK6SMyxZBd1QTyzLPpOi0le8=",
+      "dev": true,
+      "requires": {
+        "@babel/helper-module-imports": "^7.13.12",
+        "@babel/helper-replace-supers": "^7.13.12",
+        "@babel/helper-simple-access": "^7.13.12",
+        "@babel/helper-split-export-declaration": "^7.12.13",
+        "@babel/helper-validator-identifier": "^7.12.11",
+        "@babel/template": "^7.12.13",
+        "@babel/traverse": "^7.13.13",
+        "@babel/types": "^7.13.14"
+      },
+      "dependencies": {
+        "@babel/types": {
+          "version": "7.13.14",
+          "resolved": "http://192.168.250.101:4873/@babel%2ftypes/-/types-7.13.14.tgz",
+          "integrity": "sha1-w1pKuxXHzUWidG14qzKONiy6zg0=",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.12.11",
+            "lodash": "^4.17.19",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
+      }
+    },
+    "@babel/helper-optimise-call-expression": {
+      "version": "7.12.13",
+      "resolved": "http://192.168.250.101:4873/@babel%2fhelper-optimise-call-expression/-/helper-optimise-call-expression-7.12.13.tgz",
+      "integrity": "sha1-XALRcbTIYVsecWP4iMHIHDCiquo=",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.12.13"
+      },
+      "dependencies": {
+        "@babel/types": {
+          "version": "7.13.14",
+          "resolved": "http://192.168.250.101:4873/@babel%2ftypes/-/types-7.13.14.tgz",
+          "integrity": "sha1-w1pKuxXHzUWidG14qzKONiy6zg0=",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.12.11",
+            "lodash": "^4.17.19",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
+      }
+    },
+    "@babel/helper-plugin-utils": {
+      "version": "7.13.0",
+      "resolved": "http://192.168.250.101:4873/@babel%2fhelper-plugin-utils/-/helper-plugin-utils-7.13.0.tgz",
+      "integrity": "sha1-gGUmzhJa7QM3O8QWqCgyHjpqM68=",
+      "dev": true
+    },
+    "@babel/helper-replace-supers": {
+      "version": "7.13.12",
+      "resolved": "http://192.168.250.101:4873/@babel%2fhelper-replace-supers/-/helper-replace-supers-7.13.12.tgz",
+      "integrity": "sha1-ZEL0wa2RJQJIGlZKc4beDHf/OAQ=",
+      "dev": true,
+      "requires": {
+        "@babel/helper-member-expression-to-functions": "^7.13.12",
+        "@babel/helper-optimise-call-expression": "^7.12.13",
+        "@babel/traverse": "^7.13.0",
+        "@babel/types": "^7.13.12"
+      },
+      "dependencies": {
+        "@babel/types": {
+          "version": "7.13.14",
+          "resolved": "http://192.168.250.101:4873/@babel%2ftypes/-/types-7.13.14.tgz",
+          "integrity": "sha1-w1pKuxXHzUWidG14qzKONiy6zg0=",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.12.11",
+            "lodash": "^4.17.19",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
+      }
+    },
+    "@babel/helper-simple-access": {
+      "version": "7.13.12",
+      "resolved": "http://192.168.250.101:4873/@babel%2fhelper-simple-access/-/helper-simple-access-7.13.12.tgz",
+      "integrity": "sha1-3WxTivthgZ0gWgEsMXkqOcel6vY=",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.13.12"
+      },
+      "dependencies": {
+        "@babel/types": {
+          "version": "7.13.14",
+          "resolved": "http://192.168.250.101:4873/@babel%2ftypes/-/types-7.13.14.tgz",
+          "integrity": "sha1-w1pKuxXHzUWidG14qzKONiy6zg0=",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.12.11",
+            "lodash": "^4.17.19",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
+      }
+    },
+    "@babel/helper-split-export-declaration": {
+      "version": "7.12.13",
+      "resolved": "http://192.168.250.101:4873/@babel%2fhelper-split-export-declaration/-/helper-split-export-declaration-7.12.13.tgz",
+      "integrity": "sha1-6UML4AuvPoiw4T5vnU6vITY3KwU=",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.12.13"
+      },
+      "dependencies": {
+        "@babel/types": {
+          "version": "7.13.14",
+          "resolved": "http://192.168.250.101:4873/@babel%2ftypes/-/types-7.13.14.tgz",
+          "integrity": "sha1-w1pKuxXHzUWidG14qzKONiy6zg0=",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.12.11",
+            "lodash": "^4.17.19",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
+      }
+    },
     "@babel/helper-validator-identifier": {
       "version": "7.12.11",
       "resolved": "http://192.168.250.101:4873/@babel%2fhelper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz",
       "integrity": "sha1-yaHwIZF9y1zPDU5FPjmQIpgfye0="
     },
+    "@babel/helper-validator-option": {
+      "version": "7.12.17",
+      "resolved": "http://192.168.250.101:4873/@babel%2fhelper-validator-option/-/helper-validator-option-7.12.17.tgz",
+      "integrity": "sha1-0fvwEuGnm37rv9xtJwuq+NnrmDE=",
+      "dev": true
+    },
+    "@babel/helpers": {
+      "version": "7.13.10",
+      "resolved": "http://192.168.250.101:4873/@babel%2fhelpers/-/helpers-7.13.10.tgz",
+      "integrity": "sha1-/Y4rp0iFM83qxFzBWOnryl48ffg=",
+      "dev": true,
+      "requires": {
+        "@babel/template": "^7.12.13",
+        "@babel/traverse": "^7.13.0",
+        "@babel/types": "^7.13.0"
+      },
+      "dependencies": {
+        "@babel/types": {
+          "version": "7.13.14",
+          "resolved": "http://192.168.250.101:4873/@babel%2ftypes/-/types-7.13.14.tgz",
+          "integrity": "sha1-w1pKuxXHzUWidG14qzKONiy6zg0=",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.12.11",
+            "lodash": "^4.17.19",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
+      }
+    },
+    "@babel/highlight": {
+      "version": "7.13.10",
+      "resolved": "http://192.168.250.101:4873/@babel%2fhighlight/-/highlight-7.13.10.tgz",
+      "integrity": "sha1-qLKmYUj1sn1maxXYF3Q0enMdUtE=",
+      "dev": true,
+      "requires": {
+        "@babel/helper-validator-identifier": "^7.12.11",
+        "chalk": "^2.0.0",
+        "js-tokens": "^4.0.0"
+      }
+    },
     "@babel/parser": {
       "version": "7.12.11",
       "resolved": "http://192.168.250.101:4873/@babel%2fparser/-/parser-7.12.11.tgz",
       "integrity": "sha1-nONZW810vFxGaQXobFNbiyUBHnk="
     },
+    "@babel/plugin-syntax-import-meta": {
+      "version": "7.10.4",
+      "resolved": "http://192.168.250.101:4873/@babel%2fplugin-syntax-import-meta/-/plugin-syntax-import-meta-7.10.4.tgz",
+      "integrity": "sha1-7mATSMNw+jNNIge+FYd3SWUh/VE=",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      }
+    },
+    "@babel/plugin-syntax-jsx": {
+      "version": "7.12.13",
+      "resolved": "http://192.168.250.101:4873/@babel%2fplugin-syntax-jsx/-/plugin-syntax-jsx-7.12.13.tgz",
+      "integrity": "sha1-BE+4HrrWaY/mLEeIdVdby7m3DxU=",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.12.13"
+      }
+    },
+    "@babel/plugin-syntax-typescript": {
+      "version": "7.12.13",
+      "resolved": "http://192.168.250.101:4873/@babel%2fplugin-syntax-typescript/-/plugin-syntax-typescript-7.12.13.tgz",
+      "integrity": "sha1-nf8RHKZBVM7w9NxSz4Q9nxLORHQ=",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.12.13"
+      }
+    },
+    "@babel/plugin-transform-typescript": {
+      "version": "7.13.0",
+      "resolved": "http://192.168.250.101:4873/@babel%2fplugin-transform-typescript/-/plugin-transform-typescript-7.13.0.tgz",
+      "integrity": "sha1-SkmOHzYANC0qnmH2ATEBj1V3SFM=",
+      "dev": true,
+      "requires": {
+        "@babel/helper-create-class-features-plugin": "^7.13.0",
+        "@babel/helper-plugin-utils": "^7.13.0",
+        "@babel/plugin-syntax-typescript": "^7.12.13"
+      }
+    },
     "@babel/runtime": {
       "version": "7.13.10",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.13.10.tgz",
@@ -36,6 +458,71 @@
         "regenerator-runtime": "^0.13.4"
       }
     },
+    "@babel/template": {
+      "version": "7.12.13",
+      "resolved": "http://192.168.250.101:4873/@babel%2ftemplate/-/template-7.12.13.tgz",
+      "integrity": "sha1-UwJlvooliduzdSOETFvLVZR/syc=",
+      "dev": true,
+      "requires": {
+        "@babel/code-frame": "^7.12.13",
+        "@babel/parser": "^7.12.13",
+        "@babel/types": "^7.12.13"
+      },
+      "dependencies": {
+        "@babel/parser": {
+          "version": "7.13.15",
+          "resolved": "http://192.168.250.101:4873/@babel%2fparser/-/parser-7.13.15.tgz",
+          "integrity": "sha1-jmZ3X7UjWZrLaiieEpKfpasJVNg=",
+          "dev": true
+        },
+        "@babel/types": {
+          "version": "7.13.14",
+          "resolved": "http://192.168.250.101:4873/@babel%2ftypes/-/types-7.13.14.tgz",
+          "integrity": "sha1-w1pKuxXHzUWidG14qzKONiy6zg0=",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.12.11",
+            "lodash": "^4.17.19",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
+      }
+    },
+    "@babel/traverse": {
+      "version": "7.13.15",
+      "resolved": "http://192.168.250.101:4873/@babel%2ftraverse/-/traverse-7.13.15.tgz",
+      "integrity": "sha1-w4v3Z5M03dQCjo4fezqlAZ8Nrac=",
+      "dev": true,
+      "requires": {
+        "@babel/code-frame": "^7.12.13",
+        "@babel/generator": "^7.13.9",
+        "@babel/helper-function-name": "^7.12.13",
+        "@babel/helper-split-export-declaration": "^7.12.13",
+        "@babel/parser": "^7.13.15",
+        "@babel/types": "^7.13.14",
+        "debug": "^4.1.0",
+        "globals": "^11.1.0"
+      },
+      "dependencies": {
+        "@babel/parser": {
+          "version": "7.13.15",
+          "resolved": "http://192.168.250.101:4873/@babel%2fparser/-/parser-7.13.15.tgz",
+          "integrity": "sha1-jmZ3X7UjWZrLaiieEpKfpasJVNg=",
+          "dev": true
+        },
+        "@babel/types": {
+          "version": "7.13.14",
+          "resolved": "http://192.168.250.101:4873/@babel%2ftypes/-/types-7.13.14.tgz",
+          "integrity": "sha1-w1pKuxXHzUWidG14qzKONiy6zg0=",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.12.11",
+            "lodash": "^4.17.19",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
+      }
+    },
     "@babel/types": {
       "version": "7.12.11",
       "resolved": "http://192.168.250.101:4873/@babel%2ftypes/-/types-7.12.11.tgz",
@@ -107,6 +594,11 @@
         "@intlify/shared": "9.1.2"
       }
     },
+    "@logicflow/core": {
+      "version": "0.2.9",
+      "resolved": "http://192.168.250.101:4873/@logicflow%2fcore/-/core-0.2.9.tgz",
+      "integrity": "sha1-wTU8PV0P58QNm7jPq+PMbVmF5PE="
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.4",
       "resolved": "http://192.168.250.101:4873/@nodelib%2ffs.scandir/-/fs.scandir-2.1.4.tgz",
@@ -215,6 +707,42 @@
       "integrity": "sha1-beSUNvw0b4KaVmdgZkKOPwEVIqw=",
       "dev": true
     },
+    "@vitejs/plugin-vue-jsx": {
+      "version": "1.1.3",
+      "resolved": "http://192.168.250.101:4873/@vitejs%2fplugin-vue-jsx/-/plugin-vue-jsx-1.1.3.tgz",
+      "integrity": "sha1-Qmxo+KNnpgOsuC/KbisSUGup/I4=",
+      "dev": true,
+      "requires": {
+        "@babel/core": "^7.12.10",
+        "@babel/plugin-syntax-import-meta": "^7.10.4",
+        "@babel/plugin-transform-typescript": "^7.12.1",
+        "@vue/babel-plugin-jsx": "^1.0.3",
+        "hash-sum": "^2.0.0"
+      }
+    },
+    "@vue/babel-helper-vue-transform-on": {
+      "version": "1.0.2",
+      "resolved": "http://192.168.250.101:4873/@vue%2fbabel-helper-vue-transform-on/-/babel-helper-vue-transform-on-1.0.2.tgz",
+      "integrity": "sha1-m5xpHNBvyFUiGiR1w8yDHXdLx9w=",
+      "dev": true
+    },
+    "@vue/babel-plugin-jsx": {
+      "version": "1.0.4",
+      "resolved": "http://192.168.250.101:4873/@vue%2fbabel-plugin-jsx/-/babel-plugin-jsx-1.0.4.tgz",
+      "integrity": "sha1-B3gmyg7M13y2rWmCVPWCHe1cUYk=",
+      "dev": true,
+      "requires": {
+        "@babel/helper-module-imports": "^7.0.0",
+        "@babel/plugin-syntax-jsx": "^7.0.0",
+        "@babel/template": "^7.0.0",
+        "@babel/traverse": "^7.0.0",
+        "@babel/types": "^7.0.0",
+        "@vue/babel-helper-vue-transform-on": "^1.0.2",
+        "camelcase": "^6.0.0",
+        "html-tags": "^3.1.0",
+        "svg-tags": "^1.0.0"
+      }
+    },
     "@vue/compiler-core": {
       "version": "3.0.11",
       "resolved": "http://192.168.250.101:4873/@vue%2fcompiler-core/-/compiler-core-3.0.11.tgz",
@@ -469,6 +997,12 @@
       "integrity": "sha1-RdXbmefuXmvE82LgCL+RerUEmIc=",
       "dev": true
     },
+    "camelcase": {
+      "version": "6.2.0",
+      "resolved": "http://192.168.250.101:4873/camelcase/-/camelcase-6.2.0.tgz",
+      "integrity": "sha1-kkr4gcnVJaydh/QNlk5c6pgqGAk=",
+      "dev": true
+    },
     "caniuse-lite": {
       "version": "1.0.30001191",
       "resolved": "http://192.168.250.101:4873/caniuse-lite/-/caniuse-lite-1.0.30001191.tgz",
@@ -557,6 +1091,15 @@
         "bluebird": "^3.7.2"
       }
     },
+    "convert-source-map": {
+      "version": "1.7.0",
+      "resolved": "http://192.168.250.101:4873/convert-source-map/-/convert-source-map-1.7.0.tgz",
+      "integrity": "sha1-F6LLiC1/d9NJBYXizmxSRCSjpEI=",
+      "dev": true,
+      "requires": {
+        "safe-buffer": "~5.1.1"
+      }
+    },
     "core-js-pure": {
       "version": "3.10.0",
       "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.10.0.tgz",
@@ -872,6 +1415,12 @@
         "loader-utils": "^1.1.0"
       }
     },
+    "gensync": {
+      "version": "1.0.0-beta.2",
+      "resolved": "http://192.168.250.101:4873/gensync/-/gensync-1.0.0-beta.2.tgz",
+      "integrity": "sha1-MqbudsPX9S1GsrGuXZP+qFgKJeA=",
+      "dev": true
+    },
     "get-size": {
       "version": "2.0.3",
       "resolved": "http://192.168.250.101:4873/get-size/-/get-size-2.0.3.tgz",
@@ -886,6 +1435,12 @@
         "is-glob": "^4.0.1"
       }
     },
+    "globals": {
+      "version": "11.12.0",
+      "resolved": "http://192.168.250.101:4873/globals/-/globals-11.12.0.tgz",
+      "integrity": "sha1-q4eVM4hooLq9hSV1gBjCp+uVxC4=",
+      "dev": true
+    },
     "has": {
       "version": "1.0.3",
       "resolved": "http://192.168.250.101:4873/has/-/has-1.0.3.tgz",
@@ -906,6 +1461,12 @@
       "integrity": "sha1-gdAbtd6OpKIUrV1urRtSNGCwtFo=",
       "dev": true
     },
+    "html-tags": {
+      "version": "3.1.0",
+      "resolved": "http://192.168.250.101:4873/html-tags/-/html-tags-3.1.0.tgz",
+      "integrity": "sha1-e15vfmZen7QfMAB+2eDUHpf7IUA=",
+      "dev": true
+    },
     "icss-replace-symbols": {
       "version": "1.1.0",
       "resolved": "http://192.168.250.101:4873/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz",
@@ -979,6 +1540,18 @@
       "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-3.0.1.tgz",
       "integrity": "sha512-Xnpx182SBMrr/aBik8y+GuR4U1L9FqMSojwDQwPMmxyC6bvEqly9UBCxhauBF5vNh2gwWJNX6oDV7O+OM4z34g=="
     },
+    "js-tokens": {
+      "version": "4.0.0",
+      "resolved": "http://192.168.250.101:4873/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha1-GSA/tZmR35jjoocFDUZHzerzJJk=",
+      "dev": true
+    },
+    "jsesc": {
+      "version": "2.5.2",
+      "resolved": "http://192.168.250.101:4873/jsesc/-/jsesc-2.5.2.tgz",
+      "integrity": "sha1-gFZNLkg9rPbo7yCWUKZ98/DCg6Q=",
+      "dev": true
+    },
     "json5": {
       "version": "1.0.1",
       "resolved": "http://192.168.250.101:4873/json5/-/json5-1.0.1.tgz",
@@ -1340,6 +1913,12 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "http://192.168.250.101:4873/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha1-mR7GnSluAxN0fVm9/St0XDX4go0=",
+      "dev": true
+    },
     "sass": {
       "version": "1.32.8",
       "resolved": "http://192.168.250.101:4873/sass/-/sass-1.32.8.tgz",
@@ -1359,6 +1938,12 @@
         "neo-async": "^2.6.2"
       }
     },
+    "semver": {
+      "version": "6.3.0",
+      "resolved": "http://192.168.250.101:4873/semver/-/semver-6.3.0.tgz",
+      "integrity": "sha1-7gpkyK9ejO6mdoexM3YeG+y9HT0=",
+      "dev": true
+    },
     "sortablejs": {
       "version": "1.10.2",
       "resolved": "http://192.168.250.101:4873/sortablejs/-/sortablejs-1.10.2.tgz",
@@ -1395,6 +1980,12 @@
         "has-flag": "^3.0.0"
       }
     },
+    "svg-tags": {
+      "version": "1.0.0",
+      "resolved": "http://192.168.250.101:4873/svg-tags/-/svg-tags-1.0.0.tgz",
+      "integrity": "sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q=",
+      "dev": true
+    },
     "to-fast-properties": {
       "version": "2.0.0",
       "resolved": "http://192.168.250.101:4873/to-fast-properties/-/to-fast-properties-2.0.0.tgz",

package.json

@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
+    "@logicflow/core": "^0.2.9",
     "@vueuse/core": "^4.8.1",
     "await-to-js": "^2.1.1",
     "axios": "^0.21.1",
@@ -41,6 +42,7 @@
     "@types/node": "^14.14.14",
     "@types/nprogress": "^0.2.0",
     "@vitejs/plugin-vue": "^1.2.1",
+    "@vitejs/plugin-vue-jsx": "^1.1.3",
     "@vue/compiler-sfc": "^3.0.11",
     "autoprefixer": "^10.2.4",
     "babel-plugin-transform-remove-console": "^6.9.4",

src/components/selector/index.ts

@@ -0,0 +1,10 @@
+import { App } from "vue"
+import selector from "./src/selector"
+
+export const Selector = Object.assign(selector, {
+  install(app: App) {
+    app.component(selector.name, selector)
+  }
+})
+
+export default Selector

src/components/selector/src/index.css

@@ -0,0 +1,23 @@
+.hs-rate__icon {
+  font-size: 18px;
+  transition: 0.3s;
+}
+.hs-item {
+  width: 30px;
+  height: 30px;
+  box-sizing: border-box;
+  line-height: 30px;
+}
+.hs-on {
+  background-color: #409eff;
+  border-radius: 50%;
+}
+.hs-range {
+  background-color: #f2f6fc;
+}
+.both-left-sides {
+  border-radius: 50% 0 0 50%;
+}
+.both-right-sides {
+  border-radius: 0 50% 50% 0;
+}

src/components/selector/index.vue → src/components/selector/src/index.ts

@@ -1,9 +1,12 @@
+/** 
 <template>
   <table cellspacing="0" cellpadding="0">
     <tbody>
       <tr>
         <td
           v-for="(item, key) in max"
+          :data-index="HsKey"
+          :ref="'hstd' + HsKey + key"
           :class="['hs-select__item' + key]"
           @mousemove.prevent="setCurrentValue(key, $event)"
           @mouseleave.prevent="resetCurrentValue(key)"
@@ -11,7 +14,7 @@
           :style="{ cursor: rateDisabled ? 'auto' : 'pointer', 'text-align': 'center' }"
           :key="key"
         >
-          <div :class="[classes[key] + key]" class="hs-item">
+          <div :ref="'hsdiv' + HsKey + key" :class="[classes[key] + key]" class="hs-item">
             <span>{{item}}</span>
           </div>
         </td>
@@ -21,9 +24,14 @@
 </template>
 
 <script lang='ts'>
-import { defineComponent, computed, nextTick } from "vue";
+import {
+  defineComponent,
+  computed,
+  nextTick,
+  onBeforeMount,
+  getCurrentInstance,
+} from "vue";
 import { addClass, removeClass, toggleClass } from "/@/utils/operate";
-import { useDebounceFn } from "@vueuse/core";
 
 // 选中非选中状态
 let stayClass = "stay"; //鼠标点击
@@ -40,22 +48,33 @@ let selectedList = [];
 let overList = [];
 
 export default defineComponent({
+  name: "HsSelector",
   props: {
+    HsKey: {
+      type: Number || String,
+      default: 0,
+    },
     disabled: {
       type: Boolean,
-      default: false
+      default: false,
     },
     value: {
       type: Number,
-      default: 0
+      default: 0,
     },
     max: {
       type: Number,
-      default: 10
-    }
+      default: 10,
+    },
+    // 回显数据的索引，长度必须是2
+    echo: {
+      type: Array,
+      default: [],
+    },
   },
   emits: ["selectedVal"],
   setup(props, { emit }) {
+    let vm: any;
     let currentValue = props.value;
 
     let rateDisabled = computed(() => {
@@ -78,7 +97,9 @@ export default defineComponent({
       return result;
     });
 
+    // 鼠标移入
     const setCurrentValue = (index, event) => {
+      if (props.disabled) return;
       // 当选中一个元素后，开始添加背景色
       if (selectedList.length === 1) {
         if (overList.length < 1) overList.push({ index });
@@ -122,7 +143,9 @@ export default defineComponent({
       addClass(document.querySelector("." + voidClass + index), activeClass);
     };
 
-    const resetCurrentValue = index => {
+    // 鼠标离开
+    const resetCurrentValue = (index) => {
+      if (props.disabled) return;
       // 移除先检查是否选中 选中则返回false 不移除
       const currentHsDom = document.querySelector("." + voidClass + index);
       if (currentHsDom.className.includes(stayClass)) {
@@ -153,7 +176,9 @@ export default defineComponent({
       }
     };
 
+    // 鼠标点击
     const selectValue = (index, item) => {
+      if (props.disabled) return;
       let len = selectedList.length;
 
       if (len < 2) {
@@ -189,19 +214,19 @@ export default defineComponent({
             emit("selectedVal", {
               left: selectedList[0].item,
               right: selectedList[1].item,
-              whole: selectedList
+              whole: selectedList,
             });
           } else {
             emit("selectedVal", {
               left: selectedList[1].item,
               right: selectedList[0].item,
-              whole: selectedList
+              whole: selectedList,
             });
           }
         }
       } else {
         nextTick(() => {
-          selectedList.forEach(v => {
+          selectedList.forEach((v) => {
             removeClass(
               document.querySelector("." + voidClass + v.index),
               activeClass,
@@ -235,14 +260,55 @@ export default defineComponent({
       }
     };
 
+    // 回显数据
+    const echoView = (item) => {
+      if (item.length === 0) return;
+      if (item.length > 2 || item.length === 1) {
+        throw "传入的数组长度必须是2";
+      }
+
+      item.sort((a, b) => {
+        return a - b;
+      });
+
+      addClass(
+        vm.refs["hsdiv" + props.HsKey + item[0]],
+        activeClass,
+        stayClass
+      );
+
+      addClass(vm.refs["hstd" + props.HsKey + item[0]], bothLeftSides);
+
+      addClass(
+        vm.refs["hsdiv" + props.HsKey + item[1]],
+        activeClass,
+        stayClass
+      );
+
+      addClass(vm.refs["hstd" + props.HsKey + item[1]], bothRightSides);
+
+      while (item[1] >= item[0]) {
+        addClass(vm.refs["hstd" + props.HsKey + item[0]], inRange);
+        item[0]++;
+      }
+    };
+
+    onBeforeMount(() => {
+      vm = getCurrentInstance();
+      nextTick(() => {
+        echoView(props.echo);
+      });
+    });
+
     return {
       rateDisabled,
       setCurrentValue,
       resetCurrentValue,
       selectValue,
-      classes
+      classes,
+      echoView,
     };
-  }
+  },
 });
 </script>
 
@@ -262,7 +328,7 @@ export default defineComponent({
   border-radius: 50%;
 }
 .hs-range {
-  background-color: #f2f6fc;
+  background-color: #ccc;
 }
 .both-left-sides {
   border-radius: 50% 0 0 50%;
@@ -271,3 +337,4 @@ export default defineComponent({
   border-radius: 0 50% 50% 0;
 }
 </style>
+*/

src/components/selector/src/selector.tsx

@@ -0,0 +1,309 @@
+import {
+  defineComponent,
+  computed,
+  nextTick,
+  onBeforeMount,
+  getCurrentInstance,
+  unref
+} from "vue"
+import { addClass, removeClass, toggleClass } from "/@/utils/operate"
+import "./index.css"
+
+let stayClass = "stay" //鼠标点击
+let activeClass = "hs-on" //鼠标移动上去
+let voidClass = "hs-off" //鼠标移开
+let inRange = "hs-range" //当前选中的两个元素之间的背景
+let bothLeftSides = "both-left-sides"
+let bothRightSides = "both-right-sides"
+let selectedDirection = "right" //默认从左往右，索引变大
+
+let overList = []
+// 存放第一个选中的元素和最后一个选中元素，只能存放这两个元素
+let selectedList = []
+
+export default defineComponent({
+  name: "HsSelector",
+  props: {
+    HsKey: {
+      type: Number || String,
+      default: 0,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    value: {
+      type: Number,
+      default: 0,
+    },
+    max: {
+      type: Array,
+      default: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+    },
+    // 回显数据的索引，长度必须是2
+    echo: {
+      type: Array,
+      default: [],
+    },
+  },
+  emits: ["selectedVal"],
+  setup(props, { emit }) {
+    let vm: any
+    let currentValue = props.value
+
+    let rateDisabled = computed(() => {
+      return props.disabled
+    })
+
+    let classes = computed(() => {
+      let result = []
+      let i = 0
+      let threshold = currentValue
+      if (currentValue !== Math.floor(currentValue)) {
+        threshold--
+      }
+      for (; i < threshold; i++) {
+        result.push(activeClass)
+      }
+      for (; i < props.max.length; i++) {
+        result.push(voidClass)
+      }
+      return result
+    })
+
+    // 鼠标移入
+    const setCurrentValue = (index) => {
+      if (props.disabled) return
+      // 当选中一个元素后，开始添加背景色
+      if (selectedList.length === 1) {
+        if (overList.length < 1) overList.push({ index })
+
+        let firstIndex = overList[0].index
+
+        // 往右走，索引变大
+        if (index > firstIndex) {
+          selectedDirection = "right"
+          toggleClass(
+            false,
+            bothRightSides,
+            document.querySelector(".hs-select__item" + selectedList[0].index)
+          )
+
+          while (index >= firstIndex) {
+            addClass(
+              document.querySelector(".hs-select__item" + firstIndex),
+              inRange
+            )
+            firstIndex++
+          }
+        } else {
+          selectedDirection = "left"
+          toggleClass(
+            true,
+            bothRightSides,
+            document.querySelector(".hs-select__item" + selectedList[0].index)
+          )
+
+          while (index <= firstIndex) {
+            addClass(
+              document.querySelector(".hs-select__item" + firstIndex),
+              inRange
+            )
+            firstIndex--
+          }
+        }
+      }
+
+      addClass(document.querySelector("." + voidClass + index), activeClass)
+    }
+
+    // 鼠标离开
+    const resetCurrentValue = (index) => {
+      if (props.disabled) return
+      // 移除先检查是否选中 选中则返回false 不移除
+      const currentHsDom = document.querySelector("." + voidClass + index)
+      if (currentHsDom.className.includes(stayClass)) {
+        return false
+      } else {
+        removeClass(currentHsDom, activeClass)
+      }
+
+      // 当选中一个元素后，开始移除背景色
+      if (selectedList.length === 1) {
+        let firstIndex = overList[0].index
+        if (index >= firstIndex) {
+          for (let i = 0; i <= index; i++) {
+            removeClass(
+              document.querySelector(".hs-select__item" + i),
+              inRange
+            )
+          }
+        } else {
+          while (index <= firstIndex) {
+            removeClass(
+              document.querySelector(".hs-select__item" + index),
+              inRange
+            )
+            index++
+          }
+        }
+      }
+    }
+
+    // 鼠标点击
+    const selectValue = (index, item) => {
+      if (props.disabled) return
+      let len = selectedList.length
+
+      if (len < 2) {
+        selectedList.push({ item, index })
+        addClass(document.querySelector("." + voidClass + index), stayClass)
+
+        addClass(
+          document.querySelector(".hs-select__item" + selectedList[0].index),
+          bothLeftSides
+        )
+
+        if (selectedList[1]) {
+          if (selectedDirection === "right") {
+            addClass(
+              document.querySelector(
+                ".hs-select__item" + selectedList[1].index
+              ),
+              bothRightSides
+            )
+          } else {
+            addClass(
+              document.querySelector(
+                ".hs-select__item" + selectedList[1].index
+              ),
+              bothLeftSides
+            )
+          }
+        }
+
+        if (len === 1) {
+          // 顺时针排序
+          if (selectedDirection === "right") {
+            emit("selectedVal", {
+              left: selectedList[0].item,
+              right: selectedList[1].item,
+              whole: selectedList,
+            })
+          } else {
+            emit("selectedVal", {
+              left: selectedList[1].item,
+              right: selectedList[0].item,
+              whole: selectedList,
+            })
+          }
+        }
+      } else {
+        nextTick(() => {
+          selectedList.forEach((v) => {
+            removeClass(
+              document.querySelector("." + voidClass + v.index),
+              activeClass,
+              stayClass
+            )
+
+            removeClass(
+              document.querySelector(".hs-select__item" + v.index),
+              bothLeftSides,
+              bothRightSides
+            )
+          })
+
+          selectedList = []
+          overList = []
+          for (let i = 0; i <= props.max.length; i++) {
+            let currentDom = document.querySelector(".hs-select__item" + i)
+            if (currentDom) {
+              removeClass(currentDom, inRange)
+            }
+          }
+
+          selectedList.push({ item, index })
+          addClass(document.querySelector("." + voidClass + index), stayClass)
+
+          addClass(
+            document.querySelector(".hs-select__item" + selectedList[0].index),
+            bothLeftSides
+          )
+        })
+      }
+    }
+
+    // 回显数据
+    const echoView = (item) => {
+      if (item.length === 0) return
+
+      if (item.length > 2 || item.length === 1) {
+        throw "传入的数组长度必须是2"
+      }
+
+      item.sort((a, b) => {
+        return a - b
+      })
+
+      addClass(
+        vm.refs["hsdiv" + props.HsKey + item[0]],
+        activeClass,
+        stayClass
+      )
+
+      addClass(vm.refs["hstd" + props.HsKey + item[0]], bothLeftSides)
+
+      addClass(
+        vm.refs["hsdiv" + props.HsKey + item[1]],
+        activeClass,
+        stayClass
+      )
+
+      addClass(vm.refs["hstd" + props.HsKey + item[1]], bothRightSides)
+
+      while (item[1] >= item[0]) {
+        addClass(vm.refs["hstd" + props.HsKey + item[0]], inRange)
+        item[0]++
+      }
+    }
+
+    onBeforeMount(() => {
+      vm = getCurrentInstance()
+      nextTick(() => {
+        echoView(props.echo)
+      })
+    })
+
+    return () => (
+      <>
+        <table cellspacing="0" cellpadding="0">
+          <tbody>
+            <tr>
+              {
+                props.max.map((item, key) => {
+                return <td
+                  data-index={props.HsKey}
+                  ref={`hstd${props.HsKey}${key}`}
+                  class={`hs-select__item${key}`}
+                  onMousemove={() => setCurrentValue(key)}
+                  onMouseleave={() => resetCurrentValue(key)}
+                  onClick={() => selectValue(key, item)}
+                  style={{
+                    cursor: unref(rateDisabled) ? 'auto' : 'pointer', textAlign: 'center'
+                  }}
+                  key={key}
+                >
+                  <div ref={`hsdiv${props.HsKey}${key}`} class={`hs-item ${[unref(classes)[key] + key]}`}>
+                    <span>{item}</span>
+                  </div>
+                </td>
+                })
+              }
+            </tr>
+          </tbody>
+        </table>
+      </>
+    )
+  },
+})

src/layout/components/tag/index.vue

@@ -57,16 +57,14 @@ export default {
   justify-content: flex-start;
   margin-left: 5px;
   .scroll-item {
-    // border: 1px solid #eee;
     border-radius: 3px;
     padding: 2px 8px;
     display: inline-block;
-    // margin-right: 2px;
   }
   a {
     text-decoration: none;
     color: #666;
-    padding: 0 10px;
+    padding: 0 4px 0 10px;
   }
 }
 .el-icon-close {

src/locales/ch.json

@@ -17,5 +17,6 @@
   "button": "按钮组件",
   "cropping": "图片裁剪",
   "countTo": "数字动画",
-  "selector": "选择器组件"
+  "selector": "选择器组件",
+  "flowChart": "流程图"
 }

src/locales/en.json

@@ -17,5 +17,6 @@
   "button": "Button Components",
   "cropping": "Picture Cropping",
   "countTo": "Digital Animation",
-  "selector": "Selector Components"
+  "selector": "Selector Components",
+  "flowChart": "flow Chart"
 }

src/router/index.ts

@@ -103,7 +103,16 @@ const routes: Array<RouteRecordRaw> = [
           showLink: false,
           savedPosition: true
         }
-      }
+      },
+      // {
+      //   path: '/components/flowChart',
+      //   component: () => import(/* webpackChunkName: "components" */ '../views/components/flowChart/index.vue'),
+      //   meta: {
+      //     title: 'flowChart',
+      //     showLink: false,
+      //     savedPosition: true
+      //   }
+      // }
     ],
     meta: {
       icon: 'el-icon-menu',

src/shims-tsx.d.ts

@@ -0,0 +1,16 @@
+import Vue, { VNode } from "vue"
+
+declare module '*.tsx' {
+  import Vue from 'compatible-vue'
+  export default Vue
+}
+
+declare global {
+  namespace JSX {
+    interface Element extends VNode { }
+    interface ElementClass extends Vue { }
+    interface IntrinsicElements {
+      [elem: string]: any
+    }
+  }
+}

src/views/components/flowChart/index.vue

@@ -0,0 +1,60 @@
+<template>
+  <div id="container"></div>
+</template>
+
+<script lang='ts'>
+import LogicFlow from "@logicflow/core";
+import "@logicflow/core/dist/style/index.css";
+import { onMounted } from "vue";
+
+const data = {
+  // 节点
+  nodes: [
+    {
+      id: 50,
+      type: "rect",
+      x: 100,
+      y: 150,
+      text: "你好",
+    },
+    {
+      id: 21,
+      type: "circle",
+      x: 300,
+      y: 150,
+    },
+  ],
+  // 边
+  edges: [
+    {
+      type: "polyline",
+      sourceNodeId: 50,
+      targetNodeId: 21,
+    },
+  ],
+};
+export default {
+  setup() {
+    onMounted(() => {
+      const lf = new LogicFlow({
+        container: document.querySelector("#container"),
+        stopScrollGraph: true,
+        stopZoomGraph: true,
+        width: 500,
+        height: 500,
+        grid: {
+          type: "dot",
+          size: 20,
+        },
+      });
+
+      lf.render(data);
+    });
+
+    return {};
+  },
+};
+</script>
+
+<style scoped>
+</style>

src/views/components/selector/index.vue

@@ -1,22 +1,37 @@
 <template>
-  <el-card class="box-card" style="margin:20px">
-    <template #header>
-      <div class="card-header">
-        <span>基本使用</span>
-      </div>
-    </template>
-    <Selector @selectedVal="selectedVal" />
-    <h4>选中范围：{{ selectRange }}</h4>
-  </el-card>
+  <div>
+    <el-card class="box-card" style="margin:10px" v-for="(item,key) in dataLists" :key="key">
+      <template #header>
+        <div class="card-header">
+          <span>{{item.title}}</span>
+        </div>
+      </template>
+      <Selector :HsKey="key" :echo="item.echo" @selectedVal="selectedVal" :disabled="item.disabled" />
+      <h4 v-if="!item.disabled">选中范围：{{ selectRange }}</h4>
+    </el-card>
+  </div>
 </template>
 
 <script lang='ts'>
 import { ref } from "vue";
-import Selector from "/@/components/selector/index.vue";
+import Selector from "/@/components/selector";
+
 export default {
   components: { Selector },
   setup() {
     let selectRange = ref(null);
+    let dataLists = ref([
+      {
+        title: "基本使用",
+        echo: [],
+        disabled: false,
+      },
+      {
+        title: "回显模式",
+        echo: [2, 7],
+        disabled: true,
+      },
+    ]);
 
     const selectedVal = ({ left, right, whole }) => {
       selectRange.value = `${left}-${right}`;
@@ -24,11 +39,9 @@ export default {
 
     return {
       selectedVal,
-      selectRange
+      selectRange,
+      dataLists,
     };
-  }
+  },
 };
 </script>
-
-<style scoped>
-</style>

src/views/welcome.vue

@@ -28,17 +28,21 @@
 
 <script lang='ts'>
 import flop from "../components/flop/index.vue";
-import { ref, computed, onMounted, inject, nextTick } from "vue";
+import { ref, computed, onMounted, nextTick, onUpdated } from "vue";
 import { deviceDetection } from "../utils/deviceDetection";
 import { echartsJson } from "../api/mock";
-import { useEventListener, tryOnUnmounted } from "@vueuse/core";
+import {
+  useEventListener,
+  tryOnUnmounted,
+  useTimeoutFn,
+} from "@vueuse/core";
 import * as echarts from "echarts";
 
 let brokenLine: any = null; //折线图实例
 export default {
   name: "welcome",
   components: {
-    flop
+    flop,
   },
   setup() {
     let mobile = ref(deviceDetection());
@@ -71,39 +75,39 @@ export default {
         brokenLine.setOption({
           title: {
             text: "上海 空气质量指数",
-            left: "1%"
+            left: "1%",
           },
           tooltip: {
-            trigger: "axis"
+            trigger: "axis",
           },
           grid: {
             left: "5%",
             right: "15%",
-            bottom: "10%"
+            bottom: "10%",
           },
           xAxis: {
-            data: info.map(function(item) {
+            data: info.map(function (item) {
               return item[0];
-            })
+            }),
           },
           yAxis: {},
           toolbox: {
             right: 10,
             feature: {
               dataZoom: {
-                yAxisIndex: "none"
+                yAxisIndex: "none",
               },
               restore: {},
-              saveAsImage: {}
-            }
+              saveAsImage: {},
+            },
           },
           dataZoom: [
             {
-              startValue: "2014-06-01"
+              startValue: "2014-06-01",
             },
             {
-              type: "inside"
-            }
+              type: "inside",
+            },
           ],
           visualMap: {
             top: 50,
@@ -112,67 +116,67 @@ export default {
               {
                 gt: 0,
                 lte: 50,
-                color: "#93CE07"
+                color: "#93CE07",
               },
               {
                 gt: 50,
                 lte: 100,
-                color: "#FBDB0F"
+                color: "#FBDB0F",
               },
               {
                 gt: 100,
                 lte: 150,
-                color: "#FC7D02"
+                color: "#FC7D02",
               },
               {
                 gt: 150,
                 lte: 200,
-                color: "#FD0100"
+                color: "#FD0100",
               },
               {
                 gt: 200,
                 lte: 300,
-                color: "#AA069F"
+                color: "#AA069F",
               },
               {
                 gt: 300,
-                color: "#AC3B2A"
-              }
+                color: "#AC3B2A",
+              },
             ],
             outOfRange: {
-              color: "#999"
-            }
+              color: "#999",
+            },
           },
           series: {
             name: "上海 空气质量指数",
             type: "line",
-            data: info.map(function(item) {
+            data: info.map(function (item) {
               return item[1];
             }),
             markLine: {
               silent: true,
               lineStyle: {
-                color: "#333"
+                color: "#333",
               },
               data: [
                 {
-                  yAxis: 50
+                  yAxis: 50,
                 },
                 {
-                  yAxis: 100
+                  yAxis: 100,
                 },
                 {
-                  yAxis: 150
+                  yAxis: 150,
                 },
                 {
-                  yAxis: 200
+                  yAxis: 200,
                 },
                 {
-                  yAxis: 300
-                }
-              ]
-            }
-          }
+                  yAxis: 300,
+                },
+              ],
+            },
+          },
         });
       });
     };
@@ -182,9 +186,13 @@ export default {
     };
 
     onMounted(() => {
-      useEventListener("resize", () => {
-        if (!brokenLine) return;
-        brokenLine.resize();
+      nextTick(() => {
+        useEventListener("resize", () => {
+          if (!brokenLine) return;
+          useTimeoutFn(() => {
+            brokenLine.resize()
+          }, 180);
+        });
       });
     });
 
@@ -198,9 +206,9 @@ export default {
       greetings,
       mobile,
       loading,
-      openDepot
+      openDepot,
     };
-  }
+  },
 };
 </script>
 

vite.config.ts

@@ -2,6 +2,7 @@
 import { resolve } from 'path'
 import { UserConfigExport, ConfigEnv } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import vueJsx from '@vitejs/plugin-vue-jsx'
 import { loadEnv } from './build/utils'
 import { createProxy } from './build/proxy'
 import { viteMockServe } from 'vite-plugin-mock'
@@ -45,6 +46,7 @@ export default ({ command }: ConfigEnv): UserConfigExport => {
     },
     plugins: [
       vue(),
+      vueJsx(),
       viteMockServe({
         mockPath: 'mock',
         localEnabled: command === 'serve',