vue-stack-tabs 0.1.0

package/src/lib/assets/style/stackTab.scss

@@ -0,0 +1,395 @@
+@use 'sass:math';
+@import './common/var';
+@import './common/mixins';
+
+.stack-tab {
+  display: flex;
+  min-height: 300px;
+  background-color: $--stack-tab-background-color-base;
+  flex-direction: column;
+  grid-gap: 5px;
+
+  &__container {
+    flex: 1 1 0;
+    position: relative;
+    overflow: hidden;
+  }
+  /*缓存页面wrapper*/
+  .cache-page-wrapper {
+    width: 100%;
+    height: 100%;
+  }
+  &__maximum {
+    width: 100vw !important;
+    height: 100vh !important;
+    top: 0;
+    left: 0;
+    position: fixed;
+  }
+
+  //蒙版按钮
+  &__mask-button {
+    height: 100%;
+    width: $--stack-tab-button-size;
+    background-color: $--stack-tab-text-color;
+    margin: 0 5px;
+    transition: $--stack-tab__trans;
+
+    .stack-tab__header-button[disabled] & {
+      cursor: not-allowed;
+      background-color: $--stack-tab-color-disabled;
+      transition: none;
+      //pointer-events: none;
+    }
+    &:hover {
+      background-color: $--stack-tab-color-primary;
+    }
+
+    &:active {
+      // cursor: pointer;
+      background-color: $--stack-tab-color-primary-activate;
+    }
+  }
+  &__button {
+    height: $--stack-tab-button-size;
+    width: $--stack-tab-button-size;
+    margin: 0 5px;
+  }
+
+  &__header {
+    position: relative;
+    display: flex;
+    width: 100%;
+    height: $--stack-tab-head-height;
+    border-bottom: 1px solid $--stack-tab-border-color;
+    box-sizing: border-box;
+    //user-select: none;
+
+    //tab header上面的按钮
+    &-button {
+      z-index: 2;
+      height: $--stack-tab-head-height;
+      width: fit-content;
+      overflow: hidden;
+      background-color: $--stack-tab-background-color-base;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+
+      //按钮禁用样式
+      &[disabled] {
+        background-color: $--stack-tab-background-color-inactive;
+        box-shadow: none;
+        cursor: not-allowed;
+      }
+    }
+  }
+  //tab header上的滚动条
+  &__scroll {
+    position: relative;
+    flex: 1 1 0;
+    height: $--stack-tab-head-height;
+    overflow: hidden;
+
+    &-container {
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+
+      // 移动设备原生滚动
+      &.is-mobile {
+        overflow-x: auto;
+        overflow-y: hidden;
+      }
+    }
+  }
+  &__scrollbar {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    /*z-index: 2;*/
+    height: $--stack-tab-scroll-height;
+    background-color: rgb(0 0 0 / 10%);
+    border-radius: $--stack-tab-scroll-border-radius;
+    opacity: 0;
+    transition: $--stack-tab__trans;
+
+    .stack-tab__scroll:hover &,
+    &.is-dragging {
+      opacity: 1;
+    }
+  }
+  &__scrollbar-thumb {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.1);
+
+    border-radius: $--stack-tab-scroll-border-radius;
+    transition: background-color 0.3s ease-in-out;
+
+    &:hover {
+      cursor: grab;
+      &:active {
+        cursor: grabbing;
+      }
+    }
+
+    .stack-tab__scrollbar.is-dragging &,
+    &:hover {
+      background-color: $--stack-tab-color-primary !important;
+    }
+  }
+
+  /*
+  页签导航
+   */
+  &__nav {
+    position: relative;
+    display: inline-flex;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    flex-wrap: nowrap;
+    content-visibility: auto;
+  }
+
+  /*
+  页签项
+   */
+  &__item {
+    position: relative;
+    display: flex;
+    padding: 0 $--stack-tab-padding;
+    font-size: $--stack-tab-font-size;
+    color: $--stack-tab-text-color;
+    cursor: pointer;
+    background-color: $--stack-tab-background-color-inactive;
+    border: $--stack-tab-border;
+    border-left: none;
+    border-radius: 8px 8px 0 0;
+    transition: $--stack-tab__trans;
+    user-select: none;
+    flex: none;
+    align-items: center;
+    transform-origin: left bottom;
+    content-visibility: auto;
+    margin-top: 5px;
+
+    &:first-child {
+      border-left: $--stack-tab-border;
+    }
+
+    /*
+    激活右键菜单的页签
+     */
+    &.is-contextmenu {
+      color: #000;
+    }
+
+    /*
+    激活的页签
+     */
+    &.is-active {
+      z-index: 1;
+      background-color: $--stack-tab-background-color-base;
+      border-bottom-color: #fff;
+      box-shadow: $--stack-tab-shadow-left, $--stack-tab-shadow-right;
+      margin-top: unset;
+    }
+
+    &:hover,
+    &.is-active {
+      color: $--stack-tab-color-primary;
+
+      &.is-icon {
+        padding: 0
+          ($--stack-tab-padding - math.div($--stack-tab-button-size + $--stack-tab-icon-margin, 2));
+
+        .stack-tab__item-button {
+          width: $--stack-tab-button-size;
+          margin-left: $--stack-tab-icon-margin;
+        }
+      }
+    }
+
+    /*
+    页签标题
+     */
+    &-title {
+      flex: 1 1 0;
+      display: flex;
+
+      &-content {
+        max-width: 100px;
+        min-width: 30px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+
+    /*
+    页签图标
+     */
+    &-icon {
+      margin-right: 5px;
+      font-size: 16px;
+    }
+    /*
+    页答按钮
+     */
+    &-button {
+      height: 100%;
+      width: 0;
+      background-color: $--stack-tab-text-color;
+      transition: $--stack-tab__trans;
+
+      &:hover {
+        background-color: $--stack-tab-color-primary;
+      }
+
+      &:active {
+        /*
+        cursor: pointer;
+         */
+        background-color: $--stack-tab-color-primary-activate;
+      }
+    }
+  }
+  /*
+  角徽样式
+   */
+  &__badge {
+    position: relative;
+    display: inline-block;
+
+    &-content {
+      position: absolute;
+      top: 0.1rem;
+      right: 0.1rem;
+      min-width: 0.5rem;
+      min-height: 0.5rem;
+      padding: 0.3rem;
+      font-size: 0.5rem;
+      line-height: 0.4rem;
+      color: #fff;
+      text-align: center;
+      border: 1px solid $--stack-tab-background-color-base;
+      border-radius: 0.5rem;
+      transform: translateX(100%) translateY(-50%);
+      box-sizing: border-box;
+
+      &.default {
+        background: $--stack-tab-color-danger;
+      }
+
+      &.primary {
+        background: $--stack-tab-color-primary;
+      }
+    }
+  }
+
+  &__iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    /*
+    新浏览器使用这个来消除frame的边框
+     */
+    border: 0;
+  }
+  /*
+  右键菜单
+   */
+  &__contextmenu {
+    position: fixed;
+    z-index: 999;
+    min-width: 120px;
+    padding: 8px;
+    font-size: $--stack-tab-font-size;
+    background: #fff;
+    border: $--stack-tab-border;
+    border-radius: 10px 0;
+    box-shadow: $--stack-tab-shadow-context-menu;
+    transform-origin: left top;
+    transition: all 0.25s ease-in;
+
+    &-item {
+      display: flex;
+      position: relative;
+      align-items: center;
+      padding: 0 10px;
+      line-height: 30px;
+      color: $--stack-tab-text-color;
+      cursor: pointer;
+      border-radius: 10px 0;
+      transition: all 0.2s ease-in-out;
+      user-select: none;
+
+      &:hover,
+      &:active {
+        color: $--stack-tab-color-white;
+        background-color: $--stack-tab-color-primary;
+
+        .svg-mask {
+          background-color: $--stack-tab-color-white;
+        }
+      }
+
+      &[disabled] {
+        color: $--stack-tab-color-disabled;
+        pointer-events: none;
+        cursor: default;
+        background: none;
+
+        .svg-mask {
+          background-color: $--stack-tab-color-disabled;
+        }
+      }
+    }
+
+    &-icon {
+      width: $--stack-tab-font-size;
+      height: $--stack-tab-font-size;
+      transition: all 0.2s ease-in-out;
+
+      &.svg-mask {
+        width: $--stack-tab-font-size;
+        height: $--stack-tab-font-size;
+        background-color: $--stack-tab-text-color;
+      }
+    }
+  }
+}
+
+.stack-tab__shadow-left {
+  box-shadow: $--stack-tab-shadow-left;
+}
+
+.stack-tab__shadow-right {
+  box-shadow: $--stack-tab-shadow-right;
+}
+
+/**
+内阴影
+ */
+.stack-tab__shadow-inset {
+  &-left::after {
+    @include insetShadow();
+    box-shadow: $--stack-tab-shadow-left-inset;
+  }
+  &-right::after {
+    @include insetShadow();
+    box-shadow: $--stack-tab-shadow-right-inset;
+  }
+  &-all::after {
+    @include insetShadow();
+    box-shadow: $--stack-tab-shadow-left-inset, $--stack-tab-shadow-right-inset;
+  }
+}

