hd-idevvue3 3.0.2 → 3.0.4

package/src/views/layout/header/HeaderSearch.vue

@@ -1,9 +1,16 @@
 <template>
-  <div :class="{'show':show}" class="header-search">
-    <svg @click="click" class="search-icon screenfull-svg" height="32" viewBox="-10 -10 150 150"
-         width="32" xmlns="http://www.w3.org/2000/svg">
+  <div :class="{ show: show }" class="header-search">
+    <svg
+      @click="click"
+      class="search-icon screenfull-svg"
+      height="32"
+      viewBox="-10 -10 150 150"
+      width="32"
+      xmlns="http://www.w3.org/2000/svg"
+    >
       <path
-        d="M124.884 109.812L94.256 79.166c-.357-.357-.757-.629-1.129-.914a50.366 50.366 0 0 0 8.186-27.59C101.327 22.689 78.656 0 50.67 0 22.685 0 0 22.688 0 50.663c0 27.989 22.685 50.663 50.656 50.663 10.186 0 19.643-3.03 27.6-8.201.286.385.557.771.9 1.114l30.628 30.632a10.633 10.633 0 0 0 7.543 3.129c2.728 0 5.457-1.043 7.543-3.115 4.171-4.157 4.171-10.915.014-15.073M50.671 85.338C31.557 85.338 16 69.78 16 50.663c0-19.102 15.557-34.661 34.67-34.661 19.115 0 34.657 15.559 34.657 34.675 0 19.102-15.557 34.661-34.656 34.661"/>
+        d="M124.884 109.812L94.256 79.166c-.357-.357-.757-.629-1.129-.914a50.366 50.366 0 0 0 8.186-27.59C101.327 22.689 78.656 0 50.67 0 22.685 0 0 22.688 0 50.663c0 27.989 22.685 50.663 50.656 50.663 10.186 0 19.643-3.03 27.6-8.201.286.385.557.771.9 1.114l30.628 30.632a10.633 10.633 0 0 0 7.543 3.129c2.728 0 5.457-1.043 7.543-3.115 4.171-4.157 4.171-10.915.014-15.073M50.671 85.338C31.557 85.338 16 69.78 16 50.663c0-19.102 15.557-34.661 34.67-34.661 19.115 0 34.657 15.559 34.657 34.675 0 19.102-15.557 34.661-34.656 34.661"
+      />
     </svg>
     <el-select
       :remote-method="querySearch"
@@ -16,183 +23,196 @@
       remote
       v-model="search"
     >
-      <el-option :key="item.path" :label="item.title.join(' > ')" :value="item" v-for="item in options"/>
+      <el-option
+        :key="item.path"
+        :label="item.title.join(' > ')"
+        :value="item"
+        v-for="item in options"
+      />
     </el-select>
   </div>
 </template>
 
 <script>
-  import Fuse from 'fuse.js'
-  import path from 'path'
+import Fuse from 'fuse.js'
+import path from 'path'
 
