Merge branch 'develop'

Author: Armour

mock/role/routes.ts

@@ -7,7 +7,7 @@ export const constantRoutes = [
     meta: { hidden: true },
     children: [
       {
-        path: '/redirect/:path*',
+        path: '/redirect/:path(.*)',
         component: 'views/redirect/index'
       }
     ]

package.json

@@ -14,14 +14,14 @@
     "test:unit": "jest --clearCache && vue-cli-service test:unit"
   },
   "dependencies": {
-    "@tinymce/tinymce-vue": "^3.0.1",
-    "axios": "^0.19.0",
+    "@tinymce/tinymce-vue": "^3.1.0",
+    "axios": "^0.19.2",
     "clipboard": "^2.0.4",
-    "codemirror": "^5.49.2",
-    "core-js": "^3.4.5",
+    "codemirror": "^5.51.0",
+    "core-js": "^3.6.4",
     "cors": "^2.8.5",
     "driver.js": "^0.9.8",
-    "echarts": "^4.5.0",
+    "echarts": "^4.6.0",
     "element-ui": "^2.13.0",
     "faker": "^4.1.0",
     "file-saver": "^2.0.2",
@@ -35,79 +35,79 @@
     "nprogress": "^0.2.0",
     "path-to-regexp": "^6.1.0",
     "register-service-worker": "^1.6.2",
-    "screenfull": "^5.0.0",
+    "screenfull": "^5.0.1",
     "script-loader": "^0.7.2",
     "simple-progress-webpack-plugin": "^1.1.2",
-    "sortablejs": "^1.10.1",
-    "tinymce": "^5.1.2",
-    "tui-editor": "^1.4.8",
-    "vue": "^2.6.10",
-    "vue-class-component": "^7.1.0",
+    "sortablejs": "^1.10.2",
+    "tinymce": "^5.1.6",
+    "tui-editor": "^1.4.10",
+    "vue": "^2.6.11",
+    "vue-class-component": "^7.2.2",
     "vue-count-to": "^1.0.13",
-    "vue-i18n": "^8.15.1",
+    "vue-i18n": "^8.15.3",
     "vue-image-crop-upload": "^2.5.0",
-    "vue-property-decorator": "^8.3.0",
-    "vue-router": "^3.1.3",
+    "vue-property-decorator": "^8.4.0",
+    "vue-router": "^3.1.5",
     "vue-splitpane": "^1.0.6",
     "vue-svgicon": "^3.2.6",
     "vue2-dropzone": "^3.6.0",
     "vuedraggable": "^2.23.2",
     "vuex": "^3.1.2",
-    "vuex-class": "^0.3.2",
-    "vuex-module-decorators": "^0.11.0",
-    "xlsx": "^0.15.3",
+    "vuex-module-decorators": "^0.16.1",
+    "xlsx": "^0.15.5",
     "yamljs": "^0.3.0"
   },
   "devDependencies": {
     "@types/clipboard": "^2.0.1",
-    "@types/codemirror": "^0.0.81",
-    "@types/compression": "^1.0.1",
+    "@types/codemirror": "^0.0.84",
+    "@types/compression": "^1.7.0",
     "@types/cors": "^2.8.6",
-    "@types/echarts": "^4.4.1",
+    "@types/echarts": "^4.4.3",
     "@types/express": "^4.17.2",
-    "@types/faker": "^4.1.8",
+    "@types/faker": "^4.1.9",
     "@types/file-saver": "^2.0.1",
-    "@types/jest": "^24.0.23",
+    "@types/jest": "^25.1.2",
     "@types/js-cookie": "^2.2.4",
-    "@types/jszip": "^3.1.6",
+    "@types/jszip": "^3.1.7",
     "@types/lodash": "^4.14.149",
     "@types/morgan": "^1.7.37",
+    "@types/node": "^13.7.0",
     "@types/nprogress": "^0.2.0",
-    "@types/sortablejs": "^1.10.0",
+    "@types/sortablejs": "^1.10.2",
     "@types/tinymce": "^4.5.23",
-    "@types/webpack-env": "^1.14.1",
+    "@types/webpack-env": "^1.15.1",
     "@types/yamljs": "^0.2.30",
-    "@vue/cli-plugin-babel": "^4.0.5",
-    "@vue/cli-plugin-e2e-cypress": "^4.0.5",
-    "@vue/cli-plugin-eslint": "^4.0.5",
-    "@vue/cli-plugin-pwa": "^4.0.5",
-    "@vue/cli-plugin-router": "^4.0.5",
-    "@vue/cli-plugin-typescript": "^4.0.5",
-    "@vue/cli-plugin-unit-jest": "^4.0.5",
-    "@vue/cli-plugin-vuex": "^4.0.5",
-    "@vue/cli-service": "^4.0.5",
+    "@vue/cli-plugin-babel": "^4.2.2",
+    "@vue/cli-plugin-e2e-cypress": "^4.2.2",
+    "@vue/cli-plugin-eslint": "^4.2.2",
+    "@vue/cli-plugin-pwa": "^4.2.2",
+    "@vue/cli-plugin-router": "^4.2.2",
+    "@vue/cli-plugin-typescript": "^4.2.2",
+    "@vue/cli-plugin-unit-jest": "^4.2.2",
+    "@vue/cli-plugin-vuex": "^4.2.2",
+    "@vue/cli-service": "^4.2.2",
     "@vue/eslint-config-standard": "^4.0.0",
     "@vue/eslint-config-typescript": "^4.0.0",
-    "@vue/test-utils": "^1.0.0-beta.30",
+    "@vue/test-utils": "^1.0.0-beta.31",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.0.3",
-    "concurrently": "^5.0.0",
-    "eslint": "^6.7.2",
-    "eslint-plugin-vue": "^6.0.1",
+    "concurrently": "^5.1.0",
+    "eslint": "^6.8.0",
+    "eslint-plugin-vue": "^6.1.2",
     "fibers": "^4.0.2",
-    "jest": "^24.9.0",
-    "lint-staged": "^9.5.0",
-    "sass": "^1.23.7",
-    "sass-loader": "^8.0.0",
-    "style-resources-loader": "^1.3.2",
-    "swagger-routes-express": "^3.1.1",
-    "ts-jest": "^24.2.0",
+    "jest": "^25.1.0",
+    "lint-staged": "^10.0.7",
+    "sass": "^1.25.0",
+    "sass-loader": "^8.0.2",
+    "style-resources-loader": "^1.3.3",
+    "swagger-routes-express": "^3.1.2",
+    "ts-jest": "^25.2.0",
     "ts-node-dev": "^1.0.0-pre.44",
-    "typescript": "^3.7.2",
+    "typescript": "^3.7.5",
     "vue-cli-plugin-element": "^1.0.1",
     "vue-cli-plugin-style-resources-loader": "^0.1.4",
-    "vue-template-compiler": "^2.6.10",
-    "webpack": "^4.41.2"
+    "vue-template-compiler": "^2.6.11",
+    "webpack": "^4.41.5"
   },
   "bugs": {
     "url": "https://github.com/armour/vue-typescript-admin-template/issues"

src/components/DropdownMenu/index.vue

@@ -50,6 +50,7 @@ $transition-time: .1s;
   width: 250px;
   position: relative;
   z-index: 1;
+  height: auto!important;
 
   &-title {
     width: 100%;
@@ -74,10 +75,12 @@ $transition-time: .1s;
     position: absolute;
     width: 100%;
     background: #e0e0e0;
+    color: black;
     line-height: 60px;
     height: 60px;
     cursor: pointer;
-    font-size: 20px;
+    font-size: 18px;
+    overflow: hidden;
     opacity: 1;
     transition: transform 0.28s ease;
 

src/layout/components/Navbar/index.vue

@@ -60,11 +60,13 @@
           >
             <el-dropdown-item>Docs</el-dropdown-item>
           </a>
-          <el-dropdown-item divided>
-            <span
-              style="display:block;"
-              @click="logout"
-            >{{ $t('navbar.logOut') }}</span>
+          <el-dropdown-item
+            divided
+            @click.native="logout"
+          >
+            <span style="display:block;">
+              {{ $t('navbar.logOut') }}
+            </span>
           </el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>

src/layout/components/Sidebar/SidebarItem.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="!item.meta || !item.meta.hidden"
-    :class="['menu-wrapper', isCollapse ? 'simple-mode' : 'full-mode', {'first-level': isFirstLevel}]"
+    :class="[isCollapse ? 'simple-mode' : 'full-mode', {'first-level': isFirstLevel}]"
   >
     <template v-if="!alwaysShowRootMenu && theOnlyOneChild && !theOnlyOneChild.children">
       <sidebar-item-link

src/router/index.ts

@@ -47,7 +47,7 @@ export const constantRoutes: RouteConfig[] = [
     meta: { hidden: true },
     children: [
       {
-        path: '/redirect/:path*',
+        path: '/redirect/:path(.*)',
         component: () => import(/* webpackChunkName: "redirect" */ '@/views/redirect/index.vue')
       }
     ]

src/views/icons/index.vue

@@ -9,40 +9,44 @@
     </aside>
     <el-tabs type="border-card">
       <el-tab-pane label="Icons">
-        <div
-          v-for="item of svgIcons"
-          :key="item"
-          @click="handleClipboard(generateSvgIconCode(item),$event)"
-        >
-          <el-tooltip placement="top">
-            <div slot="content">
-              {{ generateSvgIconCode(item) }}
-            </div>
-            <div class="icon-item">
-              <svg-icon
-                :name="item"
-                class="disabled"
-              />
-              <span>{{ item }}</span>
-            </div>
-          </el-tooltip>
+        <div class="grid">
+          <div
+            v-for="item of svgIcons"
+            :key="item"
+            @click="handleClipboard(generateSvgIconCode(item),$event)"
+          >
+            <el-tooltip placement="top">
+              <div slot="content">
+                {{ generateSvgIconCode(item) }}
+              </div>
+              <div class="icon-item">
+                <svg-icon
+                  :name="item"
+                  class="disabled"
+                />
+                <span>{{ item }}</span>
+              </div>
+            </el-tooltip>
+          </div>
         </div>
       </el-tab-pane>
       <el-tab-pane label="Element-UI Icons">
-        <div
-          v-for="item of elementIcons"
-          :key="item"
-          @click="handleClipboard(generateElementIconCode(item),$event)"
-        >
-          <el-tooltip placement="top">
-            <div slot="content">
-              {{ generateElementIconCode(item) }}
-            </div>
-            <div class="icon-item">
-              <i :class="'el-icon-' + item" />
-              <span>{{ item }}</span>
-            </div>
-          </el-tooltip>
+        <div class="grid">
+          <div
+            v-for="item of elementIcons"
+            :key="item"
+            @click="handleClipboard(generateElementIconCode(item),$event)"
+          >
+            <el-tooltip placement="top">
+              <div slot="content">
+                {{ generateElementIconCode(item) }}
+              </div>
+              <div class="icon-item">
+                <i :class="'el-icon-' + item" />
+                <span>{{ item }}</span>
+              </div>
+            </el-tooltip>
+          </div>
         </div>
       </el-tab-pane>
     </el-tabs>
@@ -78,6 +82,12 @@ export default class extends Vue {
   margin: 10px 20px 0;
   overflow: hidden;
 
+  .grid {
+    position: relative;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  }
+
   .icon-item {
     margin: 20px;
     height: 85px;

src/views/login/index.vue

@@ -25,31 +25,42 @@
           :placeholder="$t('login.username')"
           name="username"
           type="text"
+          tabindex="1"
           autocomplete="on"
         />
       </el-form-item>
 
-      <el-form-item prop="password">
-        <span class="svg-container">
-          <svg-icon name="password" />
-        </span>
-        <el-input
-          :key="passwordType"
-          ref="password"
-          v-model="loginForm.password"
-          :type="passwordType"
-          :placeholder="$t('login.password')"
-          name="password"
-          autocomplete="on"
-          @keyup.enter.native="handleLogin"
-        />
-        <span
-          class="show-pwd"
-          @click="showPwd"
-        >
-          <svg-icon :name="passwordType === 'password' ? 'eye-off' : 'eye-on'" />
-        </span>
-      </el-form-item>
+      <el-tooltip
+        v-model="capsTooltip"
+        content="Caps lock is On"
+        placement="right"
+        manual
+      >
+        <el-form-item prop="password">
+          <span class="svg-container">
+            <svg-icon name="password" />
+          </span>
+          <el-input
+            :key="passwordType"
+            ref="password"
+            v-model="loginForm.password"
+            :type="passwordType"
+            :placeholder="$t('login.password')"
+            name="password"
+            tabindex="2"
+            autocomplete="on"
+            @keyup.native="checkCapslock"
+            @blur="capsTooltip = false"
+            @keyup.enter.native="handleLogin"
+          />
+          <span
+            class="show-pwd"
+            @click="showPwd"
+          >
+            <svg-icon :name="passwordType === 'password' ? 'eye-off' : 'eye-on'" />
+          </span>
+        </el-form-item>
+      </el-tooltip>
 
       <el-button
         :loading="loading"
@@ -136,6 +147,7 @@ export default class extends Vue {
   private passwordType = 'password'
   private loading = false
   private showDialog = false
+  private capsTooltip = false
   private redirect?: string
   private otherQuery: Dictionary<string> = {}
 
@@ -158,6 +170,11 @@ export default class extends Vue {
     }
   }
 
+  private checkCapslock(e: KeyboardEvent) {
+    const { key } = e
+    this.capsTooltip = key !== null && key.length === 1 && (key >= 'A' && key <= 'Z')
+  }
+
   private showPwd() {
     if (this.passwordType === 'password') {
       this.passwordType = ''