feat(ant-d): 3.0 vol.1

src/hooks/event/useWindowSizeFn.ts

@@ -1,5 +1,4 @@
-import { tryOnMounted, tryOnUnmounted } from '@vueuse/core';
-import { useDebounceFn } from '@vueuse/core';
+import { tryOnMounted, tryOnUnmounted, useDebounceFn } from '@vueuse/core';
 
 interface WindowSizeOptions {
   once?: boolean;

src/hooks/web/useTabs.ts

@@ -34,7 +34,7 @@ export function useTabs(_router?: Router) {
 
   function getCurrentTab() {
     const route = unref(currentRoute);
-    return tabStore.getTabList.find((item) => item.path === route.path)!;
+    return tabStore.getTabList.find((item) => item.fullPath === route.fullPath)!;
   }
 
   async function updateTabTitle(title: string, tab?: RouteLocationNormalized) {

src/layouts/default/feature/index.vue

@@ -23,7 +23,7 @@
       const { getUseOpenBackTop, getShowSettingButton, getSettingButtonPosition, getFullContent } =
         useRootSetting();
       const userStore = useUserStoreWithOut();
-      const { prefixCls } = useDesign('setting-drawer-fearure');
+      const { prefixCls } = useDesign('setting-drawer-feature');
       const { getShowHeader } = useHeaderSetting();
 
       const getIsSessionTimeout = computed(() => userStore.getSessionTimeout);
@@ -59,7 +59,7 @@
 </template>
 
 <style lang="less">
-  @prefix-cls: ~'@{namespace}-setting-drawer-fearure';
+  @prefix-cls: ~'@{namespace}-setting-drawer-feature';
 
   .@{prefix-cls} {
     position: absolute;

src/layouts/default/header/components/Breadcrumb.vue

@@ -101,8 +101,8 @@
           if (!meta) {
             return !!name;
           }
-          const { title, hideBreadcrumb } = meta;
-          if (!title || hideBreadcrumb) {
+          const { title, hideBreadcrumb, hideMenu } = meta;
+          if (!title || hideBreadcrumb || hideMenu) {
             return false;
           }
           return true;

src/layouts/default/setting/SettingDrawer.tsx

@@ -401,7 +401,7 @@ export default defineComponent({
         {...attrs}
         title={t('layout.setting.drawerTitle')}
         width={330}
-        wrapClassName="setting-drawer"
+        class="setting-drawer"
       >
         {unref(getShowDarkModeToggle) && <Divider>{() => t('layout.setting.darkMode')}</Divider>}
         {unref(getShowDarkModeToggle) && <AppDarkModeToggle class="mx-auto" />}

src/layouts/default/tabs/index.less

@@ -28,7 +28,8 @@ html[data-theme='light'] {
   }
 
   .ant-tabs.ant-tabs-card {
-    .ant-tabs-card-bar {
+    .ant-tabs-nav {
+      padding-top: 2px;
       height: @multiple-height;
       margin: 0;
       background-color: @component-background;
@@ -49,18 +50,20 @@ html[data-theme='light'] {
         transition: none;
 
         &:hover {
-          .ant-tabs-close-x {
-            opacity: 100%;
+          .ant-tabs-tab-remove {
+            opacity: 1;
           }
         }
 
-        .ant-tabs-close-x {
+        .ant-tabs-tab-remove {
           width: 8px;
-          height: 12px;
+          height: 28px;
           font-size: 12px;
           color: inherit;
-          opacity: 0%;
+          opacity: 0;
           transition: none;
+          margin-left: 2px;
+          margin-right: -4px;
 
           &:hover {
             svg {
@@ -69,11 +72,11 @@ html[data-theme='light'] {
           }
         }
 
-        > div {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-        }
+        // > div {
+        //   display: flex;
+        //   justify-content: center;
+        //   align-items: center;
+        // }
 
         svg {
           fill: @text-color-base;
@@ -89,13 +92,16 @@ html[data-theme='light'] {
       .ant-tabs-tab-active {
         position: relative;
         padding-left: 18px;
-        color: @white !important;
         background: @primary-color;
         border: 0;
         transition: none;
 
-        .ant-tabs-close-x {
-          opacity: 100%;
+        span {
+          color: @white !important;
+        }
+
+        .ant-tabs-tab-remove {
+          opacity: 1;
         }
 
         svg {
@@ -124,18 +130,13 @@ html[data-theme='light'] {
     }
   }
 
-  .ant-tabs-extra-content {
-    margin-top: 2px;
-    line-height: @multiple-height !important;
-  }
-
   .ant-dropdown-trigger {
     display: inline-flex;
   }
 
   &--hide-close {
-    .ant-tabs-close-x {
-      opacity: 0% !important;
+    .ant-tabs-tab-remove {
+      opacity: 0 !important;
     }
   }
 

src/layouts/default/tabs/index.vue

@@ -18,7 +18,7 @@
         </TabPane>
       </template>
 
-      <template #tabBarExtraContent v-if="getShowRedo || getShowQuick">
+      <template #rightExtra v-if="getShowRedo || getShowQuick">
         <TabRedo v-if="getShowRedo" />
         <TabContent isExtra :tabItem="$route" v-if="getShowQuick" />
         <FoldButton v-if="getShowFold" />
@@ -127,8 +127,6 @@
         tabStore.closeTabByKey(targetKey, router);
       }
       return {
-        prefixCls,
-        unClose,
         getWrapClass,
         handleEdit,
         handleChange,

src/layouts/default/tabs/useMultipleTabs.ts

@@ -56,7 +56,9 @@ export function useTabsDrag(affixTextList: string[]) {
   const { prefixCls } = useDesign('multiple-tabs');
   nextTick(() => {
     if (!multiTabsSetting.canDrag) return;
-    const el = document.querySelectorAll(`.${prefixCls} .ant-tabs-nav > div`)?.[0] as HTMLElement;
+    const el = document.querySelectorAll(
+      `.${prefixCls} .ant-tabs-nav-wrap > div`,
+    )?.[0] as HTMLElement;
     const { initSortable } = useSortable(el, {
       filter: (e: ChangeEvent) => {
         const text = e?.target?.innerText;