添加圖標(biāo)菜單

如圖所示，左邊每個(gè)圖標(biāo)代表一個(gè)功能模塊，點(diǎn)擊左邊圖標(biāo)右邊窗體會(huì)以iframe的方式加載圖標(biāo)對(duì)應(yīng)的url內(nèi)容。

菜單事件

菜單渲染有一個(gè)ai.menu.list事件，如果需要添加菜單，參考以下步驟

提示
有關(guān)事件的更多信息，請(qǐng)參閱webman event事件

創(chuàng)建 plugin/foo/config/event.php 內(nèi)容如下。（也可以配置config/event.php）

<?php

use plugin\ai\app\event\data\EventData;

return [
    // 渲染左側(cè)圖標(biāo)菜單時(shí)觸發(fā)
    'ai.menu.list' => [
        function (EventData $object) {
            $data = $object->data;
            $data['invite'] = [
                'enabled' => true, // 是否啟用
                'title' => '邀請(qǐng)好友', // 標(biāo)題
                'icon' => [
                    'light' => '<i class="bi bi-share"></i>', // 明亮主題下的圖標(biāo)
                    'dark' => '<i class="bi bi-share"></i>',  // 暗黑主題下的圖標(biāo)
                    'active' => '<i class="bi bi-share-fill"></i>' // 被選中后的圖標(biāo)
                ],
                'url' => '/app/foo', // iframe url 地址
                'mobile' => true, // 是否在移動(dòng)端顯示圖標(biāo)菜單
            ];
            $object->data = $data;
        }
    ]
];

以上配置含義是定義了一個(gè)invite為key的邀請(qǐng)菜單，icon定義了各個(gè)狀態(tài)下的圖標(biāo)樣式，點(diǎn)擊這個(gè)圖標(biāo)右側(cè)窗體會(huì)以iframe形式加載url字段指定的頁(yè)面內(nèi)容。

圖標(biāo)

圖標(biāo)默認(rèn)使用的是bootstrap的圖標(biāo)，地址為 https://icons.bootcss.com/ ，選擇喜歡的圖標(biāo)點(diǎn)擊后點(diǎn)擊復(fù)制按鈕粘貼到light dark active的字段上。

其它圖標(biāo)

如果 https://icons.bootcss.com/ 沒(méi)有你喜歡的圖標(biāo)，你也可以使用自己的圖片代替，例如到 https://www.iconfont.cn/ 尋找下載png格式的圖片，放到 plugin/foo/public/img 下，然后在icon字段中填寫(xiě)<img>標(biāo)簽。

注意需要下載3個(gè)圖片，顏色分別為light黑灰色#595c5f，dark灰色#8a9198，active藍(lán)色#007bff。圖標(biāo)大小最小64px，太小會(huì)模糊。

例如 plugin\foo\public\img 下載了三個(gè)圖標(biāo)如下

ai.menu.list 配置如下

'ai.menu.list' => [
    function (EventData $object) {
        $data = $object->data;
        $data['invite'] = [
            'enabled' => true,
            'title' => '邀請(qǐng)好友',
            'icon' => [
                'light' => '<img src="/app/foo/img/light.png" width="25px" height="25px" />',
                'dark' => '<img src="/app/foo/img/dark.png" width="25px" height="25px" />',
                'active' => '<img src="/app/foo/img/active.png" width="25px" height="25px" />'
            ],
            'url' => '/app/foo',
            'mobile' => true,
        ];
        $object->data = $data;
    }
]