odoo17核心概念menu2——用户菜单

odoo的菜单可以分为主菜单和用户菜单，主菜单就是点击左上角的图标弹出的下拉列表中的菜单，而用户菜单是点击右上角用户头像弹出来的菜单，主菜单前文已有介绍，本文介绍用户菜单。

用户菜单(user menu)

用户菜单是右上角点击用户头像出现的菜单

目录：web/static/src/webclient/user_menu
这里面一共有五个文件：
user_menu.js
user_menu.scss
user_menu.xml
user_menu_item.js
user_menu.items.xml

1、user_menu组件

包含系列文件
user_menu.js
user_menu.scss
user_menu.xml
我们主要来看user_menu.js

/** @odoo-module **/

import { Dropdown } from "@web/core/dropdown/dropdown";
import { DropdownItem } from "@web/core/dropdown/dropdown_item";
import { CheckBox } from "@web/core/checkbox/checkbox";
import { browser } from "@web/core/browser/browser";
import { registry } from "@web/core/registry";
import { useService } from "@web/core/utils/hooks";

import { Component } from "@odoo/owl";

const userMenuRegistry = registry.category("user_menuitems");

export class UserMenu extends Component {
    setup() {
        this.user = useService("user");
        const { origin } = browser.location;
        const { userId } = this.user;
        this.source = `${origin}/web/image?model=res.users&field=avatar_128&id=${userId}`;
    }

    getElements() {
        const sortedItems = userMenuRegistry
            .getAll()
            .map((element) => element(this.env))
            .sort((x, y) => {
                const xSeq = x.sequence ? x.sequence : 100;
                const ySeq = y.sequence ? y.sequence : 100;
                return xSeq - ySeq;
            });
        return sortedItems;
    }
}
UserMenu.template = "web.UserMenu";
UserMenu.components = { Dropdown, DropdownItem, CheckBox };
UserMenu.props = {};

export const systrayItem = {
    Component: UserMenu,
};
registry.category("systray").add("web.user_menu", systrayItem, { sequence: 0 });

这个文件不长，大概干了这么几件事：
1、获取了userMenuRegistry
const userMenuRegistry = registry.category(“user_menuitems”);

2、定义了UserMenu组件，在setup钩子中获取了用户头像

this.source = `${origin}/web/image?model=res.users&field=avatar_128&id=${userId}`;

注意，这是获取附件图像的通用做法。以后做其他模块的时候要从附件中获取图片都可以这么干。
3、定义了 getElements() 用来获取排序后的菜单项。在xml中会遍历这个菜单项渲染页面。
4、 将usemenu注册到注册表中

registry.category("systray").add("web.user_menu", systrayItem, { sequence: 0 });

总结一波：
odoo前端不同模块之间通讯的两种方式：
1、全局数据总线
2、注册表

2、user_menu_items

包括两个文件
user_menu_items.js
user_menu_items.xml
这两个文件不是组件，而是定义了不同的菜单项，摘取一部分代码，又是注册表，
.category(“user_menuitems”)， 默认注册了6项菜单，还有一个分隔线。
每个菜单项五个属性，分别是：
type： item 或者separator
id
discription 菜单名称
callback 回调函数
sequence 顺序号

function logOutItem(env) {
    const route = "/web/session/logout";
    return {
        type: "item",
        id: "logout",
        description: _t("Log out"),
        href: `${browser.location.origin}${route}`,
        callback: () => {
            browser.location.href = route;
        },
        sequence: 70,
    };
}

registry
    .category("user_menuitems")
    .add("documentation", documentationItem)
    .add("support", supportItem)
    .add("shortcuts", shortCutsItem)
    .add("separator", separator)
    .add("profile", preferencesItem)
    .add("odoo_account", odooAccountItem)
    .add("log_out", logOutItem);

3、扩展用户菜单

3.1 删除跟odoo有关的菜单

写一个js文件，获取到注册表，然后调用remove方法删除相关的菜单项。

/** @odoo-module **/


import { registry } from "@web/core/registry";

const userMenuRegistry = registry.category("user_menuitems");

userMenuRegistry.remove('documentation');
userMenuRegistry.remove('support');
userMenuRegistry.remove('separator');
userMenuRegistry.remove('odoo_account');

3.2 增加自己的菜单项

/** @odoo-module **/

// 删除跟odoo相关的菜单

import { registry } from "@web/core/registry";

import { browser } from "@web/core/browser/browser";
let userMenuRegistry = registry.category("user_menuitems");

userMenuRegistry.remove('documentation');
userMenuRegistry.remove('support');
userMenuRegistry.remove('separator');
userMenuRegistry.remove('odoo_account');

// 增加公司官网
function documentationItem(env) {
    const documentationURL = "https://www.xxxxxx.com";
    return {
        type: "item",
        id: "xxxxxxx",
        description: "公司官网",
        href: documentationURL,
        callback: () => {
            browser.open(documentationURL, "_blank");
        },
        sequence: 10,
    };
}

userMenuRegistry.add("xxxxxx", documentationItem)