From 1e6fd9c3a00bc4e55b89eedc716078fda735d1d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=98=AD?= <yonghui.lan@fit2cloud.com>
Date: Fri, 3 Jul 2026 12:10:47 +0800
Subject: [PATCH] ref: Optimize menu settings (#13190)

---
 frontend/src/lang/modules/en.ts               |   1 +
 frontend/src/lang/modules/es-es.ts            |   1 +
 frontend/src/lang/modules/fa.ts               |   1 +
 frontend/src/lang/modules/ja.ts               |   1 +
 frontend/src/lang/modules/ko.ts               |   1 +
 frontend/src/lang/modules/ms.ts               |   1 +
 frontend/src/lang/modules/pt-br.ts            |   1 +
 frontend/src/lang/modules/ru.ts               |   1 +
 frontend/src/lang/modules/tr.ts               |   1 +
 frontend/src/lang/modules/zh-Hant.ts          |   1 +
 frontend/src/lang/modules/zh.ts               |   1 +
 .../views/setting/panel/hidemenu/index.vue    | 163 ++++++++++++++----
 frontend/src/views/setting/panel/index.vue    |  20 +--
 13 files changed, 142 insertions(+), 52 deletions(-)

diff --git a/frontend/src/lang/modules/en.ts b/frontend/src/lang/modules/en.ts
index a8c7523d2..ef5de4696 100644
--- a/frontend/src/lang/modules/en.ts
+++ b/frontend/src/lang/modules/en.ts
@@ -2913,6 +2913,7 @@ const message = {
         license: 'License',
         bindNode: 'Bind Node',
         menuSetting: 'Menu Settings',
+        menuHide: 'Menu hiding',
         menuSettingHelper: 'When only 1 submenu exists, the menu bar will display only that submenu',
         showAll: 'Show All',
         hideALL: 'Hide All',
diff --git a/frontend/src/lang/modules/es-es.ts b/frontend/src/lang/modules/es-es.ts
index d38f73ad6..89a461c71 100644
--- a/frontend/src/lang/modules/es-es.ts
+++ b/frontend/src/lang/modules/es-es.ts
@@ -2974,6 +2974,7 @@ const message = {
         license: 'Licencia',
         bindNode: 'Vincular nodo',
         menuSetting: 'Configuración de menú',
+        menuHide: 'Ocultar menú',
         menuSettingHelper: 'Cuando solo exista 1 submenú, la barra de menú mostrará únicamente ese submenú',
         showAll: 'Mostrar todo',
         hideALL: 'Ocultar todo',
diff --git a/frontend/src/lang/modules/fa.ts b/frontend/src/lang/modules/fa.ts
index 486efb5be..9607cf7f1 100644
--- a/frontend/src/lang/modules/fa.ts
+++ b/frontend/src/lang/modules/fa.ts
@@ -2887,6 +2887,7 @@ const message = {
         license: 'مجوز',
         bindNode: 'اتصال گره',
         menuSetting: 'تنظیمات منو',
+        menuHide: 'مخفی‌سازی منو',
         menuSettingHelper: 'زمانی که فقط ۱ زیرمنو وجود دارد، نوار منو فقط آن زیرمنو را نمایش می‌دهد',
         showAll: 'نمایش همه',
         hideALL: 'مخفی کردن همه',
diff --git a/frontend/src/lang/modules/ja.ts b/frontend/src/lang/modules/ja.ts
index db49d9296..304a2fbc0 100644
--- a/frontend/src/lang/modules/ja.ts
+++ b/frontend/src/lang/modules/ja.ts
@@ -2896,6 +2896,7 @@ const message = {
         license: 'ライセンス',
         bindNode: 'ノードをバインド',
         menuSetting: 'メニュー設定',
+        menuHide: 'メニュー非表示',
         menuSettingHelper: 'サブメニューが1つしか存在しない場合、メニューバーにはそのサブメニューのみが表示されます',
         showAll: 'すべてを表示します',
         hideALL: 'すべてを隠します',
diff --git a/frontend/src/lang/modules/ko.ts b/frontend/src/lang/modules/ko.ts
index eb1b8b0a2..767035117 100644
--- a/frontend/src/lang/modules/ko.ts
+++ b/frontend/src/lang/modules/ko.ts
@@ -2836,6 +2836,7 @@ const message = {
         license: '라이선스',
         bindNode: '노드 바인딩',
         menuSetting: '메뉴 설정',
+        menuHide: '메뉴 숨김',
         menuSettingHelper: '하위 메뉴가 1개만 존재할 경우, 메뉴 바에는 해당 하위 메뉴만 표시됩니다',
         showAll: '모두 표시',
         hideALL: '모두 숨기기',
diff --git a/frontend/src/lang/modules/ms.ts b/frontend/src/lang/modules/ms.ts
index 1280369b8..b7802b58d 100644
--- a/frontend/src/lang/modules/ms.ts
+++ b/frontend/src/lang/modules/ms.ts
@@ -2949,6 +2949,7 @@ const message = {
         license: 'Lesen',
         bindNode: 'Ikatan Nod',
         menuSetting: 'Tetapan Menu',
+        menuHide: 'Sembunyikan menu',
         menuSettingHelper: 'Apabila hanya terdapat 1 submenu, bar menu hanya akan memaparkan submenu tersebut',
         showAll: 'Papar Semua',
         hideALL: 'Sembunyikan Semua',
diff --git a/frontend/src/lang/modules/pt-br.ts b/frontend/src/lang/modules/pt-br.ts
index c9e54f3be..2dce44b7c 100644
--- a/frontend/src/lang/modules/pt-br.ts
+++ b/frontend/src/lang/modules/pt-br.ts
@@ -3064,6 +3064,7 @@ const message = {
         license: 'Licença',
         bindNode: 'Vincular Nó',
         menuSetting: 'Configurações do Menu',
+        menuHide: 'Ocultar menu',
         menuSettingHelper: 'Quando apenas 1 submenu existir, a barra de menus exibirá apenas esse submenu',
         showAll: 'Mostrar Tudo',
         hideALL: 'Ocultar Tudo',
diff --git a/frontend/src/lang/modules/ru.ts b/frontend/src/lang/modules/ru.ts
index 552c2ce51..3dcbf15e1 100644
--- a/frontend/src/lang/modules/ru.ts
+++ b/frontend/src/lang/modules/ru.ts
@@ -2928,6 +2928,7 @@ const message = {
         license: 'Лицензия',
         bindNode: 'Привязать Узел',
         menuSetting: 'Настройки меню',
+        menuHide: 'Скрытие меню',
         menuSettingHelper: 'Если существует только 1 подменю, в панели меню будет отображаться только это подменю',
         showAll: 'Показать все',
         hideALL: 'Скрыть все',
diff --git a/frontend/src/lang/modules/tr.ts b/frontend/src/lang/modules/tr.ts
index 7e0a1b20b..c92a2c09b 100644
--- a/frontend/src/lang/modules/tr.ts
+++ b/frontend/src/lang/modules/tr.ts
@@ -2958,6 +2958,7 @@ const message = {
         license: 'Lisans',
         bindNode: 'Düğüm Bağla',
         menuSetting: 'Menü Ayarları',
+        menuHide: 'Menüyü gizle',
         menuSettingHelper: 'Yalnızca 1 alt menü varsa, menü çubuğu yalnızca o alt menüyü gösterecektir',
         showAll: 'Tümünü Göster',
         hideALL: 'Tümünü Gizle',
diff --git a/frontend/src/lang/modules/zh-Hant.ts b/frontend/src/lang/modules/zh-Hant.ts
index 0a2d54635..db3acdcab 100644
--- a/frontend/src/lang/modules/zh-Hant.ts
+++ b/frontend/src/lang/modules/zh-Hant.ts
@@ -2715,6 +2715,7 @@ const message = {
         license: '許可證',
         bindNode: '綁定節點',
         menuSetting: '選單設定',
+        menuHide: '選單隱藏',
         menuSettingHelper: '當只存在 1 個子選單時，選單列將僅展示該子選單',
         showAll: '全部顯示',
         hideALL: '全部隱藏',
diff --git a/frontend/src/lang/modules/zh.ts b/frontend/src/lang/modules/zh.ts
index 658cfb126..9ead26644 100644
--- a/frontend/src/lang/modules/zh.ts
+++ b/frontend/src/lang/modules/zh.ts
@@ -2708,6 +2708,7 @@ const message = {
         license: '许可证',
         bindNode: '绑定节点',
         menuSetting: '菜单设置',
+        menuHide: '菜单隐藏',
         menuSettingHelper: '当只存在 1 个子菜单时，菜单栏将仅展示该子菜单',
         showAll: '全部显示',
         hideALL: '全部隐藏',
diff --git a/frontend/src/views/setting/panel/hidemenu/index.vue b/frontend/src/views/setting/panel/hidemenu/index.vue
index 055ad00d3..ee530339e 100644
--- a/frontend/src/views/setting/panel/hidemenu/index.vue
+++ b/frontend/src/views/setting/panel/hidemenu/index.vue
@@ -1,40 +1,67 @@
 <template>
     <DrawerPro v-model="drawerVisible" :header="$t('setting.menuSetting')" @close="handleClose" size="normal">
-        <el-alert :closable="false" :title="$t('setting.menuSettingHelper')" type="warning" />
-        <el-tree
-            :data="treeData.hideMenu"
-            :allow-drag="allowDrag"
-            :allow-drop="allowDrop"
-            draggable
-            node-key="id"
-            class="mt-3"
-            :icon="ArrowRight"
-            @node-drop="handleDrop"
-        >
-            <template #default="{ node, data }">
-                <div class="grid grid-cols-4 gap-4 items-center w-full py-2 group">
-                    <span class="col-span-2" :style="{ paddingLeft: `${(node.level - 1) * 16}px` }">
-                        {{ i18n.global.t(data.title) }}
-                    </span>
-                    <span class="flex justify-center w-[60px]">
-                        <el-switch
-                            v-if="!data.disabled"
-                            v-model="data.isShow"
-                            @change="onChangeShow(data)"
-                            @click.stop
-                            @mousedown.stop
-                        />
-                        <span v-else>-</span>
-                    </span>
-                    <span
-                        class="text-right hidden cursor-move"
-                        :class="data.label == 'Home-Menu' || data.children?.length > 0 ? '' : 'group-hover:block'"
+        <div class="menu-setting-cards">
+            <el-card shadow="never" class="menu-setting-card">
+                <div class="menu-setting-card__row">
+                    <div>
+                        <div class="menu-setting-card__label">{{ $t('setting.menuAccordion') }}</div>
+                        <span class="input-help">{{ $t('setting.menuAccordionHelper') }}</span>
+                    </div>
+                    <el-radio-group
+                        @change="onSaveSetting('MenuAccordion', form.menuAccordion)"
+                        v-model="form.menuAccordion"
                     >
-                        ⋮⋮
-                    </span>
+                        <el-radio-button value="Enable">
+                            <span>{{ $t('commons.button.enable') }}</span>
+                        </el-radio-button>
+                        <el-radio-button value="Disable">
+                            <span>{{ $t('commons.button.disable') }}</span>
+                        </el-radio-button>
+                    </el-radio-group>
                 </div>
-            </template>
-        </el-tree>
+            </el-card>
+
+            <el-card shadow="never" class="menu-setting-card">
+                <div class="menu-setting-card__label mb-3">{{ $t('setting.menuHide') }}</div>
+                <el-alert :closable="false" :title="$t('setting.menuSettingHelper')" type="warning" />
+                <el-tree
+                    :data="treeData.hideMenu"
+                    :allow-drag="allowDrag"
+                    :allow-drop="allowDrop"
+                    draggable
+                    node-key="id"
+                    class="mt-3 menu-hide-tree"
+                    :icon="ArrowRight"
+                    @node-drop="handleDrop"
+                >
+                    <template #default="{ node, data }">
+                        <div class="grid grid-cols-4 gap-4 items-center w-full py-2 group">
+                            <span class="col-span-2" :style="{ paddingLeft: `${(node.level - 1) * 16}px` }">
+                                {{ i18n.global.t(data.title) }}
+                            </span>
+                            <span class="flex justify-center w-[60px]">
+                                <el-switch
+                                    v-if="!data.disabled"
+                                    v-model="data.isShow"
+                                    @change="onChangeShow(data)"
+                                    @click.stop
+                                    @mousedown.stop
+                                />
+                                <span v-else>-</span>
+                            </span>
+                            <span
+                                class="text-right hidden cursor-move"
+                                :class="
+                                    data.label == 'Home-Menu' || data.children?.length > 0 ? '' : 'group-hover:block'
+                                "
+                            >
+                                ⋮⋮
+                            </span>
+                        </div>
+                    </template>
+                </el-tree>
+            </el-card>
+        </div>
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="defaultHideMenus">{{ $t('commons.button.setDefault') }}</el-button>
@@ -51,21 +78,28 @@
 import { reactive, ref } from 'vue';
 import { AllowDropType, ElMessageBox, RenderContentContext } from 'element-plus';
 import i18n from '@/lang';
-import { defaultMenu, updateMenu } from '@/api/modules/setting';
+import { defaultMenu, updateMenu, updateSetting } from '@/api/modules/setting';
 import { MsgSuccess } from '@/utils/message';
 import { useGlobalStore } from '@/composables/useGlobalStore';
 import { ArrowRight } from '@element-plus/icons-vue';
 import { sortMenu } from '@/utils/misc';
-const { isEE, isIntl, isAdmin } = useGlobalStore();
+const { isEE, isIntl, isAdmin, menuAccordion } = useGlobalStore();
 
 const drawerVisible = ref();
 const loading = ref();
+const em = defineEmits(['search']);
 interface DialogProps {
     hideMenu: string;
+    menuAccordion: string;
 }
 
+const form = reactive({
+    menuAccordion: '',
+});
+
 const acceptParams = (params: DialogProps): void => {
     drawerVisible.value = true;
+    form.menuAccordion = params.menuAccordion || 'Disable';
     let hideMenu = JSON.parse(params.hideMenu);
     sortMenu(hideMenu);
     treeData.hideMenu = hideMenu;
@@ -183,6 +217,23 @@ const handleClose = () => {
     drawerVisible.value = false;
 };
 
+const onSaveSetting = async (key: string, val: string) => {
+    loading.value = true;
+    try {
+        await updateSetting({
+            key,
+            value: val,
+        });
+        if (key === 'MenuAccordion') {
+            menuAccordion.value = val === 'Enable';
+        }
+        MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
+        em('search');
+    } finally {
+        loading.value = false;
+    }
+};
+
 const saveHideMenus = async () => {
     ElMessageBox.confirm(i18n.global.t('setting.confirmMessage'), i18n.global.t('setting.menuSetting'), {
         confirmButtonText: i18n.global.t('commons.button.confirm'),
@@ -228,10 +279,50 @@ defineExpose({
 <style scoped lang="scss">
 :deep(.el-tree) {
     --el-tree-node-content-height: 26px;
-    font-size: 16px;
+    font-size: 14px;
 }
+
 :deep(.el-tree-node__content) {
     padding: 8px 8px !important;
     border-bottom: var(--panel-border);
 }
+
+.menu-setting-cards {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.menu-setting-card {
+    --el-card-padding: 14px 16px;
+}
+
+.menu-setting-card__row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+}
+
+.menu-setting-card__label {
+    color: var(--el-text-color-primary);
+    font-size: var(--el-font-size-base);
+}
+
+.menu-setting-card__title {
+    display: inline-flex;
+    gap: 4px;
+    margin-bottom: 12px;
+    color: var(--el-text-color-primary);
+    font-size: 16px;
+    font-weight: 500;
+}
+
+@media (max-width: 640px) {
+    .menu-setting-card__row {
+        align-items: flex-start;
+        flex-direction: column;
+        gap: 8px;
+    }
+}
 </style>
diff --git a/frontend/src/views/setting/panel/index.vue b/frontend/src/views/setting/panel/index.vue
index 26213a42a..bfc0a1a3c 100644
--- a/frontend/src/views/setting/panel/index.vue
+++ b/frontend/src/views/setting/panel/index.vue
@@ -58,21 +58,6 @@
                                 </el-radio-group>
                             </el-form-item>
 
-                            <el-form-item :label="$t('setting.menuAccordion')" prop="menuAccordion">
-                                <el-radio-group
-                                    @change="onSave('MenuAccordion', form.menuAccordion)"
-                                    v-model="form.menuAccordion"
-                                >
-                                    <el-radio-button value="Enable">
-                                        <span>{{ $t('commons.button.enable') }}</span>
-                                    </el-radio-button>
-                                    <el-radio-button value="Disable">
-                                        <span>{{ $t('commons.button.disable') }}</span>
-                                    </el-radio-button>
-                                </el-radio-group>
-                                <span class="input-help">{{ $t('setting.menuAccordionHelper') }}</span>
-                            </el-form-item>
-
                             <el-form-item :label="$t('setting.watermark')" v-if="isXpackOrEE" prop="watermark">
                                 <el-radio-group class="w-full" @change="onChangeWatermark" v-model="form.watermarkShow">
                                     <el-radio-button value="Enable">
@@ -384,7 +369,10 @@ const onChangeProxy = () => {
 };
 
 const onChangeHideMenus = () => {
-    hideMenuRef.value.acceptParams({ hideMenu: form.hideMenu });
+    hideMenuRef.value.acceptParams({
+        hideMenu: form.hideMenu,
+        menuAccordion: form.menuAccordion,
+    });
 };
 
 const onChangeRegion = () => {