Merge branch 'master' of http://git.dayaedu.com/lex/dy-admin-live

package-lock.json

@@ -1244,6 +1244,66 @@
         "@jridgewell/sourcemap-codec": "^1.4.10"
       }
     },
+    "@mapbox/node-pre-gyp": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@mapbox/node-pre-gyp/-/node-pre-gyp-1.0.8.tgz",
+      "integrity": "sha512-CMGKi28CF+qlbXh26hDe6NxCd7amqeAzEqnS6IHeO6LoaKyM/n+Xw3HT1COdq8cuioOdlKdqn/hCmqPUOMOywg==",
+      "requires": {
+        "detect-libc": "^1.0.3",
+        "https-proxy-agent": "^5.0.0",
+        "make-dir": "^3.1.0",
+        "node-fetch": "^2.6.5",
+        "nopt": "^5.0.0",
+        "npmlog": "^5.0.1",
+        "rimraf": "^3.0.2",
+        "semver": "^7.3.5",
+        "tar": "^6.1.11"
+      },
+      "dependencies": {
+        "make-dir": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
+          "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
+          "requires": {
+            "semver": "^6.0.0"
+          },
+          "dependencies": {
+            "semver": {
+              "version": "6.3.0",
+              "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+              "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
+            }
+          }
+        },
+        "node-fetch": {
+          "version": "2.6.7",
+          "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz",
+          "integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==",
+          "requires": {
+            "whatwg-url": "^5.0.0"
+          }
+        },
+        "tr46": {
+          "version": "0.0.3",
+          "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+          "integrity": "sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o="
+        },
+        "webidl-conversions": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+          "integrity": "sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE="
+        },
+        "whatwg-url": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+          "integrity": "sha1-lmRU6HZUYuN2RNNib2dCzotwll0=",
+          "requires": {
+            "tr46": "~0.0.3",
+            "webidl-conversions": "^3.0.0"
+          }
+        }
+      }
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -1732,12 +1792,25 @@
         "vue-demi": "*"
       }
     },
+    "abbrev": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
+      "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q=="
+    },
     "acorn": {
       "version": "7.4.1",
       "resolved": "https://registry.npmmirror.com/acorn/-/acorn-7.4.1.tgz",
       "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
       "dev": true
     },
+    "agent-base": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
+      "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
+      "requires": {
+        "debug": "4"
+      }
+    },
     "ajv": {
       "version": "8.10.0",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.10.0.tgz",
@@ -1765,6 +1838,20 @@
         "color-convert": "^1.9.0"
       }
     },
+    "aproba": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/aproba/-/aproba-2.0.0.tgz",
+      "integrity": "sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ=="
+    },
+    "are-we-there-yet": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-2.0.0.tgz",
+      "integrity": "sha512-Ci/qENmwHnsYo9xKIcUJN5LeDKdJ6R1Z1j9V/J5wyq8nh/mYPEpIKJbBZXtZjG04HiK7zV/p6Vs9952MrMeUIw==",
+      "requires": {
+        "delegates": "^1.0.0",
+        "readable-stream": "^3.6.0"
+      }
+    },
     "arr-diff": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz",
@@ -1889,8 +1976,7 @@
     "balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-      "dev": true
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
     },
     "base": {
       "version": "0.11.2",
@@ -1929,7 +2015,6 @@
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
       "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "dev": true,
       "requires": {
         "balanced-match": "^1.0.0",
         "concat-map": "0.0.1"
@@ -2007,6 +2092,16 @@
       "integrity": "sha512-Wiz1Psk2MEK0pX3rUzWaunLTZzqS2JYZFzNKqAiJGiuxIjRPLgV6+VDPOg6lQOUxmDwhTlh198JsTTi8Hzw6aQ==",
       "dev": true
     },
+    "canvas": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/canvas/-/canvas-2.9.0.tgz",
+      "integrity": "sha512-0l93g7uxp7rMyr7H+XRQ28A3ud0dKIUTIEkUe1Dxh4rjUYN7B93+SjC3r1PDKA18xcQN87OFGgUnyw7LSgNLSQ==",
+      "requires": {
+        "@mapbox/node-pre-gyp": "^1.0.0",
+        "nan": "^2.15.0",
+        "simple-get": "^3.0.3"
+      }
+    },
     "chalk": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
