liuqiao 1 vuosi sitten
vanhempi
säilyke
6aae813fb8
6 muutettua tiedostoa jossa 919 lisäystä ja 58 poistoa
  1. 264 47
      package-lock.json
  2. 3 1
      package.json
  3. 5 5
      src/App.vue
  4. 1 3
      src/components/HelloWorld.vue
  5. 4 2
      src/main.js
  6. 642 0
      src/view/index.vue

+ 264 - 47
package-lock.json

@@ -1235,12 +1235,22 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@ctrl/tinycolor": {
+      "version": "3.6.1",
+      "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz",
+      "integrity": "sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA=="
+    },
     "@discoveryjs/json-ext": {
       "version": "0.5.7",
       "resolved": "https://registry.npmmirror.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz",
       "integrity": "sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==",
       "dev": true
     },
+    "@element-plus/icons-vue": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-2.3.1.tgz",
+      "integrity": "sha512-XxVUZv48RZAd87ucGS48jPf6pKu0yV5UCg9f4FFwtrYxXOwWuVJo6wOvSLKEoMQKjv8GsX/mhP6UsC1lRwbUWg=="
+    },
     "@eslint/eslintrc": {
       "version": "0.4.3",
       "resolved": "https://registry.npmmirror.com/@eslint/eslintrc/-/eslintrc-0.4.3.tgz",
@@ -1281,6 +1291,28 @@
         }
       }
     },
+    "@floating-ui/core": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.2.tgz",
+      "integrity": "sha512-Ii3MrfY/GAIN3OhXNzpCKaLxHQfJF9qvwq/kEJYdqDxeIHa01K8sldugal6TmeeXl+WMvhv9cnVzUTaFFJF09A==",
+      "requires": {
+        "@floating-ui/utils": "^0.1.3"
+      }
+    },
+    "@floating-ui/dom": {
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.3.tgz",
+      "integrity": "sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==",
+      "requires": {
+        "@floating-ui/core": "^1.4.2",
+        "@floating-ui/utils": "^0.1.3"
+      }
+    },
+    "@floating-ui/utils": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz",
+      "integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A=="
+    },
     "@hapi/hoek": {
       "version": "9.3.0",
       "resolved": "https://registry.npmmirror.com/@hapi/hoek/-/hoek-9.3.0.tgz",
@@ -1488,6 +1520,11 @@
       "integrity": "sha512-2LuNTFBIO0m7kKIQvvPHN6UE63VjpmL9rnEEaOOaiSPbZK+zUOYIzBAWcED+3XYzhYsd/0mD57VdxAEqqV52CQ==",
       "dev": true
     },
+    "@popperjs/core": {
+      "version": "npm:@sxzz/popperjs-es@2.11.7",
+      "resolved": "https://registry.npmjs.org/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz",
+      "integrity": "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ=="
+    },
     "@sideway/address": {
       "version": "4.1.4",
       "resolved": "https://registry.npmmirror.com/@sideway/address/-/address-4.1.4.tgz",
@@ -1698,6 +1735,19 @@
       "resolved": "https://registry.npmmirror.com/@types/json-schema/-/json-schema-7.0.15.tgz",
       "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA=="
     },
+    "@types/lodash": {
+      "version": "4.14.202",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.202.tgz",
+      "integrity": "sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ=="
+    },
+    "@types/lodash-es": {
+      "version": "4.17.12",
+      "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.12.tgz",
+      "integrity": "sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==",
+      "requires": {
+        "@types/lodash": "*"
+      }
+    },
     "@types/mime": {
       "version": "1.3.5",
       "resolved": "https://registry.npmmirror.com/@types/mime/-/mime-1.3.5.tgz",
@@ -1796,6 +1846,11 @@
         "@types/node": "*"
       }
     },
