feat(projects): 迁移多页签

mock/api/route.ts

@@ -75,18 +75,18 @@ const routes: AuthRoute.Route[] = [
   }
 ];
 
-const routeHome: AuthRoute.RoutePath = '/dashboard/analysis';
+function dataMiddleware(data: AuthRoute.Route[]): ApiRoute.Route {
+  const routeHomeName: AuthRoute.RouteKey = 'dashboard_analysis';
 
-function sortRoutes() {
-  routes.sort((next, pre) => Number(next.meta?.order) - Number(pre.meta?.order));
-}
-
-sortRoutes();
+  function sortRoutes(sorts: AuthRoute.Route[]) {
+    return sorts.sort((next, pre) => Number(next.meta?.order) - Number(pre.meta?.order));
+  }
 
-const data: ApiRoute.Route = {
-  routes,
-  home: routeHome
-};
+  return {
+    routes: sortRoutes(data),
+    home: routeHomeName
+  };
+}
 
 const apis: MockMethod[] = [
   {
@@ -96,7 +96,7 @@ const apis: MockMethod[] = [
       return {
         code: 200,
         message: 'ok',
-        data
+        data: dataMiddleware(routes)
       };
     }
   }

src/components/custom/BetterScroll/index.vue

@@ -0,0 +1,46 @@
+<template>
+  <div ref="bsWrap" class="h-full text-left">
+    <div ref="bsContent" class="inline-block" :class="{ 'h-full': !isScrollY }">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onMounted } from 'vue';
+import { useElementSize } from '@vueuse/core';
+import BScroll from '@better-scroll/core';
+import type { Options } from '@better-scroll/core';
+
+interface Props {
+  /** better-scroll的配置: https://better-scroll.github.io/docs/zh-CN/guide/base-scroll-options.html */
+  options: Options;
+}
+
+const props = defineProps<Props>();
+
+const bsWrap = ref<HTMLElement>();
+const instance = ref<BScroll>();
+const bsContent = ref<HTMLElement>();
+const isScrollY = computed(() => Boolean(props.options.scrollY));
+
+function initBetterScroll() {
+  if (!bsWrap.value) return;
+  instance.value = new BScroll(bsWrap.value, props.options);
+}
+
+// 滚动元素发生变化，刷新BS
+const { width, height } = useElementSize(bsContent);
+watch([() => width.value, () => height.value], () => {
+  if (instance.value) {
+    instance.value.refresh();
+  }
+});
+
+onMounted(() => {
+  initBetterScroll();
+});
+
+defineExpose({ instance });
+</script>
+<style scoped></style>

src/components/custom/ButtonTab/index.vue

@@ -0,0 +1,71 @@
+<template>
+  <div
+    class="relative flex-center h-30px pl-14px border-1px border-[#e5e7eb] dark:border-[#ffffff3d] rounded-2px cursor-pointer transition-colors duration-300 ease-in-out"
+    :class="[closable ? 'pr-6px' : 'pr-14px']"
+    :style="buttonStyle"
+    @mouseenter="setTrue"
+    @mouseleave="setFalse"
+  >
+    <span class="whitespace-nowrap">
+      <slot></slot>
+    </span>
+    <div v-if="closable" class="pl-10px">
+      <icon-close :is-active="isIconActive" :primary-color="primaryColor" @click="handleClose" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { useBoolean } from '@/hooks';
+import { addColorAlpha } from '@/utils';
+import IconClose from '../IconClose/index.vue';
+
+interface Props {
+  /** 激活状态 */
+  isActive?: boolean;
+  /** 主题颜色 */
+  primaryColor?: string;
+  /** 是否显示关闭图标 */
+  closable?: boolean;
+  /** 暗黑模式 */
+  darkMode?: boolean;
+}
+
+interface Emits {
+  /** 点击关闭图标 */
+  (e: 'close'): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isActive: false,
+  primaryColor: '#1890ff',
+  closable: true,
+  darkMode: false
+});
+
+const emit = defineEmits<Emits>();
+
+const { bool: isHover, setTrue, setFalse } = useBoolean();
+
+const isIconActive = computed(() => props.isActive || isHover.value);
+
+const buttonStyle = computed(() => {
+  const style: { [key: string]: string } = {};
+  if (isIconActive.value) {
+    style.color = props.primaryColor;
+    style.borderColor = addColorAlpha(props.primaryColor, 0.3);
+    if (props.isActive) {
+      const alpha = props.darkMode ? 0.15 : 0.1;
+      style.backgroundColor = addColorAlpha(props.primaryColor, alpha);
+    }
+  }
+  return style;
+});
+
+function handleClose(e: MouseEvent) {
+  e.stopPropagation();
+  emit('close');
+}
+</script>
+<style scoped></style>