@@ -2027,6 +2122,11 @@
         "is-regex": "^1.0.3"
       }
     },
+    "chownr": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
+      "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ=="
+    },
     "class-utils": {
       "version": "0.3.6",
       "resolved": "https://registry.npmjs.org/class-utils/-/class-utils-0.3.6.tgz",
@@ -2091,6 +2191,11 @@
       "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
       "dev": true
     },
+    "color-support": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz",
+      "integrity": "sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg=="
+    },
     "commander": {
       "version": "2.20.3",
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
@@ -2112,8 +2217,12 @@
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmmirror.com/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
-      "dev": true
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
+    },
+    "console-control-strings": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
+      "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4="
     },
     "constantinople": {
       "version": "4.0.1",
@@ -2241,7 +2350,6 @@
       "version": "4.3.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz",
       "integrity": "sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==",
-      "dev": true,
       "requires": {
         "ms": "2.1.2"
       }
@@ -2252,6 +2360,14 @@
       "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=",
       "dev": true
     },
+    "decompress-response": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-4.2.1.tgz",
+      "integrity": "sha512-jOSne2qbyE+/r8G1VU+G/82LBs2Fs4LAsTiLSHOCOMZQl2OKZ6i8i4IyHemTe+/yIXOtTcRQMzPcgyhoFlqPkw==",
+      "requires": {
+        "mimic-response": "^2.0.0"
+      }
+    },
     "deepmerge": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
@@ -2313,6 +2429,16 @@
         }
       }
     },
+    "delegates": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
+      "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o="
+    },
+    "detect-libc": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
+      "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups="
+    },
     "doctypes": {
       "version": "1.1.0",
       "resolved": "https://registry.npmmirror.com/doctypes/-/doctypes-1.1.0.tgz",
@@ -2414,6 +2540,11 @@
         "@emmetio/css-abbreviation": "^2.1.4"
       }
     },
+    "emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+    },
     "emojis-list": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
@@ -2817,11 +2948,18 @@
         "universalify": "^2.0.0"
       }
     },
+    "fs-minipass": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",
+      "integrity": "sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==",
+      "requires": {
+        "minipass": "^3.0.0"
+      }
+    },
     "fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/fs.realpath/-/fs.realpath-1.0.0.tgz",
-      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
-      "dev": true
+      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="
     },
     "fsevents": {
       "version": "2.3.2",
@@ -2835,6 +2973,37 @@
       "resolved": "https://registry.npmmirror.com/function-bind/-/function-bind-1.1.1.tgz",
       "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
     },
+    "gauge": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/gauge/-/gauge-3.0.2.tgz",
+      "integrity": "sha512-+5J6MS/5XksCuXq++uFRsnUd7Ovu1XenbeuIuNRJxYWjgQbPuFhT14lAvsWfqfAmnwluf1OwMjz39HjfLPci0Q==",
+      "requires": {
+        "aproba": "^1.0.3 || ^2.0.0",
+        "color-support": "^1.1.2",
+        "console-control-strings": "^1.0.0",
+        "has-unicode": "^2.0.1",
+        "object-assign": "^4.1.1",
+        "signal-exit": "^3.0.0",
+        "string-width": "^4.2.3",
+        "strip-ansi": "^6.0.1",
+        "wide-align": "^1.1.2"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+          "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="
+        },
+        "strip-ansi": {
+          "version": "6.0.1",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+          "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+          "requires": {
+            "ansi-regex": "^5.0.1"
+          }
+        }
+      }
+    },
     "gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
@@ -2877,7 +3046,6 @@
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz",
       "integrity": "sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==",
-      "dev": true,
       "requires": {
         "fs.realpath": "^1.0.0",
         "inflight": "^1.0.4",
@@ -2951,6 +3119,11 @@
         "has-symbols": "^1.0.2"
       }
     },
+    "has-unicode": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
+      "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk="
+    },
     "has-value": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/has-value/-/has-value-1.0.0.tgz",
@@ -3033,6 +3206,15 @@
         "entities": "^3.0.1"
       }
     },
