@tongfun/tf-widget 0.1.7 → 0.1.11

package/package/tf-layout/README.md

@@ -0,0 +1,115 @@
+# 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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,378 @@
+<template>
+  <div class="tf-labelbar">
+    <div class="close-menu">
+      <div
+        :class="coloseMenu ? '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
+  },
+  data () {
+    return {
+      coloseMenu: false,
+      activePath: '/',
+      tagList: [],
+      rightMenuLeft: 0,
+      rightMenuTop: 0,
+      showRightMenu: false
+    }
+  },
+  watch: {
+    $route: {
+      handler: function (newValue) {
+        const base = process.env['NODE_ENV'] === 'development' ? process.env['VUE_APP_BASIC'] : `/app${process.env['VUE_APP_BASIC']}/`
+        if (newValue && newValue.matched[0]?.meta.base === base) {
+
+          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)
+            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.coloseMenu = !this.coloseMenu
+      this.$emit('changeMenuState', this.coloseMenu)
+    },
+    /**
+     * @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) {
+      if (tagItem.cacheArr) this.$emit('deleteCache', [tagItem.cacheArr])
+      const num = this.tagList.indexOf(tagItem)
+      if (tagItem) {
+        this.tagList.splice(num, 1)
+        this.routeJump(this.tagList[num - 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

@@ -0,0 +1,180 @@
+<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="firstMenuItem.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>