vue-stack-tabs 0.1.0

package/src/lib/StackTabs.vue

@@ -0,0 +1,136 @@
+<template>
+  <div
+    class="stack-tab"
+    :style="{
+      width: width,
+      height: height,
+      'z-index': maximum ? getMaxZIndex('body *:not(.stack-tab,.stack-tab *)') : undefined
+    }"
+    :class="{ 'stack-tab__maximum': maximum }"
+  >
+    <tab-header :space="space" @active="onTabActive" :tab-transition="tabTransition" :max="max">
+      <template #leftButton>
+        <slot name="leftButton" />
+      </template>
+      <template #rightButton>
+        <slot name="rightButton" />
+      </template>
+    </tab-header>
+    <div class="stack-tab__container">
+      <router-view v-slot="{ Component, route }">
+        <transition :name="pageTransition" appear @after-leave="pageShown = true">
+          <keep-alive :include="caches">
+            <component :is="tabWrapper(route, Component)" v-if="pageShown" :key="route.fullPath" />
+          </keep-alive>
+        </transition>
+      </router-view>
+      <transition-group :name="pageTransition" appear>
+        <iframe
+          v-for="frame of tabs.filter((item) => item.iframe)"
+          v-show="frame.active && pageShown"
+          :key="frame.id"
+          class="stack-tab__iframe"
+          :src="/^(javascript|data):/i.test(frame.url ?? '') ? 'about:blank' : frame.url"
+          frameborder="0"
+        />
+      </transition-group>
+    </div>
+  </div>
+</template>
+
+<script lang="tsx" setup>
+import 'vue-loading-overlay/dist/css/index.css'
+import {
+  type DefineComponent,
+  onBeforeMount,
+  onUnmounted,
+  provide,
+  ref,
+  type VNode,
+  watch
+} from 'vue'
+import type { TransitionProps } from 'vue'
+import { type RouteLocationNormalizedLoaded, useRouter } from 'vue-router'
+import { getMaxZIndex } from '@/lib/utils/TabScrollHelper'
+import { type ITabData, TabScrollMode } from '@/lib/model/TabModel'
+import TabHeader from '@/lib/components/TabHeader/index.vue'
+import useTabpanel from '@/lib/hooks/useTabpanel'
+import useStackTab from '@/lib/hooks/useStackTab'
+const { tabs, pageShown, caches, addPage, destroy, initial } = useTabpanel()
+const emit = defineEmits(['onActive'])
+const props = withDefaults(
+  defineProps<{
+    // 初始页签数据
+    defaultTabs?: ITabData[]
+    // 最大打开数量
+    max?: number
+    // 新页加入哪个位置
+    append?: string
+    // 右键菜单
+    contextmenu?: boolean | object
+    // 页面转场效果
+    pageTransition?: string
+    // 标签转场效果
+    tabTransition?: string | TransitionProps
+    // tab 滚动效果
+    tabScrollMode?: TabScrollMode
+    width?: string
+    height?: string
+    i18n?: { locale?: string; messages?: object }
+    messages?: any
+    reloadable?: boolean
+    closable?: boolean
+    space?: number
+    iframePath: string
+  }>(),
+  {
+    defaultTabs: () => [],
+    max: 20,
+    append: 'last',
+    contextmenu: true,
+    tabTransition: 'stack-tab-zoom',
+    pageTransition: 'stack-tab-swap',
+    tabScrollMode: TabScrollMode.BOTH,
+    width: '100%',
+    height: '100%',
+    i18n: () => ({ locale: 'zh-CN', messages: {} }),
+    reloadable: true,
+    closable: true,
+    space: 300
+  }
+)
+provide('locales', { ...props.i18n })
+// 最大化,并向下传递
+const maximum = ref<boolean>(false)
+provide('maximum', maximum)
+const { setIFramePath } = useStackTab()
+setIFramePath(props.iframePath)
+onBeforeMount(() => {
+  console.log('on Before mount')
+  initial(props.defaultTabs)
+})
+const tabWrapper = (route: RouteLocationNormalizedLoaded, component: VNode): DefineComponent => {
+  // return defineAsyncComponent(() => addPage(route, component))
+  return addPage(route, component)
+}
+const onTabActive = (id: string) => {
+  emit('onActive', id)
+}
+onUnmounted(() => {
+  destroy()
+})
+/**
+ * 路由真正转换的时候才切换页面
+ * 有keepalive或组装过Component的都会多次加载
+ */
+const router = useRouter()
+watch(
+  () => router.currentRoute.value.fullPath,
+  () => {
+    pageShown.value = true
+    // routerLeaved.value = true
+    console.log('route change')
+  }
+)
+</script>
+<style scoped></style>

package/src/lib/assets/image/close.svg

@@ -0,0 +1,6 @@
+<svg class="icon" width="200" height="200" p-id="1922" t="1660030183477" version="1.1" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+ <defs>
+  <style type="text/css"/>
+ </defs>
+ <path d="m235.52 204.8c-7.6799 0-15.362 3.0703-21.506 9.2143-12.288 12.288-12.288 30.724 0 43.013l254.97 254.97-254.97 254.97c-12.288 12.288-12.288 30.724 0 43.013 6.1439 6.1441 13.826 9.2143 21.506 9.2143 7.68 0 15.362-3.0703 21.506-9.2143l254.97-254.97 254.97 254.97c6.1439 6.1441 13.826 9.2143 21.506 9.2143 7.6799 0 15.362-3.0703 21.506-9.2143 12.288-12.288 12.288-30.724 0-43.013l-254.97-254.97 254.97-254.97c12.288-12.288 12.288-30.724 0-43.013-6.1439-6.1441-13.826-9.2143-21.506-9.2143-7.68 0-15.362 3.0703-21.506 9.2143l-254.97 254.97-254.97-254.97c-6.1439-6.1441-13.826-9.2143-21.506-9.2143z" stroke-width=".96001"/>
+</svg>

package/src/lib/assets/image/close_all.svg

@@ -0,0 +1,9 @@
+<svg t="1660395177016" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2947"
+    width="200" height="200">
+    <path
+        d="M354 671h58.9c4.7 0 9.2-2.1 12.3-5.7L512 561.8l86.8 103.5c3 3.6 7.5 5.7 12.3 5.7H670c6.8 0 10.5-7.9 6.1-13.1L553.8 512l122.4-145.9c4.4-5.2 0.7-13.1-6.1-13.1h-58.9c-4.7 0-9.2 2.1-12.3 5.7L512 462.2l-86.8-103.5c-3-3.6-7.5-5.7-12.3-5.7H354c-6.8 0-10.5 7.9-6.1 13.1L470.2 512 347.9 657.9c-4.4 5.2-0.7 13.1 6.1 13.1z"
+        p-id="2948"></path>
+    <path
+        d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32z m-40 728H184V184h656v656z"
+        p-id="2949"></path>
+</svg>

package/src/lib/assets/image/close_fill.svg

@@ -0,0 +1 @@
+<svg t="1676454450456" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4689" width="200" height="200"><path d="M512 451.669333L421.504 361.130667A42.666667 42.666667 0 0 0 361.130667 421.546667L451.669333 512l-90.538666 90.496a42.666667 42.666667 0 0 0 60.373333 60.373333L512 572.330667l90.496 90.538666a42.666667 42.666667 0 0 0 60.373333-60.373333L572.330667 512l90.538666-90.496a42.666667 42.666667 0 1 0-60.373333-60.373333L512 451.669333z m-271.530667 331.861334A384 384 0 1 1 783.530667 240.469333 384 384 0 0 1 240.469333 783.530667z" fill="#000000" p-id="4690"></path></svg>

package/src/lib/assets/image/close_lefts.svg

@@ -0,0 +1 @@
+<svg t="1676511927584" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18731" width="200" height="200"><path d="M156 219H92a4 4 0 0 0-4 4v634a4 4 0 0 0 4 4h64a4 4 0 0 0 4-4V223a4 4 0 0 0-4-4z m756.7 128.4h-368V172.8a16 16 0 0 0-16.2-16 15.4 15.4 0 0 0-12.2 5.9L238.9 501.9a16 16 0 0 0 0 20.2l277.4 339.2a15.4 15.4 0 0 0 12.2 5.9 16 16 0 0 0 16.2-16V676.6h368a16 16 0 0 0 16-16V363.4a16 16 0 0 0-16-16z m-56 257.2h-384v89.6L323.7 512l149-182.2v89.6h384z" p-id="18732"></path></svg>

package/src/lib/assets/image/close_other.svg

@@ -0,0 +1 @@
+<svg t="1695280793106" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9167" width="200" height="200"><path d="M388.266667 512L290.133333 413.866667l29.866667-29.866667 149.333333 149.333333L320 682.666667l-29.866667-29.866667L388.266667 554.666667H128v-42.666667h260.266667z m290.133333 0H938.666667v42.666667h-260.266667l98.133333 98.133333-29.866666 29.866667-149.333334-149.333334L746.666667 384l29.866666 29.866667-98.133333 98.133333z" fill="#444444" p-id="9168"></path></svg>

package/src/lib/assets/image/close_rights.svg