+    "https-proxy-agent": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.0.tgz",
+      "integrity": "sha512-EkYm5BcKUGiduxzSt3Eppko+PiNWNEpa4ySk9vTC6wDsQJW9rHSa+UhGNJoRYp7bz6Ht1eaRIa6QaJqO5rCFbA==",
+      "requires": {
+        "agent-base": "6",
+        "debug": "4"
+      }
+    },
     "iconv-lite": {
       "version": "0.6.3",
       "resolved": "https://registry.npmmirror.com/iconv-lite/-/iconv-lite-0.6.3.tgz",
@@ -3057,7 +3239,6 @@
       "version": "1.0.6",
       "resolved": "https://registry.npmmirror.com/inflight/-/inflight-1.0.6.tgz",
       "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
-      "dev": true,
       "requires": {
         "once": "^1.3.0",
         "wrappy": "1"
@@ -3066,8 +3247,7 @@
     "inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "dev": true
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
     "internal-slot": {
       "version": "1.0.3",
@@ -3202,6 +3382,11 @@
       "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
       "dev": true
     },
+    "is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg=="
+    },
     "is-glob": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
@@ -3398,6 +3583,11 @@
       "integrity": "sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==",
       "dev": true
     },
+    "js-binary-schema-parser": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/js-binary-schema-parser/-/js-binary-schema-parser-2.0.3.tgz",
+      "integrity": "sha512-xezGJmOb4lk/M1ZZLTR/jaBHQ4gG/lqQnJqdIv4721DMggsa1bDVlHXNeHYogaIEHD9vCRv0fcL4hMA+Coarkg=="
+    },
     "js-cookie": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.1.tgz",
@@ -3572,7 +3762,6 @@
       "version": "6.0.0",
       "resolved": "https://registry.npmmirror.com/lru-cache/-/lru-cache-6.0.0.tgz",
       "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-      "dev": true,
       "requires": {
         "yallist": "^4.0.0"
       }
@@ -3669,11 +3858,15 @@
       "dev": true,
       "optional": true
     },
+    "mimic-response": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-2.1.0.tgz",
+      "integrity": "sha512-wXqjST+SLt7R009ySCglWBCFpjUygmCIfD790/kVbiGmUgfYGuB14PiTd5DwVxSV4NcYHjzMkoj5LjQZwTQLEA=="
+    },
     "minimatch": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.1.tgz",
       "integrity": "sha512-reLxBcKUPNBnc/sVtAbxgRVFSegoGeLaSjmphNhcwcolhYLRgtJscn5mRl6YRZNQv40Y7P6JM2YhSIsbL9OB5A==",
-      "dev": true,
       "requires": {
         "brace-expansion": "^1.1.7"
       }
@@ -3684,6 +3877,23 @@
       "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
       "dev": true
     },
+    "minipass": {
+      "version": "3.1.6",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.1.6.tgz",
+      "integrity": "sha512-rty5kpw9/z8SX9dmxblFA6edItUmwJgMeYDZRrwlIVN27i8gysGbznJwUggw2V/FVqFSDdWy040ZPS811DYAqQ==",
+      "requires": {
+        "yallist": "^4.0.0"
+      }
+    },
+    "minizlib": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-2.1.2.tgz",
+      "integrity": "sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==",
+      "requires": {
+        "minipass": "^3.0.0",
+        "yallist": "^4.0.0"
+      }
+    },
     "mitt": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.0.tgz",
@@ -3710,11 +3920,20 @@
         }
       }
     },
+    "mkdirp": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
+      "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw=="
+    },
     "ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-      "dev": true
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+    },
+    "nan": {
+      "version": "2.15.0",
+      "resolved": "https://registry.npmjs.org/nan/-/nan-2.15.0.tgz",
+      "integrity": "sha512-8ZtvEnA2c5aYCZYd1cvgdnU6cqwixRoYg70xPLWUws5ORTa/lnw+u4amixRS/Ac5U5mQVgp9pnlSUnbNWFaWZQ=="
     },
     "nanoid": {
       "version": "3.2.0",
@@ -3855,11 +4074,30 @@
       "integrity": "sha512-XxYDdcQ6eKqp/YjI+tb2C5WM2LgjnZrfYg4vgQt49EK268b6gYCHsBLrK2qvJo4FmCtqmKezb0WZFK4fkrZNsg==",
       "dev": true
     },