+    "@types/web-bluetooth": {
+      "version": "0.0.16",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz",
+      "integrity": "sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ=="
+    },
     "@types/webxr": {
       "version": "0.5.10",
       "resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.10.tgz",
@@ -2119,6 +2174,49 @@
         "webpack-merge": "^5.7.3",
         "webpack-virtual-modules": "^0.4.2",
         "whatwg-fetch": "^3.6.2"
+      },
+      "dependencies": {
+        "@vue/vue-loader-v15": {
+          "version": "npm:vue-loader@15.11.1",
+          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.11.1.tgz",
+          "integrity": "sha512-0iw4VchYLePqJfJu9s62ACWUXeSqM30SQqlIftbYWM3C+jpPcEHKSPUZBLjSF9au4HTHQ/naF6OGnO3Q/qGR3Q==",
+          "dev": true,
+          "requires": {
+            "@vue/component-compiler-utils": "^3.1.0",
+            "hash-sum": "^1.0.2",
+            "loader-utils": "^1.1.0",
+            "vue-hot-reload-api": "^2.3.0",
+            "vue-style-loader": "^4.1.0"
+          },
+          "dependencies": {
+            "hash-sum": {
+              "version": "1.0.2",
+              "resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-1.0.2.tgz",
+              "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
+              "dev": true
+            }
+          }
+        },
+        "json5": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.0"
+          }
+        },
+        "loader-utils": {
+          "version": "1.4.2",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
+          "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^1.0.1"
+          }
+        }
       }
     },
     "@vue/cli-shared-utils": {
@@ -2372,53 +2470,36 @@
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.13.tgz",
       "integrity": "sha512-F/gs3kHQ8Xeo24F6EImOvBiIoYQsBjF9qoLzvk+LHxYN6ZhIDEL1NWrBFYzdFQ7NphjEYd4EvPZ+Qee+WX8P6w=="
     },
-    "@vue/vue-loader-v15": {
-      "version": "npm:vue-loader@15.11.1",
-      "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-15.11.1.tgz",
-      "integrity": "sha512-0iw4VchYLePqJfJu9s62ACWUXeSqM30SQqlIftbYWM3C+jpPcEHKSPUZBLjSF9au4HTHQ/naF6OGnO3Q/qGR3Q==",
-      "dev": true,
-      "requires": {
-        "@vue/component-compiler-utils": "^3.1.0",
-        "hash-sum": "^1.0.2",
-        "loader-utils": "^1.1.0",
-        "vue-hot-reload-api": "^2.3.0",
-        "vue-style-loader": "^4.1.0"
-      },
-      "dependencies": {
-        "hash-sum": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmmirror.com/hash-sum/-/hash-sum-1.0.2.tgz",
-          "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
-          "dev": true
-        },
-        "json5": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmmirror.com/json5/-/json5-1.0.2.tgz",
-          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
-          "dev": true,
-          "requires": {
-            "minimist": "^1.2.0"
-          }
-        },
-        "loader-utils": {
-          "version": "1.4.2",
-          "resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-1.4.2.tgz",
-          "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
-          "dev": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^1.0.1"
-          }
-        }
-      }
-    },
     "@vue/web-component-wrapper": {
       "version": "1.3.0",
       "resolved": "https://registry.npmmirror.com/@vue/web-component-wrapper/-/web-component-wrapper-1.3.0.tgz",
       "integrity": "sha512-Iu8Tbg3f+emIIMmI2ycSI8QcEuAUgPTgHwesDU1eKMLE4YC/c/sFbGc70QgMq31ijRftV0R7vCm9co6rldCeOA==",
       "dev": true
     },
+    "@vueuse/core": {
+      "version": "9.13.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-9.13.0.tgz",
+      "integrity": "sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==",
+      "requires": {
+        "@types/web-bluetooth": "^0.0.16",
+        "@vueuse/metadata": "9.13.0",
+        "@vueuse/shared": "9.13.0",
+        "vue-demi": "*"
+      }
+    },
+    "@vueuse/metadata": {
+      "version": "9.13.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-9.13.0.tgz",
+      "integrity": "sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ=="
+    },
+    "@vueuse/shared": {
+      "version": "9.13.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-9.13.0.tgz",
+      "integrity": "sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==",
+      "requires": {
+        "vue-demi": "*"
+      }
+    },
     "@webassemblyjs/ast": {
       "version": "1.11.6",
       "resolved": "https://registry.npmmirror.com/@webassemblyjs/ast/-/ast-1.11.6.tgz",
@@ -2752,6 +2833,11 @@
         "lodash": "^4.17.14"
       }
     },
+    "async-validator": {
+      "version": "4.2.5",
+      "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-4.2.5.tgz",
+      "integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg=="
+    },
     "at-least-node": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/at-least-node/-/at-least-node-1.0.0.tgz",
@@ -3705,6 +3791,11 @@
         "d3-time": "1 - 3"
       }
     },
+    "dayjs": {
+      "version": "1.11.10",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz",
+      "integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ=="
+    },
     "debounce": {
       "version": "1.2.1",
       "resolved": "https://registry.npmmirror.com/debounce/-/debounce-1.2.1.tgz",
@@ -3979,8 +4070,7 @@
     "duplexer": {
       "version": "0.1.2",
       "resolved": "https://registry.npmmirror.com/duplexer/-/duplexer-0.1.2.tgz",
-      "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==",
-      "dev": true
+      "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg=="
     },
     "easy-stack": {
       "version": "1.0.1",
@@ -4000,6 +4090,28 @@
       "integrity": "sha512-1n7zWYh8eS0L9Uy+GskE0lkBUNK83cXTVJI0pU3mGprFsbfSdAc15VTFbo+A+Bq4pwstmL30AVcEU3Fo463lNg==",
       "dev": true
     },
+    "element-plus": {
+      "version": "2.4.4",
+      "resolved": "https://registry.npmjs.org/element-plus/-/element-plus-2.4.4.tgz",
+      "integrity": "sha512-TlKubXJgxwhER0dw+8ULn9hr9kZjraV4R6Q/eidwWUwCKxwXYPBGmMKsZ/85tlxlhMYbcLZd/YZh6G3QkHX4fg==",
+      "requires": {
+        "@ctrl/tinycolor": "^3.4.1",
+        "@element-plus/icons-vue": "^2.3.1",
+        "@floating-ui/dom": "^1.0.1",
+        "@popperjs/core": "npm:@sxzz/popperjs-es@^2.11.7",
+        "@types/lodash": "^4.14.182",
+        "@types/lodash-es": "^4.17.6",
+        "@vueuse/core": "^9.1.0",
+        "async-validator": "^4.2.5",
+        "dayjs": "^1.11.3",
+        "escape-html": "^1.0.3",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21",
+        "lodash-unified": "^1.0.2",
+        "memoize-one": "^6.0.0",
+        "normalize-wheel-es": "^1.2.0"
+      }
+    },
     "emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-8.0.0.tgz",
@@ -4085,8 +4197,7 @@
     "escape-html": {
       "version": "1.0.3",
       "resolved": "https://registry.npmmirror.com/escape-html/-/escape-html-1.0.3.tgz",
-      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
-      "dev": true
+      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="
     },
     "escape-string-regexp": {
       "version": "1.0.5",
@@ -4549,6 +4660,20 @@
       "integrity": "sha512-z7IyloorXvKbFx9Bpie2+vMJKKx1fH1EN5yiTfp8CiLOTptSYy1g8H4yDpGlEdshL1PBiFtBHepF2cNsqeEeFQ==",
       "dev": true
     },
+    "event-stream": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/event-stream/-/event-stream-4.0.1.tgz",
+      "integrity": "sha512-qACXdu/9VHPBzcyhdOWR5/IahhGMf0roTeZJfzz077GwylcDd90yOHLouhmv7GJ5XzPi6ekaQWd8AvPP2nOvpA==",
+      "requires": {
+        "duplexer": "^0.1.1",
+        "from": "^0.1.7",
+        "map-stream": "0.0.7",
+        "pause-stream": "^0.0.11",
+        "split": "^1.0.1",
+        "stream-combiner": "^0.2.2",
+        "through": "^2.3.8"
+      }
+    },
     "eventemitter3": {
       "version": "4.0.7",
       "resolved": "https://registry.npmmirror.com/eventemitter3/-/eventemitter3-4.0.7.tgz",
@@ -4817,6 +4942,11 @@
       "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==",
       "dev": true
     },
+    "from": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/from/-/from-0.1.7.tgz",
+      "integrity": "sha512-twe20eF1OxVxp/ML/kq2p1uc6KvFK/+vs8WjEbeKmV2He22MKm7YF2ANIt+EOqhJ5L3K/SuuPhk0hWQDjOM23g=="
+    },
     "fs-extra": {
       "version": "9.1.0",
       "resolved": "https://registry.npmmirror.com/fs-extra/-/fs-extra-9.1.0.tgz",
@@ -5614,8 +5744,22 @@
     "lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+    },
+    "lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+    },
+    "lodash-unified": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/lodash-unified/-/lodash-unified-1.0.3.tgz",
+      "integrity": "sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ=="
+    },
+    "lodash.assign": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/lodash.assign/-/lodash.assign-4.2.0.tgz",
+      "integrity": "sha512-hFuH8TY+Yji7Eja3mGiuAxBqLagejScbG8GbG0j6o9vzn0YL14My+ktnqtZgFTosKymC9/44wP6s7xyuLfnClw=="
     },
     "lodash.debounce": {
       "version": "4.0.8",
@@ -5849,6 +5993,11 @@
         "semver": "^6.0.0"
       }
     },
