chore: cleanup

src/hooks/setting/useMultipleTabSetting.ts

@@ -8,8 +8,6 @@ export function useMultipleTabSetting() {
 
   const getShowMultipleTab = computed(() => appStore.getMultiTabsSetting.show)
 
-  const getShowMultipleTabIcon = computed(() => appStore.getMultiTabsSetting.showIcon)
-
   const getShowQuick = computed(() => appStore.getMultiTabsSetting.showQuick)
 
   const getShowRedo = computed(() => appStore.getMultiTabsSetting.showRedo)
@@ -24,7 +22,6 @@ export function useMultipleTabSetting() {
   return {
     setMultipleTabSetting,
     getShowMultipleTab,
-    getShowMultipleTabIcon,
     getShowQuick,
     getShowRedo,
     getShowFold,

src/hooks/setting/useRootSetting.ts

@@ -36,8 +36,6 @@ export function useRootSetting() {
 
   const getThemeColor = computed(() => appStore.getProjectConfig.themeColor)
 
-  const getShowBreadCrumbIcon = computed(() => appStore.getProjectConfig.showBreadCrumbIcon)
-
   const getFullContent = computed(() => appStore.getProjectConfig.fullContent)
 
   const getColorWeak = computed(() => appStore.getProjectConfig.colorWeak)
@@ -76,7 +74,6 @@ export function useRootSetting() {
     getShowLogo,
     getUseErrorHandle,
     getShowBreadCrumb,
-    getShowBreadCrumbIcon,
     getUseOpenBackTop,
     getShowSettingButton,
     getShowFooter,

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

@@ -27,7 +27,6 @@ defineProps({
 const routes = ref<RouteLocationMatched[]>([])
 const { currentRoute } = useRouter()
 const { prefixCls } = useDesign('layout-breadcrumb')
-const { getShowBreadCrumbIcon } = useRootSetting()
 const go = useGo()
 
 const { t } = useI18n()
@@ -122,17 +121,12 @@ function handleClick(route: RouteLocationMatched, paths: string[], e: Event) {
 function hasRedirect(routes: RouteLocationMatched[], route: RouteLocationMatched) {
   return routes.indexOf(route) !== routes.length - 1
 }
-
-function getIcon(route) {
-  return route.icon || route.meta?.icon
-}
 </script>
 
 <template>
   <div :class="[prefixCls, `${prefixCls}--${theme}`]">
     <Breadcrumb :routes="routes">
       <template #itemRender="{ route, routes: routesMatched, paths }">
-        <Icon v-if="getShowBreadCrumbIcon && getIcon(route)" :icon="getIcon(route)" />
         <span v-if="!hasRedirect(routesMatched, route)">
           {{ t(route.name || route.meta.title) }}
         </span>

src/layouts/default/setting/SettingDrawer.tsx

@@ -35,7 +35,6 @@ export default defineComponent({
       getContentMode,
       getShowFooter,
       getShowBreadCrumb,
-      getShowBreadCrumbIcon,
       getShowLogo,
       getFullContent,
       getColorWeak,
@@ -70,7 +69,7 @@ export default defineComponent({
 
     const { getShowHeader, getFixed: getHeaderFixed, getHeaderBgColor, getShowSearch } = useHeaderSetting()
 
-    const { getShowMultipleTab, getShowMultipleTabIcon, getShowQuick, getShowRedo, getShowFold, getAutoCollapse } = useMultipleTabSetting()
+    const { getShowMultipleTab, getShowQuick, getShowRedo, getShowFold, getAutoCollapse } = useMultipleTabSetting()
 
     const getShowMenuRef = computed(() => {
       return unref(getShowMenu) && !unref(getIsHorizontal)
@@ -249,22 +248,8 @@ export default defineComponent({
             disabled={!unref(getShowHeader)}
           />
 
-          <SwitchItem
-            title={t('layout.setting.breadcrumbIcon')}
-            event={HandlerEnum.SHOW_BREADCRUMB_ICON}
-            def={unref(getShowBreadCrumbIcon)}
-            disabled={!unref(getShowHeader)}
-          />
-
           <SwitchItem title={t('layout.setting.tabs')} event={HandlerEnum.TABS_SHOW} def={unref(getShowMultipleTab)} />
 
-          <SwitchItem
-            title={t('layout.setting.tabsIcon')}
-            event={HandlerEnum.TABS_SHOW_ICON}
-            def={unref(getShowMultipleTabIcon)}
-            disabled={!unref(getShowMultipleTab)}
-          />
-
           <SwitchItem
             title={t('layout.setting.tabsRedoBtn')}
             event={HandlerEnum.TABS_SHOW_REDO}

src/layouts/default/tabs/components/TabContent.vue

@@ -9,7 +9,6 @@ import { Icon } from '@/components/Icon'
 
 import { useDesign } from '@/hooks/web/useDesign'
 import { useI18n } from '@/hooks/web/useI18n'
-import { useMultipleTabSetting } from '@/hooks/setting/useMultipleTabSetting'
 
 defineOptions({ name: 'TabContent' })
 
@@ -30,25 +29,10 @@ const getTitle = computed(() => {
 
 const getIsTabs = computed(() => !props.isExtra)
 
-const prefixIconType = computed(() => {
-  if (props.tabItem.meta.icon)
-    return props.tabItem.meta.icon
-  else if (props.tabItem.path === '/dashboard/analysis')
-    return 'ant-design:home-outlined'
-  else
-    return 'ant-design:code'
-})
-
 const getTrigger = computed((): ('contextmenu' | 'click' | 'hover')[] => (unref(getIsTabs) ? ['contextmenu'] : ['click']))
 
 const { getDropMenuList, handleMenuEvent, handleContextMenu } = useTabDropdown(props as TabContentProps, getIsTabs)
 
-const { getShowMultipleTabIcon } = useMultipleTabSetting()
-
-const getShowTabsIcon = computed(() => {
-  return unref(getShowMultipleTabIcon)
-})
-
 function handleContext(e) {
   props.tabItem && handleContextMenu(props.tabItem)(e)
 }
@@ -63,9 +47,6 @@ function handleContext(e) {
     @menu-event="handleMenuEvent"
   >
     <div v-if="getIsTabs" :class="`${prefixCls}__info`" @contextmenu="handleContext">
-      <span v-if="getShowTabsIcon" :class="`${prefixCls}__prefix-icon`" @click="handleContext">
-        <Icon :icon="prefixIconType" />
-      </span>
       <span class="ml-1">{{ getTitle }}</span>
     </div>
     <span v-else :class="`${prefixCls}__extra-quick`" @click="handleContext">

src/layouts/default/tabs/index.less

@@ -35,7 +35,6 @@
   .ant-tabs.ant-tabs-card {
     .ant-tabs-nav {
       height: @multiple-height;
-      // padding-left: 10px;
       margin: 0;
       background-color: var(--component-background);
       border: 0;
@@ -50,27 +49,12 @@
         position: relative;
         z-index: 1;
         height: @multiple-height;
-        padding: 0 6px;
-        margin: 0 -14px 0 0 !important;
+        padding: 0 8px;
         line-height: @multiple-height;
         border-radius: 8px 8px 0 0;
-        /* stylelint-disable-next-line function-url-quotes */
-        mask: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANoAAAAkBAMAAAAdqzmBAAAAMFBMVEVHcEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlTPQ5AAAAD3RSTlMAr3DvEM8wgCBA379gj5//tJBPAAAAnUlEQVRIx2NgAAM27fj/tAO/xBsYkIHyf9qCT8iWMf6nNQhAsk2f5rYheY7Dnua2/U+A28ZEe8v+F9Ax2v7/F4DbxkUH2wzgtvHTwbYPo7aN2jZq26hto7aN2jZq25Cy7Qvctnw62PYNbls9HWz7S8/G6//PsI6H4396gAUQy1je08W2jxDbpv6nD4gB2uWp+J9eYPsEhv/0BPS1DQBvoBLVZ3BppgAAAABJRU5ErkJggg==);
-        transition: padding 0.3s;
-        mask-size: 100% 100%;
 
         &:hover {
-          z-index: 2;
-          padding: 0 12px;
-
-          .ant-tabs-tab-remove .anticon-close {
-            opacity: 1;
-
-            &:hover {
-              color: #fff;
-              background-color: #c0c4cc;
-            }
-          }
+          color: #004b89;
         }
 
         .ant-tabs-tab-remove {
@@ -89,15 +73,7 @@
             color: inherit;
             vertical-align: middle;
             border-radius: 100%;
-            opacity: 0;
-            transition: opacity 0.15s;
             transform-origin: 100% 50%;
-
-            &:hover {
-              svg {
-                fill: #fff;
-              }
-            }
           }
         }
 
@@ -112,43 +88,29 @@
         }
 
         &:first-child {
-          padding: 0 6px !important;
+          padding: 0 8px !important;
         }
 
         &:active {
-          padding: 0 6px !important;
+          padding: 0 8px !important;
         }
       }
 
       .ant-tabs-tab-active {
-        position: relative;
-        z-index: 3;
-        padding: 0 6px;
-        font-weight: inherit;
         background: #004b89;
-        border: 0;
 
         .ant-tabs-tab-btn {
           color: #fff;
         }
-
-        .ant-tabs-tab-remove .anticon-close {
-          opacity: 1;
-
-          svg {
-            width: 0.6em;
-            fill: #fff;
-          }
-        }
-
-        svg {
-          width: inherit;
+        .anticon-close svg {
+          width: 0.6em;
+          fill: #fff;
         }
       }
     }
 
     .ant-tabs-nav > div:nth-child(1) {
-      padding: 0 6px;
+      padding: 0 8px;
 
       .ant-tabs-tab {
         margin-right: 2px !important;