+    "nopt": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/nopt/-/nopt-5.0.0.tgz",
+      "integrity": "sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==",
+      "requires": {
+        "abbrev": "1"
+      }
+    },
     "normalize-wheel-es": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/normalize-wheel-es/-/normalize-wheel-es-1.1.1.tgz",
       "integrity": "sha512-157VNH4CngrcsvF8xOVOe22cwniIR3nxSltdctvQeHZj8JttEeOXffK28jucWfWBXs0QNetAumjc1GiInnwX4w=="
     },
+    "npmlog": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-5.0.1.tgz",
+      "integrity": "sha512-AqZtDUWOMKs1G/8lwylVjrdYgqA4d9nu8hc+0gzRxlDb1I10+FHBGMXs6aiQHFdCUUlqH99MUMuLfzWDNDtfxw==",
+      "requires": {
+        "are-we-there-yet": "^2.0.0",
+        "console-control-strings": "^1.1.0",
+        "gauge": "^3.0.0",
+        "set-blocking": "^2.0.0"
+      }
+    },
     "nprogress": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/nprogress/-/nprogress-0.2.0.tgz",
@@ -3877,8 +4115,7 @@
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmmirror.com/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="
     },
     "object-copy": {
       "version": "0.1.0",
@@ -3956,7 +4193,6 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmmirror.com/once/-/once-1.4.0.tgz",
       "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
-      "dev": true,
       "requires": {
         "wrappy": "1"
       }
@@ -3976,8 +4212,7 @@
     "path-is-absolute": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
-      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
-      "dev": true
+      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg=="
     },
     "path-parse": {
       "version": "1.0.7",
@@ -4347,7 +4582,6 @@
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
       "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
-      "dev": true,
       "requires": {
         "inherits": "^2.0.3",
         "string_decoder": "^1.1.1",
@@ -4515,6 +4749,14 @@
       "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
       "dev": true
     },
+    "rimraf": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+      "requires": {
+        "glob": "^7.1.3"
+      }
+    },
     "rollup": {
       "version": "2.67.2",
       "resolved": "https://registry.npmmirror.com/rollup/-/rollup-2.67.2.tgz",
@@ -4576,7 +4818,6 @@
       "version": "7.3.5",
       "resolved": "https://registry.npmmirror.com/semver/-/semver-7.3.5.tgz",
       "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==",
-      "dev": true,
       "requires": {
         "lru-cache": "^6.0.0"
       }
@@ -4590,6 +4831,11 @@
         "randombytes": "^2.1.0"
       }
     },
+    "set-blocking": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+      "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc="
+    },
     "set-value": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/set-value/-/set-value-2.0.1.tgz",
@@ -4612,6 +4858,26 @@
         "object-inspect": "^1.9.0"
       }
     },
+    "signal-exit": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
+      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ=="
+    },
+    "simple-concat": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/simple-concat/-/simple-concat-1.0.1.tgz",
+      "integrity": "sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q=="
+    },
+    "simple-get": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/simple-get/-/simple-get-3.1.1.tgz",
+      "integrity": "sha512-CQ5LTKGfCpvE1K0n2us+kuMPbk/q0EKl82s4aheV9oXjFEz6W/Y7oQFVJuU6QG77hRT4Ghb5RURteF5vnWjupA==",
+      "requires": {
+        "decompress-response": "^4.2.0",
+        "once": "^1.3.1",
+        "simple-concat": "^1.0.0"
+      }
+    },
     "snapdragon": {
       "version": "0.8.2",
       "resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz",
@@ -4798,6 +5064,31 @@
       "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=",
       "dev": true
     },
+    "string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "requires": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+          "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="
+        },
+        "strip-ansi": {
+          "version": "6.0.1",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+          "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+          "requires": {
+            "ansi-regex": "^5.0.1"
+          }
+        }
+      }
+    },
     "string.prototype.matchall": {
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.6.tgz",
@@ -4838,7 +5129,6 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
       "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
-      "dev": true,
       "requires": {
         "safe-buffer": "~5.2.0"
       },
@@ -4846,8 +5136,7 @@
         "safe-buffer": {
           "version": "5.2.1",
           "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
-          "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
-          "dev": true
+          "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ=="
         }
       }
     },
@@ -5091,6 +5380,19 @@
       "integrity": "sha512-hqTN6kW+pN6/qro6G9OZ7ceDQOcYno020zBQKpZQLsJhYTDMCMNfXi/Y8duF5iW+4WWZr42ry0MMkcRGpbwG2A==",
       "dev": true
     },
