feat(projects): 添加多页签风格：按钮和浏览器两种风格

src/context/index.ts

@@ -1,3 +1,3 @@
-import { setupAppContext, useReloadInject } from './app';
+export { setupAppContext, useReloadInject } from './app';
 
-export { setupAppContext, useReloadInject };
+export { useHoverIndexProvide, useHoverIndexInject } from './part';

src/context/part/index.ts

@@ -0,0 +1,5 @@
+import useHoverIndexContext from './useHoverIndexContext';
+
+const { useHoverIndexProvide, useHoverIndexInject } = useHoverIndexContext();
+
+export { useHoverIndexProvide, useHoverIndexInject };

src/context/part/useHoverIndexContext.ts

@@ -0,0 +1,39 @@
+import { ref } from 'vue';
+import type { Ref } from 'vue';
+import { useContext } from '@/hooks';
+
+interface HoverIndexContext {
+  /** 被悬浮元素索引 */
+  index: Ref<number>;
+  /** 设置索引 */
+  setHoverIndex(index: number): void;
+  /** 重置索引 */
+  resetHoverIndex(): void;
+}
+const { useProvide, useInject: useHoverIndexInject } = useContext<HoverIndexContext>();
+
+/** 获取被悬浮元素的索引上下文 */
+export default function useHoverIndexContext() {
+  const index = ref(-1);
+  function setHoverIndex(hIndex: number) {
+    index.value = hIndex;
+  }
+  function resetHoverIndex() {
+    index.value = -1;
+  }
+
+  const context: HoverIndexContext = {
+    index,
+    setHoverIndex,
+    resetHoverIndex
+  };
+  function useHoverIndexProvide() {
+    useProvide(context);
+  }
+
+  return {
+    context,
+    useHoverIndexProvide,
+    useHoverIndexInject
+  };
+}

src/enum/index.ts

@@ -1,5 +1,5 @@
 export { ContentType, EnumDataType, EnumLoginModule } from './common';
 export { EnumAnimate } from './animate';
-export { EnumNavMode, EnumNavTheme } from './theme';
+export { EnumNavMode, EnumNavTheme, EnumMultiTabMode } from './theme';
 export { EnumRoutePath, EnumRouteTitle } from './route';
 export { EnumStorageKey } from './storage';

src/enum/theme.ts

@@ -12,3 +12,8 @@ export enum EnumNavTheme {
   'light' = '白色侧边栏',
   'header-dark' = '暗色的侧边栏和顶栏'
 }
+
+export enum EnumMultiTabMode {
+  'button' = '按钮风格',
+  'browser' = '浏览器风格'
+}

src/hooks/common/index.ts

@@ -3,5 +3,6 @@ import useContext from './useContext';
 import useRouterChange from './useRouterChange';
 import useRouteParam from './useRouteParam';
 import useRouteQuery from './useRouteQuery';
+import useBoolean from './useBoolean';
 
-export { useAppTitle, useContext, useRouterChange, useRouteParam, useRouteQuery };
+export { useAppTitle, useContext, useRouterChange, useRouteParam, useRouteQuery, useBoolean };

src/hooks/common/useBoolean.ts

@@ -0,0 +1,24 @@
+import { ref } from 'vue';
+
+export default function useBoolean(initValue: boolean = false) {
+  const bool = ref(initValue);
+
+  function setTrue() {
+    bool.value = true;
+  }
+
+  function setFalse() {
+    bool.value = false;
+  }
+
+  function toggle() {
+    bool.value = !bool.value;
+  }
+
+  return {
+    bool,
+    setTrue,
+    setFalse,
+    toggle
+  };
+}

src/hooks/index.ts

@@ -1,2 +1,2 @@
-export { useAppTitle, useContext, useRouterChange, useRouteParam, useRouteQuery } from './common';
+export { useAppTitle, useContext, useRouterChange, useRouteParam, useRouteQuery, useBoolean } from './common';
 export { useCountDown, useSmsCode } from './business';

src/interface/index.ts

@@ -1,3 +1,3 @@
 export { UserInfo } from './business';
-export { ThemeSettings, NavMode, AnimateType } from './theme';
+export { ThemeSettings, NavMode, MultiTabMode, AnimateType } from './theme';
 export { CustomRoute, RoutePathKey, GlobalMenuOption, LoginModuleType } from './common';

src/interface/theme.ts

@@ -1,4 +1,4 @@
-import { EnumAnimate, EnumNavMode, EnumNavTheme } from '@/enum';
+import { EnumAnimate, EnumNavMode, EnumNavTheme, EnumMultiTabMode } from '@/enum';
 
 export interface ThemeSettings {
   /** 深色模式 */
@@ -69,6 +69,13 @@ interface MenuStyle {
   splitMenu: boolean;
 }
 
+export type MultiTabMode = keyof typeof EnumMultiTabMode;
+
+interface MultiTabModeList {
+  value: MultiTabMode;
+  label: EnumMultiTabMode;
+}
+
 interface MultiTabStyle {
   /** 多页签高度 */
   height: number;
@@ -76,6 +83,10 @@ interface MultiTabStyle {
   visible: boolean;
   /** 背景颜色 */
   bgColor: string;
+  /** 多页签模式 */
+  mode: MultiTabMode;
+  /** 多页签模式列表 */
+  modeList: MultiTabModeList[];
 }
 
 interface CrumbsStyle {

src/layouts/BasicLayout/components/GlobalTab/components/BrowserTab/components/LeftTabRadius.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="absolute bottom-0 -left-16px flex w-32px h-full bg-white">
+    <div class="relative w-1/2 h-full">
+      <div class="absolute-lt w-full h-full bg-white rounded-br-8px overflow-hidden z-2">
+        <div
+          class="w-full h-full transition-background duration-400 ease-in-out"
+          :class="{ 'bg-black bg-opacity-10': isLeftHover }"
+        ></div>
+      </div>
+      <div
+        class="absolute-lt w-full h-full transition-background duration-400 ease-in-out bg-opacity-10 z-1"
+        :class="{ 'bg-primary': isPrimary, 'bg-black': isHover && !isPrimary }"
+      ></div>
+    </div>
+    <div
+      class="relative w-1/2 h-full transition-background duration-400 ease-in-out"
+      :class="{ 'bg-black bg-opacity-10': isLeftHover }"
+    >
+      <div class="absolute-lt w-full h-full bg-white rounded-tl-8px overflow-hidden z-2">
+        <div
+          class="w-full h-full transition-background duration-400 ease-in-out bg-opacity-10"
+          :class="{ 'bg-primary': isPrimary, 'bg-black': isHover && !isPrimary }"
+        ></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps({
+  isPrimary: {
+    type: Boolean,
+    default: false
+  },
+  isHover: {
+    type: Boolean,
+    default: false
+  },
+  isLeftHover: {
+    type: Boolean,
+    default: false
+  }
+});
+</script>
+<style scoped></style>

src/layouts/BasicLayout/components/GlobalTab/components/BrowserTab/components/RightTabRadius.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="absolute bottom-0 -right-16px flex w-32px h-full bg-white">
+    <div
+      class="relative w-1/2 h-full transition-background duration-400 ease-in-out"
+      :class="{ 'bg-black bg-opacity-10': isRightHover }"
+    >
+      <div class="absolute-lt w-full h-full bg-white rounded-tr-8px overflow-hidden z-2">
+        <div
+          class="w-full h-full transition-background duration-400 ease-in-out bg-opacity-10"
+          :class="{ 'bg-primary': isPrimary, 'bg-black': isHover && !isPrimary }"
+        ></div>
+      </div>
+    </div>
+    <div class="relative w-1/2 h-full">
+      <div class="absolute-lt w-full h-full bg-white rounded-bl-8px overflow-hidden z-2">
+        <div
+          class="w-full h-full transition-background duration-400 ease-in-out bg-opacity-10"
+          :class="[isRightHover ? 'bg-black' : 'bg-white']"
+        ></div>
+      </div>
+      <div
+        class="absolute-lt w-full h-full transition-background duration-400 ease-in-out bg-opacity-10 z-1"
+        :class="{ 'bg-primary': isPrimary, 'bg-black': isHover && !isPrimary }"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps({
+  isPrimary: {
+    type: Boolean,
+    default: false
+  },
+  isHover: {
+    type: Boolean,
+    default: false
+  },
+  isRightHover: {
+    type: Boolean,
+    default: false
+  }
+});
+</script>
+<style scoped></style>

src/layouts/BasicLayout/components/GlobalTab/components/BrowserTab/components/index.ts

@@ -0,0 +1,4 @@
+import LeftTabRadius from './LeftTabRadius.vue';
+import RightTabRadius from './RightTabRadius.vue';
+
+export { LeftTabRadius, RightTabRadius };

src/layouts/BasicLayout/components/GlobalTab/components/BrowserTab/index.vue

@@ -0,0 +1,117 @@
+<template>
+  <div
+    class="
+      relative
+      inline-flex-center
+      h-34px
+      px-32px
+      transition-background
+      duration-400
+      ease-in-out
+      bg-opacity-10
+      cursor-pointer
+    "
+    :class="{ 'text-primary bg-primary z-3': active, 'bg-black z-2': isHover && !active }"
+    @mouseenter="handleMouseOnTab('enter')"
+    @mouseleave="handleMouseOnTab('leave')"
+  >
+    <span>
+      <slot></slot>
+    </span>
+    <div
+      v-if="closable"
+      class="transition-width duration-400 ease-in-out overflow-hidden"
+      :class="[isHover ? 'w-18px' : 'w-0']"
+    >
+      <icon-close :is-primary="active" @click="handleClose" />
+    </div>
+    <left-tab-radius
+      class="transition-opacity duration-400 ease-in-out"
+      :class="[showRadius ? 'opacity-100' : 'opacity-0']"
+      :is-primary="active"
+      :is-hover="isHover"
+      :is-left-hover="isLeftHover"
+    />
+    <right-tab-radius
+      class="transition-opacity duration-400 ease-out"
+      :class="[showRadius ? 'opacity-100' : 'opacity-0']"
+      :is-primary="active"
+      :is-hover="isHover"
+      :is-right-hover="isRightHover"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref, watch } from 'vue';
+import { useBoolean } from '@/hooks';
+import { IconClose } from '../common';
+import { LeftTabRadius, RightTabRadius } from './components';
+
+const props = defineProps({
+  currentIndex: {
+    type: Number,
+    required: true
+  },
+  activeIndex: {
+    type: Number,
+    required: true
+  },
+  hoverIndex: {
+    type: Number,
+    default: NaN
+  },
+  closable: {
+    type: Boolean,
+    default: true
+  }
+});
+const emit = defineEmits(['close', 'update:hoverIndex']);
+
+const { bool: isHover, setTrue, setFalse } = useBoolean();
+
+const hoveredIndex = ref(props.hoverIndex);
+function setHoverIndex(index: number) {
+  hoveredIndex.value = index;
+}
+function resetHoverIndex() {
+  hoveredIndex.value = NaN;
+}
+
+const active = computed(() => props.currentIndex === props.activeIndex);
+const showRadius = computed(() => isHover.value || active.value);
+const isLeftHover = computed(() => active.value && props.activeIndex === hoveredIndex.value + 1);
+const isRightHover = computed(() => active.value && props.activeIndex === hoveredIndex.value - 1);
+
+function handleMouseOnTab(mode: 'enter' | 'leave') {
+  if (mode === 'enter') {
+    setTrue();
+    setHoverIndex(props.currentIndex);
+  } else {
+    setFalse();
+    resetHoverIndex();
+  }
+}
+
+function handleClose(e: MouseEvent) {
+  e.stopPropagation();
+  emit('close');
+}
+
+watch(
+  () => props.hoverIndex,
+  newValue => {
+    setHoverIndex(newValue);
+  }
+);
+watch(hoveredIndex, newValue => {
+  emit('update:hoverIndex', newValue);
+});
+watch(
+  () => props.activeIndex,
+  () => {
+    resetHoverIndex();
+  }
+);
+</script>
+<style scoped></style>

src/layouts/BasicLayout/components/GlobalTab/components/ButtonTab/index.vue

@@ -0,0 +1,57 @@
+<template>
+  <div
+    class="
+      button-tab
+      inline-flex-center
+      h-34px
+      px-14px
+      bg-white
+      border-1px border-[#e5e7eb]
+      rounded-2px
+      cursor-pointer
+      hover:text-primary hover:border-primary
+    "
+    :class="{ 'text-primary bg-primary bg-opacity-10 !border-primary': active }"
+  >
+    <span>
+      <slot></slot>
+    </span>
+    <div v-if="closable" class="icon-close-container w-0 overflow-hidden">
+      <icon-close :is-primary="true" @click="handleClose" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { IconClose } from '../common';
+
+defineProps({
+  active: {
+    type: Boolean,
+    default: false
+  },
+  closable: {
+    type: Boolean,
+    default: true
+  }
+});
+const emit = defineEmits(['close']);
+
+function handleClose(e: MouseEvent) {
+  e.stopPropagation();
+  emit('close');
+}
+</script>
+<style scoped lang="scss">
+.button-tab {
+  transition: all 0.4s ease-out;
+  &:hover {
+    .icon-close-container {
+      width: 18px !important;
+    }
+  }
+  .icon-close-container {
+    transition: width 0.4s ease-out;
+  }
+}
+</style>

src/layouts/BasicLayout/components/GlobalTab/components/CardTab.vue

@@ -1,6 +0,0 @@
-<template>
-  <div></div>
-</template>
-
-<script lang="ts" setup></script>
-<style scoped></style>

src/layouts/BasicLayout/components/GlobalTab/components/common/IconClose.vue

@@ -0,0 +1,27 @@
+<template>
+  <div
+    class="relative flex-center w-18px h-18px text-14px"
+    :class="{ 'text-primary': isPrimary }"
+    @mouseenter="setTrue"
+    @mouseleave="setFalse"
+  >
+    <transition name="transition-opacity">
+      <icon-carbon-close-filled v-if="isHover" key="hover" class="absolute" />
+      <icon-carbon-close v-else key="unhover" class="absolute" />
+    </transition>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useBoolean } from '@/hooks';
+
+defineProps({
+  isPrimary: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const { bool: isHover, setTrue, setFalse } = useBoolean();
+</script>
+<style scoped></style>

src/layouts/BasicLayout/components/GlobalTab/components/common/index.ts

@@ -0,0 +1,3 @@
+import IconClose from './IconClose.vue';
+
+export { IconClose };

src/layouts/BasicLayout/components/GlobalTab/components/index.ts

@@ -0,0 +1,4 @@
+import ButtonTab from './ButtonTab/index.vue';
+import BrowserTab from './BrowserTab/index.vue';
+
+export { ButtonTab, BrowserTab };

src/layouts/BasicLayout/components/GlobalTab/index.vue

@@ -1,25 +1,39 @@
 <template>
   <div v-if="fixedHeaderAndTab && theme.navStyle.mode !== 'horizontal-mix'" class="multi-tab-height w-full"></div>
   <div
-    class="multi-tab-height flex-y-center justify-between w-full px-10px"
-    :class="{ 'multi-tab-top absolute': fixedHeaderAndTab, 'bg-[#f5f7f9]': !theme.darkMode }"
+    class="multi-tab-height flex-center justify-between w-full px-10px"
+    :class="{ 'multi-tab-top absolute': fixedHeaderAndTab, 'bg-[#18181c]': theme.darkMode }"
     :style="{ zIndex }"
+    :align="'center'"
+    justify="space-between"
+    :item-style="{ paddingTop: '0px', paddingBottom: '0px' }"
   >
-    <n-space :align="'center'">
-      <n-tag
+    <n-space v-if="theme.multiTabStyle.mode === 'button'" :align="'center'" size="small" class="h-full">
+      <button-tab
         v-for="item in app.multiTab.routes"
         :key="item.path"
-        :type="app.multiTab.activeRoute === item.fullPath ? 'primary' : 'default'"
-        class="cursor-pointer"
+        :active="app.multiTab.activeRoute === item.fullPath"
         :closable="item.name !== ROUTE_HOME.name"
-        size="large"
         @click="handleClickTab(item.fullPath)"
-        @close.stop="removeMultiTab(item.fullPath)"
+        @close="removeMultiTab(item.fullPath)"
       >
         {{ item.meta?.title }}
-      </n-tag>
+      </button-tab>
+    </n-space>
+    <n-space v-if="theme.multiTabStyle.mode === 'browser'" :align="'flex-end'" :size="0" class="h-full px-16px">
+      <browser-tab
+        v-for="(item, index) in app.multiTab.routes"
+        :key="item.path"
+        v-model:hover-index="hoverIndex"
+        :current-index="index"
+        :active-index="app.activeMultiTabIndex"
+        :closable="item.name !== ROUTE_HOME.name"
+        @click="handleClickTab(item.fullPath)"
+        @close="removeMultiTab(item.fullPath)"
+      >
+        {{ item.meta?.title }}
+      </browser-tab>
     </n-space>
-    <h3>{{ reload }}</h3>
     <div class="flex-center w-32px h-32px bg-white cursor-pointer" @click="handleReload">
       <icon-mdi-refresh class="text-16px" />
     </div>
@@ -27,13 +41,13 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
-import { NSpace, NTag } from 'naive-ui';
+import { NSpace } from 'naive-ui';
 import { useThemeStore, useAppStore } from '@/store';
-// import { useRouterChange } from '@/hooks';
 import { useReloadInject } from '@/context';
 import { ROUTE_HOME } from '@/router';
+import { ButtonTab, BrowserTab } from './components';
 
 defineProps({
   zIndex: {
@@ -46,8 +60,9 @@ const route = useRoute();
 const theme = useThemeStore();
 const app = useAppStore();
 const { initMultiTab, addMultiTab, removeMultiTab, setActiveMultiTab, handleClickTab } = useAppStore();
-// const { toReload } = useRouterChange();
-const { reload, handleReload } = useReloadInject();
+const { handleReload } = useReloadInject();
+
+const hoverIndex = ref(NaN);
 
 const fixedHeaderAndTab = computed(() => theme.fixedHeaderAndTab || theme.navStyle.mode === 'horizontal-mix');
 const multiTabHeight = computed(() => {
@@ -59,10 +74,6 @@ const headerHeight = computed(() => {
   return `${height}px`;
 });
 
-// async function handleReload() {
-//   // toReload(route.fullPath);
-// }
-
 function init() {
   initMultiTab();
 }

src/layouts/BasicLayout/components/SettingDrawer/components/PageView/index.vue

@@ -10,6 +10,15 @@
     <setting-menu-item label="多页签">
       <n-switch :value="theme.multiTabStyle.visible" @update:value="handleMultiTabVisible" />
     </setting-menu-item>
+    <setting-menu-item label="多页签风格">
+      <n-select
+        class="w-120px"
+        size="small"
+        :value="theme.multiTabStyle.mode"
+        :options="theme.multiTabStyle.modeList"
+        @update:value="handleMultiTabMode"
+      />
+    </setting-menu-item>
     <setting-menu-item label="页面切换动画">
       <n-switch :value="theme.pageStyle.animate" @update:value="handlePageAnimate" />
     </setting-menu-item>
@@ -35,6 +44,7 @@ const {
   handleCrumbsVisible,
   handleCrumbsIconVisible,
   handleMultiTabVisible,
+  handleMultiTabMode,
   handlePageAnimate,
   handlePageAnimateType
 } = useThemeStore();

src/layouts/BasicLayout/index.vue

@@ -15,8 +15,8 @@
           :class="[{ 'content-padding': isHorizontalMix }, routeProps.fullPage ? 'h-full' : 'min-h-100vh']"
         >
           <global-header v-if="!isHorizontalMix" :z-index="1" />
-          <global-tab :z-index="1" />
-          <n-layout-content class="flex-auto" :class="{ 'bg-[#f5f7f9]': !theme.darkMode }">
+          <global-tab v-if="theme.multiTabStyle.visible" :z-index="1" />
+          <n-layout-content class="flex-auto p-10px" :class="{ 'bg-[#f5f7f9]': !theme.darkMode }">
             <router-view v-slot="{ Component }">
               <keep-alive>
                 <component :is="Component" v-if="routeProps.keepAlive && reload" :key="routeProps.name" />

src/settings/theme.ts

@@ -1,5 +1,5 @@
 import type { ThemeSettings } from '../interface';
-import { EnumAnimate } from '../enum';
+import { EnumAnimate, EnumMultiTabMode } from '../enum';
 
 const themeColorList = [
   '#409EFF',
@@ -48,9 +48,14 @@ const themeSettings: ThemeSettings = {
     bgColor: '#fff'
   },
   multiTabStyle: {
-    height: 44,
+    height: 48,
     visible: true,
-    bgColor: '#fff'
+    bgColor: '#fff',
+    mode: 'browser',
+    modeList: [
+      { value: 'button', label: EnumMultiTabMode.button },
+      { value: 'browser', label: EnumMultiTabMode.browser }
+    ]
   },
   crumbsStyle: {
     visible: true,

src/store/modules/app/index.ts

@@ -51,6 +51,12 @@ const appStore = defineStore({
       visible: false
     }
   }),
+  getters: {
+    activeMultiTabIndex(state) {
+      const { routes, activeRoute } = state.multiTab;
+      return routes.findIndex(v => v.fullPath === activeRoute);
+    }
+  },
   actions: {
     /** 折叠/展开菜单 */
     handleMenuCollapse(collapsed: boolean) {

src/store/modules/theme/index.ts

@@ -2,7 +2,7 @@ import { defineStore } from 'pinia';
 import type { GlobalThemeOverrides } from 'naive-ui';
 import { themeSettings } from '@/settings';
 import { store } from '@/store';
-import type { ThemeSettings, NavMode, AnimateType } from '@/interface';
+import type { ThemeSettings, NavMode, MultiTabMode, AnimateType } from '@/interface';
 import { getHoverAndPressedColor } from './helpers';
 
 type ThemeState = ThemeSettings;
@@ -101,6 +101,10 @@ const themeStore = defineStore({
     handleMultiTabVisible(visible: boolean) {
       this.multiTabStyle.visible = visible;
     },
+    /** 设置多页签的显示 */
+    handleMultiTabMode(mode: MultiTabMode) {
+      this.multiTabStyle.mode = mode;
+    },
     /** 设置面包屑的显示 */
     handleCrumbsVisible(visible: boolean) {
       this.crumbsStyle.visible = visible;

src/styles/css/animation.css

@@ -0,0 +1,9 @@
+/* opacity透明过度 */
+.transition-opacity-enter-active,
+.transition-opacity-enter-active {
+  transition: opacity 0.4s ease-out;
+}
+.transition-opacity-enter-from,
+.transition-opacity-leave-to {
+  opacity: 0;
+}

src/styles/css/global.css

@@ -1,4 +1,5 @@
 @import './scrollbar.css';
+@import './animation.css';
 
 html,
 body,

src/views/dashboard/analysis/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="px-10px">
+  <div>
     <data-card :loading="loading" />
     <nav-card :loading="loading" />
   </div>

src/views/dashboard/workbench/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="px-10px">
+  <div>
     <div class="flex-y-center flex-col h-500px bg-white">
       <n-gradient-text type="primary" size="32">工作台</n-gradient-text>
       <n-space>