1. 自定義菜單

在 Quick BI 中, 自定義菜單 (CustomMenu) 是一個包含了bootstrap，mount，unmount，update屬性的對象, 包含了自定義菜單具體的實現的邏輯. 詳細信息請參考Lifecycle。

例子

// 這是一個自定義菜單
const CustomMenu = {
	bootstrap: (props) => {},
  mount: (props) => {},
  unmount: (props) => {},
  update: (props) => {},
}

2. 自定義菜單類型

在 Quick BI 中, 目前存在以下幾種自定義菜單：

• 圖表卡片自定義菜單

• 儀表板自定義菜單

• 電子表格自定義菜單

圖表卡片自定義菜單

當菜單類型為儀表板圖表卡片菜單時，添加后的位置如下圖所示：

儀表板自定義菜單

當菜單類型為儀表板自定義菜單時，添加后的位置如下圖所示：

電子表格自定義菜單

當菜單類型為電子表格自定義菜單時，添加后的位置如下圖所示：

3. 種子項目結構

創建新 Quick BI 自定義菜單的最佳方式是使用 create-qbi-app 創建種子項目。通過 npm init qbi-app <project name> 命令創建, 參考快速開始。

npm init qbi-app test-menu

模板選擇

• 創建自定義圖表菜單：menu-chart-card

• 創建自定義Excel菜單：menu-excel

文件目錄

生成好種子項目后, 文件目錄結構如下:

├── build                # 構建產出目錄
├── node_modules         # 項目相關包依賴
├── public               # 本地調試入口
│    └──index.html   		
├── src                  # 源碼
│    ├──index.tsx        # 菜單入口
│    ├──Menu.tsx         # 自定義菜單
│    └──meta.ts          # 菜單屬性配置，自定義菜單元信息，用于配置菜單屬性。
├── .eslintrc            # eslint插件的配置文件
├── config-overrides.js  # webpack配置文件
├── package.json         # 依賴包管理
├── README.md            # 項目說明文檔
└── tsconfig.json        # typescript配置文件

相關命令

• npm run start - 啟動本地調試

• npm run build - 構建項目

• npm run pack - 將構建結果打包為 Quick BI 開發包, 會默認先執行 npm run build

src 目錄

該文件夾包含自定義菜單的源代碼。包含：

• meta.ts - 自定義菜單元信息

• index.tsx - 自定義菜單入口

• Menu.tsx - 自定義菜單，詳情可參考MenuItem。

public 目錄

該文件夾包含了 devserver 的 html 模板和 mock 數據。

build 目錄

該文件夾包含了構建產出以及打包的結果。

執行 npm run build 之后，會產出如下模塊：

4. 自定義菜單狀態

Quick BI 自定義菜單有 "運行狀態" 和 "顯隱狀態" 兩種維度的狀態, 與 Quick BI 自定義組件完全一致, 具體請參考自定義組件狀態。