@tongfun/tf-widget 0.1.29 → 0.1.30

package/package/tf-layout/README.md

@@ -1,115 +0,0 @@
-# Layout 组件 
-
-## 参数
-
-1. 菜单参数 (**:menusInfo**)
-
-```	javascript
-	{
-        path: '' // 路由path,
-        icon: '' // 菜单图标,
-        name: '' // 路由name,
-        title: '菜单名字',
-        childNode: [
-            {
-                path: '' // 路由path,
-                icon: '' // 菜单图标,
-                name: '' // 路由name,
-                title: '菜单名字',
-            }
-        ]
-    }
-```
-
-2. 三级缓存数组，通过事件@setThirdCache传递
-
-例子：
-
-```javascript
-<template>
-  <TfLayout
-    :menus-info="menuInfo"
-    @setThirdCache="setThirdCache"
-  />
-</template>
-<script>
-export default {
-  name: 'Layout',
-
-  data() {
-    return {
-      menuInfo: this.$store.getters.menuInfo
-    }
-  },
-  methods: {
-    setThirdCache(value) {
-      this.$store.commit('routeCaching/setThirdCache', value)
-    }
-  }
-}
-</script>
-```
-
-4. 小标签栏禁止关闭
-
-   需要在路由的meta属性新增 **defaultRoute: true**
-
-```javascript
-	// 例子：
-	{
-        path: '/',
-        component: () => import('@/views/home/tenan-management-home'),
-        name: 'TenantManagementHome',
-        icon: 'home',
-        meta: {
-                    title: '主页',
-                    defaultRoute: true
-              }
-  	},
-```
-
-5. 为了防止路由标签混乱,需要在子应用的跟路由将当前子应用的路由base属性,添加到meta属性中
-
-   base配置统一采用:  
-
-   ```
-   const base = process.env['NODE_ENV'] === 'development' ? process.env['VUE_APP_BASIC']:`/app${process.env['VUE_APP_BASIC']}/`
-   ```
-
-   
-
-​		**配置文件：**
-
-​						**例： VUE_APP_BASIC = '/OperateAnalysis'**
-
-​							     **VUE_APP_MODULE_NAME = '经营分析'**
-
-```javascript
-
-// 示例
- // 路由生成 base: 
- router = new VueRouter({
-    base: process.env['NODE_ENV'] === 'development' ? process.env['VUE_APP_BASIC'] : `/app${process.env['VUE_APP_BASIC']}/`,
-    mode: 'history',
-    routes: initMenu(prop.menuInfo)
-  })
-// 跟路由配置base 
-const base = process.env['NODE_ENV'] === 'development' ? process.env['VUE_APP_BASIC'] : `/app${process.env['VUE_APP_BASIC']}/`
-const routes = [
-  {
-    path: '/',
-    component: Layout,
-    meta: {
-      title: process.env['VUE_APP_MODULE_NAME'],
-      base
-    },
-    children: [
-      ...childrenRoutes
-    ]
-  }
-]
-
-
-
-```
-

package/package/tf-layout/index.js

@@ -1,8 +0,0 @@
-import TfLayout from './src/tf-layout'
-
-/* istanbul ignore next */
-TfLayout.install = function (Vue) {
-  Vue.component(TfLayout.name, TfLayout)
-}
-
-export default TfLayout

package/package/tf-layout/src/components/tf-labelbar.vue