@@ -0,0 +1 @@
+<svg t="1676511848479" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18577" width="200" height="200"><path d="M924 191h-64a4 4 0 0 0-4 4v634a4 4 0 0 0 4 4h64a4 4 0 0 0 4-4V195a4 4 0 0 0-4-4z m-416.3-28.3a15.4 15.4 0 0 0-12.2-5.9 16 16 0 0 0-16.2 16v174.6h-368a16 16 0 0 0-16 16v297.2a16 16 0 0 0 16 16h368v174.6a16 16 0 0 0 16.2 16 15.4 15.4 0 0 0 12.2-5.9l277.4-339.2a16 16 0 0 0 0-20.2z m43.6 531.5v-89.6h-384V419.4h384v-89.6l149 182.2z" p-id="18578"></path></svg>

package/src/lib/assets/image/disable.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1659942090066"
+    class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13371"
+    xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16">
+    <defs>
+        <style type="text/css"></style>
+    </defs>
+    <path
+        d="M512 0C229.888 0 0 229.888 0 512s229.888 512 512 512 512-229.888 512-512S794.112 0 512 0z m370.688 512c0 76.8-23.552 147.968-63.488 207.36L304.64 204.8C364.032 164.864 435.2 141.312 512 141.312c204.288 0 370.688 166.4 370.688 370.688z m-741.376 0c0-76.8 23.552-147.968 63.488-207.36L719.36 819.2c-59.392 39.936-130.56 63.488-207.36 63.488-204.288 0-370.688-166.4-370.688-370.688z"
+        p-id="13372" data-spm-anchor-id="a313x.7781069.0.i0" class="selected" fill="#ff0000"></path>
+</svg>

package/src/lib/assets/image/fullscreen.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1659850629232" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8369" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M358.4 768H426.666667v85.333333H213.333333v-213.333333h85.333334v68.266667l128-128 59.733333 59.733333-128 128z m345.6 0l-128-128 59.733333-59.733333 132.266667 132.266666V640h85.333333v213.333333h-213.333333v-85.333333h64zM358.4 298.666667l128 128-59.733333 59.733333-128-128V426.666667H213.333333V213.333333h213.333334v85.333334H358.4z m345.6 0H640V213.333333h213.333333v213.333334h-85.333333V354.133333l-132.266667 132.266667-59.733333-59.733333 128-128z" fill="#444444" p-id="8370"></path></svg>

package/src/lib/assets/image/left_arrow.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1659850602902" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8065" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M635.733333 490.666667l174.933334 174.933333-64 59.733333-234.666667-234.666666L746.666667 256 810.666667 315.733333l-174.933334 174.933334z m-260.266666 0l174.933333 174.933333-59.733333 59.733333L256 490.666667 490.666667 256l59.733333 59.733333-174.933333 174.933334z" fill="#444444" p-id="8066"></path></svg>

package/src/lib/assets/image/loading.svg

@@ -0,0 +1,15 @@
+<svg class="icon" width="200" height="200" p-id="6183" t="1660269579969" version="1.1" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+ <defs>
+  <style type="text/css"/>
+ </defs>
+ <path d="m512 15.756c-273.37 0-494.99 222.17-494.99 496.24s221.61 496.24 494.99 496.24 494.99-222.17 494.99-496.24c0-274.07-221.58-496.24-494.99-496.24zm0 942.84c-246.06 0-445.51-199.94-445.51-446.63 0-246.68 199.45-446.63 445.51-446.63s445.51 199.94 445.51 446.63-199.45 446.63-445.51 446.63z" p-id="6184"/>
+ <path d="m512.05 308.72c-51.167 0-102.23 19.852-141.25 59.557-38.945 39.672-58.5 91.731-58.5 143.72s19.522 104.05 58.5 143.72c39.011 39.705 90.079 59.557 141.25 59.557 51.101 0 102.17-19.852 141.18-59.557 38.945-39.672 58.467-91.731 58.467-143.72s-19.522-104.05-58.467-143.72c-39.011-39.705-90.079-59.557-141.18-59.557zm14.336 47.599c3.3363-12.618 16.153-20.183 28.606-16.78 12.486 3.4023 19.819 16.417 16.483 29.068-3.3363 12.684-16.087 20.249-28.54 16.846-12.486-3.4023-19.885-16.417-16.549-29.134zm-155.85 217.05c-12.387 3.4354-25.204-4.063-28.54-16.747-3.3362-12.684 3.9969-25.732 16.483-29.134 12.486-3.3693 25.27 4.129 28.606 16.846 3.3362 12.651-4.063 25.633-16.549 29.035zm16.417-154.33c-9.1169-9.2821-9.1169-24.312 0-33.594 9.1499-9.2821 23.882-9.2821 32.999 0 9.0839 9.2821 9.0839 24.312 0 33.594-9.1169 9.3151-23.882 9.3151-32.999 0zm106.69 245.99c-3.3363 12.618-16.153 20.183-28.54 16.78-12.486-3.4023-19.885-16.417-16.549-29.068 3.3363-12.684 16.153-20.249 28.606-16.846 12.42 3.4023 19.819 16.417 16.483 29.134zm-52.224-84.463c-37.888-38.648-37.888-101.14 0-139.73 37.888-38.549 99.361-38.549 137.25 0 37.888 38.582 37.888 101.11 0 139.73-37.888 38.549-99.361 38.549-137.25 0zm191.75 55.329c-9.1499 9.249-23.948 9.249-32.999 0-9.1169-9.2821-9.1169-24.345 0-33.594 9.0839-9.3151 23.882-9.3151 32.999 0 9.0508 9.249 9.0508 24.279 0 33.594zm44.924-171.17c3.3363 12.717-4.063 25.732-16.549 29.134-12.387 3.3693-25.204-4.129-28.54-16.846-3.3363-12.651 4.063-25.699 16.483-29.101 12.486-3.3363 25.27 4.129 28.606 16.813z" p-id="6185"/>
+ <g transform="translate(.47897 28.177)">
+  <path d="m210.09 197.4 21.669 142.01 36.6-5.6816-21.669-142.04z" p-id="6186"/>
+  <path d="m398.01 863.79 23.222 29.432 109.24-89.484-23.222-29.432z" p-id="6187"/>
+  <path d="m777.55 308.98-13.411 35.179 129.98 51.266 13.411-35.179z" p-id="6188"/>
+  <path d="m115.51 606.64 131.3 51.795 13.411-35.179-131.3-51.795z" p-id="6189"/>
+  <path d="m627.61 103.85-23.189-29.432-105.77 86.644 23.189 29.399z" p-id="6190"/>
+  <path d="m756.93 636.2 21.273 139.92 36.699-5.7806-21.306-139.96z" p-id="6191"/>
+ </g>
+</svg>