src/components/custom/ChromeTab/components/SvgRadiusBg.vue

@@ -0,0 +1,79 @@
+<template>
+  <svg>
+    <defs>
+      <symbol id="geometry-left" viewBox="0 0 214 36">
+        <path d="M17 0h197v36H0v-2c4.5 0 9-3.5 9-8V8c0-4.5 3.5-8 8-8z"></path>
+      </symbol>
+      <symbol id="geometry-right" viewBox="0 0 214 36">
+        <use xlink:href="#geometry-left"></use>
+      </symbol>
+      <clipPath>
+        <rect width="100%" height="100%" x="0"></rect>
+      </clipPath>
+    </defs>
+    <svg width="52%" height="100%">
+      <use
+        xlink:href="#geometry-left"
+        width="214"
+        height="36"
+        :fill="fill"
+        class="transition-fill duration-300 ease-in-out"
+      ></use>
+    </svg>
+    <g transform="scale(-1, 1)">
+      <svg width="52%" height="100%" x="-100%" y="0">
+        <use
+          xlink:href="#geometry-right"
+          width="214"
+          height="36"
+          :fill="fill"
+          class="transition-fill duration-300 ease-in-out"
+        ></use>
+      </svg>
+    </g>
+  </svg>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { mixColor } from '@/utils';
+
+interface Props {
+  /** 激活状态 */
+  isActive?: boolean;
+  /** 鼠标悬浮状态 */
+  isHover?: boolean;
+  /** 主题颜色 */
+  primaryColor?: string;
+  /** 暗黑模式 */
+  darkMode?: boolean;
+}
+
+/** 填充的背景颜色： [默认颜色, 暗黑主题颜色] */
+type FillColor = [string, string];
+
+const props = withDefaults(defineProps<Props>(), {
+  isActive: false,
+  isHover: false,
+  primaryColor: '#409EFF',
+  darkMode: false
+});
+
+const defaultColor: FillColor = ['#fff', '#18181c'];
+const hoverColor: FillColor = ['#dee1e6', '#3f3c37'];
+const mixColors: FillColor = ['#ffffff', '#000000'];
+
+const fill = computed(() => {
+  const index = Number(props.darkMode);
+  let color = defaultColor[index];
+  if (props.isHover) {
+    color = hoverColor[index];
+  }
+  if (props.isActive) {
+    const alpha = props.darkMode ? 0.1 : 0.15;
+    color = mixColor(mixColors[index], props.primaryColor, alpha);
+  }
+  return color;
+});
+</script>
+<style scoped></style>

src/components/custom/ChromeTab/components/index.ts

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

src/components/custom/ChromeTab/index.vue

