@knockout-js/layout 0.0.4-beta.1 → 0.1.0

package/esm/components/_util/index.js

@@ -0,0 +1,75 @@
+/**
+ * 列表数据格式化成树结构
+ * @param allList
+ * @param parentList
+ * @param defineKey
+ * @param parentId
+ * @returns
+ */ import _object_spread from "@swc/helpers/src/_object_spread.mjs";
+import _to_consumable_array from "@swc/helpers/src/_to_consumable_array.mjs";
+export var listFormatTreeData = function(allList, parentList, defineKey, parentId) {
+    var dataKey = _object_spread({
+        key: "key",
+        parentId: "parentId"
+    }, defineKey), pid = parentId === undefined ? "0" : parentId;
+    if (!parentList) parentList = allList.filter(function(item) {
+        return item[dataKey.parentId] == pid;
+    });
+    parentList.forEach(function(pItem) {
+        var children = allList.filter(function(allItem) {
+            return allItem[dataKey.parentId] == pItem[dataKey.key];
+        });
+        if (children && children.length) pItem.children = listFormatTreeData(allList, children, dataKey);
+    });
+    return parentList;
+};
+/**
+ * 解析树结构按树顺序处理成列表
+ * @param treeList
+ * @returns
+ */ export var treeFormatList = function(treeList) {
+    var allList = [];
+    treeList.forEach(function(item) {
+        var _allList;
+        var children = item.children;
+        delete item.children;
+        allList === null || allList === void 0 ? void 0 : allList.push(item);
+        if (children) (_allList = allList).push.apply(_allList, _to_consumable_array(treeFormatList(children)));
+    });
+    return allList;
+};
+/**
+ * 字节大小展示处理
+ * @param fileSize
+ * @returns
+ */ export var formatFileSize = function(fileSize) {
+    if (fileSize < 1024) return fileSize + "B";
+    else if (fileSize < 1048576) return (fileSize / 1024).toFixed(2) + "KB";
+    else if (fileSize < 1073741824) return (fileSize / 1048576).toFixed(2) + "MB";
+    else return (fileSize / 1073741824).toFixed(2) + "GB";
+};
+/**
+ * 随机数
+ * @param len
+ * @returns
+ */ export var randomId = function(len) {
+    var str = "";
+    for(; str.length < len; str += Math.random().toString(36).substring(2));
+    return str.substring(0, len);
+};
+/**
+ * 解析env配置的app地址字符串
+ * @param evnStr appCode@deploy_address;
+ * @returns
+ */ export var parseEnvAppAddress = function(evnStr) {
+    var address = {};
+    evnStr.split(";").forEach(function(str) {
+        if (str) {
+            var adds = str.split("@");
+            if (adds.length === 2) address[adds[0]] = adds[1];
+        }
+    });
+    return address;
+};
+
+ //# sourceMappingURL=D:\codeing\git\github\knockout-js\packages\layout\esm\components\_util\index.js.map