package/src/lib/assets/image/mask.svg

@@ -0,0 +1,7 @@
+<svg class="icon" width="200" height="200" p-id="4720" t="1660025439341" version="1.1" viewBox="0 0 1024 1024"
+    xmlns="http://www.w3.org/2000/svg">
+    <defs>
+        <style type="text/css" />
+    </defs>
+    <path d="m512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0z" stroke-width="1.1428" p-id="4721" />
+</svg>

package/src/lib/assets/image/move.svg

@@ -0,0 +1,6 @@
+<svg t="1660535133905" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8670"
+    width="16" height="16">
+    <path
+        d="M848.880761 362.681449a25.479055 25.479055 0 0 0 0 36.154457L936.235218 486.198425H696.538588V352.651087a25.688693 25.688693 0 0 0-25.704819-25.704819H537.294493V87.459276L624.64895 174.805669a25.454866 25.454866 0 0 0 18.182047 7.522772c6.692283 0 13.166866-2.507591 18.182047-7.522772a25.479055 25.479055 0 0 0 0-36.154456L529.981359 7.627591a25.608063 25.608063 0 0 0-18.182047-7.522772c-6.893858 0-13.376504 2.717228-18.182047 7.522772l-131.023622 131.023622a25.479055 25.479055 0 0 0 0 36.162519 25.479055 25.479055 0 0 0 36.146394 0l87.354456-87.354456v239.69663H352.555218a25.688693 25.688693 0 0 0-25.704819 25.704818v133.539276H87.363407l87.354456-87.354457a25.479055 25.479055 0 0 0 0-36.154456 25.479055 25.479055 0 0 0-36.154456 0L7.539785 493.922772a25.479055 25.479055 0 0 0 0 36.154456l131.023622 131.023622a25.454866 25.454866 0 0 0 18.182047 7.530835c6.692283 0 13.166866-2.507591 18.182047-7.522772a25.479055 25.479055 0 0 0 0-36.154456L87.573044 537.6h239.69663v133.539276a25.688693 25.688693 0 0 0 25.704819 25.704818h133.539276v239.69663l-87.564095-87.564094a25.479055 25.479055 0 0 0-36.154456 0 25.479055 25.479055 0 0 0 0 36.154457l131.031685 131.031685c4.805543 4.805543 11.288189 7.522772 18.182047 7.522771s13.376504-2.717228 18.182047-7.522771l131.023622-131.023622a25.479055 25.479055 0 0 0 0-36.16252 25.479055 25.479055 0 0 0-36.146393 0l-87.354457 87.354457V696.64252H671.253044a25.688693 25.688693 0 0 0 25.704819-25.704819V537.390362h239.69663L848.880761 624.744819a25.479055 25.479055 0 0 0 0 36.154457 25.454866 25.454866 0 0 0 18.182047 7.522771c6.692283 0 13.166866-2.507591 18.182047-7.522771l131.031685-131.031685c4.805543-4.805543 7.522772-11.288189 7.522772-18.182048s-2.717228-13.376504-7.522772-18.182047l-131.023622-131.023622c-10.24-9.828787-26.341795-9.828787-36.364094 0.201575zM645.338588 645.44252H378.260037V378.355906h267.078551V645.44252z"
+        fill="#20A0FF" p-id="8671"></path>
+</svg>