@@ -1,394 +0,0 @@
-<template>
-  <div class="tf-labelbar">
-    <div class="close-menu">
-      <div
-        :class="closeMenu ? 'open-menu-icon': 'close-menu-icon'"
-        src=""
-        alt=""
-        title="隐藏列表"
-        @click="changeMenuState"
-      />
-    </div>
-    <ul ref="labelMenu">
-      <li
-        v-for="tagItem in tagList"
-        :key="tagItem.path"
-        :class="activePath === tagItem.path ? 'active-tag' : ''"
-        @click="routeJump(tagItem)"
-        @contextmenu.prevent.stop="rightClick(tagItem, $event)"
-      >
-        <span>{{ tagItem.title }}</span>
-        <i
-          v-show="!tagItem.notCloseTag"
-          class="el-icon-close close-icon"
-          @click.stop="closeTag(tagItem)"
-        />
-      </li>
-    </ul>
-    <div
-      class="scrollbar-icon left"
-      @click="handleScroll('left')"
-    />
-    <el-dropdown
-      class="right-menu"
-      trigger="click"
-      @command="dropdownCommand"
-    >
-      <span class="el-dropdown-link">
-        <TfRotateBox />
-      </span>
-      <el-dropdown-menu slot="dropdown">
-        <el-dropdown-item
-          icon="el-icon-back"
-          command="closeLeft"
-        >关闭左侧</el-dropdown-item>
-        <el-dropdown-item
-          icon="el-icon-right"
-          command="closeRight"
-        >关闭右侧</el-dropdown-item>
-        <el-dropdown-item
-          icon="el-icon-circle-close"
-          command="closeOther"
-        >关闭其他</el-dropdown-item>
-        <el-dropdown-item
-          icon="el-icon-circle-close"
-          command="closeAll"
-        >关闭全部</el-dropdown-item>
-      </el-dropdown-menu>
-    </el-dropdown>
-    <div
-      class="scrollbar-icon right"
-      @click="handleScroll('right')"
-    />
-    <TfRightMenu
-      :left="rightMenuLeft"
-      :top="rightMenuTop"
-      :show-menu="showRightMenu"
-      @rightMenuClick="dropdownCommand"
-    />
-  </div>
-</template>
-
-<script>
-import TfRotateBox from './tf-rotate-box.vue'
-import TfRightMenu from './tf-right-menu'
-export default {
-  name: 'TfLaberBar',
-  components: {
-    TfRotateBox,
-    TfRightMenu
-  },
-  props: {
-    routeBase: {
-      default: null,
-      type: String
-    }
-  },
-  data () {
-    return {
-      closeMenu: false,
-      activePath: '/',
-      tagList: [],
-      rightMenuLeft: 0,
-      rightMenuTop: 0,
-      showRightMenu: false
-    }
-  },
-  watch: {
-    $route: {
-      handler: function (newValue) {
-        if (newValue && newValue.matched[0]?.meta.base === this.routeBase) {
-          const { meta, path, name, params, query } = newValue
-          if (!path) return
-          const obj = {
-            path,
-            name,
-            params,
-            query,
-            defaultRoute: meta.defaultRoute,
-            notCloseTag: meta.defaultRoute,
-            title: meta.title,
-            replace: meta.replace
-          }
-          if (!meta.noCache) {
-            const cacheArr = newValue.matched.map(item => item.name)
-            const cacheObj = this.tagList.find(item => item.path === obj.path)
-            if (!cacheObj) this.$emit('setCache', cacheArr)
-            obj.cacheArr = cacheArr
-          }
-          if (obj.defaultRoute) {
-            if (!this.checkMenu(obj.path)) this.tagList.unshift(obj)
-          } else {
-            if (!this.checkMenu(obj.path)) this.tagList.push(obj)
-          }
-          // todo: 增加页面缓存
-          this.activePath = path
-        }
-      },
-      deep: true,
-      immediate: true
-    }
-  },
-  created () {
-    window.addEventListener('click', () => {
-      this.showRightMenu = false
-    }, false)
-  },
-  methods: {
-    changeMenuState () {
-      this.closeMenu = !this.closeMenu
-      this.$emit('changeMenuState', this.closeMenu)
-    },
-    /**
-     * @description tag右键点击事件
-     */
-    rightClick: function (tagItem, $event) {
-      this.routeJump(tagItem)
-      this.$nextTick(() => {
-        this.rightMenuTop = $event.clientY
-        this.rightMenuLeft = $event.clientX
-        this.showRightMenu = true
-      })
-    },
-
-    /**
-     * @member
-     * @description 右侧操作
-     * @param params: 操作指令: closeLeft => 关闭左侧, closeRight => 关闭右侧, closeAll => 关闭全部,
-     */
-    dropdownCommand: function (params) {
-      const activeNum = this.tagList.findIndex(
-        (item) => item.path === this.activePath
-      )
-      const pathMap = new Map()
-      const deleteArr = []
-      const pathArr = this.tagList.map((item) => {
-        pathMap.set(item.path, item)
-        return item.path
-      })
-      switch (params) {
-        case 'closeLeft':
-          deleteArr.push(...pathArr.slice(0, activeNum))
-          break
-        case 'closeRight':
-          deleteArr.push(...pathArr.slice(activeNum + 1, pathArr.length))
-          break
-        case 'closeOther':
-          deleteArr.push(...pathArr.slice(0, activeNum))
-          deleteArr.push(...pathArr.slice(activeNum + 1, pathArr.length))
-          break
-        default:
-          deleteArr.push(...pathArr)
-          break
-      }
-      const deleteCacheArr = []
-      deleteArr.forEach((item) => {
-        const tagItem = pathMap.get(item)
-        if (tagItem && tagItem.cacheArr) deleteCacheArr.push(tagItem.cacheArr)
-        if (tagItem && !tagItem.notCloseTag) {
-          const num = this.tagList.indexOf(tagItem)
-          this.tagList.splice(num, 1)
-        }
-      })
-
-      this.$emit('deleteCache', deleteCacheArr)
-      if (params === 'closeAll') this.routeJump(this.tagList[0])
-    },
-    /**
-     * @description 左右滑动
-     * @param direction: 滑动方向
-     */
-    handleScroll (direction) {
-      let rollNum = 0
-      rollNum = direction === 'right' ? rollNum + 50 : rollNum - 50
-      const dom = this.$refs.labelMenu
-      dom.scrollLeft += rollNum
-    },
-    /**
-     * @description 点击tag标签
-     * @param path: 每项Tag
-     */
-    checkMenu (path) {
-      if (this.tagList.find((item) => item.path === path)) return true
-      return false
-    },
-    /**
-     * @description 路由跳转
-     */
-    routeJump: function (value) {
-      if (value && value.path !== this.activePath) {
-        const { path, query, params, replace } = value
-        if (replace) {
-          this.$router.replace({
-            path,
-            query,
-            params
-          })
-        } else {
-          this.$router.push({
-            path,
-            query,
-            params
-          })
-        }
-      }
-    },
-    /**
-     * 关闭tag
-     */
-    closeTag: function (tagItem, deleteCacheArr = true) {
-      if (tagItem.cacheArr && deleteCacheArr) this.$emit('deleteCache', [tagItem.cacheArr])
-      const num = this.tagList.indexOf(tagItem)
-      if (tagItem) {
-        this.tagList.splice(num, 1)
-        this.routeJump(this.tagList[num - 1])
-      }
-    },
-    /**
-     * 关闭当前标签页
-     */
-    closeDynamicRoutingTag () {
-      const nameArr = this.tagList.filter(d => d.name === this.$route.name)
-      const tagItem = this.tagList.find(d => d.path === this.$route.path)
-      if (tagItem) {
-        // 如果tagList中存在两个及以上相同name路由，表明不能删除该缓存
-        this.closeTag(tagItem, !(nameArr.length > 1))
-      }
-    }
-  }
-}
-</script>
-<style lang="less" scoped>
-.tf-labelbar {
-  width: 100%;
-  height: 40px;
-  position: relative;
-  box-sizing: border-box;
-  padding: 0 73px;
-  .close-menu {
-    cursor: pointer;
-    position: absolute;
-    left:0;
-    height: 40px;
-    width: 40px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    box-shadow: 0 -2px 4px 0 rgba(0,0,0,0.25);
-   .close-menu-icon {
-      height: 15px;
-      width: 15px;
-      background: #99999a;
-      mask: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAPCAYAAADtc08vAAAAAXNSR0IArs4c6QAAAdpJREFUOE+Nkz1rFUEUht8zs0kstBArBUst9C8oEv/DvYg7V+9soZWVJhoxsCJ+YCspFLyzYecSkosgElNYqAg22hhFwUII4g+wEnFn58jG3Xh39wpOM5/nmcN73kNB395l0Ns8CUforEmMujnGx6SzsXuS2n4hosduEF5E/CJAPOt27su91Klmpt0+UfcQxwJx7Ks3JKJ0UzA9dUZdrQHO3Z/Cg/OZjIZ9MBuAo9z0TDNLEtp+EIx1l6iFHUAVrO1ZAAmAXm6Ubf5eZNEGFKfxrJPRMASzBdOZPAlTdNamMepkNX1agO1H3V9SWwUgBXAqN2q1GTS+b2QQC7l1qAviFSZc8j5bwnSwF1nmMLWLkf2k7eBq7YIffwDAhjPqMvTKQYn8K4CiEsW8v1w3k2AAAuB3LQ3E1rd5IrrJxPMSeMaQe8j7v6UtUUwsHOh7HVCqL6J0kZjmBPHxbNDb/H8NCsCBw1xUIdD2BgPXSNAJ9zB8hQsbM9j3JsPHI4Sjn7iaJ/ugdGCg7S0GFsjjmFtWr//lg/cCWG85sYL07W0mXCGik25w+iXi61SzchANP4P9E2d6c/VeYEJnJIrmCqL0jmfKvFGLLStLbR8x4bkfqKWJ3dhonqagvwFo3iEkt6LFjgAAAABJRU5ErkJggg==);
-      &:hover {
-        background: #07579a;
-      }
-    }
-    .open-menu-icon {
-      height: 15px;
-      width: 15px;
-      background: #99999a;
-      mask: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAPCAYAAADtc08vAAAAAXNSR0IArs4c6QAAAbRJREFUOE+dk7FP21AQxr/PzyZCsLQjXWFhQR0qVQyoLFXF2JIsicBxVHWooHSsOtRbxUAlRKWqgDDItiDAP8AEqBPs/RM6FykTxO9dFSd2lKSkUt/47u6n7+67I4Y+YTtMydOKxwonJW274QshdzsJnXAWrEbrAj7UQfk10r+iySH+uQ1/PlFeWIKw3gvwfQv+J7GX41mxcAFwfwCSAarRIoCjXkBLSArxjeOFM0Z4DWJX71Xe5kr8C5UqaAPqTAv6389pGyelO6d2+NgYfQViJ4c8+G1h+02zCxg+RRRq4WQivKYgTILKO/S2UCfceGpE6ULK0Va3JWVE4DhNJA0lmIXwgOSXpOF8aKnLFahq9AvAxD+E3AAyCrBgwTxtBktXyo2LoBwTSwePgMIYLN31OqNpZcMkDWuEC4R8F5gNM37zEVurt8oLX0F4OuhCnxTHjZ4Yyg8RfjP7lfdtN0q6Cxjigu2Gz4Q8B/hVB+WVtDhz4V4FnT2wa/GcGLkkuJkE5bWBPfgrICv2ouciOBsobt1EZqMbvwSlbwb5oUSfxcKY3qus3nsLuQv/e41ePC8i238Ap2nyLhWRefAAAAAASUVORK5CYII=);
-      &:hover {
-        background: #07579a;
-      }
-    }
-  }
-
-  ul {
-    height: 100%;
-    width: 100%;
-    padding: 0;
-    margin: 0;
-    display: flex;
-    align-items: flex-end;
-    justify-content: left;
-    list-style: none;
-    overflow-y: hidden;
-    overflow-x: auto;
-    &::-webkit-scrollbar {
-      display: none;
-      height:0;
-    }
-    li {
-      padding: 0 30px;
-      font-size: 14px;
-      color: #515a6e;
-      height: 35px;
-      margin: 10px -19px 0 0;
-      cursor: pointer;
-      display: flex;
-      white-space: nowrap;
-      align-items: center;
-      justify-content: center;
-      box-sizing: content-box;
-      mask: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANoAAAAkBAMAAAAdqzmBAAAAMFBMVEVHcEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlTPQ5AAAAD3RSTlMAr3DvEM8wgCBA379gj5//tJBPAAAAnUlEQVRIx2NgAAM27fj/tAO/xBsYkIHyf9qCT8iWMf6nNQhAsk2f5rYheY7Dnua2/U+A28ZEe8v+F9Ax2v7/F4DbxkUH2wzgtvHTwbYPo7aN2jZq26hto7aN2jZq25Cy7Qvctnw62PYNbls9HWz7S8/G6//PsI6H4396gAUQy1je08W2jxDbpv6nD4gB2uWp+J9eYPsEhv/0BPS1DQBvoBLVZ3BppgAAAABJRU5ErkJggg==);
-      mask-repeat: no-repeat;
-      mask-size: 95% 100%;
-      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) !important;
-      .close-icon {
-        transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) !important;
-        margin-left: 8px;
-        width: 0;
-        overflow: hidden;
-        &:hover {
-          border-radius: 50%;
-          background: #666666;
-          color: white;
-        }
-      }
-      &:hover {
-        background: #dee1e6;
-        .close-icon {
-          width: 14px;
-        }
-      }
-  }
-    .active-tag {
-      padding: 0 20px !important;
-      color: #0361A4 !important;
-      background: #ECF5FF !important;
-      .close-icon {
-        min-width: 14px;
-      }
-    }
-  }
-  .scrollbar-icon {
-    cursor: pointer;
-    width: 13px;
-    height: 13px;
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    &:hover {
-      background: #07579a;
-    }
-  }
-  .left {
-    background: #99999a;
-    left: 55px;
-    mask: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAcCAYAAAB2+A+pAAAAAXNSR0IArs4c6QAAA9RJREFUSEuVl0tvG2UUhp/zeRIXaMFiEaEsyq1NU0oJKVBaxEVtWqCoRVzELyB2HEXiByAkAgsuldhESmJHsiIlexawoC0qioAFFWUFCJVFEWJFEBtEAh6Pv4NOPBMcx5fxSN7NO8/3nffcLKR8VFUqlcr+KIqOOOe0Vqv9MDMz81tKOaYvlUp3ZzKZw977WyStsFKp7KvVauMi8hiw6Zxby+fzP/Wjr9frx1T1GJBNBZ6fn98bBMHDwCvA08BN7/3C9PT0Whpwk/5V4KRpeoKXl5f3hGH4AHABeBk4CnwnIm8XCoXPeoFb9AYeAWpdwSaqVquHgAkRMZGFaQ9wXVXfLBaLn3cDt9E/CgRA1BEcn/Sgqp4VkbPACSBnIFX9AninWCx+2QncRR8Cf7cFJycVkVOqekFExoE7AAfUgSvAe1NTU1+3A/fQ/wv8uQtsoiiKRur1+pmWm2qcExFg3l5sB06h3wR+3wFuOulpVT0f39TCa+9tg1X1koh8mICtRkVEU+p3gufm5rLZbHbEPAWeFZHHE09bwhmJyBUR+SCfz3+VQPvQ/wP8sXXjDp4kN2210UJt2bztcZ/6BnhhYeG+gYGBIe+9NYZTzdnbIWO3PLYb53K5a+vr67kgCEZE5KmU+ga4VCq97py7x3tvyTQaZ2+7bG/2+NNMJnPROfdjFEVjqvqCQXvok3s0wEtLS4vAqKo+GRd3p9JsBn+sqh9ls9lfwjA8JyJ54Dgw2KuTAQ1wuVyuiMghVbUeanWaGhwEwa/ee6vzvKo+AmT6Ab8B3Bv7cz+wt4O4uY4/sToeHBy8EYbhcRE5r6rm8YEu+p2hLpfLo977u5xzp4FnAOtS+7qcfDu5VPVb59ydURQd7kPfCLXV4erq6q2bm5sPicgZ4BzwYBf4rnJaWVm5rQ/9/3VstzPxxsaGbReWoROAzd92Yd9qIKr6vnWupIH0od8JNrgNbOfcWCaTmVDV54EjwO2tnatTy0ypt5bZ6FzNj604YRiaZ88BFvrE81RDIoV+95BIDmBhq1arR+MJZaFv9rwuIpeTULdLwh56C/XusdgM7+C53fyqc+5dGxKdsr+L51Xgr66rT+KZc84m1ovxvhWo6jfAW8Vi8Wq3htFGPxa/X+257MWeWam9ZL+4SVyLl73LvTpVi96Wxf3WNnuC7cPlctnWHpvPrwFPAD8Dc4VCYc0WgF7wFr19p/uWmXzQanVxcTHnnDPRSRHZcM5dmpyc/D4NuFkvIidUdTDVje0As7Ozbnh4+ID33oaBF5HrhULhZhpwoh8aGjoYBMG4/YX5D8BcMmEDOwIbAAAAAElFTkSuQmCC);
-    mask-size: 100% 100%;
-    mask-repeat: no-repeat;
-  }
-  .right {
-    background: #99999a;
-    right: 55px;
-    mask: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAAAXNSR0IArs4c6QAAA25JREFUSEuVls9rXFUUx7/fO3mDojAhZGFwIYgbFXUj4kJqpQqtC5dxHUiYRDCL7NRSWsG/IS/PB6Vr20ijNNL0h0mlPzQNRVyIyZgWF1FrWhV1kpl59ytH3pNxmJk73uXjfu/nnXO+95zLOI7fdM7VW63WNzMzM9skhcBK0/Qx7/1z3nuWSqWvJycnb4d0jOP4KMm6pKsjIyM3x8fHGyFQkiRPSzpEskzyi0qlshHSGegagCbJz7IsO1Mqlb6vVqvNfrA4jg3yFoBHSH7aarUWQzouLCz8mh+6Lum09/7y6Ojodr8/TJLkiKQTAJ4iedV7vxjSGagOoAzgDwDXASw659YqlUqtFyxJklcBfCDpBQC/AbgR0hnINj4IIAJwj+QVScskL0va7pbGJElelvQ+gAN5NoI6A90H8FAOMsf9AuCapCXn3JXh4eHbnZEZCMBxSQcBFC7tqzPQLoCH8/SZiAB+NDdJWsmybLUotCSajfOIrEYGtNVXZxs6QYXZMgC7JM0gZ9thtqEjonaD9tT1AhXiXUlrAM63uyqO4wMkjwN4pcc1+I+uXC7fDYG8RQbgJoAl7/3y9PT0nTRNX/LeHwNg7uu2/tFJ2iD5MclaCFQcYnfNDHJqaGhopdlsPumcew/AkUAXMUevkdwcBFQU2lx1kmRKcsR7/w6AN/qACt2OpDv/B3Sf5ElJHwKoAHh3QNDPAH4YBGQ/bV3jKwCnoig612g0nnDOHZX0eiB1f+YtKpg6C9/qcwvAJwCWd3Z2tsbGxl4keUzSaz1A/+pIngUQNIN1Det/5wFcLJfLmxMTE3sD2LvQrQC44L3/qVfqzJ73LBIbA5Iu7e/vfzc7O7sfuLA9db1a0N3czhecc5eiKKpZJEULmp+fP+icswvb2YK66ooW1N5U7Ztd0C+tJpJWG41GzSIpIF0iKmzcVVfUsHNMWOGv27S13O7t7W0V6WovepcxEdS1D76/cgsvkfw8iqJvLV3dXNUx+H4vWlQ/XTGPSpJuOefOZFl2sV6v1+bm5mzydl1xHB92zp2Q9KylmeRiSGegdQCt3MIftburD+iQc+5tSY9KOkfydEhnIJv9dZumURTd6JWuAmqmSNP0Ge/9YZIPAFgdRGfPrQl7QALYmJqa2gw9BA2UJMnjkp4H4ACsV6vVrZDubzHWkATwr3pxAAAAAElFTkSuQmCC);
-    mask-size: 100% 100%;
-    mask-repeat: no-repeat;
-  }
-  .right-menu {
-    box-shadow: 0 -2px 4px 0 rgba(0,0,0,0.25);
-    justify-content: center;
-    cursor: pointer;
-    width: 40px;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    right: 0px;
-    display: flex;
-    align-items: center;
-  }
-}
-</style>

