feat: 🎸 新增二维码组件

Author: kailong321200875

mock/role/admin-role.ts

@@ -46,6 +46,10 @@ export const checkedNodes = [{
     'path': '/components-demo/detail',
     'title': '详情组件',
     'name': 'DetailDemo'
+  }, {
+    'path': '/components-demo/qrcode',
+    'title': '二维码组件',
+    'name': 'QrcodeDemo'
   }]
 }, {
   'path': '/components-demo/echarts',
@@ -91,6 +95,10 @@ export const checkedNodes = [{
   'path': '/components-demo/detail',
   'title': '详情组件',
   'name': 'DetailDemo'
+}, {
+  'path': '/components-demo/qrcode',
+  'title': '二维码组件',
+  'name': 'QrcodeDemo'
 }, {
   'path': '/table-demo',
   'title': '表格',
@@ -407,7 +415,7 @@ export const checkedNodes = [{
 export const checkedkeys = ['/components-demo', '/components-demo/echarts', '/components-demo/preview',
   '/components-demo/button', '/components-demo/message', '/components-demo/count-to', '/components-demo/search',
   '/components-demo/editor', '/components-demo/markdown', '/components-demo/dialog', '/components-demo/more',
-  '/components-demo/detail', '/table-demo', '/table-demo/basic-table', '/table-demo/page-table',
+  '/components-demo/detail', '/components-demo/qrcode', '/table-demo', '/table-demo/basic-table', '/table-demo/page-table',
   '/table-demo/stripe-table', '/table-demo/border-table', '/table-demo/state-table', '/table-demo/fixed-header',
   '/table-demo/fixed-column', '/table-demo/fixed-column-header', '/table-demo/fluid-height',
   '/table-demo/multi-header', '/table-demo/single-choice', '/table-demo/multiple-choice', '/table-demo/sort-table',

mock/role/test-role.ts

@@ -97,6 +97,14 @@ export const checkedRoleNodes = [
         meta: {
           title: '详情组件'
         }
+      },
+      {
+        path: 'qrcode',
+        component: 'pages/index/views/components-demo/qrcode/index',
+        name: 'QrcodeDemo',
+        meta: {
+          title: '二维码组件'
+        }
       }
     ]
   },

package.json

@@ -28,6 +28,7 @@
     "normalize.css": "^8.0.1",
     "nprogress": "^0.2.0",
     "path-to-regexp": "^6.2.0",
+    "qrcode": "^1.4.4",
     "qs": "^6.9.4",
     "screenfull": "^5.0.2",
     "vditor": "^3.7.0",
@@ -46,6 +47,7 @@
     "@types/lodash-es": "^4.17.3",
     "@types/mockjs": "^1.0.3",
     "@types/nprogress": "^0.2.0",
+    "@types/qrcode": "^1.3.5",
     "@typescript-eslint/eslint-plugin": "^4.5.0",
     "@typescript-eslint/parser": "^4.5.0",
     "@vue/cli-plugin-babel": "^4.5.9",

public/index.html

@@ -11,7 +11,126 @@
     <noscript>
       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
-    <div id="app"></div>
+    <div id="app">
+      <style>
+        .app-loading {
+          display: flex;
+          width: 100%;
+          height: 100%;
+          justify-content: center;
+          align-items: center;
+          flex-direction: column;
+          background: #f0f2f5;
+        }
+        .app-loading .app-loading-wrap {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          display: flex;
+          -webkit-transform: translate3d(-50%, -50%, 0);
+          transform: translate3d(-50%, -50%, 0);
+          justify-content: center;
+          align-items: center;
+          flex-direction: column;
+        }
+        .app-loading .app-loading-title {
+          font-size: 20px;
+          font-weight: bold;
+          text-align: center;
+          margin-bottom: 30px;
+        }
+        .app-loading .app-loading-logo {
+          width: 100px;
+          margin-bottom: 15px;
+        }
+        .app-loading .app-loading-item {
+          position: relative;
+          width: 60px;
+          height: 60px;
+          border-radius: 50%;
+          display: inline-block;
+          vertical-align: middle;
+        }
+        .app-loading .app-loading-outter {
+          position: absolute;
+          border: 4px solid #2d8cf0;
+          border-left-color: transparent;
+          border-bottom: 0;
+          width: 100%;
+          height: 100%;
+          border-radius: 50%;
+          animation: loader-outter 1s cubic-bezier(.42, .61, .58, .41) infinite;
+        }
+        .app-loading .app-loading-inner {
+          position: absolute;
+          border: 4px solid #87bdff;
+          border-radius: 50%;
+          width: 40px;
+          height: 40px;
+          left: calc(50% - 20px);
+          top: calc(50% - 20px);
+          border-right: 0;
+          border-top-color: transparent;
+          animation: loader-inner 1s cubic-bezier(.42, .61, .58, .41) infinite;
+        }
+      
+        @-webkit-keyframes loader-outter {
+          0% {
+            -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+          }
+          100% {
+            -webkit-transform: rotate(360deg);
+            transform: rotate(360deg);
+          }
+        }
+        
+        @keyframes loader-outter {
+          0% {
+            -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+          }
+          100% {
+            -webkit-transform: rotate(360deg);
+            transform: rotate(360deg);
+          }
+        }
+        
+        @-webkit-keyframes loader-inner {
+          0% {
+            -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+          }
+          100% {
+            -webkit-transform: rotate(-360deg);
+            transform: rotate(-360deg);
+          }
+        }
+        
+        @keyframes loader-inner {
+          0% {
+            -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+          }
+          100% {
+            -webkit-transform: rotate(-360deg);
+            transform: rotate(-360deg);
+          }
+        }
+      </style>
+      <div class="app-loading">
+        <div class="app-loading-wrap">
+          <div class="app-loading-title">
+            <img src="./logo.png" class="app-loading-logo" alt="Logo" />
+            <div class="app-loading-title"><%= htmlWebpackPlugin.options.title %></div>
+          </div>
+          <div class="app-loading-item">
+            <div class="app-loading-outter"></div>
+            <div class="app-loading-inner"></div>
+          </div>
+        </div>
+      </div>
+    </div>
     <!-- built files will be auto injected -->
   </body>
 </html>