fix: 专业版菜单选择显示前端优化 (#4399)

Co-authored-by: zhoujunhong <1298308460@qq.com>

backend/init/migration/migrations/v_1_10.go

@@ -29,7 +29,7 @@ var AddDatabaseIsDelete = &gormigrate.Migration{
 var AddXpackHideMenu = &gormigrate.Migration{
 	ID: "20240328-add-xpack-hide-menu",
 	Migrate: func(tx *gorm.DB) error {
-		if err := tx.Create(&model.Setting{Key: "XpackHideMenu", Value: "{\"id\":\"1\",\"label\":\"/xpack\",\"isCheck\":false,\"title\":\"xpack.menu\",\"children\":[{\"id\":\"2\",\"title\":\"xpack.waf.name\",\"path\":\"/xpack/waf/dashboard\",\"label\":\"Dashboard\",\"isCheck\":false},{\"id\":\"3\",\"title\":\"xpack.tamper.tamper\",\"path\":\"/xpack/tamper\",\"label\":\"Tamper\",\"isCheck\":true},{\"id\":\"4\",\"title\":\"xpack.setting.setting\",\"path\":\"/xpack/setting\",\"label\":\"XSetting\",\"isCheck\":true}]}"}).Error; err != nil {
+		if err := tx.Create(&model.Setting{Key: "XpackHideMenu", Value: "{\"id\":\"1\",\"label\":\"/xpack\",\"isCheck\":true,\"title\":\"xpack.menu\",\"children\":[{\"id\":\"2\",\"title\":\"xpack.waf.name\",\"path\":\"/xpack/waf/dashboard\",\"label\":\"Dashboard\",\"isCheck\":true},{\"id\":\"3\",\"title\":\"xpack.tamper.tamper\",\"path\":\"/xpack/tamper\",\"label\":\"Tamper\",\"isCheck\":true},{\"id\":\"4\",\"title\":\"xpack.setting.setting\",\"path\":\"/xpack/setting\",\"label\":\"XSetting\",\"isCheck\":true}]}"}).Error; err != nil {
 			return err
 		}
 		return nil

frontend/src/lang/modules/en.ts

@@ -1457,10 +1457,11 @@ const message = {
         currentVersion: 'Version',
 
         license: 'License',
-        advancedMenuShow: 'Advanced Menu Display',
+        advancedMenuHide: 'Advanced Menu Hide',
         showMainAdvancedMenu:
             'If only one menu is retained, only the main advanced menu will be displayed in the sidebar',
         showAll: 'Show All',
+        hideALL: 'Hide All',
         ifShow: 'Whether to Show',
         menu: 'Menu',
         confirmMessage: 'The page will be refreshed to update the advanced menu list. Continue?',

frontend/src/lang/modules/tw.ts

@@ -1357,9 +1357,10 @@ const message = {
         currentVersion: '當前運行版本：',
 
         license: '許可證',
-        advancedMenuShow: '高級功能選單顯示',
+        advancedMenuHide: '高級功能選單隱藏',
         showMainAdvancedMenu: '如果只保留 1 個選單，則側邊欄只會顯示高級功能主選單',
         showAll: '全部顯示',
+        hideALL: '全部隱藏',
         ifShow: '是否顯示',
         menu: '選單',
         confirmMessage: '即將刷新頁面更新高級功能菜單列表，是否繼續？',

frontend/src/lang/modules/zh.ts

@@ -1359,9 +1359,10 @@ const message = {
         currentVersion: '当前运行版本：',
 
         license: '许可证',
-        advancedMenuShow: '高级功能菜单显示',
+        advancedMenuHide: '高级功能菜单隐藏',
         showMainAdvancedMenu: '如果只保留 1 个菜单，则侧边栏只会显示高级功能主菜单',
         showAll: '全部显示',
+        hideALL: '全部隐藏',
         ifShow: '是否显示',
         menu: '菜单',
         confirmMessage: '即将刷新页面更新高级功能菜单列表，是否继续？',

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

@@ -100,7 +100,6 @@ const systemLogOut = async () => {
 };
 
 function extractLabels(node: Node, result: string[]): void {
-    // 未勾选的才隐藏
     if (node.isCheck) {
         result.push(node.label);
     }
@@ -135,6 +134,11 @@ const search = async () => {
                     }
                     if (child.hidden === false) {
                         menuChildren.push(child);
+                        if (checkedLabels.length === 2) {
+                            menuItem.meta.title = child.meta.title;
+                        } else {
+                            menuItem.meta.title = 'xpack.menu';
+                        }
                     }
                 });
                 menuItem.meta.hideInSidebar = false;

frontend/src/views/setting/panel/hidemenu/index.vue

@@ -2,7 +2,7 @@
     <div>
         <el-drawer v-model="drawerVisible" :destroy-on-close="true" :close-on-click-modal="false" size="30%">
             <template #header>
-                <DrawerHeader :header="$t('setting.advancedMenuShow')" :back="handleClose" />
+                <DrawerHeader :header="$t('setting.advancedMenuHide')" :back="handleClose" />
             </template>
 
             <ComplexTable
@@ -125,7 +125,7 @@ const handleClose = () => {
 };
 
 const saveHideMenus = async () => {
-    ElMessageBox.confirm(i18n.global.t('setting.confirmMessage'), i18n.global.t('setting.advancedMenuShow'), {
+    ElMessageBox.confirm(i18n.global.t('setting.confirmMessage'), i18n.global.t('setting.advancedMenuHide'), {
         confirmButtonText: i18n.global.t('commons.button.confirm'),
         cancelButtonText: i18n.global.t('commons.button.cancel'),
         type: 'info',

frontend/src/views/setting/panel/index.vue

@@ -102,7 +102,7 @@
                                 </el-input>
                             </el-form-item>
 
-                            <el-form-item :label="$t('setting.advancedMenuShow')">
+                            <el-form-item :label="$t('setting.advancedMenuHide')">
                                 <el-input disabled v-model="form.proHideMenus">
                                     <template #append>
                                         <el-button v-show="!show" @click="onChangeHideMenus" icon="Setting">
@@ -214,7 +214,7 @@ const search = async () => {
 };
 
 function extractTitles(node: Node, result: string[]): void {
-    if (node.isCheck && !node.children) {
+    if (!node.isCheck && !node.children) {
         result.push(i18n.t(node.title));
     }
     if (node.children) {
@@ -232,7 +232,7 @@ function getCheckedTitles(json: Node): string[] {
     }
     if (result.length === json.children.length) {
         result = [];
-        result.push(i18n.t('setting.showAll'));
+        result.push(i18n.t('setting.hideALL'));
     }
     return result;
 }