+    "tar": {
+      "version": "6.1.11",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-6.1.11.tgz",
+      "integrity": "sha512-an/KZQzQUkZCkuoAA64hM92X0Urb6VpRhAFllDzz44U2mcD5scmT3zBc4VgVpkugF580+DQn8eAFSyoQt0tznA==",
+      "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"
+      }
+    },
     "temp-dir": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-2.0.0.tgz",
@@ -5434,8 +5736,7 @@
     "util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
-      "dev": true
+      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
     },
     "vary": {
       "version": "1.1.2",
@@ -5692,6 +5993,15 @@
       "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.12.1.tgz",
       "integrity": "sha512-QL3ny+wX8c6Xm1/EZylbgzdoDolye+VpCXRhI2hug9dJTP3OUJ3lmiKN3CsVV3mOJKwFi0nsstbgob0vG7aoIw=="
     },
+    "vue-qr": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/vue-qr/-/vue-qr-3.2.4.tgz",
+      "integrity": "sha512-wQaoC0JKt3bR8Y0ql0SFF/QfL77ZTN/lov7msSccJJJSUBFauj+1l8dSD8GiU88YitEOKKhoKm4LUPdPiDi2/g==",
+      "requires": {
+        "canvas": "2.9",
+        "js-binary-schema-parser": "^2.0.2"
+      }
+    },
     "vue-router": {
       "version": "4.0.12",
       "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-4.0.12.tgz",
@@ -5750,6 +6060,14 @@
         "is-symbol": "^1.0.3"
       }
     },
+    "wide-align": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.5.tgz",
+      "integrity": "sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==",
+      "requires": {
+        "string-width": "^1.0.2 || 2 || 3 || 4"
+      }
+    },
     "with": {
       "version": "7.0.2",
       "resolved": "https://registry.npmmirror.com/with/-/with-7.0.2.tgz",
@@ -5971,14 +6289,12 @@
     "wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
-      "dev": true
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
     },
     "yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmmirror.com/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-      "dev": true
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
     }
   }
 }

package.json

@@ -18,6 +18,7 @@
     "nprogress": "^0.2.0",
     "umi-request": "^1.4.0",
     "vue": "^3.2.25",
+    "vue-qr": "^3.2.4",
     "vue-router": "^4.0.12",
     "vue-virtual-scroller": "^2.0.0-alpha.1",
   },

src/components/live-broadcast/action-bar.tsx

@@ -1,5 +1,5 @@
 import { defineComponent } from 'vue'
-import { ElButton, ElDropdown, ElDropdownMenu, ElDropdownItem, ElSlider, ElIcon } from 'element-plus'
+import { ElButton, ElDropdown, ElDropdownMenu, ElDropdownItem, ElSlider, ElDialog, ElIcon } from 'element-plus'
 import runtime, * as RuntimeUtils from './runtime'
 import styles from './action-bar.module.less'
 