package/esm/components/_util/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["D:\\codeing\\git\\github\\knockout-js\\packages\\layout\\src\\components\\_util\\index.ts"],"sourcesContent":["/**\r\n * 列表数据格式化成树结构\r\n * @param allList\r\n * @param parentList\r\n * @param defineKey\r\n * @param parentId\r\n * @returns\r\n */\r\nexport const listFormatTreeData = <T extends Record<string, any> & { children?: T[] }>(\r\n  allList: T[],\r\n  parentList?: T[],\r\n  defineKey?: {\r\n    key?: string;\r\n    parentId?: string;\r\n  },\r\n  parentId?: string | number,\r\n) => {\r\n  const dataKey = { key: 'key', parentId: 'parentId', ...defineKey },\r\n    pid = parentId === undefined ? '0' : parentId;\r\n\r\n  if (!parentList) {\r\n    parentList = allList.filter(item => item[dataKey.parentId] == pid);\r\n  }\r\n\r\n  parentList.forEach((pItem) => {\r\n    const children = allList.filter(\r\n      (allItem) => allItem[dataKey.parentId] == pItem[dataKey.key],\r\n    );\r\n    if (children && children.length) {\r\n      pItem.children = listFormatTreeData(allList, children, dataKey);\r\n    }\r\n  });\r\n  return parentList;\r\n};\r\n\r\n/**\r\n * 解析树结构按树顺序处理成列表\r\n * @param treeList\r\n * @returns\r\n */\r\nexport const treeFormatList = <T extends Record<string, any> & { children?: T[] }>(treeList: T[]) => {\r\n  const allList: T[] = [];\r\n\r\n  treeList.forEach(item => {\r\n    const children = item.children;\r\n    delete item.children;\r\n    allList?.push(item);\r\n    if (children) {\r\n      allList.push(...treeFormatList(children));\r\n    }\r\n  });\r\n\r\n  return allList;\r\n}\r\n\r\n/**\r\n * 字节大小展示处理\r\n * @param fileSize\r\n * @returns\r\n */\r\nexport const formatFileSize = (fileSize: number) => {\r\n  if (fileSize < 1024) {\r\n    return fileSize + 'B';\r\n  } else if (fileSize < (1024 * 1024)) {\r\n    return (fileSize / 1024).toFixed(2) + 'KB';\r\n  } else if (fileSize < (1024 * 1024 * 1024)) {\r\n    return (fileSize / (1024 * 1024)).toFixed(2) + 'MB';\r\n  } else {\r\n    return (fileSize / (1024 * 1024 * 1024)).toFixed(2) + 'GB';\r\n  }\r\n}\r\n\r\n/**\r\n * 随机数\r\n * @param len\r\n * @returns\r\n */\r\nexport const randomId = (len: number) => {\r\n  let str = '';\r\n  for (; str.length < len; str += Math.random().toString(36).substring(2));\r\n  return str.substring(0, len);\r\n}\r\n\r\n\r\n/**\r\n * 解析env配置的app地址字符串\r\n * @param evnStr appCode@deploy_address;\r\n * @returns\r\n */\r\nexport const parseEnvAppAddress = (evnStr: string) => {\r\n  const address: Record<string, string> = {};\r\n  evnStr.split(';').forEach(str => {\r\n    if (str) {\r\n      const adds = str.split('@');\r\n      if (adds.length === 2) {\r\n        address[adds[0]] = adds[1];\r\n      }\r\n    }\r\n  })\r\n  return address;\r\n}\r\n"],"names":["listFormatTreeData","allList","parentList","defineKey","parentId","dataKey","key","pid","undefined","filter","item","forEach","pItem","children","allItem","length","treeFormatList","treeList","push","formatFileSize","fileSize","toFixed","randomId","len","str","Math","random","toString","substring","parseEnvAppAddress","evnStr","address","split","adds"],"mappings":"AAAA;;;;;;;CAOC;;AACD,OAAO,IAAMA,qBAAqB,SAChCC,SACAC,YACAC,WAIAC,UACG;IACH,IAAMC,UAAU;QAAEC,KAAK;QAAOF,UAAU;OAAeD,YACrDI,MAAMH,aAAaI,YAAY,MAAMJ,QAAQ;IAE/C,IAAI,CAACF,YACHA,aAAaD,QAAQQ,MAAM,CAACC,SAAAA;eAAQA,IAAI,CAACL,QAAQD,QAAQ,CAAC,IAAIG;;IAGhEL,WAAWS,OAAO,CAAC,SAACC,OAAU;QAC5B,IAAMC,WAAWZ,QAAQQ,MAAM,CAC7B,SAACK;mBAAYA,OAAO,CAACT,QAAQD,QAAQ,CAAC,IAAIQ,KAAK,CAACP,QAAQC,GAAG,CAAC;;QAE9D,IAAIO,YAAYA,SAASE,MAAM,EAC7BH,MAAMC,QAAQ,GAAGb,mBAAmBC,SAASY,UAAUR;IAE3D;IACA,OAAOH;AACT,EAAE;AAEF;;;;CAIC,GACD,OAAO,IAAMc,iBAAiB,SAAqDC,UAAkB;IACnG,IAAMhB,UAAe,EAAE;IAEvBgB,SAASN,OAAO,CAACD,SAAAA,MAAQ;YAKrBT;QAJF,IAAMY,WAAWH,KAAKG,QAAQ;QAC9B,OAAOH,KAAKG,QAAQ;QACpBZ,oBAAAA,qBAAAA,KAAAA,IAAAA,QAASiB,IAAI,CAACR;QACd,IAAIG,UACFZ,CAAAA,WAAAA,SAAQiB,IAAI,CAAZjB,MAAAA,UAAa,qBAAGe,eAAeH;IAEnC;IAEA,OAAOZ;AACT,EAAC;AAED;;;;CAIC,GACD,OAAO,IAAMkB,iBAAiB,SAACC,UAAqB;IAClD,IAAIA,WAAW,MACb,OAAOA,WAAW;SACb,IAAIA,WAAY,SACrB,OAAO,AAACA,CAAAA,WAAW,IAAG,EAAGC,OAAO,CAAC,KAAK;SACjC,IAAID,WAAY,YACrB,OAAO,AAACA,CAAAA,WAAY,OAAW,EAAGC,OAAO,CAAC,KAAK;SAE/C,OAAO,AAACD,CAAAA,WAAY,UAAkB,EAAGC,OAAO,CAAC,KAAK;AAE1D,EAAC;AAED;;;;CAIC,GACD,OAAO,IAAMC,WAAW,SAACC,KAAgB;IACvC,IAAIC,MAAM;IACV,MAAOA,IAAIT,MAAM,GAAGQ,KAAKC,OAAOC,KAAKC,MAAM,GAAGC,QAAQ,CAAC,IAAIC,SAAS,CAAC;IACrE,OAAOJ,IAAII,SAAS,CAAC,GAAGL;AAC1B,EAAC;AAGD;;;;CAIC,GACD,OAAO,IAAMM,qBAAqB,SAACC,QAAmB;IACpD,IAAMC,UAAkC,CAAC;IACzCD,OAAOE,KAAK,CAAC,KAAKrB,OAAO,CAACa,SAAAA,KAAO;QAC/B,IAAIA,KAAK;YACP,IAAMS,OAAOT,IAAIQ,KAAK,CAAC;YACvB,IAAIC,KAAKlB,MAAM,KAAK,GAClBgB,OAAO,CAACE,IAAI,CAAC,EAAE,CAAC,GAAGA,IAAI,CAAC,EAAE;QAE9B,CAAC;IACH;IACA,OAAOF;AACT,EAAC"}

