refactor(code): 代码规范，解决遗留的 TODO 列表项

Author: cklwblove

src/components/HeaderSearch/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div :class="{'show':show}" class="header-search">
     show {{show}}
-    <svg-icon name="search" class="search-icon" @click="click"/>
+    <svg-icon name="search" class="search-icon" @click="click" />
     <el-select
       ref="headerSearchSelect"
       v-model="search"
@@ -12,27 +12,28 @@
       placeholder="Search"
       class="header-search-select"
       @change="change">
-      <el-option v-for="item in options" :key="item.path" :value="item" :label="item.title.join(' > ')"/>
+      <el-option v-for="item in options" :key="item.path" :value="item" :label="item.title.join(' > ')" />
     </el-select>
   </div>
 </template>
 
 <script lang="ts">
 import { Component, Vue, Watch } from 'vue-property-decorator';
 import { ElSelect } from 'element-ui/types/select';
+import { RouteConfig } from 'vue-router';
 import Fuse from 'fuse.js';
 import path from 'path';
 import i18n from '@/lang';
 
 @Component({
-  name: 'Search'
+  name: 'HeaderSearch'
 })
 export default class HeaderSearch extends Vue {
   search: string = '';
-  options: any[] = [];
-  searchPool: any[] = [];
+  options: RouteConfig[] = [];
+  searchPool: RouteConfig[] = [];
   show: boolean = false;
-  fuse: any = null;
+  fuse?: Fuse<RouteConfig>;
 
   get routers() {
     return this.$store.getters.permission_routers;
@@ -59,14 +60,14 @@ export default class HeaderSearch extends Vue {
 
   @Watch('show')
   onShowChange(value) {
-    // TODO 这里 addEventListener 会被立刻执行，所以迁移到了created
+    if (value) {
+      document.body.addEventListener('click', this.close);
+    } else {
+      document.body.removeEventListener('click', this.close);
+    }
     console.log('onShowChange value', value);
   }
 
-  created() {
-    document.body.addEventListener('click', this.close);
-  }
-
   mounted() {
     this.searchPool = this.generateRouters(this.routers);
   }
@@ -130,16 +131,18 @@ export default class HeaderSearch extends Vue {
         continue;
       }
 
-      const data = {
+      const data: RouteConfig = {
         path: path.resolve(basePath, router.path),
-        title: [...prefixTitle]
+        meta: {
+          title: [...prefixTitle]
+        }
       };
 
       if (router.meta && router.meta.title) {
         // generate internationalized title
         const i18nTitle = i18n.t(`route.${router.meta.title}`);
 
-        data.title = [...data.title, i18nTitle];
+        data.meta.title = [...data.meta.title, i18nTitle];
 
         if (router.redirect !== 'noredirect') {
           // only push the routes with title
@@ -150,7 +153,7 @@ export default class HeaderSearch extends Vue {
 
       // recursive child routers
       if (router.children) {
-        const tempRouters = this.generateRouters(router.children, data.path, data.title);
+        const tempRouters = this.generateRouters(router.children, data.path, data.meta.title);
         if (tempRouters.length >= 1) {
           res = [...res, ...tempRouters];
         }
@@ -161,7 +164,9 @@ export default class HeaderSearch extends Vue {
 
   querySearch(query) {
     if (query !== '') {
-      this.options = this.fuse.search(query);
+      if (this.fuse) {
+        this.options = this.fuse.search(query);
+      }
     } else {
       this.options = [];
     }

src/components/LangSelect/index.vue

@@ -14,22 +14,19 @@
 <script lang="ts">
   import { Component, Vue } from 'vue-property-decorator';
   import { AppModule } from '@/store/modules/app';
-  import i18n from '@/lang';
-  import {Message} from 'element-ui';
 
-  @Component
+  @Component({
+    name: 'LangSelect'
+  })
   export default class LangSelect extends Vue {
     get lang() {
       return this.$store.getters.language;
     }
 
     private handleSetLanguage(lang): void {
-      // TODO this 指向为 null?
-      // console.log('this', this);
-      // console.log('lang', lang);
-      i18n.locale = lang;
+      this.$i18n.locale = lang;
       AppModule.SetLanguage(lang);
-      Message({
+      this.$message({
         message: 'Switch Language Success',
         type: 'success'
       });

src/layout/components/AppMain.vue

@@ -11,14 +11,16 @@
 <script lang="ts">
   import { Component, Vue } from 'vue-property-decorator';
 
-  @Component
+  @Component({
+    name: 'AppMain'
+  })
   export default class AppMain extends Vue {
     get cachedViews() {
       return this.$store.getters.cachedViews;
     }
 
     get key() {
-      return this.$route.fullPath;
+      return this.$route.path;
     }
   }
 </script>

src/layout/components/Navbar.vue

@@ -63,6 +63,7 @@ import {
 } from '@/components';
 
 @Component({
+  name: 'Navbar',
   components: {
     Breadcrumb,
     Hamburger,

src/layout/components/Settings/index.vue

@@ -33,6 +33,7 @@
   import { SettingsModule } from '@/store/modules/settings';
 
   @Component({
+    name: 'Settings',
     components: {
       ThemePicker
     }

src/layout/components/Sidebar/Link.vue

@@ -9,7 +9,9 @@
 import { Component, Vue, Prop } from 'vue-property-decorator';
 import { isExternal } from '@/utils';
 
-@Component
+@Component({
+  name: 'Link'
+})
 export default class Link extends Vue {
   @Prop({required: true, default: ''}) to!: string;
 

src/layout/components/Sidebar/Logo.vue

@@ -16,7 +16,9 @@
 <script lang="ts">
   import { Component, Vue, Prop } from 'vue-property-decorator';
 
-  @Component
+  @Component({
+    name: 'Logo'
+  })
   export default class Logo extends Vue {
     @Prop({required: true}) collapse!: boolean;
     title: string = 'Vue Element Admin';

src/layout/components/Sidebar/SidebarItem.vue

@@ -6,7 +6,7 @@
       <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
         <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
           <template v-if="onlyOneChild.meta">
-            <svg-icon v-if="onlyOneChild.meta.icon" :name="onlyOneChild.meta.icon || item.meta.icon"/>
+            <svg-icon v-if="onlyOneChild.meta.icon" :name="onlyOneChild.meta.icon || item.meta.icon" />
             <span slot="title">{{generateTitle(onlyOneChild.meta.title)}}</span>
           </template>
         </el-menu-item>
@@ -15,7 +15,7 @@
 
     <el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
       <template slot="title">
-        <svg-icon v-if="item.meta.icon" :name="item.meta.icon"/>
+        <svg-icon v-if="item.meta.icon" :name="item.meta.icon" />
         <span slot="title">{{generateTitle(item.meta.title)}}</span>
       </template>
       <template v-for="child in item.children">
@@ -26,12 +26,12 @@
             :item="child"
             :key="child.path"
             :base-path="resolvePath(child.path)"
-            class="nest-menu"/>
+            class="nest-menu" />
 
           <app-link v-else :to="resolvePath(child.path)" :key="child.name">
             <el-menu-item :index="resolvePath(child.path)">
               <template v-if="child.meta">
-                <svg-icon v-if="child.meta.icon" :name="child.meta.icon"/>
+                <svg-icon v-if="child.meta.icon" :name="child.meta.icon" />
                 <span slot="title">{{generateTitle(child.meta.title)}}</span>
               </template>
             </el-menu-item>
@@ -44,20 +44,21 @@
 
 <script lang="ts">
   import { Component, Vue, Prop } from 'vue-property-decorator';
-  import { Route } from 'vue-router';
+  import { RouteConfig } from 'vue-router';
   import path from 'path';
   import { isExternal } from '@/utils';
   import AppLink from './Link.vue';
   import FixiOSBug from './FixiOSBug';
 
   @Component({
+    name: 'SidebarItem',
     components: {
       AppLink
     },
     mixins: [FixiOSBug]
   })
   export default class SidebarItem extends Vue {
-    @Prop({required: true, default: {}}) item!: Route;
+    @Prop({required: true, default: {}}) item!: RouteConfig;
     @Prop({default: false}) isNest!: boolean;
     @Prop({default: ''}) basePath!: string;
 

src/layout/components/Sidebar/index.vue

@@ -24,6 +24,7 @@
   import variable from '@/assets/js/variable';
 
   @Component({
+    name: 'Sidebar',
     components: {
       SidebarItem,
       Logo

src/layout/components/TagsView/index.vue

@@ -32,6 +32,7 @@ import ScrollPane from './ScrollPane.vue';
 import path from 'path';
 
 @Component({
+  name: 'TagsView',
   components: {
     ScrollPane
   }