@@ -14,7 +14,9 @@ export default defineComponent({
         microphone: false, // 麦克风
         screen: false, // 共享屏幕
         share: false, // 分享
-      } as {[key: string]: boolean},
+      } as { [key: string]: boolean },
+      volume: 20,
+      shareVisiable: false
     }
   },
   computed: {
@@ -31,6 +33,9 @@ export default defineComponent({
     }
   },
   methods: {
+    startShare() {
+      this.shareVisiable = true
+    },
     volumeChange(value: number) {
       this.volume = value
       RuntimeUtils.setVolume(value)
@@ -137,57 +142,60 @@ export default defineComponent({
           </div> */}
           <div class={styles['bar-btn']}>
             <div class={styles.btnInner}>
-              <SvgIcon
-                onClick={() => { this.barStatus.microphone = !this.barStatus.microphone }}
-                name={this.isMicrophoneDisabled ? 'bar-mike-disabled' : 'bar-mike'}
-                style={{
-                  width: '22px',
-                  cursor: 'pointer'
-                }}
-              />
-              <ElDropdown
-                placement="top-start"
-                popper-options={{ boundariesElement: '#action-bar', gpuAcceleration: false }}
-                onCommand={RuntimeUtils.setSelectMicrophone}
-                // @ts-ignore
-                vSlots={{
-                  dropdown: () => (
-                    <ElDropdownMenu>
-                      {runtime.microphones.map(item => (<ElDropdownItem command={item}>{item.label}</ElDropdownItem>))}
-                    </ElDropdownMenu>
-                  )
-                }}
-              >
-                <div class={styles['bar-btn']} style={{ height: '32px' }}>
+            <SvgIcon
+              onClick={() => { this.barStatus.microphone = !this.barStatus.microphone }}
+              name={this.isMicrophoneDisabled ? 'bar-mike-disabled' : 'bar-mike'}
+              style={{
+                width: '22px',
+                cursor: 'pointer'
+              }}
+            />
+            <ElDropdown
+              placement="top-start"
+              popper-options={{ boundariesElement: '#action-bar', gpuAcceleration: false }}
+              onCommand={RuntimeUtils.setSelectMicrophone}
+              // @ts-ignore
+              vSlots={{
+                dropdown: () => (
+                  <ElDropdownMenu>
+                    {runtime.microphones.map(item => (<ElDropdownItem command={item}>{item.label}</ElDropdownItem>))}
+                  </ElDropdownMenu>
+                )
+              }}
+            >
+              <div class={styles['bar-btn']} style={{ height: '32px' }}>
+                <SvgIcon
+                  name="bar-arrow-down"
+                  style={{
+                    width: '18px'
+                  }}
+                />
+              </div>
+            </ElDropdown>
+        </div>
+        <span class={styles['bar-btn-text']}>麦克风</span>
+      </div>
+
+    </div>
+      <div style={{ display: 'flex' }}>
+        <div class={styles['bar-btn']} >
+          <div class={styles.btnInner}>
                   <SvgIcon
-                    name="bar-arrow-down"
+                    name="bar-share"
                     style={{
-                      width: '18px'
+                      width: '22px',
+                      cursor: 'pointer'
                     }}
                   />
-                </div>
-              </ElDropdown>
+              </div>
+              <span class={styles['bar-btn-text']}>分享</span>
             </div>
-            <span class={styles['bar-btn-text']}>麦克风</span>
           </div>
-
+          {/* <ElButton onClick={RuntimeUtils.shareScreenVideo}>屏幕共享</ElButton> */}
+          <ElDialog modelValue={this.shareVisiable} title="分享" before-close={() => { this.shareVisiable = false }}>
+            11111
+          </ElDialog>         
         </div>
-        <div style={{ display: 'flex' }}>
-          <div class={styles['bar-btn']} >
-            <div class={styles.btnInner}>
-              <SvgIcon
-                name="bar-share"
-                style={{
-                  width: '22px',
-                  cursor: 'pointer'
-                }}
-              />
-            </div>
-            <span class={styles['bar-btn-text']}>分享</span>
-          </div>
-        </div>
-        {/* <ElButton onClick={RuntimeUtils.shareScreenVideo}>屏幕共享</ElButton> */}
-      </div>
-    )
+        )
   }
 })

src/components/live-broadcast/preview.module.less

