ref: Optimize menu settings (#13190)

2026-09-22 08:00:53 +00:00 · 2026-07-03 12:10:47 +08:00
parent 23200cbe85
commit 1e6fd9c3a0
13 changed files with 142 additions and 52 deletions
@@ -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',
@@ -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',
@@ -2887,6 +2887,7 @@ const message = {
        license: 'مجوز',
        bindNode: 'اتصال گره',
        menuSetting: 'تنظیمات منو',
+        menuHide: 'مخفی‌سازی منو',
        menuSettingHelper: 'زمانی که فقط ۱ زیرمنو وجود دارد، نوار منو فقط آن زیرمنو را نمایش می‌دهد',
        showAll: 'نمایش همه',
        hideALL: 'مخفی کردن همه',
@@ -2896,6 +2896,7 @@ const message = {
        license: 'ライセンス',
        bindNode: 'ノードをバインド',
        menuSetting: 'メニュー設定',
+        menuHide: 'メニュー非表示',
        menuSettingHelper: 'サブメニューが1つしか存在しない場合、メニューバーにはそのサブメニューのみが表示されます',
        showAll: 'すべてを表示します',
        hideALL: 'すべてを隠します',
@@ -2836,6 +2836,7 @@ const message = {
        license: '라이선스',
        bindNode: '노드 바인딩',
        menuSetting: '메뉴 설정',
+        menuHide: '메뉴 숨김',
        menuSettingHelper: '하위 메뉴가 1개만 존재할 경우, 메뉴 바에는 해당 하위 메뉴만 표시됩니다',
        showAll: '모두 표시',
        hideALL: '모두 숨기기',
@@ -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',
@@ -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',
@@ -2928,6 +2928,7 @@ const message = {
        license: 'Лицензия',
        bindNode: 'Привязать Узел',
        menuSetting: 'Настройки меню',
+        menuHide: 'Скрытие меню',
        menuSettingHelper: 'Если существует только 1 подменю, в панели меню будет отображаться только это подменю',
        showAll: 'Показать все',
        hideALL: 'Скрыть все',
@@ -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',
@@ -2715,6 +2715,7 @@ const message = {
        license: '許可證',
        bindNode: '綁定節點',
        menuSetting: '選單設定',
+        menuHide: '選單隱藏',
        menuSettingHelper: '當只存在 1 個子選單時，選單列將僅展示該子選單',
        showAll: '全部顯示',
        hideALL: '全部隱藏',
@@ -2708,6 +2708,7 @@ const message = {
        license: '许可证',
        bindNode: '绑定节点',
        menuSetting: '菜单设置',
+        menuHide: '菜单隐藏',
        menuSettingHelper: '当只存在 1 个子菜单时，菜单栏将仅展示该子菜单',
        showAll: '全部显示',
        hideALL: '全部隐藏',
@@ -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>
@@ -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 = () => {