package/package/tf-layout/src/components/tf-menu.vue

@@ -1,180 +0,0 @@
-<template>
-  <div
-    v-show="!menuState"
-    class="tf-menu"
-    :style="{ width: isCollapse ? '64px' : '175px' }"
-  >
-    <el-scrollbar class="tf-menu-scroll">
-      <el-menu
-        :collapse="isCollapse"
-        :default-active="activePath"
-        class="tf-menu-content"
-        background-color="#001529"
-        text-color="#919398"
-        active-text-color="#ffffff"
-        :router="true"
-        :style="{ width: isCollapse ? '64px' : '175px' }"
-      >
-        <template v-for="firstMenuItem in menusInfo">
-          <el-submenu
-            v-if="firstMenuItem.childNode"
-            :key="firstMenuItem.path"
-            :index="firstMenuItem.path"
-          >
-            <template slot="title">
-              <svg-icon
-                :icon-class="firstMenuItem.icon"
-                style="height: 15px; width: 15px; margin-right: 10px"
-              />
-              <span>{{ firstMenuItem.title }}</span>
-            </template>
-            <el-menu-item
-              v-for="secondMenuItem in firstMenuItem.childNode"
-              :key="secondMenuItem.path"
-              :index="secondMenuItem.path"
-            >
-              <svg-icon
-                :icon-class="secondMenuItem.icon"
-                style="height: 15px; width: 15px; margin-right: 10px"
-              />
-              <span>{{ secondMenuItem.title }}</span>
-            </el-menu-item>
-          </el-submenu>
-          <el-menu-item
-            v-else
-            :key="firstMenuItem.path"
-            :index="firstMenuItem.path"
-          >
-            <svg-icon
-              :icon-class="firstMenuItem.icon"
-              style="height: 15px; width: 15px; margin-right: 10px"
-            />
-            <span slot="title">{{ firstMenuItem.title }}</span>
-          </el-menu-item>
-        </template>
-      </el-menu>
-    </el-scrollbar>
-    <div
-      class="bottom-menu"
-      :style="{ transform: isCollapse ? 'rotate(0deg)' : 'rotate(180deg)' }"
-      @click="isCollapse = !isCollapse"
-    >
-      <img
-        src="data:image/png;base64,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"
-        alt=""
-      >
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'TfMenu',
-  props: {
-    menusInfo: {
-      type: Array,
-      default: function () {
-        return []
-      }
-    },
-    menuState: {
-      default: false,
-      type: Boolean
-    }
-  },
-  data () {
-    return {
-      isCollapse: false,
-      activePath: null
-    }
-  },
-  watch: {
-    '$route.path': {
-      handler: function (params) {
-        if (params) this.activePath = params
-      },
-      deep: true,
-      immediate: true
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-.tf-menu {
-  height: 100%;
-  background: #001529;
-  transition: width 0.3s ease-in-out;
-  /deep/.tf-menu-content {
-    transition: width 0.3s ease-in-out;
-    border-right: none !important;
-    .el-menu--collapse {
-      width: 64px !important;
-      .el-submenu .el-menu-item {
-        height: 40px;
-        width: 175px;
-      }
-    }
-    .el-submenu .el-menu-item {
-
-      transition: width 0.3s;
-      height: 40px;
-      width: 175px;
-    }
-    .el-menu-item,
-    .el-submenu__title {
-      transition: width 0.3s !important;
-      display:flex;
-      align-items: center;
-      height: 40px;
-      line-height: 40px;
-      &:hover {
-        background: #0361a4 !important;
-      }
-      span {
-        margin-left: 5px;
-      }
-    }
-    .is-active {
-      transition: width 0.3s !important;
-
-      background: #0361a4 !important;
-    }
-    margin-bottom: 10px;
-  }
-  .tf-menu-scroll {
-    height: calc(100vh - 200px);
-    width: 100%;
-  }
-  /deep/.el-scrollbar__wrap {
-    overflow-x: hidden;
-  }
-  .bottom-menu {
-    width: 100%;
-    height: 60px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    img {
-      width: 20px;
-      height: 20px;
-      transition: all 0.3s;
-    }
-  }
-}
-</style>
-<style lang="less">
-.el-menu--vertical {
-  .el-menu--collapse .el-menu .el-submenu,
-  .el-menu--popup {
-    min-width: 175px;
-    .el-menu-item {
-      height: 40px;
-      line-height: 40px;
-      &:hover {
-        background: #0361a4 !important;
-      }
-    }
-  }
-}
-</style>