feat: Menu enables vue-router mode

[lan-yonghui]

No description provided.

[f2c-ci-robot]

Adding the "do-not-merge/release-note-label-needed" label because no release-note block was detected, please follow our release note process to remove it.

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

[wanghe-fit2cloud]

No significant issues were found; however, there are some minor improvements that can be made to enhance readability and maintainability:

1. Simplify Props Definition: The menuRouter prop has been removed as it's not being used inside the component. This line of code should be commented out if you want to remove it permanently.

-defineProps({

• menuRouter: {

•    type: Boolean,
  

•    default: true,
  

•    required: false,
  

• },
  -});

2. **Remove Extra White Space in CSS Rule**: There seems to be extra whitespace at the beginning of the `.custom-menu .el-menu-item` rule, which might lead to unintended behavior. It should be cleaned up.

   ```diff
--.custom-menu .el-menu-item {
-    white-space: normal !important;
-    word-break: break-word;
-    overflow-wrap: break-word;
-    line-height: normal;
 }

These changes will make the code cleaner and more readable without introducing any functionality loss.

[wanghe-fit2cloud]

There is no visible issue in the code snippet provided between lines 36 and 40 of the difference file. The changes appear to be simply refactoring the v-if statement, which should not affect functionality or layout.

If you want me to perform more thorough checks or provide additional suggestions based on broader code context or specific requirements, please let me know!

[wanghe-fit2cloud]

There is an inconsistency between the conditional rendering of both Sidebar components based on the values of classObj.mobile, classObj.openSidebar, and globalStore.isFullScreen. In one instance (v-if="!globalStore.isFullScreen"), you're conditionally showing the Sidebar while also checking if either classObj.mobile or classObj.openSidebar is true. This could result in multiple instances of the Sidebar being rendered in certain scenarios.

Here's a revised version with consistent logic:

@@ -2,7 +2,7 @@
     <div :class="classObj" class="app-wrapper" v-loading="loading" :element-loading-text="loadingText" fullscreen>
         <div v-if="classObj.mobile && classObj.openSidebar" class="drawer-bg" @click="handleClickOutside" />
         <div class="app-sidebar" :key="sidebarKey"
-          v-if=" !classObj.mobile || globalStore.isFullScreen">
+             v-if=" globalStore.isFullScreen || (classObj.mobile && classObj.openSideBar) ">

In this revision, I've consolidated the conditions so that only one instance of Sidebar is displayed under normal usage where neither classObj.mobile nor globalStore.isFullScreen is true. The sidebar remains visible when the screen is not full but user settings permit it to be open using classObj.openMenuTabs.

Additionally, adding a unique key (:key="sidebarKey") helps React manage re-rendering correctly for dynamic content updates. Ensure that there exists at least one initial state value assignable to sidebarKey.

After making these changes, ensure that your Vuex store (globalStore) correctly stores the appropriate states related to mobile view toggles and sidebars.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[wanghe-fit2cloud]

/lgtm

[wanghe-fit2cloud]

/approve

[f2c-ci-robot]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: wanghe-fit2cloud

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

• OWNERS [wanghe-fit2cloud]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment