fix: fix missing page refresh parameters

vben
1 parent 66acb21e
Showing 11 changed files with 81 additions and 39 deletions
src/components/Breadcrumb/Breadcrumb.vue
src/components/Form/src/BasicForm.vue
src/components/Menu/src/index.less
src/design/var/index.less
src/hooks/web/useTabs.ts
src/layouts/default/LayoutHeader.tsx
src/layouts/default/actions/notice/NoticeActionItem.vue
src/layouts/default/index.less
src/layouts/default/multitabs/index.less
src/layouts/default/multitabs/index.tsx
src/settings/projectSetting.ts
@@ -37,7 +37,7 @@
   .breadcrumb {
     height: @header-height;
     padding-right: 20px;
-    font-size: 14px;
+    font-size: 12px;
     line-height: @header-height;
     // line-height: 1;
  
@@ -74,7 +74,7 @@
  
       const getMergePropsRef = computed(
         (): FormProps => {
-          return deepMerge(props, unref(propsRef));
+          return deepMerge(cloneDeep(props), unref(propsRef));
         }
       );
       // 获取表单基本配置
@@ -118,7 +118,7 @@
         .ant-menu-submenu-open,
         .ant-menu-item-selected,
         .ant-menu-submenu-selected {
-          color: @white !important;
+          color: @primary-color !important;
           border-bottom: 3px solid @primary-color;
         }
  
@@ -127,7 +127,7 @@
         .ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open,
         .ant-menu-submenu-active,
         .ant-menu-submenu-title:hover {
-          color: @white !important;
+          color: @primary-color !important;
           border-bottom: 3px solid @primary-color;
         }
  
@@ -6,7 +6,7 @@
 @multiple-height: 36px;
  
 // headers
-@header-height: 42px;
+@header-height: 36px;
  
 // logo width
 @logo-width: 40px;
@@ -90,15 +90,25 @@ export function useTabs() {
     closeOther: () => canIUseFn() && closeOther(tabStore.getCurrentTab),
     closeCurrent: () => canIUseFn() && closeCurrent(tabStore.getCurrentTab),
     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);
  
       if (!to) return;
       useTimeout(() => {
         tabStore.addTabByPathAction();
       }, 0);
+      const { replace, query = {}, params = {} } = opt || {};
       activeKeyRef.value = path;
-      goTo && replace ? router.replace : router.push(path);
+      const data = {
+        path,
+        query,
+        params,
+      };
+      goTo && replace ? router.replace(data) : router.push(data);
     },
     activeKeyRef,
   };
@@ -20,7 +20,6 @@ import { GITHUB_URL } from &#39;/@/settings/siteSetting&#39;;
 import LockAction from './actions/LockActionItem';
 import { useModal } from '/@/components/Modal/index';
 import { errorStore } from '/@/store/modules/error';
-import { useGo } from '/@/hooks/web/usePage';
 import { useWindowSizeFn } from '/@/hooks/event/useWindowSize';
 import NoticeAction from './actions/notice/NoticeActionItem.vue';
  
@@ -28,11 +27,10 @@ export default defineComponent({
   name: 'DefaultLayoutHeader',
   setup() {
     const widthRef = ref(200);
-    const { refreshPage } = useTabs();
+    const { refreshPage, addTab } = useTabs();
     const [register, { openModal }] = useModal();
     const { toggleFullscreen, isFullscreenRef } = useFullscreen();
  
-    const go = useGo();
     const getProjectConfigRef = computed(() => {
       return appStore.getProjectConfig;
     });
@@ -72,7 +70,7 @@ export default defineComponent({
  
     function handleToErrorList() {
       errorStore.commitErrorListCountState(0);
-      go('/exception/error-log');
+      addTab('/exception/error-log', true);
     }
  
     /**
@@ -175,12 +173,8 @@ export default defineComponent({
                   <div>
                     <Tooltip>
                       {{
-                        title: () => '消息中心',
-                        default: () => (
-                          <div class={`layout-header__action-item`}>
-                            <NoticeAction />
-                          </div>
-                        ),
+                        title: () => '消息通知',
+                        default: () => <NoticeAction />,
                       }}
                     </Tooltip>
                   </div>
 <template>
-  <div>
+  <div class="layout-header__action-item notify-action">
     <Popover title="" trigger="click">
       <Badge :count="count" :numberStyle="numberStyle">
         <BellOutlined class="layout-header__action-icon" />
@@ -43,22 +43,25 @@
     },
   });
 </script>
-<style lang="less" scoped>
-  /deep/ .ant-tabs-tab {
-    padding-top: 8px;
-    margin-right: 12px;
-  }
+<style lang="less">
+  .notify-action {
+    padding-top: 2px;
  
-  /deep/ .ant-tabs-content {
-    width: 300px;
-  }
+    .ant-tabs-content {
+      width: 300px;
+    }
  
-  /deep/ .ant-badge {
-    font-size: 18px;
+    .ant-badge {
+      font-size: 18px;
  
-    .ant-badge-multiple-words {
-      padding: 0 4px;
-      transform: translate(26%, -48%);
+      .ant-badge-multiple-words {
+        padding: 0 4px;
+        transform: translate(26%, -40%);
+      }
+
+      svg {
+        width: 0.9em;
+      }
     }
   }
 </style>
@@ -194,6 +194,11 @@
   }
 }
  
+.ant-layout-header {
+  height: @header-height;
+  line-height: @header-height;
+}
+
 .layout-header {
   display: flex;
   height: @header-height;
@@ -336,12 +341,12 @@
       display: flex;
       align-items: center;
       height: @header-height;
-      font-size: 1.3em;
+      font-size: 1.1em;
       cursor: pointer;
     }
  
     &-icon {
-      padding: 0 12px;
+      padding: 0 8px;
     }
   }
  
@@ -362,13 +367,14 @@
 .user-dropdown {
   display: flex;
   height: 100%;
+  font-size: 12px;
   cursor: pointer;
   align-items: center;
  
   img {
-    width: 32px;
-    height: 32px;
-    margin-right: 24px;
+    width: 26px;
+    height: 26px;
+    margin-right: 16px;
   }
  
   &__header {
@@ -404,7 +410,7 @@
   }
  
   &__name {
-    font-size: 14px;
+    font-size: 12px;
   }
  
   &__desc {
@@ -7,6 +7,19 @@
     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-card-bar {
       height: @multiple-height;
@@ -114,6 +127,10 @@
   }
 }
  
+.ant-tabs-extra-content {
+  line-height: @multiple-height;
+}
+
 .multiple-tabs-content {
   &__extra {
     display: inline-block;
@@ -35,7 +35,11 @@ export default defineComponent({
     const { currentRoute } = useRouter();
     const { addTab, activeKeyRef } = useTabs();
     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
@@ -60,6 +64,14 @@ export default defineComponent({
         // 监听路由的话虽然可以，但是路由切换的时间会造成卡顿现象？
         // 使用useTab的addTab的话，当用户手动调转，需要自行调用addTab
         // 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,
@@ -96,7 +96,7 @@ const setting: ProjectConfig = {
   showBreadCrumb: true,
  
   // 使用error-handler-plugin
-  useErrorHandle: isProdMode(),
+  useErrorHandle: true,
  
   //  开启页面切换动画
   openRouterTransition: true,