+    "map-stream": {
+      "version": "0.0.7",
+      "resolved": "https://registry.npmjs.org/map-stream/-/map-stream-0.0.7.tgz",
+      "integrity": "sha512-C0X0KQmGm3N2ftbTGBhSyuydQ+vV1LC3f3zPvT3RXHXNZrvfPZcoXp/N5DOa8vedX/rTMm2CjTtivFg2STJMRQ=="
+    },
     "mdn-data": {
       "version": "2.0.14",
       "resolved": "https://registry.npmmirror.com/mdn-data/-/mdn-data-2.0.14.tgz",
@@ -5870,6 +6019,11 @@
         "fs-monkey": "^1.0.4"
       }
     },
+    "memoize-one": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
+      "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="
+    },
     "merge-descriptors": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
@@ -5940,6 +6094,11 @@
       "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
       "dev": true
     },
+    "mingo": {
+      "version": "6.4.10",
+      "resolved": "https://registry.npmjs.org/mingo/-/mingo-6.4.10.tgz",
+      "integrity": "sha512-/pOGeZKcZrKKw8YkCMKn9+XPiUYeNhkfaVbTn9tqvZvfccxf1idk8ezSulecZmPdKJLibNDtp4UBfDK3nzvMrQ=="
+    },
     "mini-css-extract-plugin": {
       "version": "2.7.6",
       "resolved": "https://registry.npmmirror.com/mini-css-extract-plugin/-/mini-css-extract-plugin-2.7.6.tgz",
@@ -6172,6 +6331,11 @@
       "integrity": "sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==",
       "dev": true
     },
+    "normalize-wheel-es": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/normalize-wheel-es/-/normalize-wheel-es-1.2.0.tgz",
+      "integrity": "sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw=="
+    },
     "npm-run-path": {
       "version": "2.0.2",
       "resolved": "https://registry.npmmirror.com/npm-run-path/-/npm-run-path-2.0.2.tgz",
@@ -6500,6 +6664,14 @@
       "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
       "dev": true
     },
+    "pause-stream": {
+      "version": "0.0.11",
+      "resolved": "https://registry.npmjs.org/pause-stream/-/pause-stream-0.0.11.tgz",
+      "integrity": "sha512-e3FBlXLmN/D1S+zHzanP4E/4Z60oFAa3O051qt1pxa7DEJWKAyil6upYVXCWadEnuoqa4Pkc9oUx9zsxYeRv8A==",
+      "requires": {
+        "through": "~2.3"
+      }
+    },
     "picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/picocolors/-/picocolors-1.0.0.tgz",
@@ -7249,6 +7421,24 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "dev": true
     },
+    "save": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/save/-/save-2.9.0.tgz",
+      "integrity": "sha512-eg8+g8CjvehE/2C6EbLdtK1pINVD27pcJLj4M9PjWWhoeha/y5bWf4dp/0RF+OzbKTcG1bae9qi3PAqiR8CJTg==",
+      "requires": {
+        "async": "^3.2.2",
+        "event-stream": "^4.0.1",
+        "lodash.assign": "^4.2.0",
+        "mingo": "^6.1.0"
+      },
+      "dependencies": {
+        "async": {
+          "version": "3.2.5",
+          "resolved": "https://registry.npmjs.org/async/-/async-3.2.5.tgz",
+          "integrity": "sha512-baNZyqaaLhyLVKm/DlvdW051MSgO6b8eVfIezl9E5PqWxFgzLm/wQntEW4zOytVburDEr0JlALEpdOFwvErLsg=="
+        }
+      }
+    },
     "schema-utils": {
       "version": "2.7.1",
       "resolved": "https://registry.npmmirror.com/schema-utils/-/schema-utils-2.7.1.tgz",
@@ -7679,6 +7869,14 @@
         "wbuf": "^1.7.3"
       }
     },
+    "split": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/split/-/split-1.0.1.tgz",
+      "integrity": "sha512-mTyOoPbrivtXnwnIxZRFYRrPNtEFKlpB2fvjSnCQUiAA6qAZzqwna5envK4uk6OIeP17CsdF3rSBGYVBsU0Tkg==",
+      "requires": {
+        "through": "2"
+      }
+    },
     "sprintf-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmmirror.com/sprintf-js/-/sprintf-js-1.0.3.tgz",
