提交 349d1978 作者: vben

fix: fix missing page refresh parameters

上级 66acb21e
...@@ -37,7 +37,7 @@ ...@@ -37,7 +37,7 @@
.breadcrumb { .breadcrumb {
height: @header-height; height: @header-height;
padding-right: 20px; padding-right: 20px;
font-size: 14px; font-size: 12px;
line-height: @header-height; line-height: @header-height;
// line-height: 1; // line-height: 1;
......
...@@ -74,7 +74,7 @@ ...@@ -74,7 +74,7 @@
const getMergePropsRef = computed( const getMergePropsRef = computed(
(): FormProps => { (): FormProps => {
return deepMerge(props, unref(propsRef)); return deepMerge(cloneDeep(props), unref(propsRef));
} }
); );
// 获取表单基本配置 // 获取表单基本配置
......
...@@ -118,7 +118,7 @@ ...@@ -118,7 +118,7 @@
.ant-menu-submenu-open, .ant-menu-submenu-open,
.ant-menu-item-selected, .ant-menu-item-selected,
.ant-menu-submenu-selected { .ant-menu-submenu-selected {
color: @white !important; color: @primary-color !important;
border-bottom: 3px solid @primary-color; border-bottom: 3px solid @primary-color;
} }
...@@ -127,7 +127,7 @@ ...@@ -127,7 +127,7 @@
.ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open, .ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open,
.ant-menu-submenu-active, .ant-menu-submenu-active,
.ant-menu-submenu-title:hover { .ant-menu-submenu-title:hover {
color: @white !important; color: @primary-color !important;
border-bottom: 3px solid @primary-color; border-bottom: 3px solid @primary-color;
} }
......
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
@multiple-height: 36px; @multiple-height: 36px;
// headers // headers
@header-height: 42px; @header-height: 36px;
// logo width // logo width
@logo-width: 40px; @logo-width: 40px;
......
...@@ -90,15 +90,25 @@ export function useTabs() { ...@@ -90,15 +90,25 @@ export function useTabs() {
closeOther: () => canIUseFn() && closeOther(tabStore.getCurrentTab), closeOther: () => canIUseFn() && closeOther(tabStore.getCurrentTab),
closeCurrent: () => canIUseFn() && closeCurrent(tabStore.getCurrentTab), closeCurrent: () => canIUseFn() && closeCurrent(tabStore.getCurrentTab),
resetCache: () => canIUseFn() && resetCache(), resetCache: () => canIUseFn() && resetCache(),
addTab: (path: PageEnum, goTo = false, replace = false) => { addTab: (
path: PageEnum | string,
goTo = false,
opt?: { replace?: boolean; query?: any; params?: any }
) => {
const to = getTo(path); const to = getTo(path);
if (!to) return; if (!to) return;
useTimeout(() => { useTimeout(() => {
tabStore.addTabByPathAction(); tabStore.addTabByPathAction();
}, 0); }, 0);
const { replace, query = {}, params = {} } = opt || {};
activeKeyRef.value = path; activeKeyRef.value = path;
goTo && replace ? router.replace : router.push(path); const data = {
path,
query,
params,
};
goTo && replace ? router.replace(data) : router.push(data);
}, },
activeKeyRef, activeKeyRef,
}; };
......
...@@ -20,7 +20,6 @@ import { GITHUB_URL } from '/@/settings/siteSetting'; ...@@ -20,7 +20,6 @@ import { GITHUB_URL } from '/@/settings/siteSetting';
import LockAction from './actions/LockActionItem'; import LockAction from './actions/LockActionItem';
import { useModal } from '/@/components/Modal/index'; import { useModal } from '/@/components/Modal/index';
import { errorStore } from '/@/store/modules/error'; import { errorStore } from '/@/store/modules/error';
import { useGo } from '/@/hooks/web/usePage';
import { useWindowSizeFn } from '/@/hooks/event/useWindowSize'; import { useWindowSizeFn } from '/@/hooks/event/useWindowSize';
import NoticeAction from './actions/notice/NoticeActionItem.vue'; import NoticeAction from './actions/notice/NoticeActionItem.vue';
...@@ -28,11 +27,10 @@ export default defineComponent({ ...@@ -28,11 +27,10 @@ export default defineComponent({
name: 'DefaultLayoutHeader', name: 'DefaultLayoutHeader',
setup() { setup() {
const widthRef = ref(200); const widthRef = ref(200);
const { refreshPage } = useTabs(); const { refreshPage, addTab } = useTabs();
const [register, { openModal }] = useModal(); const [register, { openModal }] = useModal();
const { toggleFullscreen, isFullscreenRef } = useFullscreen(); const { toggleFullscreen, isFullscreenRef } = useFullscreen();
const go = useGo();
const getProjectConfigRef = computed(() => { const getProjectConfigRef = computed(() => {
return appStore.getProjectConfig; return appStore.getProjectConfig;
}); });
...@@ -72,7 +70,7 @@ export default defineComponent({ ...@@ -72,7 +70,7 @@ export default defineComponent({
function handleToErrorList() { function handleToErrorList() {
errorStore.commitErrorListCountState(0); errorStore.commitErrorListCountState(0);
go('/exception/error-log'); addTab('/exception/error-log', true);
} }
/** /**
...@@ -175,12 +173,8 @@ export default defineComponent({ ...@@ -175,12 +173,8 @@ export default defineComponent({
<div> <div>
<Tooltip> <Tooltip>
{{ {{
title: () => '消息中心', title: () => '消息通知',
default: () => ( default: () => <NoticeAction />,
<div class={`layout-header__action-item`}>
<NoticeAction />
</div>
),
}} }}
</Tooltip> </Tooltip>
</div> </div>
......
<template> <template>
<div> <div class="layout-header__action-item notify-action">
<Popover title="" trigger="click"> <Popover title="" trigger="click">
<Badge :count="count" :numberStyle="numberStyle"> <Badge :count="count" :numberStyle="numberStyle">
<BellOutlined class="layout-header__action-icon" /> <BellOutlined class="layout-header__action-icon" />
...@@ -43,22 +43,25 @@ ...@@ -43,22 +43,25 @@
}, },
}); });
</script> </script>
<style lang="less" scoped> <style lang="less">
/deep/ .ant-tabs-tab { .notify-action {
padding-top: 8px; padding-top: 2px;
margin-right: 12px;
}
/deep/ .ant-tabs-content { .ant-tabs-content {
width: 300px; width: 300px;
} }
/deep/ .ant-badge { .ant-badge {
font-size: 18px; font-size: 18px;
.ant-badge-multiple-words { .ant-badge-multiple-words {
padding: 0 4px; padding: 0 4px;
transform: translate(26%, -48%); transform: translate(26%, -40%);
}
svg {
width: 0.9em;
}
} }
} }
</style> </style>
...@@ -194,6 +194,11 @@ ...@@ -194,6 +194,11 @@
} }
} }
.ant-layout-header {
height: @header-height;
line-height: @header-height;
}
.layout-header { .layout-header {
display: flex; display: flex;
height: @header-height; height: @header-height;
...@@ -336,12 +341,12 @@ ...@@ -336,12 +341,12 @@
display: flex; display: flex;
align-items: center; align-items: center;
height: @header-height; height: @header-height;
font-size: 1.3em; font-size: 1.1em;
cursor: pointer; cursor: pointer;
} }
&-icon { &-icon {
padding: 0 12px; padding: 0 8px;
} }
} }
...@@ -362,13 +367,14 @@ ...@@ -362,13 +367,14 @@
.user-dropdown { .user-dropdown {
display: flex; display: flex;
height: 100%; height: 100%;
font-size: 12px;
cursor: pointer; cursor: pointer;
align-items: center; align-items: center;
img { img {
width: 32px; width: 26px;
height: 32px; height: 26px;
margin-right: 24px; margin-right: 16px;
} }
&__header { &__header {
...@@ -404,7 +410,7 @@ ...@@ -404,7 +410,7 @@
} }
&__name { &__name {
font-size: 14px; font-size: 12px;
} }
&__desc { &__desc {
......
...@@ -7,6 +7,19 @@ ...@@ -7,6 +7,19 @@
height: @multiple-height; height: @multiple-height;
} }
// .ant-tabs:not(.ant-tabs-card) {
// .ant-tabs-nav-container {
// height: @multiple-height;
// background: @white;
// }
// .ant-tabs-tab {
// font-size: 14px;
// line-height: 1.5515;
// background: @white;
// }
// }
.ant-tabs.ant-tabs-card { .ant-tabs.ant-tabs-card {
.ant-tabs-card-bar { .ant-tabs-card-bar {
height: @multiple-height; height: @multiple-height;
...@@ -114,6 +127,10 @@ ...@@ -114,6 +127,10 @@
} }
} }
.ant-tabs-extra-content {
line-height: @multiple-height;
}
.multiple-tabs-content { .multiple-tabs-content {
&__extra { &__extra {
display: inline-block; display: inline-block;
......
...@@ -35,7 +35,11 @@ export default defineComponent({ ...@@ -35,7 +35,11 @@ export default defineComponent({
const { currentRoute } = useRouter(); const { currentRoute } = useRouter();
const { addTab, activeKeyRef } = useTabs(); const { addTab, activeKeyRef } = useTabs();
onMounted(() => { onMounted(() => {
addTab(unref(currentRoute).path as PageEnum); const route = unref(currentRoute);
addTab(unref(currentRoute).path as PageEnum, false, {
query: route.query,
params: route.params,
});
}); });
// 当前激活tab // 当前激活tab
...@@ -60,6 +64,14 @@ export default defineComponent({ ...@@ -60,6 +64,14 @@ export default defineComponent({
// 监听路由的话虽然可以,但是路由切换的时间会造成卡顿现象? // 监听路由的话虽然可以,但是路由切换的时间会造成卡顿现象?
// 使用useTab的addTab的话,当用户手动调转,需要自行调用addTab // 使用useTab的addTab的话,当用户手动调转,需要自行调用addTab
// tabStore.commitAddTab((unref(currentRoute) as unknown) as AppRouteRecordRaw); // tabStore.commitAddTab((unref(currentRoute) as unknown) as AppRouteRecordRaw);
// const { affix } = currentRoute.value.meta || {};
// if (affix) return;
// const hasInTab = tabStore.getTabsState.some(
// (item) => item.fullPath === currentRoute.value.fullPath
// );
// if (!hasInTab) {
// tabStore.commitAddTab((unref(currentRoute) as unknown) as AppRouteRecordRaw);
// }
}, },
{ {
immediate: true, immediate: true,
......
...@@ -96,7 +96,7 @@ const setting: ProjectConfig = { ...@@ -96,7 +96,7 @@ const setting: ProjectConfig = {
showBreadCrumb: true, showBreadCrumb: true,
// 使用error-handler-plugin // 使用error-handler-plugin
useErrorHandle: isProdMode(), useErrorHandle: true,
// 开启页面切换动画 // 开启页面切换动画
openRouterTransition: true, openRouterTransition: true,
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论