package/esm/components/aggregate-menu/index.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { DrawerProps } from "antd";
 import { App, AppMenu } from "@knockout-js/api";
 export type AggregateMenuLocale = {
     title: string;
@@ -19,6 +20,10 @@ export interface AggregateMenuProps {
      * 数据源
      */
     dataSource?: AggregateMenuDataSource;
+    /**
+     * 弹框设置
+     */
+    drawerProps?: DrawerProps;
     /**
      * 弹出开关变更
      */
@@ -26,7 +31,7 @@ export interface AggregateMenuProps {
     /**
      * 选中菜单
      */
-    onClick?: (menuItem: AppMenu, app: App) => void;
+    onClick?: (menuItem: AppMenu, app: App, isOpen?: boolean) => void;
 }
 declare const _default: (props: AggregateMenuProps) => JSX.Element;
 export default _default;

package/esm/components/aggregate-menu/index.js

@@ -9,16 +9,20 @@ import { CloseOutlined, DragOutlined, SearchOutlined, StarOutlined } from "@ant-
 import { useCallback, useEffect, useState } from "react";
 import styles from "./index.module.css";
 import { Drawer, Empty, Input, Space } from "antd";
-import { gql, paging, query } from "@knockout-js/ice-urql/request";
+import { gql, mutation, paging, query } from "@knockout-js/ice-urql/request";
 import { AppMenuKind } from "@knockout-js/api";
 import { iceUrqlInstance } from "../index";
 import { DndContext, closestCenter, KeyboardSensor, PointerSensor, useSensor, useSensors } from "@dnd-kit/core";
 import { arrayMove, SortableContext, useSortable, sortableKeyboardCoordinates, verticalListSortingStrategy } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { useLocale } from "../locale/index";
-import { useDark, useTenantId } from "../provider/index";
-var userMenuListQuery = gql("query userMenuList($appCode:String!){\n  userMenus(appCode: $appCode){\n    id,name,route,appID,parentID,displaySort,kind\n  }\n}");
-var userOrgAppsQuery = gql("query layoutPkgUserRootOrgs($first:Int){\n  userRootOrgs{\n    id,\n    apps(first: $first){\n      totalCount,\n      edges{ node{ id,name,code } }\n    }\n  }\n}");
+import { useDark } from "../provider/index";
+import { listFormatTreeData, treeFormatList } from "../_util/index";
+import { OpenWin } from "../icons/index";
+var userMenuListQuery = gql("query layoutPkgUserMenuList($appCode:String!){\n  userMenus(appCode: $appCode){\n    id,name,route,appID,parentID,displaySort,kind\n  }\n}");
+var userAppsQuery = gql("query layoutPkgUserAppList{\n  userApps{\n    id,name,code\n  }\n}");
+var userPreferenceQuery = gql("query layoutPkgUserPreference{\n  orgUserPreference{\n    id,menuFavorite,menuRecent,\n  }\n}");
+var userPreferenceMut = gql("mutation layoutPkgSaveUserPreference($input:OrgUserPreferenceInput!){\n  saveOrgUserPreference(input: $input){ id }\n}");
 /**
  * 排序拖拽使用的控件
  * https://docs.dndkit.com/
@@ -50,9 +54,17 @@ var userOrgAppsQuery = gql("query layoutPkgUserRootOrgs($first:Int){\n  userRoot
                 className: styles.aggregateMenuDrawerMenuItemIcons,
                 children: /*#__PURE__*/ _jsxs(Space, {
                     children: [
+                        /*#__PURE__*/ _jsx(OpenWin, {
+                            className: "anticon",
+                            onClick: function(event) {
+                                event.stopPropagation();
+                                props.onClick(true);
+                            }
+                        }),
                         /*#__PURE__*/ _jsx(CloseOutlined, {
                             rev: undefined,
-                            onClick: function() {
+                            onClick: function(event) {
+                                event.stopPropagation();
                                 props.onDel();
                             }
                         }),
@@ -68,32 +80,24 @@ var userOrgAppsQuery = gql("query layoutPkgUserRootOrgs($first:Int){\n  userRoot
     }));
 };
 export default function(props) {
-    var _useState = _sliced_to_array(useState([]), 2), all = _useState[0], setAll = _useState[1], _useState1 = _sliced_to_array(useState([]), 2), filterList = _useState1[0], setFilterList = _useState1[1], _useState2 = _sliced_to_array(useState([]), 2), collects = _useState2[0], setCollects = _useState2[1], _useState3 = _sliced_to_array(useState([]), 2), latelys = _useState3[0], setLately = _useState3[1], locale = useLocale("AggregateMenu"), isDark = useDark(), tenantId = useTenantId(), sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
+    var _useState = _sliced_to_array(useState([]), 2), all = _useState[0], setAll = _useState[1], _useState1 = _sliced_to_array(useState([]), 2), filterList = _useState1[0], setFilterList = _useState1[1], _useState2 = _sliced_to_array(useState([]), 2), collects = _useState2[0], setCollects = _useState2[1], _useState3 = _sliced_to_array(useState([]), 2), latelys = _useState3[0], setLately = _useState3[1], locale = useLocale("AggregateMenu"), isDark = useDark(), sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
         coordinateGetter: sortableKeyboardCoordinates
     }));
     var request = useCallback(/*#__PURE__*/ _async_to_generator(function() {
-        var _appsResult_data, appsResult, apps, newAll, _tmp, _tmp1, _i, i, _menuResult_data, menuResult, menu;
+        var _appsResult_data, _preferenceResult_data, _preferenceResult_data_orgUserPreference, appsResult, apps, newAll, _tmp, _tmp1, _i, i, _menuResult_data, menuResult, menu, preferenceResult, menuFavorite, menuRecent, collectsList, latelyList;
         return _ts_generator(this, function(_state) {
             switch(_state.label){
                 case 0:
                     return [
                         4,
-                        paging(userOrgAppsQuery, {
-                            first: 30
-                        }, 1, {
+                        paging(userAppsQuery, {}, 1, {
                             instanceName: iceUrqlInstance.ucenter
                         })
                     ];
                 case 1:
                     appsResult = _state.sent(), apps = [];
-                    if ((_appsResult_data = appsResult.data) === null || _appsResult_data === void 0 ? void 0 : _appsResult_data.userRootOrgs) appsResult.data.userRootOrgs.forEach(function(org) {
-                        var _org_apps_edges;
-                        if (tenantId === org.id) (_org_apps_edges = org.apps.edges) === null || _org_apps_edges === void 0 ? void 0 : _org_apps_edges.forEach(function(oApp) {
-                            if ((oApp === null || oApp === void 0 ? void 0 : oApp.node) && !apps.find(function(app) {
-                                var _oApp_node;
-                                return app.id === ((_oApp_node = oApp.node) === null || _oApp_node === void 0 ? void 0 : _oApp_node.id);
-                            })) apps.push(oApp.node);
-                        });
+                    if ((_appsResult_data = appsResult.data) === null || _appsResult_data === void 0 ? void 0 : _appsResult_data.userApps) appsResult.data.userApps.forEach(function(app) {
+                        apps.push(app);
                     });
                     newAll = [];
                     _tmp = [];
@@ -123,7 +127,10 @@ export default function(props) {
                         });
                         newAll.push({
                             app: apps[i],
-                            menu: menu
+                            menu: treeFormatList(listFormatTreeData(menu, undefined, {
+                                key: "id",
+                                parentId: "parentID"
+                            }))
                         });
                     }
                     _state.label = 4;
@@ -136,26 +143,154 @@ export default function(props) {
                 case 5:
                     setAll(newAll);
                     setFilterList(newAll);
+                    return [
+                        4,
+                        query(userPreferenceQuery, {}, {
+                            instanceName: iceUrqlInstance.ucenter
+                        })
+                    ];
+                case 6:
+                    preferenceResult = _state.sent();
+                    if ((_preferenceResult_data = preferenceResult.data) === null || _preferenceResult_data === void 0 ? void 0 : (_preferenceResult_data_orgUserPreference = _preferenceResult_data.orgUserPreference) === null || _preferenceResult_data_orgUserPreference === void 0 ? void 0 : _preferenceResult_data_orgUserPreference.id) {
+                        menuFavorite = preferenceResult.data.orgUserPreference.menuFavorite, menuRecent = preferenceResult.data.orgUserPreference.menuRecent, collectsList = [], latelyList = [];
+                        if (menuFavorite) menuFavorite.forEach(function(id) {
+                            for(var i in newAll){
+                                var menuItem = newAll[i].menu.find(function(item) {
+                                    return item.id == id;
+                                });
+                                if (menuItem) {
+                                    collectsList.push(menuItem);
+                                    break;
+                                }
+                            }
+                        });
+                        if (menuRecent) menuRecent.forEach(function(id) {
+                            for(var i in newAll){
+                                var menuItem = newAll[i].menu.find(function(item) {
+                                    return item.id == id;
+                                });
+                                if (menuItem) {
+                                    latelyList.push(menuItem);
+                                    break;
+                                }
+                            }
+                        });
+                        setCollects(collectsList);
+                        setLately(latelyList);
+                    }
                     return [
                         2
                     ];
             }
         });
-    }), []), checkCollect = useCallback(function(menuItem) {
+    }), []), requestFavorite = function() {
+        var _ref = _async_to_generator(function(list) {
+            return _ts_generator(this, function(_state) {
+                switch(_state.label){
+                    case 0:
+                        // 异步存储收藏
+                        return [
+                            4,
+                            mutation(userPreferenceMut, {
+                                input: {
+                                    menuFavorite: list.map(function(item) {
+                                        return item.id;
+                                    })
+                                }
+                            }, {
+                                instanceName: iceUrqlInstance.ucenter
+                            })
+                        ];
+                    case 1:
+                        _state.sent();
+                        return [
+                            2
+                        ];
+                }
+            });
+        });
+        return function requestFavorite(list) {
+            return _ref.apply(this, arguments);
+        };
+    }(), requestRecent = function() {
+        var _ref = _async_to_generator(function(ids) {
+            return _ts_generator(this, function(_state) {
+                switch(_state.label){
+                    case 0:
+                        // 异步存储访问菜单记录
+                        return [
+                            4,
+                            mutation(userPreferenceMut, {
+                                input: {
+                                    menuRecent: ids
+                                }
+                            }, {
+                                instanceName: iceUrqlInstance.ucenter
+                            })
+                        ];
+                    case 1:
+                        _state.sent();
+                        return [
+                            2
+                        ];
+                }
+            });
+        });
+        return function requestRecent(ids) {
+            return _ref.apply(this, arguments);
+        };
+    }(), checkCollect = useCallback(function(menuItem) {
         return !!collects.find(function(item) {
             return item.id === menuItem.id && item.appID === menuItem.appID;
         });
     }, [
         collects
-    ]), menuItemRender = function(menuItem) {
+    ]), onClickItem = function() {
+        var _ref = _async_to_generator(function(menuItem, isOpen) {
+            var allApp, _props_onClick, latelyList, oldIdx;
+            return _ts_generator(this, function(_state) {
+                switch(_state.label){
+                    case 0:
+                        allApp = all.find(function(allItem) {
+                            return allItem.app.id == menuItem.appID;
+                        });
+                        if (!allApp) return [
+                            3,
+                            2
+                        ];
+                        latelyList = _to_consumable_array(latelys);
+                        oldIdx = latelyList.findIndex(function(lately) {
+                            return lately.id == menuItem.id;
+                        });
+                        if (oldIdx > -1) latelyList.splice(oldIdx, 1);
+                        latelyList.unshift(menuItem);
+                        latelyList.splice(6);
+                        return [
+                            4,
+                            requestRecent(latelyList.map(function(item) {
+                                return item.id;
+                            }))
+                        ];
+                    case 1:
+                        _state.sent();
+                        setLately(latelyList);
+                        (_props_onClick = props.onClick) === null || _props_onClick === void 0 ? void 0 : _props_onClick.call(props, menuItem, allApp.app, isOpen);
+                        _state.label = 2;
+                    case 2:
+                        return [
+                            2
+                        ];
+                }
+            });
+        });
+        return function onClickItem(menuItem, isOpen) {
+            return _ref.apply(this, arguments);
+        };
+    }(), menuItemRender = function(menuItem) {
         return /*#__PURE__*/ _jsxs("div", {
             className: styles.aggregateMenuDrawerAllMenuItem,
             onClick: function() {
-                var _props_onClick;
-                var allApp = all.find(function(allItem) {
-                    return allItem.app.id == menuItem.appID;
-                });
-                if (allApp) (_props_onClick = props.onClick) === null || _props_onClick === void 0 ? void 0 : _props_onClick.call(props, menuItem, allApp.app);
+                onClickItem(menuItem);
             },
             children: [
                 /*#__PURE__*/ _jsxs("div", {
@@ -166,18 +301,52 @@ export default function(props) {
                     ]
                 }),
                 /*#__PURE__*/ _jsx("div", {
-                    children: /*#__PURE__*/ _jsx(StarOutlined, {
-                        rev: undefined,
-                        className: checkCollect(menuItem) ? "collect" : "",
-                        onClick: function(event) {
-                            event.stopPropagation();
-                            if (checkCollect(menuItem)) setCollects(collects.filter(function(c) {
-                                return !(c.id === menuItem.id && c.appID === menuItem.appID);
-                            }));
-                            else setCollects(_to_consumable_array(collects).concat([
-                                menuItem
-                            ]));
-                        }
+                    className: styles.aggregateMenuDrawerAllMenuItemIcons,
+                    children: /*#__PURE__*/ _jsxs(Space, {
+                        children: [
+                            /*#__PURE__*/ _jsx(OpenWin, {
+                                className: "anticon",
+                                onClick: function(event) {
+                                    event.stopPropagation();
+                                    onClickItem(menuItem, true);
+                                }
+                            }),
+                            /*#__PURE__*/ _jsx(StarOutlined, {
+                                rev: undefined,
+                                className: checkCollect(menuItem) ? "collect" : "",
+                                onClick: function() {
+                                    var _ref = _async_to_generator(function(event) {
+                                        var collectList;
+                                        return _ts_generator(this, function(_state) {
+                                            switch(_state.label){
+                                                case 0:
+                                                    event.stopPropagation();
+                                                    collectList = [];
+                                                    if (checkCollect(menuItem)) collectList = collects.filter(function(c) {
+                                                        return !(c.id === menuItem.id && c.appID === menuItem.appID);
+                                                    });
+                                                    else collectList = _to_consumable_array(collects).concat([
+                                                        menuItem
+                                                    ]);
+                                                    return [
+                                                        4,
+                                                        requestFavorite(collectList)
+                                                    ];
+                                                case 1:
+                                                    _state.sent();
+                                                    setCollects(collectList);
+                                                    return [
+                                                        2
+                                                    ];
+                                            }
+                                        });
+                                    });
+                                    return function(event) {
+                                        return _ref.apply(this, arguments);
+                                    };
+                                }()
+                            })
+                        ]
                     })
                 })
             ]
@@ -192,12 +361,14 @@ export default function(props) {
         props.dataSource
     ]);
     return /*#__PURE__*/ _jsx(_Fragment, {
-        children: /*#__PURE__*/ _jsx(Drawer, {
-            className: "".concat(styles.aggregateMenuDrawer, " ").concat(isDark ? styles.aggregateMenuDark : ""),
+        children: /*#__PURE__*/ _jsx(Drawer, _object_spread_props(_object_spread({
             title: locale.title,
+            maskClosable: false,
             placement: "left",
+            width: 1060
+        }, props.drawerProps), {
+            className: "".concat(styles.aggregateMenuDrawer, " ").concat(isDark ? styles.aggregateMenuDark : ""),
             open: props.open,
-            width: 1060,
             onClose: function() {
                 var _props_onChangeOpen;
                 (_props_onChangeOpen = props.onChangeOpen) === null || _props_onChangeOpen === void 0 ? void 0 : _props_onChangeOpen.call(props, false);
@@ -222,7 +393,9 @@ export default function(props) {
                                     var newIndex = items.findIndex(function(nItem) {
                                         return "".concat(nItem.id, "-").concat(nItem.appID) == over.id;
                                     });
-                                    return arrayMove(items, oldIndex, newIndex);
+                                    var collectList = arrayMove(items, oldIndex, newIndex);
+                                    requestFavorite(collectList);
+                                    return collectList;
                                 });
                             },
                             children: /*#__PURE__*/ _jsx(SortableContext, {
@@ -231,19 +404,31 @@ export default function(props) {
                                 }),
                                 strategy: verticalListSortingStrategy,
                                 children: collects.map(function(item) {
-                                    /*#__PURE__*/ return _jsx(DargItem, {
+                                    return /*#__PURE__*/ _jsx(DargItem, {
                                         value: item,
-                                        onDel: function() {
-                                            setCollects(collects.filter(function(c) {
-                                                return !(c.id === item.id && c.appID === item.appID);
-                                            }));
-                                        },
-                                        onClick: function() {
-                                            var _props_onClick;
-                                            var allApp = all.find(function(allItem) {
-                                                return allItem.app.id == item.appID;
+                                        onDel: /*#__PURE__*/ _async_to_generator(function() {
+                                            var collectList;
+                                            return _ts_generator(this, function(_state) {
+                                                switch(_state.label){
+                                                    case 0:
+                                                        collectList = collects.filter(function(c) {
+                                                            return !(c.id === item.id && c.appID === item.appID);
+                                                        });
+                                                        return [
+                                                            4,
+                                                            requestFavorite(collectList)
+                                                        ];
+                                                    case 1:
+                                                        _state.sent();
+                                                        setCollects(collectList);
+                                                        return [
+                                                            2
+                                                        ];
+                                                }
                                             });
-                                            if (allApp) (_props_onClick = props.onClick) === null || _props_onClick === void 0 ? void 0 : _props_onClick.call(props, item, allApp.app);
+                                        }),
+                                        onClick: function(isOpen) {
+                                            onClickItem(item, isOpen);
                                         }
                                     }, "c".concat(item.id, "-").concat(item.appID));
                                 })
@@ -304,29 +489,32 @@ export default function(props) {
                                 style: {
                                     height: latelys.length ? "calc(100% - 164px)" : "calc(100% - 52px)"
                                 },
-                                children: filterList.map(function(item) {
-                                    return /*#__PURE__*/ _jsxs("div", {
-                                        className: styles.aggregateMenuDrawerAllMenuColumn,
-                                        children: [
-                                            /*#__PURE__*/ _jsx("div", {
-                                                className: styles.aggregateMenuDrawerAllAppTitle,
-                                                children: item.app.name
-                                            }),
-                                            item.menu.map(function(menuItem) {
-                                                return menuItem.kind === AppMenuKind.Menu ? menuItemRender(menuItem) : /*#__PURE__*/ _jsx("div", {
-                                                    className: styles.aggregateMenuDrawerAllMenuItemDir,
-                                                    children: menuItem.name
-                                                }, "".concat(menuItem.appID, "-").concat(menuItem.id));
-                                            })
-                                        ]
-                                    }, item.app.code);
+                                children: /*#__PURE__*/ _jsx("div", {
+                                    className: styles.aggregateMenuDrawerAllMenuColumn,
+                                    children: filterList.map(function(item) {
+                                        return /*#__PURE__*/ _jsxs("div", {
+                                            className: styles.aggregateMenuDrawerAllMenuColumnItem,
+                                            children: [
+                                                /*#__PURE__*/ _jsx("div", {
+                                                    className: styles.aggregateMenuDrawerAllAppTitle,
+                                                    children: item.app.name
+                                                }),
+                                                item.menu.map(function(menuItem) {
+                                                    return menuItem.kind === AppMenuKind.Menu ? menuItemRender(menuItem) : /*#__PURE__*/ _jsx("div", {
+                                                        className: styles.aggregateMenuDrawerAllMenuItemDir,
+                                                        children: menuItem.name
+                                                    }, "".concat(menuItem.appID, "-").concat(menuItem.id));
+                                                })
+                                            ]
+                                        }, item.app.code);
+                                    })
                                 })
                             })
                         ]
                     })
                 ]
             })
-        })
+        }))
     });
 };