feat: Menu enables vue-router mode (#7681)

frontend/src/components/layout-content/index.vue

@@ -36,7 +36,7 @@
                             </template>
                         </back-button>
 
-                        <span v-else class="flex justify-between items-start sm:items-center flex-col sm:flex-row">
+                        <span v-else>
                             {{ title }}
                             <span v-if="slots.buttons">
                                 <el-divider direction="vertical" />

frontend/src/layout/components/Sidebar/index.vue

@@ -13,7 +13,7 @@
         <el-scrollbar>
             <el-menu
                 :default-active="activeMenu"
-                :router="menuRouter"
+                :router="true"
                 :collapse="isCollapse"
                 :collapse-transition="false"
                 :unique-opened="true"
@@ -21,12 +21,12 @@
                 class="custom-menu"
             >
                 <SubItem :menuList="routerMenus" />
-                <el-menu-item :index="''">
-                    <el-icon @click="logout">
+                <el-menu-item :index="''" @click="logout">
+                    <el-icon>
                         <SvgIcon :iconName="'p-logout'" />
                     </el-icon>
                     <template #title>
-                        <span @click="logout">{{ $t('commons.login.logout') }}</span>
+                        <span>{{ $t('commons.login.logout') }}</span>
                     </template>
                 </el-menu-item>
             </el-menu>
@@ -55,13 +55,7 @@ import PrimaryMenu from '@/assets/images/menu-bg.svg?component';
 const route = useRoute();
 const menuStore = MenuStore();
 const globalStore = GlobalStore();
-defineProps({
-    menuRouter: {
-        type: Boolean,
-        default: true,
-        required: false,
-    },
-});
+
 const activeMenu = computed(() => {
     const { meta, path } = route;
     return isString(meta.activeMenu) ? meta.activeMenu : path;
@@ -201,13 +195,6 @@ onMounted(() => {
     line-height: normal;
 }
 
-.custom-menu .el-menu-item {
-    white-space: normal !important;
-    word-break: break-word;
-    overflow-wrap: break-word;
-    line-height: normal;
-}
-
 .sidebar-container {
     position: relative;
     display: flex;

frontend/src/layout/index.vue

@@ -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" v-if="!globalStore.isFullScreen">
-            <Sidebar @menu-click="handleMenuClick" :menu-router="!classObj.openMenuTabs" />
+            <Sidebar @menu-click="handleMenuClick" />
         </div>
 
         <div class="main-container">

frontend/vite.config.ts

@@ -85,7 +85,7 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
         ],
         esbuild: {
             pure: viteEnv.VITE_DROP_CONSOLE ? ['console.log'] : [],
-            drop: viteEnv.VITE_DROP_CONSOLE ? ['debugger'] : [],
+            drop: viteEnv.VITE_DROP_CONSOLE && process.env.NODE_ENV === 'production' ? ['debugger'] : [],
         },
         build: {
             outDir: '../cmd/server/web',