@@ -7720,6 +7918,15 @@
         "readable-stream": "^3.5.0"
       }
     },
+    "stream-combiner": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/stream-combiner/-/stream-combiner-0.2.2.tgz",
+      "integrity": "sha512-6yHMqgLYDzQDcAkL+tjJDC5nSNuNIx0vZtRZeiPh7Saef7VHX9H5Ijn9l2VIol2zaNYlYEX6KyuT/237A58qEQ==",
+      "requires": {
+        "duplexer": "~0.1.1",
+        "through": "~2.3.4"
+      }
+    },
     "string-width": {
       "version": "4.2.3",
       "resolved": "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz",
@@ -7952,6 +8159,11 @@
         }
       }
     },
+    "through": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
+      "integrity": "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg=="
+    },
     "thunky": {
       "version": "1.1.0",
       "resolved": "https://registry.npmmirror.com/thunky/-/thunky-1.1.0.tgz",
@@ -8142,6 +8354,11 @@
         "@vue/shared": "3.2.13"
       }
     },
+    "vue-demi": {
+      "version": "0.14.6",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
+      "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w=="
+    },
     "vue-eslint-parser": {
       "version": "8.3.0",
       "resolved": "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz",

+ 3 - 1
package.json

@@ -10,6 +10,8 @@
   "dependencies": {
     "@kitware/vtk.js": "^29.3.0",
     "core-js": "^3.8.3",
+    "element-plus": "^2.4.4",
+    "save": "^2.9.0",
     "vue": "^3.2.13"
   },
   "devDependencies": {
@@ -34,7 +36,7 @@
       "parser": "@babel/eslint-parser"
     },
     "rules": {
-      "no-unused-vars":"off"
+      "no-unused-vars": "off"
     }
   },
   "browserslist": [

+ 5 - 5
src/App.vue

@@ -1,15 +1,14 @@
 <template>
-  <img alt="Vue logo" src="./assets/logo.png">
-  <HelloWorld msg="Welcome to Your Vue.js App"/>
+  <viewindex />
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
+import viewindex from './view/index.vue'
 
 export default {
   name: 'App',
   components: {
-    HelloWorld
+    viewindex
   }
 }
 </script>
@@ -21,6 +20,7 @@ export default {
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
-  margin-top: 60px;
+  margin: 0;
+  padding: 0;
 }
 </style>

+ 1 - 3
src/components/HelloWorld.vue

@@ -25,9 +25,7 @@ export default {
   setup() {
     //安装时
     onMounted(() => {
-     const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance({
-          rootContainer: vtkContainer.value,
-        });
+     const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance();
       const renderer = fullScreenRenderer.getRenderer();
       const renderWindow = fullScreenRenderer.getRenderWindow();
 

+ 4 - 2
src/main.js

@@ -1,4 +1,6 @@
 import { createApp } from 'vue'
 import App from './App.vue'
-
-createApp(App).mount('#app')
+import ElementUI from 'element-plus'
+import 'element-plus/theme-chalk/index.css' // 引入整个Element样式
+//import '"element-plus/dist/index.css'
+createApp(App).use(ElementUI).mount('#app')

+ 642 - 0
src/view/index.vue

@@ -0,0 +1,642 @@
+<template>
+<div>
+<div>
+       <el-header class="fixed-header">
+        <el-menu class="headMenu_1" mode="horizontal">
+          <!-- <div class="log">
+            <el-image :src="adilog"></el-image>
+          </div> -->
+          <div class="log logtitle">
+          </div>
+          <el-menu-item index="2" @click="showHeadMenu('geneal')">文件
+          </el-menu-item>
+          <el-menu-item index="3" @click="showHeadMenu('physics')">灾情演化</el-menu-item>
+          <el-menu-item index="4" @click="showHeadMenu('solution')">动画</el-menu-item>
+          <el-menu-item index="5" @click="showHeadMenu('result')">帮助</el-menu-item>
+        </el-menu>
+      </el-header>
+</div>
+         <div class="headMenu_2" id="head2"  v-show="headMenu_2Show">
+        <div class="lg_weiyi">
+          <div class="el-padding">
+            <el-row> </el-row>
+          </div>
+        </div>
+</div>
+   <!-- Task Page的弹框的结束-->
+        <el-container class="beij-container">
+          <el-aside v-if="leftMenu_2Show" class="leftMenu_1_1">Aside</el-aside>
+          <el-container>
+            <el-main ref="main3d" :class="headMenu_2Show?'maxh400':'maxh221'">
+            </el-main>
+            <!-- <div class="x" @click="change">==</div> -->
+            <el-footer style="height: 160px" v-show="Consoleshow">
+              <div class="logs_title">
+                Console
+                <div class="x">x</div>
+              </div>
+              <div class="logs_console">
+                <textarea v-model="logs" style="width: 100%;height:120px">
+                  "欢迎来到HCFD!"
+                </textarea>
+              </div>
+            </el-footer>
+          </el-container>
+        </el-container>
+    </div>
+</template>
+
+<script>
+export default {
+  name: 'app',
+    data() {
+       return {
+           headMenu_2:false,
+            leftMenu_2Show: false,
+            headMenu_2Show: true,
+           Consoleshow:true,
+           logs:true,
+         
+       }
+     },
+    methods: {
+  showHeadMenu(el){
+      console.log(el)
+      if(el=='solution'){
+        this.headMenu_2Show=true;
+      }else{
+          this.headMenu_2Show=false;  
+      }
+
+  }
+  }
+}
+</script>
+
+<style>
+.el-header{
+    height: 40px !important;
+}
+.el-header ul{
+    padding-left: 120px;
+    height: 40px;
+    overflow: hidden;
+}
+html,body,.el-header{
+    padding: 0;
+    margin: 0;
+}
+.el-header,.el-footer{
+   padding: 0 !important;
+}
+@media screen and (max-width:1650px){
+  .headMenu_2 .el-col{
+    transform:scale(0.9);
+    transform-origin: 0 0;
+  }
+  .headMenu_2{
+    height:80px !important;
+  }
+}
+@media screen and (max-width:1330px){
+  .headMenu_2 .el-col{
+    transform:scale(0.8);
+    transform-origin: 0 0;
+  }
+  .headMenu_2{
+    height: 80px !important;
+  }
+  .asideTag2,.asideTag {
+    transform:scale(0.7);
+    transform-origin: 0 0;
+  }
+}
+@media screen and (max-width:1160px){
+  .headMenu_2 .el-col{
+    transform:scale(0.7);
+    transform-origin: 0 0;
+  }
+  .asideTag2{
+    left: 91%;
+  }
+  .el-aside{
+    width:100px !important;
+  }
+  .headMenu_2{
+    height: 80px !important;
+  }
+}
+body {
+  font-size: 62.5%;
+  position: relative;
+}
+.el-padding {
+  padding: 5px 20px;
+}
+.headMenu_1 {
+  background: #232426;
+}
+.logtitle {
+  color: #fff;
+}
+.el-header {
+  padding: 0;
+}
+.logs_console {
+  overflow: hidden;
+}
+.logs_console textarea{
+border:none;
+}
+.el-menu {
+  padding-left: 13px;
+}
+.el-menu .el-menu-item:hover {
+  background-color: #bfc5cb;
+  color: #333333;
+}
+
+.el-menu--horizontal > .el-menu-item {
+  color: #e4e4e4;
+}
+.el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
+  color: #e4e4e4;
+}
+.el-menu--horizontal > .el-menu-item.is-active {
+  color: #e4e4e4;
+}
+.el-menu--horizontal > .el-submenu .el-submenu__title {
+  color: #e4e4e4;
+  font-size: 16px;
+}
+.el-menu--horizontal {
+  -webkit-box-pack: inherit;
+  justify-content: flex-start;
+}
+.logtitle li:nth-child(1) {
+  margin-right: 100px;
+}
+.el-menu-item {
+  font-size: 16px;
+  padding: 0 35px;
+}
+#head2 {
+  background-color: #fff;
+}
+#lg-title {
+  text-align: left;
+  padding: 6px 0px 6px 3.125vw;
+}
+.Task-lg {
+  width: 100%;
+}
+.el-col-1 {
+  width: 0;
+}
+.title_content_1 {
+  padding-left: 2.96875vw;
+}
+.el-col-3 li {
+  padding: 6px 0;
+}
+.lg-er .el-col-3 li {
+  padding-top: 0;
+}
+.el-image {
+  padding-right: 4px;
+}
+.lg_weiyi .el-radio {
+  display: block;
+  padding: 6px 0 6px 3.125vw;
+}
+.el-dialog .el-input__inner {
+  height: 34px;
+  line-height: 34px;
+}
+.el-input--mini {
+  display: inline;
+}
+.lg-centent {
+  background-color: #f4f4f4;
+}
+.leiluoshu .el-form-item__content {
+  margin-left: 180px;
+}
+.lg-centent .el-row {
+  height: 100%;
+}
+.lg-modl {
+  width: 300px;
+  background: #f4f4f4;
+}
+.lg-centent .lg-modl .Task-lg {
+  overflow-y: auto;
+}
+.lg-san .el-col-3 li {
+  padding: 0;
+}
+
+.el-input--mini .el-input__inner {
+  width: 100%;
+}
+.el-radio__input.is-checked .el-radio__inner {
+  border-color: #333;
+  background: #333;
+}
+.beij-container {
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(180deg, #ccd3e2 0%, rgba(255, 255, 255, 0) 100%);
+}
+.el-footer {
+  padding: 0;
+  height: 149px;
+  /* overflow-y: auto; */
+}
+
+.el-input__inner {
+  height: 30px;
+}
+.el-input--mini {
+  display: inline;
+}
+.movieControlTitle {
+  font-weight: 700;
+  position: relative;
+  top: -8px;
+  background-color: #d7dce7;
+  padding: 0 10px;
+  font-size: 16px;
+}
+
+.el-main {
+  position: relative;
+  background-repeat: no-repeat;
+  
+}
+.maxh221{
+  height: calc(100vh - 205px);
+}
+.maxh400{
+height: calc(100vh - 286px);
+}
+body {
+font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
+  position: relative;
+  background-color: #eceef0;
+}
+.el-loading-mask {
+  background: none;
+}
+.el-tree {
+  background-color: #eceef0;
+  padding: 13px;
+}
+.lg-er .el-col {
+  padding: 0 12px;
+}
+.el-radio-button:first-child .el-radio-button__inner {
+  border-radius: 4px;
+}
+.el-radio-button:last-child .el-radio-button__inner {
+  border-radius: 4px;
+}
+.lg-er label {
+  padding: 5px 0;
+}
+.el-radio-button__inner {
+  border: none;
+}
+.lg-er label {
+  display: block;
+}
+.lg-form li {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.lg-form>li>span{
+  display:inline-block;
+  width:65%
+}
+.lg-form>li>.el-input{
+  width:35%
+}
+.lg-form {
+  padding-bottom: 5px;
+}
+.lg-san .el-col {
+  padding: 5px 0.5vw;
+}
+.lg-san label {
+  padding: 10px 0;
+}
+#head2 .lg-san input {
+  margin: 3px 0px;
+}
+.lg-san .el-padding {
+  padding: 0 20px;
+}
+
+.el-button + .el-button {
+  margin-left: 0;
+}
+.maxh100{
+  max-height: calc(100vh - 100px);
+}
+.maxh290{
+  max-height: calc(100vh - 290px);
+}
+.el-button{
+  margin-bottom: 2px;
+}
+.lg-si .el-input__inner {
+  padding: 0 0 0 0;
+}
+.lg-si-right {
+  padding-left: 30px;
+}
+.lg-button {
+  background-color: #4c4f54;
+  color: #fff;
+  border-radius: 10px;
+}
+.el-button--mini,
+.el-button--mini.is-round {
+  padding: 5px 15px;
+}
+.lg-san {
+  height: 189px;
+  overflow: auto;
+}
+.lg-si li {
+  padding: 2px 0;
+}
+.el-dialog__body .el-input {
+  padding: 5px 0;
+}
+.el-dialog__body .el-form li:first {
+  padding: 10px 0;
+}
+.logs_title {
+  background: #bfc5cb;
+  padding: 10px;
+  font-size: 16px;
+ text-align: left;
+}
+.el-col-4,
+.el-col-3 {
+  position: relative;
+}
+.lg-more {
+  position: absolute;
+  right: 0;
+  bottom: 15px;
+}
+.lg-bg .el-dialog__header {
+  background: #efefef;
+  border-color: #82848a;
+   text-align: center;
+   font-weight: 600;
+}
+.dialog-block label {
+  display: block;
+  font-size: 20px;
+}
+.el-dialog__footer {
+  padding: 0px 20px 20px;
+}
+.dialog-block .el-dialog {
+  width: 23%;
+}
+.Conditions .el-dialog {
+  width: 26%;
+}
+.el-dialog__body {
+  padding: 20px 20px;
+}
+.el-dialog {
+  max-width: 600px;
+  min-width: 452px;
+}
+.lg-Solution .el-dialog {
+  width: 16%;
+}
+.lg-Solution label {
+  display: block;
+  padding: 5px 0;
+}
+.lg-out-h .el-checkbox {
+  width: 40%;
+}
+
+.showright {
+  float: right;
+  margin-right: 20px;
+}
+.Task-lg li {
+  padding: 5px 0;
+}
+.Task-lg .el-radio {
+  display: block;
+  padding: 3px 0;
+}
+.tack-btn .el-button {
+  padding: 8px 16px;
+  display: block;
+}
+
+.outline {
+  font-size: 20px;
+  padding: 10px 20px;
+  font-weight: 600;
+}
+.pagination {
+  margin-top: 10px;
+}
+.pagination  .el-input{
+  padding: 0;
+}
+#head2 input {
+  padding-left: 5px;
+}
+.lg-modl .el-radio-button {
+  display: block;
+  padding: 5px 0;
+}
+.lg-modl .el-select {
+  display: block;
+  padding: 3px 0;
+}
+.lg-modl .lg-si-right {
+  padding: 0;
+}
+.lg-modl .task-si li label {
+  display: block;
+}
+.el-col-24 {
+  margin-bottom: 10px;
+}
+.x {
+  cursor: default;
+  float: right;
+}
+.lg-y-z .el-dialog {
+  width: 16%;
+}
+.gongju .el-form-item__content {
+  margin-left: 185px;
+}
+.gongju .el-form-item {
+  margin-bottom: 0;
+}
+.exloadbox{
+  float: right;
+  margin-right: 100px;
+}
+
+#head2 input {
+  margin: 3px 5px;
+}
+.contour .el-input-number__decrease,
+.el-input-number__increase {
+  top: 5px;
+  width: 40px;
+  cursor: pointer;
+  font-size: 13px;
+  height: 28px;
+  line-height: 28px;
+}
+.line {
+  width: 0px;
+  height: 99px;
+  border: 1px solid #d4d3d1;
+  float: right;
+}
+.lg_weiyi .title {
+  text-align: center;
+}
+.title {
+  font-size: 0.8vw !important;
+  margin: 6px 0px !important;
+  font-weight: 600;
+}
+.headMenu_2 {
+  height:80px;
+  overflow: hidden;
+  font-size: 12px;
+  width: 100%;
+}
+.headMenu_2 span{
+  font-size: 12px !important;
+}
+.headMenu_2 .el-input__inner{
+  padding:0 2px
+}
+.lisin>li{
+  display: flex;
+  align-items: center;
+}
+.lisin>li>span{
+  display: inline-block;
+  width:100px
+}
+.lisin>li>.el-input{
+  width:120px
+}
+.sblock{
+  display: inline-block;
+  width:40%
+}
+.disinblok{
+  display: inline-block;
+}
+.inpw50{
+  width:50%
+}
+.inpw100{
+  width:100%
+}
+.inpw35{
+  width:25%
+}
+.inpw75{
+  width:75px
+}
+.inpwidth{
+  flex:1
+}
+.lheig34{
+  line-height: 34px;
+}
+.pdingf10{
+  padding-left: 10px !important;
+}
+.move{
+  position: relative;
+  top: -8px;
+  right:-30px
+}
+.discenter{
+  display: flex;
+  justify-content: center;
+}
+.disrs{
+  display: flex;
+  flex-direction: row-reverse;
+}
+.padding0{
+  padding: 0 !important;
+}
+.marr30{
+  margin-right: 30px;
+}
+.marb5{
+  margin-bottom:5px
+}
+.disacent{
+  display: flex;
+  align-items: center;
+}
+.div64>div,
+.disflex,
+.disflex55{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.div64>div>span{
+  display: inline-block;
+  width:65%
+}
+.span100{
+  display: inline-block;
+  width: 100px;
+}
+.div64>div>.el-input{
+  width: 35%;
+}
+.disflex55>span{
+  display: inline-block;
+  width:50%
+}
+.disflex55>.el-input{
+  width:50%
+}
+.el-dialog__header{
+  font-size: 16px;
+  font-weight: 700;
+  background: #ccc;
+  padding: 0 10px;
+  line-height: 45px;
+}
+.flexpad30{
+  display: flex;
+}
+.flexpad30>div{
+  padding-right: 30px;
+}
+
+
+</style>
+