package/src/lib/assets/image/reload.svg

@@ -0,0 +1,3 @@
+<svg class="icon" width="200" height="200" p-id="2129" t="1660034441839" version="1.1" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+ <path d="m861.68 670.07c-42.264 93.421-118.37 164.79-214.29 200.94a383.74 383.74 0 0 1-135.56 24.888c-53.832 0-107.52-11.472-158.03-34.332a384.83 384.83 0 0 1-85.645-53.484c2.088 19.248 2.688 39.252-0.144 56.82a24.072 24.072 0 0 1-47.52-7.6801c5.868-36.372-8.784-95.785-14.928-115.62a23.88 23.88 0 0 1 0.144-14.172c0.312-1.128 0.744-2.232 1.236-3.312 0.168-0.34803 0.264-0.72003 0.444-1.056 1.548-3.072 3.708-5.88 6.6-8.148a24.024 24.024 0 0 1 24.888-2.808c23.496 5.028 64.98 10.98 108.61 3.264a24.069 24.069 0 1 1 8.4001 47.4 306.12 306.12 0 0 1-61.848 4.2601 336.12 336.12 0 0 0 79.597 50.688c81.673 36.948 172.87 39.888 256.78 8.2561 83.893-31.632 150.44-94.033 187.41-175.73 36.948-81.673 39.9-172.85 8.28-256.77a24.072 24.072 0 1 1 45.036-16.968c36.144 95.941 32.784 200.2-9.4561 293.56zm-99.589-269.61a16.044 16.044 0 0 1 20.664 9.36c27.252 72.348 24.72 150.95-7.1161 221.34-47.652 105.3-153.3 170.07-264.45 170.07-26.556 0-53.424-3.6961-79.884-11.412a16.043 16.043 0 1 1 8.9761-30.804c122.05 35.556 253.62-25.08 306.11-141.08 28.332-62.58 30.564-132.47 6.336-196.79a16.044 16.044 0 0 1 9.3601-20.676zm-500.14 222.9a16.068 16.068 0 0 1-20.676-9.3601c-27.3-72.312-24.78-150.94 7.08-221.37 58.896-130.15 201.54-197.47 339.17-160.11a16.044 16.044 0 0 1-8.4121 30.96c-122.3-33.204-249.17 26.652-301.53 142.38a255.59 255.59 0 0 0-6.3 196.81 16.056 16.056 0 0 1-9.336 20.676zm554.39-332.09c-0.108 0.552-0.204 1.092-0.348 1.644a23.112 23.112 0 0 1-1.74 4.704c-0.084 0.192-0.132 0.372-0.22807 0.54-0.876 1.68-2.016 3.228-3.3 4.68-0.12 0.132-0.192 0.288-0.312 0.432-0.372 0.396-0.816 0.684-1.212 1.068-0.468 0.432-0.876 0.924-1.38 1.332-0.192 0.168-0.432 0.276-0.636 0.42-0.612 0.456-1.248 0.84-1.884 1.224-0.792 0.48-1.572 0.96-2.4 1.344-0.576 0.264-1.1761 0.46802-1.7761 0.70802a33.924 33.924 0 0 1-2.784 0.876c-0.612 0.144-1.212 0.228-1.836 0.324-0.96 0.156-1.908 0.276-2.892 0.3-0.288 0.0125-0.54 0.084-0.828 0.084-0.324 0-0.648-0.096-0.984-0.108a22.14 22.14 0 0 1-3.4321-0.408c-0.336-0.048-0.684-0.024-1.044-0.108-22.296-5.184-66.696-12.648-113.51-4.356a24.072 24.072 0 0 1-8.388-47.4 305.64 305.64 0 0 1 61.8-4.284 334.87 334.87 0 0 0-76.896-48.24c-168.6-76.26-367.87-1.14-444.16 167.49-36.96 81.709-39.9 172.91-8.256 256.81a24.062 24.062 0 1 1-45.024 16.992c-36.18-95.929-32.832-200.22 9.42-293.64 87.241-192.81 315.06-278.71 507.88-191.5a382.86 382.86 0 0 1 83.004 51.144c-2.1-19.272-2.712-39.312 0.144-56.892a24.063 24.063 0 1 1 47.508 7.692c-5.916 36.492 8.7721 95.809 14.904 115.6l0.048 0.22801c0.552 1.848 0.852 3.708 0.948 5.604 0.036 0.48-0.0127 0.936-0.0127 1.416-0.0127 1.44-0.132 2.868-0.396 4.284z" stroke-width=".7501" p-id="2130"/>
+</svg>