package/src/lib/assets/style/transition.scss

@@ -0,0 +1,40 @@
+/*
+transition 过渡样式
+ */
+.stack-tab-zoom {
+  &-enter-active,
+  &-leave-active {
+    transition: all 0.3s ease-in-out;
+  }
+
+  &-enter-from,
+  &-leave-to {
+    transform: scale(0);
+    opacity: 0;
+  }
+}
+
+/*
+页面交换
+ */
+.stack-tab-swap {
+  $trans: 30px;
+
+  &-enter-active,
+  &-leave-active {
+    transition: all 0.3s ease-in-out;
+  }
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+  }
+
+  &-enter-from {
+    transform: translateX(-$trans);
+  }
+
+  &-leave-to {
+    transform: translateX($trans);
+  }
+}

package/src/lib/banner.ts

@@ -0,0 +1,51 @@
+import { encode } from 'js-base64'
+const printVersion = (version: string) => {
+  const height = 100
+  const width = 580
+  const xml = `<?xml version="1.0" encoding="UTF-8"?>
+<svg id="uuid-cb9fc1ae-07f4-4aa2-a904-54dfcb9a64e0" data-name=" 图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1167.08 237.76">
+  <path d="M79.24,19.73h108.91v29.7h-108.91s0-29.7,0-29.7Z" style="fill: #79a7ff; stroke-width: 0px;"/>
+  <path d="M179.24,199.67H20.26c-11.21-.07-20.26-9.17-20.26-20.38V20.39C0,9.18,9.05.07,20.26,0h59.49c3.51.07,6.34,2.9,6.41,6.42v44.36c0,3.54-2.87,6.41-6.41,6.41s-6.41-2.86-6.42-6.4h0V12.36H20.25c-4.13.07-7.44,3.44-7.44,7.56v159.41c0,4.13,3.31,7.49,7.44,7.56h158.98c4.13-.07,7.44-3.44,7.44-7.56V51.84c0-3.54,2.87-6.41,6.41-6.42,3.54,0,6.42,2.87,6.42,6.42h0v127.45c0,11.21-9.05,20.32-20.26,20.39h0Z" style="fill: #377dff; stroke-width: 0px;"/>
+  <path d="M192.8,60.77c-3.66-.07-6.61-3.02-6.68-6.68v-18.23c.09-4.29-3.32-7.83-7.6-7.92h-96.43c-3.69,0-6.69-2.99-6.69-6.69s2.99-6.69,6.69-6.69h96.27c11.69.08,21.13,9.58,21.13,21.27v18.25c0,3.69-2.99,6.68-6.68,6.68h-.01Z" style="fill: #377dff; stroke-width: 0px;"/>
+  <path d="M193.08,58.67H10.15c-3.61-.08-6.48-3.07-6.41-6.68-.08-3.62,2.79-6.61,6.41-6.69h182.93c3.62.08,6.48,3.08,6.41,6.69.07,3.61-2.79,6.6-6.41,6.68h0Z" style="fill: #377dff; stroke-width: 0px;"/>
+  <path d="M137.2,58.67c-3.42.24-6.4-2.32-6.68-5.74v-28.15c.55-3.69,3.99-6.24,7.69-5.69,2.94.44,5.25,2.75,5.69,5.69v28.15c-.28,3.42-3.26,5.98-6.68,5.74h-.02Z" style="fill: #377dff; stroke-width: 0px;"/>
+  <path d="M99.78,100.48l-12.83-22.22h-18.39l31.22,54.05,31.22-54.05h-18.39s-12.83,22.22-12.83,22.22Z" style="fill: #00d797; stroke-width: 0px;"/>
+  <path d="M135.28,78.26l-35.49,61.43-35.44-61.43h-20.11l55.55,96.2,55.55-96.2h-20.06Z" style="fill: #306fff; stroke-width: 0px;"/>
+  <g>
+    <path d="M313.33,59.95c0,.52-.67,1.84-2,3.95-1.33,2.11-3.3,5.2-5.9,9.28-2.6,4.08-5.75,9.28-9.46,15.61-3.7,6.33-7.52,13.34-11.45,21.04-4.51,8.85-7.76,15.8-9.76,20.86-2,5.06-2.99,9.41-2.99,13.05,0,2.89,1.53,5.44,4.6,7.63,3.7-2.89,7.34-6.33,10.93-10.32,3.58-3.99,7.13-8.44,10.63-13.36,3.5-4.92,7.55-11.13,12.14-18.65,4.6-7.52,8.69-14.43,12.27-20.73-.17-.52-.36-1.04-.56-1.56-.2-.52-.3-.95-.3-1.3,0-2.72.55-5.26,1.65-7.63,1.1-2.37,2.47-4.68,4.12-6.94,1.65-2.26,4.12-5.44,7.42-9.54.87-1.1,1.94-1.65,3.21-1.65,2.08,0,3.12,1.33,3.12,3.99s-1.08,6.84-3.25,12.53c-2.17,5.7-5.37,12.39-9.59,20.08-4.22,7.69-9.47,16.29-15.74,25.81-6.28,9.51-13.37,19.45-21.3,29.8-8.04,10.47-13.79,15.7-17.26,15.7-1.97,0-4.19-1.08-6.68-3.25-2.49-2.17-4.63-5.13-6.42-8.89-1.79-3.76-2.69-7.78-2.69-12.06,0-2.54.53-5.81,1.6-9.8,1.07-3.99,2.75-8.78,5.03-14.36,2.28-5.58,4.87-11.09,7.76-16.53,3.01-5.72,5.65-10.47,7.94-14.23,2.28-3.76,4.87-7.94,7.76-12.53,2.89-4.6,4.34-7.1,4.34-7.5,0-.87-.58-1.3-1.73-1.3-3.35,0-7.82,1.71-13.4,5.12-5.58,3.41-12.85,8.59-21.82,15.53-3.41,2.66-5.57,4.38-6.46,5.16s-1.34,1.43-1.34,1.95c0,.69.55,1.04,1.65,1.04.46,0,2.02-.17,4.68-.52,2.66-.35,4.77-.52,6.33-.52,2.6,0,3.9.46,3.9,1.39,0,.81-.54,1.45-1.61,1.91-1.07.46-2.54.93-4.42,1.39-1.88.46-4.44,1.1-7.68,1.91-3.47.93-7.16,2.25-11.06,3.99-3.9,1.73-6.14,2.6-6.72,2.6-1.1,0-1.78-.4-2.04-1.21-.26-.81-.39-2.14-.39-3.99,0-8.21,1.36-14.56,4.08-19.04,2.72-4.48,7.58-9.15,14.57-14.01,7.98-5.55,15.61-10.16,22.9-13.84,7.29-3.67,13.58-6.36,18.87-8.07,5.29-1.71,9.18-2.56,11.67-2.56s4.84,1.56,7.24,4.68c2.4,3.12,3.6,6.42,3.6,9.89Z" style="fill: #306fff; stroke-width: 0px;"/>
+    <path d="M366.34,124.75c-8.39,11.1-14.76,19-19.13,23.68s-7.94,7.03-10.71,7.03c-2.2,0-4.22-.91-6.07-2.73-1.85-1.82-3.28-4.28-4.29-7.37s-1.52-6.4-1.52-9.93c0-2.31.22-4.39.65-6.25.43-1.85,1.26-3.89,2.47-6.12,1.21-2.23,2.82-4.64,4.81-7.24,2-2.6,4.44-5.55,7.33-8.85,1.73-2.02,3.19-3.73,4.38-5.12,1.18-1.39,2.34-2.33,3.47-2.82,1.13-.49,2.96-.74,5.51-.74,1.85,0,3.61.25,5.29.74,1.68.49,2.52,1,2.52,1.52,0,1.04-.85,2.92-2.56,5.64-1.71,2.72-4.45,6.03-8.24,9.93-3.79,3.9-8.17,7.74-13.14,11.49-1.1,3.41-1.65,6.01-1.65,7.81,0,2.49.95,3.73,2.86,3.73.69,0,1.85-.59,3.47-1.78,1.62-1.18,4.35-3.47,8.2-6.85,3.84-3.38,7.3-6.38,10.37-8.98,2.25-1.97,4.87-4.9,7.85-8.8,2.98-3.9,5.39-6.84,7.24-8.8,4.28-4.51,7.2-7.44,8.76-8.8,1.56-1.36,3.06-2.04,4.51-2.04s2.33.43,2.82,1.3c.49.87.74,2.63.74,5.29,0,1.21-.12,2.2-.35,2.95-.23.75-.71,1.72-1.43,2.91-.72,1.19-2.18,3.37-4.38,6.55-2.2,3.18-4.8,6.94-7.81,11.28-1.62,2.31-3.04,4.84-4.25,7.59-1.21,2.75-1.82,4.81-1.82,6.2,0,3.01,1.18,4.51,3.56,4.51,1.96,0,4.25-.81,6.85-2.43,2.6-1.62,6.59-4.54,11.97-8.76v5.81c-6.77,6.25-11.77,10.79-15.01,13.62-3.24,2.83-6.04,4.97-8.41,6.42-2.37,1.45-4.63,2.17-6.77,2.17-4.86,0-7.29-2.89-7.29-8.67,0-2.2.72-5.16,2.17-8.89,1.44-3.73,3.79-9.12,7.03-16.18Z" style="fill: #306fff; stroke-width: 0px;"/>
+    <path d="M407.71,133.77v2.17c0,3.41.84,6.07,2.52,7.98,1.68,1.91,3.87,2.86,6.59,2.86s5.77-.66,8.8-2c3.04-1.33,6.06-3.09,9.07-5.29,3.01-2.2,6.68-5.15,11.02-8.85v5.29c-6.54,7.87-12.67,13.89-18.39,18.09-5.72,4.19-11.54,6.29-17.44,6.29-5.15,0-9.22-2-12.23-5.99-3.01-3.99-4.51-9.46-4.51-16.39,0-6.07,1.42-11.58,4.25-16.52,2.83-4.94,7.46-10.16,13.88-15.66,4.39-3.76,8.76-6.59,13.1-8.5,4.34-1.91,8.21-2.86,11.62-2.86,2.72,0,4.87.62,6.46,1.86,1.59,1.24,2.39,3.11,2.39,5.59,0,3.64-1.36,7.27-4.08,10.89-2.72,3.62-6.87,7.2-12.45,10.76-5.58,3.56-12.45,6.98-20.6,10.28ZM408.58,128.13c5.2-2.02,9.66-4.54,13.36-7.55,3.7-3.01,6.43-5.88,8.2-8.63,1.76-2.75,2.65-4.76,2.65-6.03s-.61-2-1.82-2c-1.04,0-2.73.67-5.07,2-2.34,1.33-4.71,3.07-7.11,5.21-2.4,2.14-4.55,4.66-6.46,7.55-1.91,2.89-3.15,6.04-3.73,9.46Z" style="fill: #306fff; stroke-width: 0px;"/>
+    <path d="M585.37,132.9c-1.45-2.66-3.61-5.06-6.51-7.2-2.89-2.14-6.15-3.86-9.76-5.16-3.61-1.3-7.39-2.27-11.32-2.91-11.68-1.74-22.58-5.52-32.7-11.36-.87-.46-1.79-1.44-2.78-2.95-.98-1.5-1.47-2.95-1.47-4.34,0-5.09.85-10.19,2.56-15.31,1.71-5.12,3.89-9.12,6.55-12.01,4.28-4.8,11.98-8.99,23.12-12.58,11.13-3.58,23.67-5.38,37.6-5.38,8.33,0,14.76.64,19.3,1.91,4.54,1.27,6.81,3.24,6.81,5.9,0,4.34-.59,7.69-1.78,10.06-1.19,2.37-2.46,3.95-3.82,4.73-1.36.78-3.75,1.84-7.16,3.17-3.64,1.27-6.81,2.6-9.5,3.99-2.69,1.39-4.99,2.72-6.9,3.99-1.91,1.27-3.09,1.91-3.56,1.91-.58,0-.87-.23-.87-.69,0-.98,1.03-2.47,3.08-4.47,2.05-2,4.58-3.74,7.59-5.25,3.18-1.68,4.77-2.75,4.77-3.21,0-.75-1.76-1.13-5.29-1.13-10.7,0-20.59.95-29.67,2.86s-16.24,4.42-21.47,7.55c-5.23,3.12-7.85,6.3-7.85,9.54,0,2.02,1.08,3.46,3.25,4.29,2.17.84,6.95,2.24,14.36,4.21,7.4,1.97,14.02,4.22,19.86,6.77,8.38,3.59,14.6,7.32,18.65,11.19,4.05,3.88,6.07,8.21,6.07,13.01,0,3.3-.8,6.61-2.39,9.93-1.59,3.33-3.92,6.38-6.98,9.15-3.07,2.78-6.59,5.06-10.58,6.85-3.41,1.45-7.71,2.8-12.88,4.08-5.18,1.27-10.79,2.27-16.83,2.99-6.04.72-11.81,1.08-17.31,1.08-10.12,0-18.26-.95-24.42-2.86-6.16-1.91-9.24-4.8-9.24-8.67,0-1.74,1.04-4.44,3.12-8.11,2.08-3.67,4.54-6.14,7.37-7.42,2.49-.98,4.89-1.55,7.2-1.69,2.31-.14,3.47.13,3.47.82,0,.17-.09.35-.26.52-.17.17-.38.32-.61.43-.23.12-.46.23-.69.35-1.16.46-2.1.82-2.82,1.08-.72.26-1.3.52-1.74.78-.43.26-.65.62-.65,1.08,0,1.21,5.99,1.82,17.96,1.82,10.41,0,18.94-.38,25.59-1.13,6.65-.75,12.52-2.11,17.61-4.08,5.09-1.97,9.71-4.68,13.88-8.15Z" style="fill: #306fff; stroke-width: 0px;"/>
+    <path d="M640.8,85.63h3.73c3.06-5.49,5.84-9.38,8.33-11.67,2.49-2.28,5.32-3.43,8.5-3.43s4.77.72,4.77,2.17c0,.69-1.24,2.57-3.73,5.64-2.49,3.07-4.37,5.64-5.64,7.72,1.96.23,3.71.43,5.25.61,1.53.17,2.73.32,3.6.43-3.3,6.13-7.43,12.4-12.4,18.82-1.62-.12-2.98-.22-4.08-.3-1.1-.09-2.21-.17-3.34-.26-1.13-.09-2.5-.19-4.12-.3-3.12,5.03-5.74,9.53-7.85,13.49-2.11,3.96-3.73,7.59-4.86,10.89-1.13,3.3-1.69,6.42-1.69,9.37,0,3.99,1.59,5.99,4.77,5.99,2.2,0,5.07-1.17,8.63-3.51,3.56-2.34,8.31-5.94,14.27-10.8v5.81c-15.61,16.95-27.15,25.42-34.61,25.42-2.6,0-4.7-1.01-6.29-3.04-1.59-2.02-2.38-4.63-2.38-7.81,0-2.14.45-4.68,1.34-7.63.9-2.95,2.5-7.4,4.81-13.36-.81.69-1.58,1.37-2.3,2.04-.72.67-1.39,1.27-2,1.82-.61.55-1.26,1.13-1.95,1.73-.69.61-1.39,1.23-2.08,1.87v-5.99c6.07-5.09,13.42-14.02,22.03-26.8-.87-.06-1.68-.1-2.43-.13-.75-.03-1.65-.04-2.69-.04-3.41,0-5.96.23-7.63.69-.69.17-1.34.36-1.95.56-.61.2-1.03.3-1.26.3s-.35-.17-.35-.52c0-1.91,1.18-4.77,3.56-8.59,1.91-3.24,3.72-5.64,5.42-7.2,1.71-1.56,3.79-2.62,6.25-3.17,2.46-.55,5.91-.82,10.37-.82Z" style="fill: #306fff; stroke-width: 0px;"/>
+    <path d="M664.91,115.12c8.79-7.98,17.32-13.91,25.59-17.78,8.27-3.87,14.66-5.81,19.17-5.81,1.21,0,2.34.51,3.38,1.52,1.04,1.01,1.87,2.18,2.47,3.51.61,1.33.91,2.31.91,2.95,0,1.04-.41,1.81-1.21,2.3-.81.49-2.23,1.08-4.25,1.78.4.93.92,2.11,1.56,3.56.64,1.45,1.13,2.62,1.47,3.51.35.9.52,1.69.52,2.39,0,1.39-1.4,3.98-4.21,7.76-2.81,3.79-4.77,6.58-5.9,8.37-1.13,1.79-1.69,3.99-1.69,6.59,0,4.28,1.96,6.42,5.9,6.42s10.38-3.79,19-11.36v5.29c-14.63,16.25-25.1,24.38-31.4,24.38-2.26,0-3.86-.74-4.81-2.21s-1.43-3.66-1.43-6.55c0-4.57,1.65-11.19,4.94-19.86-8.44,9.37-14.72,16.03-18.82,20-4.11,3.96-7.49,5.94-10.15,5.94-1.27,0-2.86-1.1-4.77-3.3-1.91-2.2-3.6-5.04-5.07-8.54-1.47-3.5-2.21-7.13-2.21-10.89,0-2.72.26-4.99.78-6.81s1.53-3.69,3.04-5.59c1.5-1.91,3.9-4.42,7.2-7.55ZM706.46,105.58c-15.04,6.88-25.75,12.72-32.14,17.52-6.39,4.8-9.59,9.75-9.59,14.83,0,1.85.32,3.37.95,4.55.64,1.19,1.5,1.78,2.6,1.78.64,0,1.76-.4,3.38-1.21,6.07-3.58,11.62-8.25,16.66-14.01,5.03-5.75,11.07-13.58,18.13-23.46Z" style="fill: #306fff; stroke-width: 0px;"/>
+    <path d="M779.07,130.82v5.81c-6.19,6.07-11.23,10.79-15.14,14.14-3.9,3.35-7.55,5.96-10.93,7.81-3.38,1.85-6.69,2.78-9.93,2.78s-6.1-1.26-8.76-3.77c-2.66-2.52-4.74-5.81-6.25-9.89-1.5-4.08-2.26-8.4-2.26-12.97,0-3.93.87-7.43,2.6-10.5,1.74-3.07,5.09-7.03,10.06-11.88,5.9-5.78,11.38-10.25,16.44-13.4,5.06-3.15,9.04-4.73,11.93-4.73,2.08,0,3.85.72,5.29,2.17,1.44,1.45,2.17,3.27,2.17,5.46,0,1.85-.95,4.48-2.86,7.89-1.91,3.41-4.05,6.38-6.42,8.89-2.37,2.52-4.25,3.77-5.64,3.77-1.5,0-2.25-.81-2.25-2.43.06-.46.1-.9.13-1.3.03-.4.04-.81.04-1.21,0-.69-.25-1.08-.74-1.17s-1.08.13-1.78.65c-5.78,4.05-9.75,6.9-11.88,8.54-2.14,1.65-3.83,3.31-5.07,4.99-1.24,1.68-1.87,3.44-1.87,5.29,0,3.41,1.1,6.19,3.3,8.33,2.2,2.14,5.06,3.21,8.59,3.21s8.02-1.4,13.14-4.21c5.12-2.8,11.15-6.9,18.09-12.27Z" style="fill: #306fff; stroke-width: 0px;"/>
+    <path d="M844.13,130.65v5.81c-6.48,7.58-11.91,13.32-16.31,17.22-4.4,3.9-8.07,5.86-11.02,5.86s-5.39-.84-7.68-2.52c-2.29-1.68-4.34-3.99-6.16-6.94-1.82-2.95-3.98-7.05-6.46-12.32-2.95,3.64-5.61,7.04-7.98,10.19-2.37,3.15-4.02,5.25-4.94,6.29-.93,1.04-1.77,1.56-2.52,1.56-1.56,0-2.69-1-3.38-2.99-.69-2-1.04-4.9-1.04-8.72,0-5.21.62-10.22,1.87-15.05,1.24-4.83,3.04-9.53,5.38-14.1,2.34-4.57,5.35-9.5,9.02-14.79,3.67-5.29,7.79-10.83,12.36-16.61,6.3-7.98,11.74-14.5,16.31-19.56,4.57-5.06,8.54-8.88,11.93-11.45,3.38-2.57,6.2-3.86,8.46-3.86,2.78,0,4.16,1.24,4.16,3.73,0,2.14-5.12,9.85-15.35,23.12-10.24,13.27-25.16,31.39-44.76,54.35v7.46c13.13-14.05,23.69-24.49,31.71-31.31,8.01-6.82,14.21-10.24,18.61-10.24,1.79,0,3.18,1.06,4.16,3.17.98,2.11,1.47,4.55,1.47,7.33,0,5.67-2.43,10.92-7.29,15.74-4.86,4.83-12.32,10.37-22.38,16.61,1.74,2.6,3.27,4.5,4.6,5.68,1.33,1.19,3.01,1.78,5.03,1.78,1.79,0,3.73-.61,5.81-1.82,2.08-1.21,4.21-2.75,6.38-4.6,2.17-1.85,5.51-4.86,10.02-9.02ZM809.86,135.07c2.2-1.45,4.93-3.69,8.2-6.72,3.27-3.04,6.06-6.19,8.37-9.46,2.31-3.27,3.47-6,3.47-8.2,0-.92-.41-1.39-1.21-1.39-2.2,0-5.97,2.11-11.32,6.33-5.35,4.22-10.57,9.63-15.66,16.22,2.2,0,4.92,1.07,8.15,3.21Z" style="fill: #306fff; stroke-width: 0px;"/>
+    <path d="M951.78,140.71l2.86,2.17c-.75,1.62-1.47,3.04-2.17,4.25-.69,1.21-1.53,2.69-2.52,4.42-.98,1.73-1.73,3.04-2.25,3.9-4.34,7.58-8.41,11.36-12.23,11.36-1.62,0-3.01-.64-4.16-1.91-1.16-1.27-1.73-3.01-1.73-5.2,0-3.12,1.11-7.4,3.34-12.84,2.23-5.43,5.67-12.13,10.32-20.08,4.65-7.95,10.51-16.96,17.57-27.02,7.05-10.06,15.01-20.67,23.85-31.84-5.09-.75-11.13-1.13-18.13-1.13-8.04,0-16.99.9-26.85,2.69-9.86,1.79-18.45,3.86-25.76,6.2-7.32,2.34-10.97,4.06-10.97,5.16,0,.41.14.68.43.82.29.15.77.26,1.43.35.66.09,1.52.19,2.56.3,6.77.93,10.15,1.97,10.15,3.12,0,.58-1.47.85-4.42.82-2.95-.03-6.51-.04-10.67-.04-3.3,0-5.68-.13-7.16-.39s-2.46-.75-2.95-1.47c-.49-.72-.74-1.84-.74-3.34,0-.98.29-3.12.87-6.42,1.1-6.13,2.79-11.04,5.07-14.75,2.28-3.7,5.78-6.72,10.5-9.06,4.71-2.34,11.2-4.21,19.47-5.59,13.88-2.37,25.36-3.56,34.44-3.56,6.71,0,12,.27,15.88.82,3.87.55,6.72,1.34,8.54,2.39,1.82,1.04,2.98,2.07,3.47,3.08.49,1.01,1.14,2.76,1.95,5.25l2.69,7.98c.17.52.32.94.43,1.26.12.32.22.65.3,1,.09.35.13.67.13.95,0,2.26-.51,4.28-1.52,6.07-1.01,1.79-2.86,4.48-5.55,8.07-2.69,3.59-4.67,6.39-5.94,8.41-14.92,24.23-25.1,42.16-30.53,53.78Z" style="fill: #306fff; stroke-width: 0px;"/>
+    <path d="M991.94,115.12c8.79-7.98,17.32-13.91,25.59-17.78,8.27-3.87,14.66-5.81,19.17-5.81,1.21,0,2.34.51,3.38,1.52,1.04,1.01,1.87,2.18,2.47,3.51.61,1.33.91,2.31.91,2.95,0,1.04-.41,1.81-1.21,2.3-.81.49-2.23,1.08-4.25,1.78.4.93.92,2.11,1.56,3.56.64,1.45,1.13,2.62,1.47,3.51.35.9.52,1.69.52,2.39,0,1.39-1.4,3.98-4.21,7.76-2.81,3.79-4.77,6.58-5.9,8.37-1.13,1.79-1.69,3.99-1.69,6.59,0,4.28,1.96,6.42,5.9,6.42s10.38-3.79,19-11.36v5.29c-14.63,16.25-25.1,24.38-31.4,24.38-2.26,0-3.86-.74-4.81-2.21s-1.43-3.66-1.43-6.55c0-4.57,1.65-11.19,4.94-19.86-8.44,9.37-14.72,16.03-18.82,20-4.11,3.96-7.49,5.94-10.15,5.94-1.27,0-2.86-1.1-4.77-3.3-1.91-2.2-3.6-5.04-5.07-8.54-1.47-3.5-2.21-7.13-2.21-10.89,0-2.72.26-4.99.78-6.81s1.53-3.69,3.04-5.59c1.5-1.91,3.9-4.42,7.2-7.55ZM1033.49,105.58c-15.04,6.88-25.75,12.72-32.14,17.52-6.39,4.8-9.59,9.75-9.59,14.83,0,1.85.32,3.37.95,4.55.64,1.19,1.5,1.78,2.6,1.78.64,0,1.76-.4,3.38-1.21,6.07-3.58,11.62-8.25,16.66-14.01,5.03-5.75,11.07-13.58,18.13-23.46Z" style="fill: #306fff; stroke-width: 0px;"/>
+    <path d="M1111.3,130.82v5.64c-6.02,3.82-10.76,5.72-14.23,5.72-1.91,0-3.93-.32-6.07-.95-5.2,6.59-9.67,11.42-13.4,14.49-3.73,3.07-7.47,4.6-11.23,4.6-4.34,0-7.68-2.29-10.02-6.85-2.34-4.57-3.51-10.24-3.51-17,0-9.2,2.78-19.21,8.33-30.06,5.55-10.84,12.24-20.99,20.08-30.45,7.84-9.46,15.43-17.28,22.77-23.46,7.34-6.19,12.32-9.28,14.92-9.28s3.73,1.71,3.73,5.12c0,15.15-19.43,41.58-58.29,79.29-.12,1.04-.17,3.09-.17,6.16,0,7.98,2.14,11.97,6.42,11.97,1.68,0,3.37-.68,5.07-2.04,1.71-1.36,4.32-3.95,7.85-7.76-1.39-3.12-2.08-5.44-2.08-6.94,0-3.18,1.3-6.62,3.9-10.32,2.6-3.7,5.57-6.9,8.89-9.59,3.33-2.69,5.74-4.03,7.24-4.03,2.37,0,3.56,1.71,3.56,5.12,0,2.6-.68,5.72-2.04,9.37-1.36,3.64-3.34,7.81-5.94,12.49.98.81,1.76,1.4,2.34,1.78.58.38,1.45.56,2.6.56,2.66,0,5.75-1.18,9.28-3.56ZM1067.24,117.81c3.01-2.6,6.03-5.68,9.06-9.24s7.47-9.01,13.32-16.35c5.61-7.05,10.02-12.94,13.23-17.65,3.21-4.71,5.62-8.63,7.24-11.75,1.62-3.12,2.43-5.26,2.43-6.42,0-.87-.23-1.3-.69-1.3-1.27,0-3.92,2.1-7.94,6.29-4.02,4.19-8.6,9.93-13.75,17.22-7.11,10.06-12.26,17.64-15.44,22.73-3.18,5.09-5.67,10.58-7.46,16.48Z" style="fill: #306fff; stroke-width: 0px;"/>
+    <path d="M1110.96,133.08v-2.08c14.92-15.73,25.18-26.75,30.79-33.05,1.27-7.11,4.34-10.67,9.19-10.67,1.21,0,2.52.35,3.9,1.04l.52,1.65c-.23.69-.35,1.68-.35,2.95,0,1.1.42,3.14,1.26,6.12.84,2.98,1.49,5.48,1.95,7.5.46,2.02.69,4.31.69,6.85,0,3.82-.87,7.48-2.6,10.97-1.73,3.5-4.25,6.85-7.55,10.06-3.3,3.21-7.55,6.49-12.75,9.85,2.08.35,3.73.52,4.94.52,2.37,0,4.93-.59,7.68-1.78,2.75-1.18,5.55-2.78,8.41-4.77,2.86-2,6.2-4.58,10.02-7.76v5.81c-7.4,7.23-14.02,12.71-19.86,16.44-5.84,3.73-10.87,5.59-15.09,5.59-5.44,0-10.47-2.31-15.09-6.94-2.72-2.78-4.41-5.43-5.08-7.98-.67-2.54-1-5.99-1-10.32ZM1143.31,119.8l-1.56-12.66c-3.59,4.05-11.25,11.83-22.99,23.33,3.47.75,5.84,1.76,7.11,3.04,1.27,1.27,3.06,3.73,5.38,7.37,3.93-1.62,6.95-3.83,9.07-6.64,2.11-2.8,3.17-6.64,3.17-11.49,0-.58-.01-1.1-.04-1.56-.03-.46-.07-.92-.13-1.39Z" style="fill: #306fff; stroke-width: 0px;"/>
+  </g>
+  <text transform="translate(943.45 229.96)" style="fill: #00d797; font-family: ArialMT, Arial; font-size: 24px;"><tspan x="0" y="0">version: ${version}</tspan></text>
+</svg>
+  `
+  // Make it base64
+  const svg64 = encode(xml)
+  const b64Start = 'data:image/svg+xml;base64,'
+  // Prepend a "header"
+  const image64 = b64Start + svg64
+  const style =
+    'font-size: 1px; padding: ' +
+    Math.floor(height / 4) +
+    'px ' +
+    Math.floor(width / 2) +
+    'px; line-height: ' +
+    Math.floor(height / 2) +
+    'px;'
+  // Logging part
+  window.console.log(
+    '%c' + '+',
+    style +
+      `background-image: url(${image64});background-size: ${width}px ${height}px;background-repeat: norepeat; color: transparent;`
+  )
+}
+export default printVersion

