From 3dae225d796be8c58dcaf0cdd01c8800691ba89b Mon Sep 17 00:00:00 2001
From: K <1175047471@qq.com>
Date: Fri, 5 Jan 2024 15:11:49 +0800
Subject: [PATCH] chore: cleanup
---
src/hooks/setting/useMultipleTabSetting.ts | 3 --
src/hooks/setting/useRootSetting.ts | 3 --
.../default/header/components/Breadcrumb.vue | 6 ---
src/layouts/default/setting/SettingDrawer.tsx | 17 +-----
.../default/tabs/components/TabContent.vue | 19 -------
src/layouts/default/tabs/index.less | 54 +++----------------
6 files changed, 9 insertions(+), 93 deletions(-)
diff --git a/src/hooks/setting/useMultipleTabSetting.ts b/src/hooks/setting/useMultipleTabSetting.ts
index 8550fa47..e2b03219 100644
--- a/src/hooks/setting/useMultipleTabSetting.ts
+++ b/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,
diff --git a/src/hooks/setting/useRootSetting.ts b/src/hooks/setting/useRootSetting.ts
index 3c9bdef3..bbff1ec8 100644
--- a/src/hooks/setting/useRootSetting.ts
+++ b/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,
diff --git a/src/layouts/default/header/components/Breadcrumb.vue b/src/layouts/default/header/components/Breadcrumb.vue
index 6a62a425..d185afeb 100644
--- a/src/layouts/default/header/components/Breadcrumb.vue
+++ b/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>
diff --git a/src/layouts/default/setting/SettingDrawer.tsx b/src/layouts/default/setting/SettingDrawer.tsx
index 38fbc7a7..824a772a 100644
--- a/src/layouts/default/setting/SettingDrawer.tsx
+++ b/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}
diff --git a/src/layouts/default/tabs/components/TabContent.vue b/src/layouts/default/tabs/components/TabContent.vue
index 34ea899c..2e2da49f 100644
--- a/src/layouts/default/tabs/components/TabContent.vue
+++ b/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">
diff --git a/src/layouts/default/tabs/index.less b/src/layouts/default/tabs/index.less
index a84cf27f..cb63fbb6 100644
--- a/src/layouts/default/tabs/index.less
+++ b/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;