@@ -0,0 +1,66 @@
+<template>
+  <div
+    class="relative flex-y-center h-34px px-24px -mr-18px cursor-pointer"
+    :class="{ 'z-10': isActive, 'z-9': isHover }"
+    @mouseenter="setTrue"
+    @mouseleave="setFalse"
+  >
+    <div class="absolute-lb wh-full overflow-hidden">
+      <svg-radius-bg
+        class="wh-full"
+        :is-active="isActive"
+        :is-hover="isHover"
+        :dark-mode="darkMode"
+        :primary-color="primaryColor"
+      />
+    </div>
+    <span class="relative whitespace-nowrap z-2">
+      <slot></slot>
+    </span>
+    <div v-if="closable" class="pl-18px">
+      <icon-close :is-active="isActive" :primary-color="primaryColor" @click="handleClose" />
+    </div>
+    <n-divider v-if="!isHover && !isActive" :vertical="true" class="absolute right-0 !bg-[#a4abb8] z-2" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { NDivider } from 'naive-ui';
+import { useBoolean } from '@/hooks';
+import IconClose from '../IconClose/index.vue';
+import { SvgRadiusBg } from './components';
+
+interface Props {
+  /** 激活状态 */
+  isActive?: boolean;
+  /** 主题颜色 */
+  primaryColor?: string;
+  /** 是否显示关闭图标 */
+  closable?: boolean;
+  /** 暗黑模式 */
+  darkMode?: boolean;
+}
+
+interface Emits {
+  /** 点击关闭图标 */
+  (e: 'close'): void;
+}
+
+withDefaults(defineProps<Props>(), {
+  isActive: false,
+  primaryColor: '#409EFF',
+  closable: true,
+  darkMode: false,
+  isLast: false
+});
+
+const emit = defineEmits<Emits>();
+
+const { bool: isHover, setTrue, setFalse } = useBoolean();
+
+function handleClose(e: MouseEvent) {
+  e.stopPropagation();
+  emit('close');
+}
+</script>
+<style scoped></style>

src/components/custom/IconClose/index.vue

@@ -0,0 +1,35 @@
+<template>
+  <div
+    class="relative flex-center w-18px h-18px text-14px"
+    :style="{ color: isActive ? primaryColor : defaultColor }"
+    @mouseenter="setTrue"
+    @mouseleave="setFalse"
+  >
+    <transition name="fade">
+      <icon-mdi:close-circle v-if="isHover" key="hover" class="absolute" />
+      <icon-mdi:close v-else key="unhover" class="absolute" />
+    </transition>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useBoolean } from '@/hooks';
+
+interface Props {
+  /** 激活状态 */
+  isActive?: boolean;
+  /** 主题颜色 */
+  primaryColor?: string;
+  /** 默认颜色 */
+  defaultColor?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  isPrimary: false,
+  primaryColor: '#1890ff',
+  defaultColor: '#9ca3af'
+});
+
+const { bool: isHover, setTrue, setFalse } = useBoolean();
+</script>
+<style scoped></style>

src/components/custom/index.ts

@@ -1,4 +1,7 @@
+import BetterScroll from './BetterScroll/index.vue';
+import ButtonTab from './ButtonTab/index.vue';
+import ChromeTab from './ChromeTab/index.vue';
 import CountTo from './CountTo/index.vue';
 import ImageVerify from './ImageVerify/index.vue';
 
-export { CountTo, ImageVerify };
+export { BetterScroll, ButtonTab, ChromeTab, CountTo, ImageVerify };

src/enum/common/storage.ts

@@ -6,5 +6,7 @@ export enum EnumStorageKey {
   /** 用户刷新token */
   'refresh-koken' = '__REFRESH_TOKEN__',
   /** 用户信息 */
-  'user-info' = '__USER_INFO__'
+  'user-info' = '__USER_INFO__',
+  /** 多页签路由信息 */
+  'tab-routes' = '__TAB_ROUTES__'
 }

src/interface/expose.ts

@@ -1,3 +1,5 @@
-export interface ExposeLayoutMixMenu {
-  resetFirstDegreeMenus(): void;
+import BScroll from '@better-scroll/core';
+
+export interface ExposeBetterScroll {
+  instance: BScroll;
 }

src/interface/system.ts

@@ -1,4 +1,5 @@
 import type { VNodeChild } from 'vue';
+import type { RouteLocationNormalizedLoaded } from 'vue-router';
 import type { DropdownOption } from 'naive-ui';
 
 /** 菜单项配置 */
@@ -20,3 +21,6 @@ export type GlobalBreadcrumb = DropdownOption & {
   hasChildren: boolean;
   children?: GlobalBreadcrumb[];
 };
+
+/** 多页签Tab的路由 */
+export type GlobalTabRoute = Pick<RouteLocationNormalizedLoaded, 'name' | 'path' | 'meta'>;