@tongfun/tf-widget 0.1.21 → 0.1.22

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

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

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

@@ -1,89 +1,89 @@
-<template>
-  <div
-    v-show="showMenu"
-    class="tf-right-menu"
-    :style="{ top: top + 'px', left: left + 'px' }"
-  >
-    <p @click="rightMenuClick('closeLeft')">
-      <i class="el-icon-back" /> 关闭左侧
-    </p>
-    <p @click="rightMenuClick('closeRight')">
-      <i class="el-icon-right" /> 关闭右侧
-    </p>
-    <p @click="rightMenuClick('closeOther')">
-      <i class="el-icon-circle-close" /> 关闭其他
-    </p>
-    <p @click="rightMenuClick('closeAll')">
-      <i class="el-icon-circle-close" /> 全部关闭
-    </p>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    top: {
-      default: 0,
-      type: Number
-    },
-    left: {
-      default: 0,
-      type: Number
-    },
-    showMenu: {
-      type: Boolean,
-      default: false
-    }
-  },
-  methods: {
-    /**
-     * @description 右键点击事件
-     */
-    rightMenuClick (params) {
-      this.$emit('rightMenuClick', params)
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-.tf-right-menu {
-  position: fixed;
-  z-index: 9999;
-  width: 120px;
-  height: 166px;
-  background: white;
-  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
-  border-radius: 4px;
-  box-sizing: border-box;
-  padding: 10px 0;
-  p {
-    cursor: pointer;
-    height: 36px;
-    margin: 0;
-    font-size: 14px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    box-sizing: border-box;
-    padding: 0 20px;
-    color: #606266;
-    &:hover {
-      background: #ecf5ff;
-      color: #46a6ff;
-    }
-  }
-  &::before {
-    content: "";
-    position: absolute;
-    width: 12px;
-    height: 6px;
-    top: -6px;
-    right: 10px;
-    background: white;
-    clip-path: polygon(50% 0px, 100% 100%, 0px 100%);
-    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
-    border-radius: 1px;
-  }
-}
-</style>
+<template>
+  <div
+    v-show="showMenu"
+    class="tf-right-menu"
+    :style="{ top: top + 'px', left: left + 'px' }"
+  >
+    <p @click="rightMenuClick('closeLeft')">
+      <i class="el-icon-back" /> 关闭左侧
+    </p>
+    <p @click="rightMenuClick('closeRight')">
+      <i class="el-icon-right" /> 关闭右侧
+    </p>
+    <p @click="rightMenuClick('closeOther')">
+      <i class="el-icon-circle-close" /> 关闭其他
+    </p>
+    <p @click="rightMenuClick('closeAll')">
+      <i class="el-icon-circle-close" /> 全部关闭
+    </p>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    top: {
+      default: 0,
+      type: Number
+    },
+    left: {
+      default: 0,
+      type: Number
+    },
+    showMenu: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    /**
+     * @description 右键点击事件
+     */
+    rightMenuClick (params) {
+      this.$emit('rightMenuClick', params)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.tf-right-menu {
+  position: fixed;
+  z-index: 9999;
+  width: 120px;
+  height: 166px;
+  background: white;
+  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
+  border-radius: 4px;
+  box-sizing: border-box;
+  padding: 10px 0;
+  p {
+    cursor: pointer;
+    height: 36px;
+    margin: 0;
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+    padding: 0 20px;
+    color: #606266;
+    &:hover {
+      background: #ecf5ff;
+      color: #46a6ff;
+    }
+  }
+  &::before {
+    content: "";
+    position: absolute;
+    width: 12px;
+    height: 6px;
+    top: -6px;
+    right: 10px;
+    background: white;
+    clip-path: polygon(50% 0px, 100% 100%, 0px 100%);
+    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
+    border-radius: 1px;
+  }
+}
+</style>

package/package/tf-layout/src/components/tf-rotate-box.vue

@@ -1,50 +1,50 @@
-<template>
-  <div class="tf-rotate-box">
-    <span class="close">
-      <i />
-      <i />
-      <i />
-      <i />
-    </span>
-  </div>
-</template>
-
-<script>
-export default {}
-</script>
-
-<style lang="less" scoped>
-.tf-rotate-box {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  .close {
-    width: 14px;
-    height: 14px;
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: center;
-    gap: 2px 2px;
-    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), border 0s,
-      color 0.1s, font-size 0s;
-    &:hover {
-      transform: rotate(90deg);
-      transform-origin: 50% 50%;
-      i {
-        background: #07579a;
-        &:nth-child(1) {
-          transform: rotate(45deg);
-          transform-origin: 50% 50%;
-        }
-      }
-    }
-    i {
-      margin: 0;
-      height: 6px;
-      width: 6px;
-      background: #9a9a9a;
-    }
-  }
-}
-</style>
+<template>
+  <div class="tf-rotate-box">
+    <span class="close">
+      <i />
+      <i />
+      <i />
+      <i />
+    </span>
+  </div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style lang="less" scoped>
+.tf-rotate-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .close {
+    width: 14px;
+    height: 14px;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    gap: 2px 2px;
+    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), border 0s,
+      color 0.1s, font-size 0s;
+    &:hover {
+      transform: rotate(90deg);
+      transform-origin: 50% 50%;
+      i {
+        background: #07579a;
+        &:nth-child(1) {
+          transform: rotate(45deg);
+          transform-origin: 50% 50%;
+        }
+      }
+    }
+    i {
+      margin: 0;
+      height: 6px;
+      width: 6px;
+      background: #9a9a9a;
+    }
+  }
+}
+</style>