package/src/lib/assets/image/reload_all.svg

@@ -0,0 +1,6 @@
+<svg t="1660395383199" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    p-id="10503" width="200" height="200">
+    <path
+        d="M768 707.669333V256H469.333333a42.666667 42.666667 0 1 1 0-85.333333h341.333334a42.666667 42.666667 0 0 1 42.666666 42.666666v494.336l55.168-55.168a42.666667 42.666667 0 0 1 60.330667 60.330667l-128 128a42.666667 42.666667 0 0 1-60.330667 0l-128-128a42.666667 42.666667 0 0 1 60.330667-60.330667L768 707.669333zM256 316.330667V768h298.666667a42.666667 42.666667 0 1 1 0 85.333333H213.333333a42.666667 42.666667 0 0 1-42.666666-42.666666V316.330667l-55.168 55.168a42.666667 42.666667 0 0 1-60.330667-60.330667l128-128a42.666667 42.666667 0 0 1 60.330667 0l128 128a42.666667 42.666667 0 0 1-60.330667 60.330667L256 316.330667z"
+        p-id="10504"></path>
+</svg>

package/src/lib/assets/image/reload_lefts.svg

@@ -0,0 +1,15 @@
+<svg t="1660395291415" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7049"
+    width="200" height="200">
+    <path
+        d="M266.666667 523.093333a241.152 241.152 0 0 1 41.386666-136.106666 32 32 0 0 1 53.333334 35.413333 181.504 181.504 0 1 0 151.04-80.64 214.826667 214.826667 0 0 0-61.866667 8.96 32.384 32.384 0 0 1-40.106667-21.333333 32.042667 32.042667 0 0 1 21.333334-40.106667 269.44 269.44 0 0 1 80.64-11.946667 245.546667 245.546667 0 1 1-245.76 245.76z"
+        fill="#292D32" p-id="7050"></path>
+    <path
+        d="M389.504 350.72a32.256 32.256 0 0 1-2.986667-45.226667l71.253334-81.493333a31.872 31.872 0 0 1 45.226666-2.986667 32.256 32.256 0 0 1 2.986667 45.226667l-71.253333 81.493333a34.389333 34.389333 0 0 1-24.32 10.666667 32.469333 32.469333 0 0 1-20.906667-7.68z"
+        fill="#292D32" p-id="7051"></path>
+    <path
+        d="M474.453333 413.013333L391.68 352.426667a32.085333 32.085333 0 0 1 38.101333-51.626667l82.773334 60.586667a31.957333 31.957333 0 0 1 6.826666 44.8 32.725333 32.725333 0 0 1-44.8 6.826666z"
+        fill="#292D32" p-id="7052"></path>
+    <path
+        d="M640 970.666667H384c-231.765333 0-330.666667-98.901333-330.666667-330.666667V384c0-231.765333 98.901333-330.666667 330.666667-330.666667h256c231.765333 0 330.666667 98.901333 330.666667 330.666667v256c0 231.765333-98.901333 330.666667-330.666667 330.666667z m-256-853.333334C187.136 117.333333 117.333333 187.136 117.333333 384v256c0 196.864 69.802667 266.666667 266.666667 266.666667h256c196.864 0 266.666667-69.802667 266.666667-266.666667V384c0-196.864-69.76-266.666667-266.666667-266.666667z"
+        fill="#292D32" p-id="7053"></path>
+</svg>

package/src/lib/assets/image/reload_rights.svg

