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;