@@ -0,0 +1,153 @@
+.third {
+    position: relative;
+    background: linear-gradient(135deg, #8d8cff 0%, #9664ec 100%);
+    padding: 43px 20px 54px;
+    h2 {
+      width: 254px;
+      font-size: 30px;
+      font-family: PingFangSC-Semibold, PingFang SC;
+      font-weight: 600;
+      color: #ffffff;
+      line-height: 40px;
+      text-shadow: 0px 2px 4px #9366ee;
+    }
+    .preCore {
+      .title {
+        background: #fa912c;
+      }
+    }
+  }
+  .second {
+    position: relative;
+    background: linear-gradient(135deg, #ff9d9d 0%, #ff6d6d 100%);
+    padding: 43px 20px 54px;
+    h2 {
+      width: 254px;
+      font-size: 30px;
+      font-family: PingFangSC-Semibold, PingFang SC;
+      font-weight: 600;
+      color: #ffffff;
+      line-height: 40px;
+      text-shadow: 0px 2px 4px #ff5f5f;
+    }
+    .preCore {
+      .title {
+        background: #fa502c;
+      }
+    }
+  }
+  .first {
+    position: relative;
+    background: linear-gradient(135deg, #4f8dff 0%, #0055ee 100%);
+    padding: 43px 20px 54px;
+    h2 {
+      width: 254px;
+      font-size: 30px;
+      font-family: PingFangSC-Semibold, PingFang SC;
+      font-weight: 600;
+      color: #ffffff;
+      line-height: 40px;
+      text-shadow: 0px 2px 4px #1054f1;
+    }
+  }
+  .icon {
+    width: 231px;
+    height: 223px;
+    position: absolute;
+    right: 3px;
+    top: 36px;
+  }
+  
+  .teacher {
+    font-size: 16px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #ffffff;
+    line-height: 20px;
+    margin-top: 15px;
+    margin-bottom: 67px;
+  }
+  .preCore {
+    position: relative;
+    z-index: 100;
+    padding: 12px;
+    background: #ffffff;
+    border-radius: 11px;
+    border-image: linear-gradient(
+        180deg,
+        rgba(255, 255, 255, 1),
+        rgba(255, 255, 255, 1)
+      )
+      1 1;
+    .start {
+      width: 50px;
+      height: 59px;
+      position: absolute;
+      top: 24px;
+      right: -11px;
+    }
+    .title {
+      width: 85px;
+      background: #faab2c;
+      border-radius: 7px;
+      padding: 2px;
+      font-size: 18px;
+      font-family: PingFangSC-Semibold, PingFang SC;
+      font-weight: 600;
+      color: #ffffff;
+      line-height: 25px;
+      text-align: center;
+    }
+    .time {
+      margin: 15px 0;
+      font-size: 18px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 600;
+      color: #000000;
+      line-height: 25px;
+      margin-left: 4px;
+    }
+    .content {
+      margin-top: 20px;
+      position: relative;
+      background: linear-gradient(49deg, #fff8e2 0%, #fff1d5 100%);
+      border-radius: 8px;
+      padding: 20px;
+      font-size: 14px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #000000;
+      line-height: 25px;
+      margin-bottom: 12px;
+      .pre {
+        width: 20px;
+        height: 20px;
+        position: absolute;
+        left: -3px;
+        top: -4px;
+      }
+      .end {
+        width: 20px;
+        height: 20px;
+        position: absolute;
+        bottom: -4px;
+        right: 10px;
+      }
+    }
+  }
+  .bottom {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    margin: 30px 8px 0;
+    .logo {
+      width: 202px;
+      height: 84px;
+    }
+    .code {
+      padding: 2px;
+      width: 80px;
+      height: 80px;
+      background-color: #fff;
+    }
+  }

src/components/live-broadcast/preview.tsx

@@ -0,0 +1,105 @@
+import { defineComponent } from 'vue'
+import { ElButton, ElFormItem, ElForm, ElRadio } from 'element-plus'
+import runtime, * as RuntimeUtils from './runtime'
+import styles from './preview.module.less'
+import vueQr from 'vue-qr/src/packages/vue-qr.vue'
+export default defineComponent({
+    name: 'LiveBroadcastSharePreview',
+    props: ['form'],
+    data() {
+        return {
+            detail: {
+                roomTitle: '',
+                liveStartTime: '',
+                liveRemark: '',
+            },
+            url: "http://www.baidu.com",
+        }
+    },
+    methods: {
+        copyText() {
+
+        },
+        shareImage() {
+
+        }
+    },
+    render() {
+        return (
+            <div>
+                <div class="first" v-if={this.form.preTemplate == 1}>
+                    <h2>{this.form.roomTitle}</h2>
+                    <p class="teacher">主讲人：{this.form.teacherName}</p>
+                    <img src="./images/icon1.png" class="icon" alt="" />
+                    <div class="preCore">
+                        <img src="./images/start.png" class="start" alt="" />
+                        <p class="title">开播时间</p>
+                        <p class="time">{this.form.liveStartTime}</p>
+                        <p class="title">直播内容</p>
+                        <div class="content">
+                            <img class="pre" src="./images/icon5.png" alt="" />
+                            <img class="end" src="./images/icon4.png" alt="" />
+                            {this.form.liveRemark}
+                        </div>
+                    </div>
+                    <div class="bottom">
+                        <img class="logo" src="./images/logo.png" alt="" />
+                        <div class="code">
+                            <div>
+                                <vue-qr text={this.url} style="width: 100%; margin='0'"></vue-qr>
+                            </div>
+                        </div>
+                    </div >
+                </div>
+                <div class="second" v-if={this.form.preTemplate == 2}>
+                    <h2>{this.form.roomTitle}</h2>
+                    <p class="teacher">主讲人：{this.form.teacherName}</p>
+                    <img src="./images/icon2.png" class="icon" alt="" />
+                    <div class="preCore">
+                        <img src="./images/start.png" class="start" alt="" />
+                        <p class="title">开播时间</p>
+                        <p class="time">{this.form.liveStartTime}</p>
+                        <p class="title">直播内容</p>
+                        <div class="content">
+                            <img class="pre" src="./images/icon5.png" alt="" />
+                            <img class="end" src="./images/icon4.png" alt="" />
+                            {this.form.liveRemark}
+                        </div>
+                    </div>
+                    <div class="bottom">
+                        <img class="logo" src="./images/logo.png" alt="" />
+                        <div class="code">
+                            <div>
+                                <vue-qr text={this.url} style="width: 100%;margin='0'"></vue-qr>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="third" v-if={this.form.preTemplate == 3}>
+                    <h2>{this.form.roomTitle }</h2>
+                    <p class="teacher">主讲人：{ this.form.teacherName }</p>
+                    <img src="./images/icon3.png" class="icon" alt="" />
+                    <div class="preCore">
+                        <img src="./images/start.png" class="start" alt="" />
+                        <p class="title">开播时间</p>
+                        <p class="time">{ this.form.liveStartTime }</p>
+                        <p class="title">直播内容</p>
+                        <div class="content">
+                            <img class="pre" src="./images/icon5.png" alt="" />
+                            <img class="end" src="./images/icon4.png" alt="" />
+                            {this.form.liveRemark }
+                        </div>
+                    </div>
+                    <div class="bottom">
+                        <img class="logo" src="./images/logo.png" alt="" />
+                        <div class="code">
+                            <div>
+                                <vue-qr text={this.url} style="width: 100% margin:0"></vue-qr>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            </div >
+        )
+    },
+})

src/components/live-broadcast/share.tsx

@@ -0,0 +1,59 @@
+import { defineComponent } from 'vue'
+import { ElButton, ElFormItem, ElForm, ElRadio } from 'element-plus'
+import runtime, * as RuntimeUtils from './runtime'
+import styles from './share.module.less'
+export default defineComponent({
+    name: 'LiveBroadcastShare',
+    data() {
+        return {
+            form: { shareType: 1 },
+            detail: {
+                roomTitle: '',
+                liveStartTime: '',
+                liveRemark: '',
+            }
+        }
+    },
+    methods: {
+        copyText() {
+
+        },
+        shareImage() {
+
+        }
+    },
+    render() {
+        return (
+            <div class={styles.header}>
+                <ElForm model={this.form} ref="form" class="form">
+                    <ElFormItem label="分享方式" >
+                        <ElRadio modelValue={this.form.shareType} label="1">链接分享</ElRadio>
+                        <ElRadio modelValue={this.form.shareType} label="2">二维码分享</ElRadio>
+                        <ElRadio modelValue={this.form.shareType} label="3">群聊分享</ElRadio>
+                    </ElFormItem>
+                </ElForm>
+                <div>
+                    <div class="linkWrap" v-if={this.form.shareType == 1}>
+                        <div class="shareWrap">
+                            <h2>乐团老师邀请您参与直播课！</h2>
+                            <h4>{this.detail.roomTitle}111</h4>
+                            <p>直播时间:{this.detail.liveStartTime}</p>
+                            <p>直播内容:{this.detail.liveRemark}</p>
+                            <p>直播地址:</p>
+                        </div>
+                        <div class="shareBtn" onClick={this.copyText}>复制分享内容</div>
+                    </div>
+                </div >
+                <div class="codeWrap" v-if={this.form.shareType == 2}>
+                    <div class="shareWrap">
+                        <preview form={this.detail} id="preview" />
+                    </div>
+                    <div class="shareBtn" onClick={this.shareImage}>复制分享内容</div>
+                </div>
+                <div class="groupWrap" v-if={this.form.shareType == 3}>
+                    <groupChat />
+                </div>
+            </div>
+        )
+    }
+})