vue-stack-tabs 1.4.2 → 2.2.0

package/src/lib/assets/style/common/mixins.scss

@@ -1,14 +1,55 @@
 @use 'var' as *;
-/*
-icon按钮特效
- */
-@mixin icon_rotate($icon-size, $icon-margin, $icon-url) {
+
+// 绝对定位并铺满父容器
+@mixin absolute-fill {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+}
+
+// 水平垂直居中
+@mixin flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+// 以 SVG mask 渲染图标，颜色由 background-color 控制
+@mixin mask-icon($url) {
+  mask: url($url) no-repeat center center;
+  mask-size: contain;
+}
+
+// 重置原生 button 的默认样式（padding、color 由使用处按需设置）
+@mixin button-reset {
+  border: 0;
+  font: inherit;
+  text-align: inherit;
+  appearance: none;
+}
+
+// 图标按钮的默认色及 hover/active 反馈
+@mixin icon-button-color {
+  background-color: $stack-tab-text-color;
+  transition: $stack-tab-transition-fast;
+
+  &:hover {
+    background-color: $stack-tab-color-primary;
+  }
+
+  &:active {
+    background-color: $stack-tab-color-primary-activate;
+  }
+}
+
+// icon 按钮特效：hover/active 时叠加 mask.svg
+@mixin icon-rotate($icon-size, $icon-margin, $icon-url) {
   width: $icon-size;
   height: $icon-size;
   margin-left: $icon-margin;
   background-color: $stack-tab-text-color;
-  mask: url($icon-url) no-repeat center center;
-  mask-size: contain;
+  @include mask-icon($icon-url);
 
   &:hover {
     cursor: pointer;
@@ -16,30 +57,28 @@ icon按钮特效
     animation: rotate-center 0.3s ease-in-out both;
     mask:
       url($icon-url),
-      url('./image/mask.svg') no-repeat center center;
+      url('../image/mask.svg') no-repeat center center;
     mask-size: contain;
     mask-composite: xor;
   }
 
   &:active {
-    /*
-    cursor: pointer;
-     */
     background-color: $stack-tab-color-primary-activate;
     mask:
       url($icon-url),
-      url('./image/mask.svg') no-repeat center center;
+      url('../image/mask.svg') no-repeat center center;
     mask-size: contain;
     mask-composite: xor;
   }
 }
 
-@mixin insetShadow() {
-  content: '';
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  pointer-events: none;
+// 追加一层铺满父容器的内阴影
+@mixin inset-shadow($shadow...) {
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    box-shadow: $shadow;
+  }
 }

package/src/lib/assets/style/common/var.scss

@@ -1,68 +1,108 @@
 @use 'sass:color';
-/*
-主色调
- */
+
+// ============================================================
+// 颜色
+// ============================================================
+
+// 基础色
+$stack-tab-color-white: #fff !default;
+$stack-tab-color-black: #000 !default;
+
+// 主色
 $stack-tab-color-primary: #409eff !default;
 $stack-tab-color-primary-invert: #ffac30 !default;
-/*
-大红色
- */
+$stack-tab-color-primary-activate: color.mix(
+  $stack-tab-color-primary,
+  $stack-tab-color-black,
+  80%
+) !default;
+
+// 功能色
 $stack-tab-color-danger: #ef4f4f !default;
-/*
-白色
- */
-$stack-tab-color-white: #fff !default;
-/*
-黑色
- */
-$stack-tab-color-black: #000 !default;
+
+// 中性色
 $stack-tab-color-grey: #4d4d4d !default;
 $stack-tab-color-disabled: #aaa !default;
-/*
-ICON点击颜色
- */
-$stack-tab-color-primary-activate: color.mix($stack-tab-color-primary, #000, 80%) !default;
-/*
-背景颜色
- */
+$stack-tab-color-text-secondary: #666 !default;
+$stack-tab-color-text-tertiary: #999 !default;
+$stack-tab-color-scrollbar: rgb(0 0 0 / 10%) !default;
+
+// ============================================================
+// 背景
+// ============================================================
+
 $stack-tab-background-color-base: #fff !default;
 $stack-tab-background-color-inactive: #fafafa !default;
-/*
-tab边框颜色
- */
-$stack-tab-border-color: #f0f0f0;
-$stack-tab-border: 1px solid $stack-tab-border-color;
-/*
-tab文本颜色
- */
-$stack-tab-text-color: $stack-tab-color-grey;
-/*
-tab文本大小
- */
-$stack-tab-font-size: 14px;
-
-$stack-tab-padding: 24px;
-$stack-tab-icon-margin: 4px;
-$stack-tab-icon-size: 14px;
-
-$stack-tab-button-size: 20px;
-/*
-tab头高度
- */
-$stack-tab-head-height: 40px;
-$stack-tab-head-invalid-height: $stack-tab-head-height -3px;
-
-$stack-tab-scroll-height: 6px;
-$stack-tab-scroll-border-radius: $stack-tab-scroll-height;
-$stack-tab__trans: all 0.15s ease-in-out;
-
-/*
-阴影
- */
-$stack-tab-shadow-left: -5px 0 5px -5px rgb(0 0 0 / 60%); //#ccc;
-$stack-tab-shadow-right: 5px 0 5px -5px rgb(0 0 0 / 60%); //#ccc;
-$stack-tab-shadow-right-inset: inset -5px 0 5px -5px rgb(0 0 0 / 60%); //#ccc;
-$stack-tab-shadow-left-inset: inset 5px 0 5px -5px rgb(0 0 0 / 60%); //#ccc;
-$stack-tab-shadow-top-inset: inset 0 5px 5px -5px rgb(0 0 0 / 60%); //#ccc;
-$stack-tab-shadow-bottom-inset: inset 0 -5px 5px -5px rgb(0 0 0 / 60%); //#ccc;
-$stack-tab-shadow-context-menu: 5px 5px 5px rgb(0 0 0 / 10%);
+$stack-tab-iframe-loading-bg: #f5f5f5 !default;
+$stack-tab-iframe-error-bg: rgb(255 255 255 / 92%) !default;
+
+// ============================================================
+// 边框与圆角
+// ============================================================
+
+$stack-tab-border-color: #f0f0f0 !default;
+$stack-tab-border: 1px solid $stack-tab-border-color !default;
+$stack-tab-tab-radius: 8px 8px 0 0 !default;
+$stack-tab-contextmenu-radius: 10px 0 !default;
+
+// ============================================================
+// 文本
+// ============================================================
+
+$stack-tab-text-color: $stack-tab-color-grey !default;
+$stack-tab-font-size: 14px !default;
+$stack-tab-iframe-loading-color: $stack-tab-color-text-tertiary !default;
+$stack-tab-iframe-error-color: $stack-tab-color-text-secondary !default;
+
+// ============================================================
+// 尺寸
+// ============================================================
+
+$stack-tab-padding: 24px !default;
+$stack-tab-icon-margin: 4px !default;
+$stack-tab-icon-size: 14px !default;
+$stack-tab-button-size: 20px !default;
+
+// 标签头高度
+$stack-tab-head-height: 40px !default;
+$stack-tab-head-invalid-height: $stack-tab-head-height - 3px !default;
+
+// 滚动条
+$stack-tab-scroll-height: 6px !default;
+$stack-tab-scroll-border-radius: $stack-tab-scroll-height !default;
+
+// ============================================================
+// 动效
+// ============================================================
+
+// 图标、滚动条等高频交互的快速过渡
+$stack-tab-transition-fast: all 0.15s ease-in-out !default;
+$stack-tab-transition-duration: 0.3s !default;
+$stack-tab-transition-slide-distance: 30px !default;
+$stack-tab-transition-slide:
+  opacity $stack-tab-transition-duration ease-in-out,
+  transform $stack-tab-transition-duration ease-in-out !default;
+
+// ============================================================
+// 阴影
+// ============================================================
+
+$stack-tab-shadow-color: rgb(0 0 0 / 60%) !default;
+$stack-tab-shadow-left: -5px 0 5px -5px $stack-tab-shadow-color !default;
+$stack-tab-shadow-right: 5px 0 5px -5px $stack-tab-shadow-color !default;
+$stack-tab-shadow-right-inset: inset -5px 0 5px -5px $stack-tab-shadow-color !default;
+$stack-tab-shadow-left-inset: inset 5px 0 5px -5px $stack-tab-shadow-color !default;
+$stack-tab-shadow-top-inset: inset 0 5px 5px -5px $stack-tab-shadow-color !default;
+$stack-tab-shadow-bottom-inset: inset 0 -5px 5px -5px $stack-tab-shadow-color !default;
+$stack-tab-shadow-context-menu: 5px 5px 5px rgb(0 0 0 / 10%) !default;
+
+// ============================================================
+// 加载态
+// ============================================================
+
+$stack-tab-loading-mask-color: $stack-tab-color-white !default;
+$stack-tab-loading-mask-opacity: 0.8 !default;
+$stack-tab-loading-size: 50px !default;
+$stack-tab-loading-border-width: 8px !default;
+$stack-tab-loading-color: #007bff97 !default;
+$stack-tab-loading-duration: 1s !default;

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

@@ -1,99 +1,32 @@
-@use 'common/var' as *;
-
-// 全屏
-.stack-tab__icon-fullscreen {
-  /* 类似一个到路径上做一个遮罩， 用法和background属性一样 */
-  mask: url('../image/fullscreen.svg') no-repeat center center;
-  mask-size: contain;
-}
-// 恢复
-.stack-tab__icon-restore {
-  /* 类似一个到路径上做一个遮罩， 用法和background属性一样 */
-  mask: url('../image/restore.svg') no-repeat center center;
-  mask-size: contain;
-}
-// 关闭
-.stack-tab__icon-close {
-  /* 类似一个到路径上做一个遮罩， 用法和background属性一样 */
-  mask: url('../image/close.svg') no-repeat center center;
-  mask-size: contain;
-}
-
-.stack-tab__icon-close-fill {
-  /* 类似一个到路径上做一个遮罩， 用法和background属性一样 */
-  mask: url('../image/close_fill.svg') no-repeat center center;
-  mask-size: contain;
-}
-
-.stack-tab__icon-close-lefts {
-  /* 类似一个到路径上做一个遮罩， 用法和background属性一样 */
-  mask: url('../image/close_lefts.svg') no-repeat center center;
-  mask-size: contain;
-}
-
-.stack-tab__icon-close-rights {
-  /* 类似一个到路径上做一个遮罩， 用法和background属性一样 */
-  mask: url('../image/close_rights.svg') no-repeat center center;
-  mask-size: contain;
-}
-
-.stack-tab__icon-close-others {
-  /* 类似一个到路径上做一个遮罩， 用法和background属性一样 */
-  mask: url('../image/close_other.svg') no-repeat center center;
-  mask-size: contain;
-}
-
-.stack-tab__icon-close-all {
-  /* 类似一个到路径上做一个遮罩， 用法和background属性一样 */
-  mask: url('../image/close_all.svg') no-repeat center center;
-  mask-size: contain;
-}
-
-/*
-刷新
- */
-.stack-tab__icon-reload {
-  /* 类似一个到路径上做一个遮罩， 用法和background属性一样 */
-  mask: url('../image/loading.svg') no-repeat center center;
-  mask-size: contain;
-}
-
-.stack-tab__icon-reload-lefts {
-  /* 类似一个到路径上做一个遮罩， 用法和background属性一样 */
-  mask: url('../image/reload_lefts.svg') no-repeat center center;
-  mask-size: contain;
-}
-
-.stack-tab__icon-reload-rights {
-  /* 类似一个到路径上做一个遮罩， 用法和background属性一样 */
-  mask: url('../image/reload_rights.svg') no-repeat center center;
-  mask-size: contain;
-}
-
-.stack-tab__icon-reload-all {
-  /* 类似一个到路径上做一个遮罩， 用法和background属性一样 */
-  mask: url('../image/reload.svg') no-repeat center center;
-  mask-size: contain;
-}
-/*
-左箭头
- */
-.stack-tab__icon-left-arrow {
-  /* 类似一个到路径上做一个遮罩， 用法和background属性一样 */
-  mask: url('../image/left_arrow.svg') no-repeat center center;
-  mask-size: contain;
-}
-/*
-右箭头
- */
-.stack-tab__icon-right-arrow {
-  /* 类似一个到路径上做一个遮罩， 用法和background属性一样 */
-  mask: url('../image/right_arrow.svg') no-repeat center center;
-  mask-size: contain;
-}
-
-/* 新窗口打开 */
-.stack-tab__icon-open {
-  mask: url('../image/open.svg') no-repeat center center;
-  mask-size: contain;
+// 图标名 => SVG 文件
+$stack-tab-icons: (
+  fullscreen: 'fullscreen.svg',
+  restore: 'restore.svg',
+  close: 'close.svg',
+  close-fill: 'close_fill.svg',
+  close-lefts: 'close_lefts.svg',
+  close-rights: 'close_rights.svg',
+  close-others: 'close_other.svg',
+  close-all: 'close_all.svg',
+  reload: 'reload.svg',
+  reload-lefts: 'reload_lefts.svg',
+  reload-rights: 'reload_rights.svg',
+  reload-all: 'reload_all.svg',
+  left-arrow: 'left_arrow.svg',
+  right-arrow: 'right_arrow.svg',
+  open: 'open.svg'
+);
+
+// 图标基础样式：颜色由使用处的 background-color 控制
+.stack-tab__icon {
+  mask-repeat: no-repeat;
+  mask-position: center center;
+  mask-size: contain;
+}
+
+// 每个图标只声明自己的 mask-image
+@each $name, $file in $stack-tab-icons {
+  .stack-tab__icon--#{$name} {
+    mask-image: url('../image/#{$file}');
+  }
 }

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

@@ -1,4 +1,4 @@
-@use 'stackTab.scss';
+@use 'stack-tab.scss';
 @use 'icon.scss';
 @use 'transition.scss';
-@use 'overlayer.scss';
+@use 'loading.scss';

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

@@ -0,0 +1,45 @@
+@use 'common/var' as *;
+@use 'common/mixins' as *;
+
+.stack-tab-loading {
+  // 页面加载遮罩
+  &__mask {
+    @include absolute-fill;
+    @include flex-center;
+    background-color: $stack-tab-loading-mask-color;
+    opacity: $stack-tab-loading-mask-opacity;
+  }
+
+  // 三层圆环同轴旋转
+  &__spin {
+    position: relative;
+    width: $stack-tab-loading-size;
+    aspect-ratio: 1;
+    border: $stack-tab-loading-border-width solid transparent;
+    border-right-color: $stack-tab-loading-color;
+    border-radius: 50%;
+    animation: stack-tab-loading-rotate $stack-tab-loading-duration infinite linear;
+
+    &::before,
+    &::after {
+      content: '';
+      position: absolute;
+      inset: -$stack-tab-loading-border-width;
+      border: $stack-tab-loading-border-width solid transparent;
+      border-right-color: $stack-tab-loading-color;
+      border-radius: 50%;
+      animation: stack-tab-loading-rotate $stack-tab-loading-duration * 2 infinite linear;
+    }
+
+    // 最外层转得最慢，形成错层效果
+    &::after {
+      animation-duration: $stack-tab-loading-duration * 4;
+    }
+  }
+}
+
+@keyframes stack-tab-loading-rotate {
+  to {
+    transform: rotate(1turn);
+  }
+}