-  export default {
-    name: 'HeaderSearch',
-    data() {
-      return {
-        search: '',
-        options: [],
-        searchPool: [],
-        show: false,
-        fuse: undefined
-      }
+export default {
+  name: 'HeaderSearch',
+  data() {
+    return {
+      search: '',
+      options: [],
+      searchPool: [],
+      show: false,
+      fuse: undefined,
+    }
+  },
+  computed: {
+    routes() {
+      return this.$store.state.permission.hdMenu
+    },
+    lang() {
+      return this.$store.getters.language
+    },
+  },
+  watch: {
+    lang() {
+      this.searchPool = this.generateRoutes(this.routes)
+    },
+    routes() {
+      this.searchPool = this.generateRoutes(this.routes)
     },
-    computed: {
-      routes() {
-        return this.$store.state.permission.hdMenu;
-      },
-      lang() {
-        return this.$store.getters.language
+    searchPool(list) {
+      this.initFuse(list)
+    },
+    show(value) {
+      if (value) {
+        document.body.addEventListener('click', this.close)
+      } else {
+        document.body.removeEventListener('click', this.close)
       }
     },
-    watch: {
-      lang() {
-        this.searchPool = this.generateRoutes(this.routes)
-      },
-      routes() {
-        this.searchPool = this.generateRoutes(this.routes)
-      },
-      searchPool(list) {
-        this.initFuse(list)
-      },
-      show(value) {
-        if (value) {
-          document.body.addEventListener('click', this.close)
-        } else {
-          document.body.removeEventListener('click', this.close)
-        }
+  },
+  mounted() {
+    this.searchPool = this.generateRoutes(this.routes)
+  },
+  methods: {
+    click() {
+      this.show = !this.show
+      if (this.show) {
+        this.$refs.headerSearchSelect && this.$refs.headerSearchSelect.focus()
       }
     },
-    mounted() {
-      this.searchPool = this.generateRoutes(this.routes)
+    close() {
+      this.$refs.headerSearchSelect && this.$refs.headerSearchSelect.blur()
+      this.options = []
+      this.show = false
     },
-    methods: {
-      click() {
-        this.show = !this.show
-        if (this.show) {
-          this.$refs.headerSearchSelect && this.$refs.headerSearchSelect.focus()
-        }
-      },
-      close() {
-        this.$refs.headerSearchSelect && this.$refs.headerSearchSelect.blur()
-        this.options = []
+    change(val) {
+      this.$router.push(val.path)
+      this.search = ''
+      this.options = []
+      this.$nextTick(() => {
         this.show = false
-      },
-      change(val) {
-        this.$router.push(val.path)
-        this.search = ''
-        this.options = []
-        this.$nextTick(() => {
-          this.show = false
-        })
-      },
-      initFuse(list) {
-        this.fuse = new Fuse(list, {
-          shouldSort: true,
-          threshold: 0.4,
-          location: 0,
-          distance: 100,
-          maxPatternLength: 32,
-          minMatchCharLength: 1,
-          keys: [{
+      })
+    },
+    initFuse(list) {
+      this.fuse = new Fuse(list, {
+        shouldSort: true,
+        threshold: 0.4,
+        location: 0,
+        distance: 100,
+        maxPatternLength: 32,
+        minMatchCharLength: 1,
+        keys: [
+          {
             name: 'title',
-            weight: 0.7
-          }, {
+            weight: 0.7,
+          },
+          {
             name: 'path',
-            weight: 0.3
-          }]
-        })
-      },
-      // Filter out the routes that can be displayed in the sidebar
-      // And generate the internationalized title
-      generateRoutes(routes, basePath = '/', prefixTitle = []) {
-        let res = []
-        for (const router of routes) {
-          // skip hidden router
-          if (router.hidden) {
-            continue
-          }
+            weight: 0.3,
+          },
+        ],
+      })
+    },
+    // Filter out the routes that can be displayed in the sidebar
+    // And generate the internationalized title
+    generateRoutes(routes, basePath = '/', prefixTitle = []) {
+      let res = []
+      for (const router of routes) {
+        // skip hidden router
+        if (router.hidden) {
+          continue
+        }
 
-          const data = {
-            path: path.resolve(basePath, router.path),
-            title: [...prefixTitle]
-          }
+        const data = {
+          path: path.resolve(basePath, router.path),
+          title: [...prefixTitle],
+        }
 
-          if (router.meta && router.meta.title) {
-            // generate internationalized title
-            const i18ntitle = this.$i18n.locale == 'zh' ? router.meta.title : router.meta.enTitle;
+        if (router.meta && router.meta.title) {
+          // generate internationalized title
+          const i18ntitle =
+            this.$i18n.locale == 'zh' ? router.meta.title : router.meta.enTitle
 
-            data.title = [...data.title, i18ntitle]
+          data.title = [...data.title, i18ntitle]
 
-            if (router.redirect !== 'noredirect') {
-              // only push the routes with title
-              // special case: need to exclude parent router without redirect
-              res.push(data)
-            }
+          if (router.redirect !== 'noredirect') {
+            // only push the routes with title
+            // special case: need to exclude parent router without redirect
+            res.push(data)
           }
+        }
 
-          // recursive child routes
-          if (router.children) {
-            const tempRoutes = this.generateRoutes(router.children, data.path, data.title)
-            if (tempRoutes.length >= 1) {
-              res = [...res, ...tempRoutes]
-            }
+        // recursive child routes
+        if (router.children) {
+          const tempRoutes = this.generateRoutes(
+            router.children,
+            data.path,
+            data.title
+          )
+          if (tempRoutes.length >= 1) {
+            res = [...res, ...tempRoutes]
           }
         }
+      }
 
-        return res
-      },
-      querySearch(query) {
-        if (query !== '') {
-          this.options = this.fuse.search(query)
-        } else {
-          this.options = []
-        }
+      return res
+    },
+    querySearch(query) {
+      if (query !== '') {
+        this.options = this.fuse.search(query)
+      } else {
+        this.options = []
       }
-    }
-  }
+    },
+  },
+}
 </script>
 
 <style lang="scss" scoped>
-  .header-search {
-    font-size: 0 !important;
+.header-search {
+  font-size: 0 !important;
 
-    .search-icon {
-      font-size: 18px;
-      vertical-align: middle;
-      display: inline-block;
-      cursor: pointer;
-      fill: #e4e9ef;
-      /* width: 20px;
+  .search-icon {
+    font-size: 18px;
+    vertical-align: middle;
+    display: inline-block;
+    cursor: pointer;
+    fill: #e4e9ef;
+    /* width: 20px;
        height: 20px;
        vertical-align: 10px;*/
-    }
+  }
 
-    .header-search-select {
-      font-size: 18px;
-      transition: width 0.2s;
-      width: 0;
-      overflow: hidden;
-      background: transparent;
+  .header-search-select {
+    font-size: 18px;
+    transition: width 0.2s;
+    width: 0;
+    overflow: hidden;
+    background: transparent;
+    border-radius: 0;
+    display: inline-block;
+    vertical-align: middle;
+
+    :deep(.el-input__inner) {
       border-radius: 0;
-      display: inline-block;
+      border: 0;
+      padding-left: 0;
+      padding-right: 0;
+      box-shadow: none !important;
+      border-bottom: 1px solid #d9d9d9;
       vertical-align: middle;
-
-      :deep(.el-input__inner) {
-        border-radius: 0;
-        border: 0;
-        padding-left: 0;
-        padding-right: 0;
-        box-shadow: none !important;
-        border-bottom: 1px solid #d9d9d9;
-        vertical-align: middle;
-      }
     }
+  }
 
-    &.show {
-      .header-search-select {
-        width: 150px;
-        margin-left: 10px;
-      }
+  &.show {
+    .header-search-select {
+      width: 150px;
+      margin-left: 10px;
     }
   }
+}
 </style>

package/src/views/layout/header/Levelbar.vue

@@ -1,49 +1,55 @@
-<template>
-  <el-breadcrumb class="app-levelbar" separator="/">
-    <el-breadcrumb-item v-for="(item,index)  in levelList" :key="item.path">
-      <span v-if='item.redirect==="noredirect"||index==levelList.length-1' class="no-redirect">{{item.name}}</span>
-      <router-link v-else :to="item.redirect||item.path">{{item.name}}</router-link>
-    </el-breadcrumb-item>
-  </el-breadcrumb>
-</template>
-
-<script>
-export default {
-  created() {
-    this.getBreadcrumb()
-  },
-  data() {
-    return {
-      levelList: null
-    }
-  },
-  methods: {
-    getBreadcrumb() {
-      let matched = this.$route.matched.filter(item => item.name)
-/*      const first = matched[0]
-      if (first && (first.name !== '首页' || first.path !== '')) {
-        matched = [{ name: '首页', path: '/' }].concat(matched)
-      }*/
-      this.levelList = matched
-    }
-  },
-  watch: {
-    $route() {
-      this.getBreadcrumb()
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-  .app-levelbar.el-breadcrumb {
-    display: inline-block;
-    font-size: 14px;
-    line-height: 50px;
-    margin-left: 10px;
-    .no-redirect {
-      color: #97a8be;
-      cursor: text;
-    }
-  }
-</style>
+<template>
+  <el-breadcrumb class="app-levelbar" separator="/">
+    <el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
+      <span
+        v-if="item.redirect === 'noredirect' || index == levelList.length - 1"
+        class="no-redirect"
+        >{{ item.name }}</span
+      >
+      <router-link v-else :to="item.redirect || item.path">{{
+        item.name
+      }}</router-link>
+    </el-breadcrumb-item>
+  </el-breadcrumb>
+</template>
+
+<script>
+export default {
+  created() {
+    this.getBreadcrumb()
+  },
+  data() {
+    return {
+      levelList: null,
+    }
+  },
+  methods: {
+    getBreadcrumb() {
+      let matched = this.$route.matched.filter((item) => item.name)
+      /*      const first = matched[0]
+      if (first && (first.name !== '首页' || first.path !== '')) {
+        matched = [{ name: '首页', path: '/' }].concat(matched)
+      }*/
+      this.levelList = matched
+    },
+  },
+  watch: {
+    $route() {
+      this.getBreadcrumb()
+    },
+  },
+}
+</script>
+
+<style lang="scss" rel="stylesheet/scss" scoped>
+.app-levelbar.el-breadcrumb {
+  display: inline-block;
+  font-size: 14px;
+  line-height: 50px;
+  margin-left: 10px;
+  .no-redirect {
+    color: #97a8be;
+    cursor: text;
+  }
+}
+</style>