package/src/lib/components/ContextMenu/ContextMenuItem.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="stack-tab__contextmenu-item">
+    <div class="stack-tab__contextmenu-icon" :class="icon"></div>
+    <div style="margin-left: 8px" @contextmenu.prevent>{{ title }}</div>
+  </div>
+</template>
+
+<script setup lang="ts" name="StackTabContextMenuItem">
+defineProps<{
+  icon?: string
+  title: string
+}>()
+</script>
+
+<style lang="scss" scoped></style>

package/src/lib/components/ContextMenu/index.vue

@@ -0,0 +1,128 @@
+<template>
+  <div
+    ref="contextmenu"
+    class="stack-tab__contextmenu"
+    :style="{
+      left: `${modifyData.left}px`,
+      top: `${modifyData.top}px`,
+      'z-index': getMaxZIndex('.stack-tab,.stack-tab *')
+    }"
+  >
+    <context-menu-item
+      icon="stack-tab__icon-reload svg-mask"
+      :title="t('VueStackTab.reload')"
+      @click="refreshTab(tabItem.id)"
+    />
+    <context-menu-item
+      icon="stack-tab__icon-reload-all svg-mask"
+      :title="t('VueStackTab.reloadAll')"
+      @click="refreshAllTabs"
+    />
+    <context-menu-item
+      icon="stack-tab__icon-close svg-mask"
+      :title="t('VueStackTab.close')"
+      :disabled="!tabItem.closable ? 'disabled' : null"
+      @click="removeTab(tabItem.id)"
+    />
+    <context-menu-item
+      icon="stack-tab__icon-close-lefts svg-mask"
+      :title="t('VueStackTab.closeLefts')"
+      :disabled="index <= 0 ? 'disabled' : null"
+      @click="removeLeftTabs(tabItem.id)"
+    />
+    <context-menu-item
+      icon="stack-tab__icon-close-rights svg-mask"
+      :title="t('VueStackTab.closeRights')"
+      :disabled="index >= max - 1 ? 'disabled' : null"
+      @click="removeRightTabs(tabItem.id)"
+    />
+    <context-menu-item
+      icon="stack-tab__icon-close-others svg-mask"
+      :title="t('VueStackTab.closeOthers')"
+      @click="removeOtherTabs(tabItem.id)"
+    />
+    <context-menu-item
+      icon="stack-tab__icon-close-all svg-mask"
+      :title="t('VueStackTab.closeAll')"
+      @click="removeAllTabs"
+    />
+    <div
+      v-if="contextMenu !== undefined && contextMenu.length > 0"
+      class="divider div-transparent"
+    ></div>
+    <context-menu-item
+      v-for="(item, index) in contextMenu"
+      :key="index"
+      :icon="item.icon"
+      :title="item.title"
+      :disabled="item.disabled(tabItem) ? 'disabled' : null"
+      @click="!item.disabled && item.callback(tabItem.id)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts" name="StackTabContextMenu">
+import { ref, onMounted, reactive } from 'vue'
+import type { ITabItem, IContextMenu } from '@/lib/model/TabModel'
+import localeI18n from '@/lib/i18n'
+import { getMaxZIndex } from '@/lib/utils/TabScrollHelper'
+import useTabpanel from '@/lib/hooks/useTabpanel'
+import ContextMenuItem from '@/lib/components/ContextMenu/ContextMenuItem.vue'
+// const emit = defineEmits(['close', 'closeAll', 'closeLeft', 'closeRight', 'refresh', 'refreshAll'])
+const props = withDefaults(
+  defineProps<{
+    index: number
+    left: number
+    top: number
+    contextMenu?: Array<IContextMenu>
+    tabItem: ITabItem
+    max: number
+  }>(),
+  {
+    left: 0,
+    top: 0,
+    contextMen: []
+  }
+)
+const { t } = localeI18n().getI18n()
+const contextmenu = ref<HTMLElement>()
+const modifyData = reactive({
+  left: props.left,
+  top: props.top
+})
+const {
+  removeTab,
+  removeAllTabs,
+  removeLeftTabs,
+  removeRightTabs,
+  refreshTab,
+  refreshAllTabs,
+  removeOtherTabs
+} = useTabpanel()
+onMounted(() => {
+  const clientWidth = contextmenu.value ? contextmenu.value.clientWidth : 0
+  const winWidth = window.innerWidth
+  if (modifyData.left + clientWidth > winWidth) {
+    modifyData.left = winWidth - clientWidth - 5
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.divider {
+  position: relative;
+  height: 1px;
+  margin: 5px 0;
+}
+
+.div-transparent::before {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  width: 100%;
+  height: 1px;
+  background-image: linear-gradient(to right, transparent, darkgrey, transparent);
+  content: '';
+}
+</style>

package/src/lib/components/TabHeader/TabHeaderButton.vue

@@ -0,0 +1,35 @@
+<template>
+  <div
+    class="stack-tab__header-button"
+    :class="{
+      'stack-tab__shadow-right': shadow === 'right',
+      'stack-tab__shadow-left': shadow === 'left'
+    }"
+    :disabled="disabled ? 'disabled' : null"
+    :title="title"
+  >
+    <div v-if="!('icon' in $slots)" class="stack-tab__mask-button" :class="iconClass" />
+    <div v-if="'icon' in $slots" class="stack-tab__button">
+      <slot name="icon" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+withDefaults(
+  defineProps<{
+    // 是否禁用
+    disabled?: boolean
+    shadow?: string | null
+    iconClass?: string
+    title?: string
+  }>(),
+  {
+    disabled: false,
+    shadow: null,
+    iconClass: ''
+  }
+)
+</script>
+
+<style scoped></style>