@tongfun/tf-widget 0.1.7 → 0.1.8-beta

package/package/tf-layout/README.md

@@ -0,0 +1,2 @@
+# tongfun
+## 砼方微前端布局组件(内部使用), 子应用菜单、标签导航组件

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,361 @@
+<template>
+  <div class="tf-labelbar">
+    <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 icon"
+          @click.stop="closeTag(tagItem)"
+        />
+      </li>
+    </ul>
+    <div
+      class="image 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="image 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 {
+      activePath: '/',
+      tagList: [],
+      rightMenuLeft: 0,
+      rightMenuTop: 0,
+      showRightMenu: false
+    }
+  },
+  watch: {
+    $route: {
+      handler: function (newValue) {
+        if (newValue) {
+          const { meta, path, name, params, query } = newValue
+          if (!path) return
+          const obj = {
+            path,
+            name,
+            params,
+            query,
+            defaultRouter: meta.defaultRouter,
+            notCloseTag: meta.notCloseTag,
+            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.defaultRouter) {
+            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: {
+    /**
+     * @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;
+  ul {
+    position: absolute;
+    left: 35px;
+    top: 0;
+    bottom: 0;
+    right: 55px;
+    padding: 0 10px;
+    margin: 0;
+    display: flex;
+    align-items: flex-end;
+    justify-content: left;
+    list-style: none;
+    overflow-y: none;
+    overflow-x: auto;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    li {
+      margin: 0;
+      padding: 0;
+      height: 35px;
+      min-width: 84px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      position: relative;
+      cursor: pointer;
+      box-sizing: border-box;
+      padding: 0 28px 0 15px;
+      white-space: nowrap;
+      .icon {
+        width: 0;
+        height: 12px;
+        position: absolute;
+        right: 24px;
+        transform: translateY(-45%);
+        top: 50%;
+        overflow: hidden;
+        transition: all 0.3s;
+        &:hover {
+          background: #9e9e9e;
+          color: white;
+          border-radius: 50%;
+        }
+      }
+      &::before {
+        content: "";
+        height: 100%;
+        width: 0;
+        mask: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAAAeCAYAAACyqDnLAAAAAXNSR0IArs4c6QAAA8BJREFUaEPtmk+IFEcUxr+vZzZZe3ZDdux1JWqCCZu4CsE/EJCQUxLJSTCRXLysQnIKGAI5SA7xkpBDvAge4kUEUTxoEA+yIRIIYclBQ9gIIjGLl4DJ9I7gTo+76vQLr2Zq0zPbM9ujt+2qy0xP/WnqN1+996peET2KiHhaTTIO52WCBRyC4B0BXgbwXK++q6BuAcDfIH5ljNPlEq4qBxEpkGx0mx+7VShMHeDePXm+8Qy+AnAIwCAAUcarAFh/UyB+8mJ8Wh7ijIgUST5OGyAVjIUZ3pct8HAJxKsA4gRMo9wcFBWPzls56ZwXhTg46vNcN6UuA2phVh/Ii3GMnwG8BOARgGIulfm/alSRhaYFxP61Pi+kQU0DSpISRvIDgHdbMAdyoMYsU1TbqVCrjQLeGBvkX1aAtnMbUEs8rMkkiFMA9F9RZbrSrtQiiLOBzwNdgYqIUab2CyO5BmBXy37kxV5mFY11yo+9GDvKw7yRhLqkUPtjJZKdBK5nHT2n7ZorV3AkGOI3Sa+fBGpCgUokHxP4zi33nlKxtvRyUOLepHNaDrQmx0h85oD2BKqhlEfg97KPnWoqrclcBjSMRJ3RpAOaCehs1cfWcXIxDajZUoWRXASwzwHtCdQ6porU8croKOfTgJqtZliXHyF4G4C1Ezn1OxmAEvONGONjQ/ynDah90M9qHb8JsN2FTBmAapwe4/VgmDdtlGRsqAV6V6RUrOMWgA0O6IoL0yx7z8Nb5TX8xXp6C9Qs97m6bBQxQP3cniqtyHGpQdMkEu8HPr/vBGoc0lxddotgOvuYuW7ZDO6Jw4HP4za4two1Qf1cXT4UwXnnkDIJxZ5znAhK/CQVaCWSowS+dCFTJqA2CpoKSnyv0yl1xqAuZFqZqd0tzd73sW0zuWCcu/Xwf4o8OxLhDxDjzsOvTDPhtB/GBWxbN8jbRqVL6Y55mYCHmdb5Zz7zRpk4tjUyKzlxgl9UoMYhJQ6V3XLPDtY4JhLfrvX5uWG5dEpflzMQHHAOKTvNRDQ0HZT4pjGf2r21Q7oJYJOzn30BtaZxoeBhYmQN7xigczXZI8SUg9kXTNu4aSIFk8EQTzeBRnJSgI9cQP8UQIGLQYkf8N+arPdockgvJJL6TzRyR6fVdLvEJC+7FK3TRGa14GEXw5ocAfG1W+5PpSEbGX3BSiRXALxGYhGCAbbuLcV6Q6I9J6+K0yS/LZ4kntn8nkw5dz7bft1+T85Ix0m+q9/Z6gR1J9NPUaWl3VfScdIuhzWk9Q7qfS9iEIIb/wHQ08swGxvGXQAAAABJRU5ErkJggg==);
+        mask-repeat: no-repeat;
+        mask-size: 100% 100%;
+        position: absolute;
+        left: 0%;
+        right: 0;
+        transform: translateX(-50%);
+        transition: all 0.3s;
+      }
+      &:hover {
+        .icon {
+          right: 12px;
+          width: 12px;
+        }
+        &::before {
+          left: 50%;
+          width: 120%;
+          z-index: -1;
+          background: #eeeeee;
+        }
+      }
+    }
+    .active-tag {
+      color: #0c4c8e;
+      &::before {
+        left: 50%;
+        width: 120%;
+        z-index: -1;
+        background: #ecf5ff;
+      }
+      .icon {
+        right: 12px;
+        width: 12px;
+      }
+      &:hover {
+        &::before {
+          background: #ecf5ff !important;
+        }
+      }
+    }
+  }
+  .image {
+    cursor: pointer;
+    width: 13px;
+    height: 13px;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    &:hover {
+      background: #07579a;
+    }
+  }
+  .left {
+    background: #99999a;
+    left: 10px;
+    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: 35px;
+    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 {
+    cursor: pointer;
+    width: 14px;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    right: 10px;
+    display: flex;
+    align-items: center;
+  }
+}
+</style>

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

@@ -0,0 +1,167 @@
+<template>
+  <div 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 menuInfo">
+          <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.moduleName }}</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.moduleName }}</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.moduleName }}</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: {
+    menuInfo: {
+      type: Array,
+      default: function () {
+        return []
+      }
+    }
+  },
+  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;
+
+      height: 40px;
+      line-height: 40px;
+      &:hover {
+        background: #0361a4 !important;
+      }
+    }
+    .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

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

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

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