@@ -0,0 +1,15 @@
+<svg t="1660395328256" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7284"
+    width="200" height="200">
+    <path
+        d="M640 970.666667H384c-231.765333 0-330.666667-98.901333-330.666667-330.666667V384c0-231.765333 98.901333-330.666667 330.666667-330.666667h256c231.765333 0 330.666667 98.901333 330.666667 330.666667v256c0 231.765333-98.901333 330.666667-330.666667 330.666667z m-256-853.333334C187.136 117.333333 117.333333 187.136 117.333333 384v256c0 196.864 69.802667 266.666667 266.666667 266.666667h256c196.864 0 266.666667-69.802667 266.666667-266.666667V384c0-196.864-69.76-266.666667-266.666667-266.666667z"
+        fill="#292D32" p-id="7285"></path>
+    <path
+        d="M266.666667 523.093333A245.632 245.632 0 0 1 512 277.76a271.445333 271.445333 0 0 1 80.64 11.946667 32.128 32.128 0 0 1-18.773333 61.44A212.736 212.736 0 0 0 512 342.186667a180.821333 180.821333 0 1 0 151.04 80.64 32 32 0 0 1 53.333333-35.413334 245.333333 245.333333 0 1 1-449.706666 135.68z"
+        fill="#292D32" p-id="7286"></path>
+    <path
+        d="M589.269333 347.306667l-71.253333-81.493334a32.042667 32.042667 0 0 1 48.213333-42.24l71.253334 81.493334a32.256 32.256 0 0 1-2.986667 45.226666 29.866667 29.866667 0 0 1-20.906667 8.106667 32.512 32.512 0 0 1-24.32-11.093333z"
+        fill="#292D32" p-id="7287"></path>
+    <path
+        d="M504.746667 405.717333a32.469333 32.469333 0 0 1 6.741333-44.8l82.858667-60.586666a32.469333 32.469333 0 0 1 44.8 6.741333 32.469333 32.469333 0 0 1-6.826667 44.8l-82.773333 60.586667a31.189333 31.189333 0 0 1-18.773334 6.4 32.725333 32.725333 0 0 1-26.026666-13.141334z"
+        fill="#292D32" p-id="7288"></path>
+</svg>

package/src/lib/assets/image/restore.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1659850610341" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8217" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M298.666667 631.466667H226.133333v-81.066667h217.6v204.8h-85.333333v-68.266667l-128 128L170.666667 759.466667l128-128z m422.4 0l128 128-59.733334 59.733333-128-128v68.266667h-85.333333V554.666667h217.6v81.066666h-72.533333zM298.666667 341.333333L187.733333 230.4 243.2 170.666667l115.2 115.2V217.6h85.333333v204.8H226.133333V341.333333H298.666667z m430.933333 0h64v81.066667h-217.6V217.6h85.333333v72.533333L780.8 170.666667l59.733333 59.733333L729.6 341.333333z" fill="#444444" p-id="8218"></path></svg>

package/src/lib/assets/image/right_arrow.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1659850594120" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7913" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M430.933333 490.666667L256 665.6 315.733333 725.333333l234.666667-234.666666L315.733333 256 256 315.733333l174.933333 174.933334z m256 0L512 665.6l59.733333 59.733333 234.666667-234.666666L576 256 512 315.733333l174.933333 174.933334z" fill="#444444" p-id="7914"></path></svg>

package/src/lib/assets/image/scroll_pointer.svg

