Vendure电商平台：自定义Admin UI导航菜单开发指南-优快云博客

Vendure电商平台：自定义Admin UI导航菜单开发指南

vendure A headless GraphQL commerce platform for the modern web 项目地址: https://gitcode.com/gh_mirrors/ve/vendure

前言

在Vendure电商平台中，Admin UI是管理员进行日常操作的主要界面。本文将深入讲解如何通过扩展机制来自定义Admin UI的左侧导航菜单，包括添加新菜单项、修改现有菜单以及隐藏系统默认菜单等高级操作。

导航菜单基础概念

Admin UI的导航菜单位于界面左侧（桌面模式下），是系统功能的主要入口点。它采用分节式设计，包含"仪表盘"、"目录"、"订单"、"客户"和"设置"等核心功能区域。

通过UI扩展机制，开发者可以：

添加全新的菜单节和菜单项
修改现有菜单项的属性和行为
隐藏不需要的默认菜单项

添加自定义菜单节

要为Admin UI添加新的菜单节，需要使用addNavMenuSection函数。以下是一个完整示例：

import { addNavMenuSection } from '@vendure/admin-ui/core';

export default [
    addNavMenuSection({
        id: 'custom-section',  // 唯一标识符
        label: '扩展功能',      // 显示名称
        items: [{
            id: 'greeter-module',
            label: '欢迎模块',
            routerLink: ['/extensions/greet'],  // 路由配置
            icon: 'cursor-hand-open',  // 使用Clarity图标库中的图标
        }],
    },
    'settings'),  // 指定新菜单节插入位置（在"设置"节之前）
];

关键参数说明：

id: 必须是唯一的字符串标识
label: 显示在UI上的文本，支持多语言
items: 该节包含的菜单项数组
第二个参数：可选的位置参数，控制新菜单节的插入位置

注册菜单提供者

创建好菜单配置后，需要将其注册到Vendure配置中：

import path from 'path';
import { VendureConfig } from '@vendure/core';
import { AdminUiPlugin } from '@vendure/admin-ui-plugin';
import { compileUiExtensions } from '@vendure/ui-devkit/compiler';

export const config: VendureConfig = {
    plugins: [
        AdminUiPlugin.init({
            app: compileUiExtensions({
                extensions: [
                    {
                        id: 'custom-extension',
                        extensionPath: path.join(__dirname, 'plugins/custom/ui'),
                        routes: [{ route: 'greet', filePath: 'routes.ts' }],
                        providers: ['providers.ts']  // 注册我们的菜单提供者
                    },
                ],
            }),
        }),
    ],
};

修改现有菜单项

有时我们需要修改系统默认的菜单项，可以通过覆盖方式实现：

首先在浏览器开发者工具中检查目标菜单项的data-item-id属性
使用相同的ID创建新的菜单项配置

import { addNavMenuItem } from '@vendure/admin-ui/core';

export default [
    addNavMenuItem({
        id: 'products',  // 覆盖系统默认的产品菜单
        label: '商品管理',  // 修改显示文本
        routerLink: ['/catalog', 'products'],
        icon: 'shopping-bag'  // 更换图标
    }, 'catalog'),
];

隐藏系统菜单项

如果某些默认菜单项不需要展示，可以通过设置无效权限来隐藏：

import { addNavMenuItem } from '@vendure/admin-ui/core';

export default [
    addNavMenuItem({
        id: 'promotions',
        label: '促销活动',
        routerLink: ['/marketing', 'promotions'],
        requiresPermission: '__disable__'  // 特殊值，强制隐藏
    }, 'marketing'),
];