@@ -0,0 +1,13 @@
+<svg t="1660059998342" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5040"
+    width="32" height="32">
+    <path d="M305 705a218 219 0 1 0 436 0 218 219 0 1 0-436 0Z" fill="#F4EDFF" p-id="5041"></path>
+    <path
+        d="M512.5 156c47.618 0.086 86.413 38.635 86.5 86-0.087 47.343-38.882 85.914-86.5 86-47.64-0.086-86.413-38.657-86.5-86 0.087-47.365 38.86-85.914 86.5-86z m-295.695 79.867c0.043 0.043 0.043 0.086 0.086 0.129l43.102 42.833c8.404 8.374 22.068 8.374 30.473 0 8.426-8.374 8.426-22.316 0-30.668l-6.315-6.661h98.832c0.043 64.25 57.95 128.457 129.305 128.5 71.355-0.043 129.262-64.25 129.305-128.5h98.832l-6.314 6.66c-8.426 8.353-8.426 22.124 0 30.477 8.405 8.373 22.068 8.46 30.473 0.085l43.102-42.769a21.442 21.442 0 0 0 4.633-6.853c1.013-2.399 1.487-4.99 1.552-7.667 0.021-0.215 0.129-0.386 0.129-0.579 0-0.214-0.108-0.385-0.13-0.6-0.064-2.676-0.538-5.268-1.551-7.688a21.68 21.68 0 0 0-4.633-6.853l-43.102-42.834c-8.426-8.373-25.215-8.373-33.64 0-8.406 8.353-3.147 21.91-3.147 30.284v-0.386l12.628 5.89H634.051C616.25 155.833 568.514 113.02 512.288 113c-56.226 0.021-103.961 42.833-121.762 85.667H284.151l6.315-5.89c8.426-8.352 5.258-21.738-3.147-30.09-8.426-8.374-12.09-8.267-33.64 0.085v0.065l-39.956 42.854c-0.022 0.022 1.53 0.086 1.509 0.129-1.94 1.949-2.716 4.262-3.772 6.832-2.198 5.247-1.789 11.158 0.388 16.384 1.078 2.57 3.017 4.883 4.957 6.831z"
+        fill="#7E41DF" p-id="5042"></path>
+    <path
+        d="M512.729 191c17.227 0 33.844 6.649 46.13 18.94 13.073 13.078 20.316 31.478 20.477 53.152l0.003 0.74-0.001 134.289 0.073-0.041c9.65-5.504 20.622-8.452 31.876-8.563l0.662-0.004c17.228 0 33.844 6.65 46.13 18.94 10.25 10.254 16.917 23.78 19.395 39.592l0.047 0.31 0.544-0.32c9.786-5.714 20.968-8.777 32.442-8.89l0.662-0.003c17.228 0 33.844 6.649 46.13 18.939 10.251 10.255 16.917 23.781 19.396 39.592l0.046 0.311 0.544-0.32c9.787-5.714 20.968-8.777 32.442-8.89l0.663-0.004c17.228 0 33.844 6.649 46.13 18.94 13.073 13.078 20.316 31.478 20.48 53.152v298.262c0 36.593-27.96 66.277-64.099 66.867l-1.097 0.009H514.142c-17.157 0-34.431-7.054-46.812-19.192l-0.456-0.452-198.62-198.618c-28.242-28.267-25.868-67.856 0.065-93.933 25.699-25.84 64.72-28.535 92.97-1.103l0.854 0.84 83.975 84.541V263.832c0-21.748 7.096-40.246 20.037-53.445l0.443-0.448C478.884 197.65 495.501 191 512.728 191z m0 34c-8.353 0-16.283 3.173-22.084 8.977-6.54 6.541-10.397 16.291-10.523 29.196l-0.004 0.659V739.32c0 15.02-18.002 22.593-28.738 12.298l-0.323-0.318-112.999-113.76c-7.57-7.573-15.666-10.72-23.923-10.202-7.712 0.485-15.552 4.251-21.708 10.442-6.165 6.199-9.911 14.094-10.377 21.864-0.49 8.176 2.56 16.18 9.849 23.65l0.402 0.406 198.616 198.615c5.914 5.916 14.527 9.543 22.743 9.684h298.144c17.345 0 30.922-14.054 31.196-32.322V561.602c0-13.232-3.876-23.203-10.526-29.856-5.801-5.803-13.732-8.976-22.084-8.976-8.353 0-16.283 3.173-22.084 8.976-6.54 6.542-10.396 16.292-10.523 29.197l-0.003 0.659c0 9.389-7.612 17-17 17-9.281 0-16.825-7.437-16.997-16.677l-0.003-0.323v-49.629c0-13.232-3.876-23.202-10.527-29.855-5.8-5.803-13.731-8.976-22.084-8.976-8.352 0-16.282 3.173-22.084 8.976-6.65 6.653-10.526 16.623-10.526 29.855 0 22.44-33.323 22.665-33.99 0.674l-0.01-0.674v-49.628c0-13.232-3.876-23.203-10.526-29.855-5.801-5.803-13.732-8.977-22.084-8.977-8.353 0-16.283 3.174-22.084 8.977-6.65 6.652-10.526 16.623-10.526 29.855 0 22.44-33.324 22.665-33.99 0.673l-0.01-0.673V263.832c0-13.232-3.876-23.203-10.526-29.855-5.802-5.804-13.732-8.977-22.084-8.977z"
+        fill="#1C0E50" p-id="5043"></path>
+    <path
+        d="M512.729 225c8.352 0 16.282 3.173 22.084 8.977 6.65 6.652 10.526 16.623 10.526 29.855L545.338 409h-65.22V263.832l0.004-0.659c0.126-12.905 3.983-22.655 10.523-29.196 5.8-5.804 13.731-8.977 22.084-8.977z"
+        fill="#FFFFFF" p-id="5044"></path>
+</svg>

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

@@ -0,0 +1,45 @@
+@import 'var';
+/*
+icon按钮特效
+ */
+@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;
+
+  &:hover {
+    cursor: pointer;
+    background-color: $--stack-tab-color-primary;
+    animation: rotate-center 0.3s ease-in-out both;
+    mask:
+      url($icon-url),
+      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;
+    mask-size: contain;
+    mask-composite: xor;
+  }
+}
+
+@mixin insetShadow() {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  pointer-events: none;
+}

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

@@ -0,0 +1,65 @@
+/*
+主色调
+ */
+$--stack-tab-color-primary: #409eff !default;
+$--stack-tab-color-primary-invert: #ffac30 !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: mix($--stack-tab-color-primary, #000, 80%) !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-context-menu: 5px 5px 5px rgb(0 0 0 / 10%);

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

@@ -0,0 +1,93 @@
+@import './common/var';
+
+// 全屏
+.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;
+}

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

@@ -0,0 +1,3 @@
+@import 'stackTab';
+@import 'icon';
+@import 'transition';