@knockout-js/layout 0.0.4-beta.1 → 0.1.1-beta.0

package/es2017/components/_util/index.d.ts

@@ -0,0 +1,55 @@
+/**
+ * 列表数据格式化成树结构
+ * @param allList
+ * @param parentList
+ * @param defineKey
+ * @param parentId
+ * @returns
+ */
+export declare const listFormatTreeData: <T extends Record<string, any> & {
+    children?: T[];
+}>(allList: T[], parentList?: T[], defineKey?: {
+    key?: string;
+    parentId?: string;
+}, parentId?: string | number) => T[];
+/**
+ * 解析树结构按树顺序处理成列表
+ * @param treeList
+ * @returns
+ */
+export declare const treeFormatList: <T extends Record<string, any> & {
+    children?: T[];
+}>(treeList: T[]) => T[];
+/**
+ * 字节大小展示处理
+ * @param fileSize
+ * @returns
+ */
+export declare const formatFileSize: (fileSize: number) => string;
+/**
+ * 随机数
+ * @param len
+ * @returns
+ */
+export declare const randomId: (len: number) => string;
+/**
+ * 解析env配置的app地址字符串
+ * @param evnStr appCode@deploy_address;
+ * @returns
+ */
+export declare const parseEnvAppAddress: (evnStr: string) => Record<string, string>;
+/**
+ * 格式化日期
+ * @param date
+ * @param format  YYYY-MM-DD HH:mm:ss
+ * @param tz  时区
+ * @param isTzSet  true将当前时间设置成这个时区，false 将当前时间根据时区转换
+ * 例子 isTzSet=true
+ *      dayjs.tz("2022-07-07 16:30:00", "America/New_York").format("YYYY-MM-DDTHH:mm:ssZ")
+ *      = "2022-07-07T16:30:00-04:00"
+ * 例子 isTzSet=false
+ *      dayjs("2022-07-07T20:30:00Z").tz("America/New_York").format("YYYY-MM-DD HH:mm:ss")
+ *      = "2022-07-07 16:30:00"
+ * @returns
+ */
+export declare const getDate: (date: dayjs.ConfigType, format?: string, tz?: string, isTzSet?: boolean) => any;

package/es2017/components/_util/index.js

@@ -0,0 +1,96 @@
+import _object_spread from "@swc/helpers/src/_object_spread.mjs";
+import dayjs from "dayjs";
+import timezone from "dayjs/plugin/timezone";
+import utc from "dayjs/plugin/utc";
+dayjs.extend(utc);
+dayjs.extend(timezone);
+/**
+ * 列表数据格式化成树结构
+ * @param allList
+ * @param parentList
+ * @param defineKey
+ * @param parentId
+ * @returns
+ */ export const listFormatTreeData = (allList, parentList, defineKey, parentId)=>{
+    const dataKey = _object_spread({
+        key: 'key',
+        parentId: 'parentId'
+    }, defineKey), pid = parentId === undefined ? '0' : parentId;
+    if (!parentList) parentList = allList.filter((item)=>item[dataKey.parentId] == pid);
+    parentList.forEach((pItem)=>{
+        const children = allList.filter((allItem)=>allItem[dataKey.parentId] == pItem[dataKey.key]);
+        if (children && children.length) pItem.children = listFormatTreeData(allList, children, dataKey);
+    });
+    return parentList;
+};
+/**
+ * 解析树结构按树顺序处理成列表
+ * @param treeList
+ * @returns
+ */ export const treeFormatList = (treeList)=>{
+    const allList = [];
+    treeList.forEach((item)=>{
+        const children = item.children;
+        delete item.children;
+        allList === null || allList === void 0 ? void 0 : allList.push(item);
+        if (children) allList.push(...treeFormatList(children));
+    });
+    return allList;
+};
+/**
+ * 字节大小展示处理
+ * @param fileSize
+ * @returns
+ */ export const formatFileSize = (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 const randomId = (len)=>{
+    let 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 const parseEnvAppAddress = (evnStr)=>{
+    const address = {};
+    evnStr.split(';').forEach((str)=>{
+        if (str) {
+            const adds = str.split('@');
+            if (adds.length === 2) address[adds[0]] = adds[1];
+        }
+    });
+    return address;
+};
+/**
+ * 格式化日期
+ * @param date
+ * @param format  YYYY-MM-DD HH:mm:ss
+ * @param tz  时区
+ * @param isTzSet  true将当前时间设置成这个时区，false 将当前时间根据时区转换
+ * 例子 isTzSet=true
+ *      dayjs.tz("2022-07-07 16:30:00", "America/New_York").format("YYYY-MM-DDTHH:mm:ssZ")
+ *      = "2022-07-07T16:30:00-04:00"
+ * 例子 isTzSet=false
+ *      dayjs("2022-07-07T20:30:00Z").tz("America/New_York").format("YYYY-MM-DD HH:mm:ss")
+ *      = "2022-07-07 16:30:00"
+ * @returns
+ */ export const getDate = (date, format = 'YYYY-MM-DD', tz, isTzSet)=>{
+    if (date) {
+        if (tz) {
+            if (isTzSet) return dayjs.tz(date, tz).format(format);
+            else return dayjs(date).tz(tz).format(format);
+        }
+        return dayjs(date).format(format);
+    } else return null;
+};
+
+ //# sourceMappingURL=D:\codeing\git\github\knockout-js\packages\layout\es2017\components\_util\index.js.map

package/es2017/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":["import dayjs from 'dayjs';\r\nimport timezone from 'dayjs/plugin/timezone';\r\nimport utc from 'dayjs/plugin/utc';\r\n\r\ndayjs.extend(utc);\r\ndayjs.extend(timezone);\r\n\r\n/**\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\r\n\r\n\r\n/**\r\n * 格式化日期\r\n * @param date\r\n * @param format  YYYY-MM-DD HH:mm:ss\r\n * @param tz  时区\r\n * @param isTzSet  true将当前时间设置成这个时区，false 将当前时间根据时区转换\r\n * 例子 isTzSet=true\r\n *      dayjs.tz(\"2022-07-07 16:30:00\", \"America/New_York\").format(\"YYYY-MM-DDTHH:mm:ssZ\")\r\n *      = \"2022-07-07T16:30:00-04:00\"\r\n * 例子 isTzSet=false\r\n *      dayjs(\"2022-07-07T20:30:00Z\").tz(\"America/New_York\").format(\"YYYY-MM-DD HH:mm:ss\")\r\n *      = \"2022-07-07 16:30:00\"\r\n * @returns\r\n */\r\nexport const getDate = (\r\n  date: dayjs.ConfigType,\r\n  format = 'YYYY-MM-DD',\r\n  tz?: string,\r\n  isTzSet?: boolean,\r\n) => {\r\n  if (date) {\r\n    if (tz) {\r\n      if (isTzSet) {\r\n        return dayjs.tz(date, tz).format(format);\r\n      } else {\r\n        return dayjs(date).tz(tz).format(format);\r\n      }\r\n    }\r\n    return dayjs(date).format(format);\r\n  } else {\r\n    return null\r\n  }\r\n};\r\n"],"names":["dayjs","timezone","utc","extend","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","getDate","date","format","tz","isTzSet"],"mappings":";AAAA,OAAOA,WAAW,QAAQ;AAC1B,OAAOC,cAAc,wBAAwB;AAC7C,OAAOC,SAAS,mBAAmB;AAEnCF,MAAMG,MAAM,CAACD;AACbF,MAAMG,MAAM,CAACF;AAEb;;;;;;;CAOC,GACD,OAAO,MAAMG,qBAAqB,CAChCC,SACAC,YACAC,WAIAC,WACG;IACH,MAAMC,UAAU;QAAEC,KAAK;QAAOF,UAAU;OAAeD,YACrDI,MAAMH,aAAaI,YAAY,MAAMJ,QAAQ;IAE/C,IAAI,CAACF,YACHA,aAAaD,QAAQQ,MAAM,CAACC,CAAAA,OAAQA,IAAI,CAACL,QAAQD,QAAQ,CAAC,IAAIG;IAGhEL,WAAWS,OAAO,CAAC,CAACC,QAAU;QAC5B,MAAMC,WAAWZ,QAAQQ,MAAM,CAC7B,CAACK,UAAYA,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,MAAMc,iBAAiB,CAAqDC,WAAkB;IACnG,MAAMhB,UAAe,EAAE;IAEvBgB,SAASN,OAAO,CAACD,CAAAA,OAAQ;QACvB,MAAMG,WAAWH,KAAKG,QAAQ;QAC9B,OAAOH,KAAKG,QAAQ;QACpBZ,oBAAAA,qBAAAA,KAAAA,IAAAA,QAASiB,IAAI,CAACR;QACd,IAAIG,UACFZ,QAAQiB,IAAI,IAAIF,eAAeH;IAEnC;IAEA,OAAOZ;AACT,EAAC;AAED;;;;CAIC,GACD,OAAO,MAAMkB,iBAAiB,CAACC,WAAqB;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,MAAMC,WAAW,CAACC,MAAgB;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,MAAMM,qBAAqB,CAACC,SAAmB;IACpD,MAAMC,UAAkC,CAAC;IACzCD,OAAOE,KAAK,CAAC,KAAKrB,OAAO,CAACa,CAAAA,MAAO;QAC/B,IAAIA,KAAK;YACP,MAAMS,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;AAID;;;;;;;;;;;;;CAaC,GACD,OAAO,MAAMG,UAAU,CACrBC,MACAC,SAAS,YAAY,EACrBC,IACAC,UACG;IACH,IAAIH,MAAM;QACR,IAAIE,IAAI;YACN,IAAIC,SACF,OAAO1C,MAAMyC,EAAE,CAACF,MAAME,IAAID,MAAM,CAACA;iBAEjC,OAAOxC,MAAMuC,MAAME,EAAE,CAACA,IAAID,MAAM,CAACA;QAErC,CAAC;QACD,OAAOxC,MAAMuC,MAAMC,MAAM,CAACA;IAC5B,OACE,OAAO,IAAI;AAEf,EAAE"}

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

@@ -1,5 +1,6 @@
 /// <reference types="react" />
-import { App, AppMenu } from "@knockout-js/api";
+import { DrawerProps } from "antd";
+import { App, AppMenu } from "@knockout-js/api/esm/gql/ucenter/graphql";
 export type AggregateMenuLocale = {
     title: string;
     latelyTitle: 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/es2017/components/aggregate-menu/index.js

@@ -5,28 +5,34 @@ 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 { AppMenuKind } from "@knockout-js/api";
-import { iceUrqlInstance } from "../index";
+import { gql, mutation, paging, query } from "@knockout-js/ice-urql/request";
 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";
-const userMenuListQuery = gql(/* GraphQL */ `query userMenuList($appCode:String!){
+import { useDark } from "../provider/index";
+import { listFormatTreeData, treeFormatList } from "../_util/index";
+import { OpenWin } from "../icons/index";
+import { AppMenuKind } from "@knockout-js/api/esm/gql/ucenter/graphql";
+import { instanceName } from "@knockout-js/api";
+const userMenuListQuery = gql(/* GraphQL */ `query layoutPkgUserMenuList($appCode:String!){
   userMenus(appCode: $appCode){
     id,name,route,appID,parentID,displaySort,kind
   }
 }`);
-const userOrgAppsQuery = gql(/* GraphQL */ `query layoutPkgUserRootOrgs($first:Int){
-  userRootOrgs{
-    id,
-    apps(first: $first){
-      totalCount,
-      edges{ node{ id,name,code } }
-    }
+const userAppsQuery = gql(/* GraphQL */ `query layoutPkgUserAppList{
+  userApps{
+    id,name,code
   }
 }`);
+const userPreferenceQuery = gql(/* GraphQL */ `query layoutPkgUserPreference{
+  orgUserPreference{
+    id,menuFavorite,menuRecent,
+  }
+}`);
+const userPreferenceMut = gql(/* GraphQL */ `mutation layoutPkgSaveUserPreference($input:OrgUserPreferenceInput!){
+  saveOrgUserPreference(input: $input){ id }
+}`);
 /**
  * 排序拖拽使用的控件
  * https://docs.dndkit.com/
@@ -58,9 +64,17 @@ const userOrgAppsQuery = gql(/* GraphQL */ `query layoutPkgUserRootOrgs($first:I
                 className: styles.aggregateMenuDrawerMenuItemIcons,
                 children: /*#__PURE__*/ _jsxs(Space, {
                     children: [
+                        /*#__PURE__*/ _jsx(OpenWin, {
+                            className: "anticon",
+                            onClick: (event)=>{
+                                event.stopPropagation();
+                                props.onClick(true);
+                            }
+                        }),
                         /*#__PURE__*/ _jsx(CloseOutlined, {
                             rev: undefined,
-                            onClick: ()=>{
+                            onClick: (event)=>{
+                                event.stopPropagation();
                                 props.onDel();
                             }
                         }),
@@ -76,24 +90,16 @@ const userOrgAppsQuery = gql(/* GraphQL */ `query layoutPkgUserRootOrgs($first:I
     }));
 };
 export default ((props)=>{
-    const [all, setAll] = useState([]), [filterList, setFilterList] = useState([]), [collects, setCollects] = useState([]), [latelys, setLately] = useState([]), locale = useLocale('AggregateMenu'), isDark = useDark(), tenantId = useTenantId(), sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
+    const [all, setAll] = useState([]), [filterList, setFilterList] = useState([]), [collects, setCollects] = useState([]), [latelys, setLately] = useState([]), locale = useLocale('AggregateMenu'), isDark = useDark(), sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
         coordinateGetter: sortableKeyboardCoordinates
     }));
     const request = useCallback(async ()=>{
-        var _appsResult_data;
-        const appsResult = await paging(userOrgAppsQuery, {
-            first: 30
-        }, 1, {
-            instanceName: iceUrqlInstance.ucenter
+        var _appsResult_data, _preferenceResult_data, _preferenceResult_data_orgUserPreference;
+        const appsResult = await paging(userAppsQuery, {}, 1, {
+            instanceName: instanceName.UCENTER
         }), apps = [];
-        if ((_appsResult_data = appsResult.data) === null || _appsResult_data === void 0 ? void 0 : _appsResult_data.userRootOrgs) appsResult.data.userRootOrgs.forEach((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((oApp)=>{
-                if ((oApp === null || oApp === void 0 ? void 0 : oApp.node) && !apps.find((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((app)=>{
+            apps.push(app);
         });
         const newAll = [];
         for(let i in apps){
@@ -101,7 +107,7 @@ export default ((props)=>{
             const menuResult = await query(userMenuListQuery, {
                 appCode: apps[i].code
             }, {
-                instanceName: iceUrqlInstance.ucenter
+                instanceName: instanceName.UCENTER
             });
             if ((_menuResult_data = menuResult.data) === null || _menuResult_data === void 0 ? void 0 : _menuResult_data.userMenus) {
                 const menu = menuResult.data.userMenus.sort((d1, d2)=>{
@@ -110,23 +116,84 @@ export default ((props)=>{
                 });
                 newAll.push({
                     app: apps[i],
-                    menu
+                    menu: treeFormatList(listFormatTreeData(menu, undefined, {
+                        key: 'id',
+                        parentId: 'parentID'
+                    }))
                 });
             }
         }
         setAll(newAll);
         setFilterList(newAll);
-    }, []), checkCollect = useCallback((menuItem)=>{
+        // 初始化收藏和初始化最近数据
+        const preferenceResult = await query(userPreferenceQuery, {}, {
+            instanceName: instanceName.UCENTER
+        });
+        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) {
+            const menuFavorite = preferenceResult.data.orgUserPreference.menuFavorite, menuRecent = preferenceResult.data.orgUserPreference.menuRecent, collectsList = [], latelyList = [];
+            if (menuFavorite) menuFavorite.forEach((id)=>{
+                for(let i in newAll){
+                    const menuItem = newAll[i].menu.find((item)=>item.id == id);
+                    if (menuItem) {
+                        collectsList.push(menuItem);
+                        break;
+                    }
+                }
+            });
+            if (menuRecent) menuRecent.forEach((id)=>{
+                for(let i in newAll){
+                    const menuItem = newAll[i].menu.find((item)=>item.id == id);
+                    if (menuItem) {
+                        latelyList.push(menuItem);
+                        break;
+                    }
+                }
+            });
+            setCollects(collectsList);
+            setLately(latelyList);
+        }
+    }, []), requestFavorite = async (list)=>{
+        // 异步存储收藏
+        await mutation(userPreferenceMut, {
+            input: {
+                menuFavorite: list.map((item)=>item.id)
+            }
+        }, {
+            instanceName: instanceName.UCENTER
+        });
+    }, requestRecent = async (ids)=>{
+        // 异步存储访问菜单记录
+        await mutation(userPreferenceMut, {
+            input: {
+                menuRecent: ids
+            }
+        }, {
+            instanceName: instanceName.UCENTER
+        });
+    }, checkCollect = useCallback((menuItem)=>{
         return !!collects.find((item)=>item.id === menuItem.id && item.appID === menuItem.appID);
     }, [
         collects
-    ]), menuItemRender = (menuItem)=>{
+    ]), onClickItem = async (menuItem, isOpen)=>{
+        const allApp = all.find((allItem)=>allItem.app.id == menuItem.appID);
+        if (allApp) {
+            var _props_onClick;
+            const latelyList = [
+                ...latelys
+            ];
+            const oldIdx = latelyList.findIndex((lately)=>lately.id == menuItem.id);
+            if (oldIdx > -1) latelyList.splice(oldIdx, 1);
+            latelyList.unshift(menuItem);
+            latelyList.splice(6);
+            await requestRecent(latelyList.map((item)=>item.id));
+            setLately(latelyList);
+            (_props_onClick = props.onClick) === null || _props_onClick === void 0 ? void 0 : _props_onClick.call(props, menuItem, allApp.app, isOpen);
+        }
+    }, menuItemRender = (menuItem)=>{
         return /*#__PURE__*/ _jsxs("div", {
             className: styles.aggregateMenuDrawerAllMenuItem,
             onClick: ()=>{
-                var _props_onClick;
-                const allApp = all.find((allItem)=>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", {
@@ -137,17 +204,32 @@ export default ((props)=>{
                     ]
                 }),
                 /*#__PURE__*/ _jsx("div", {
-                    children: /*#__PURE__*/ _jsx(StarOutlined, {
-                        rev: undefined,
-                        className: checkCollect(menuItem) ? 'collect' : '',
-                        onClick: (event)=>{
-                            event.stopPropagation();
-                            if (checkCollect(menuItem)) setCollects(collects.filter((c)=>!(c.id === menuItem.id && c.appID === menuItem.appID)));
-                            else setCollects([
-                                ...collects,
-                                menuItem
-                            ]);
-                        }
+                    className: styles.aggregateMenuDrawerAllMenuItemIcons,
+                    children: /*#__PURE__*/ _jsxs(Space, {
+                        children: [
+                            /*#__PURE__*/ _jsx(OpenWin, {
+                                className: "anticon",
+                                onClick: (event)=>{
+                                    event.stopPropagation();
+                                    onClickItem(menuItem, true);
+                                }
+                            }),
+                            /*#__PURE__*/ _jsx(StarOutlined, {
+                                rev: undefined,
+                                className: checkCollect(menuItem) ? 'collect' : '',
+                                onClick: async (event)=>{
+                                    event.stopPropagation();
+                                    let collectList = [];
+                                    if (checkCollect(menuItem)) collectList = collects.filter((c)=>!(c.id === menuItem.id && c.appID === menuItem.appID));
+                                    else collectList = [
+                                        ...collects,
+                                        menuItem
+                                    ];
+                                    await requestFavorite(collectList);
+                                    setCollects(collectList);
+                                }
+                            })
+                        ]
                     })
                 })
             ]
@@ -162,12 +244,14 @@ export default ((props)=>{
         props.dataSource
     ]);
     return /*#__PURE__*/ _jsx(_Fragment, {
-        children: /*#__PURE__*/ _jsx(Drawer, {
-            className: `${styles.aggregateMenuDrawer} ${isDark ? styles.aggregateMenuDark : ''}`,
+        children: /*#__PURE__*/ _jsx(Drawer, _object_spread_props(_object_spread({
             title: locale.title,
+            maskClosable: false,
             placement: "left",
+            width: 1060
+        }, props.drawerProps), {
+            className: `${styles.aggregateMenuDrawer} ${isDark ? styles.aggregateMenuDark : ''}`,
             open: props.open,
-            width: 1060,
             onClose: ()=>{
                 var _props_onChangeOpen;
                 (_props_onChangeOpen = props.onChangeOpen) === null || _props_onChangeOpen === void 0 ? void 0 : _props_onChangeOpen.call(props, false);
@@ -188,25 +272,25 @@ export default ((props)=>{
                                 if (over && active.id !== over.id) setCollects((items)=>{
                                     const oldIndex = items.findIndex((oItem)=>`${oItem.id}-${oItem.appID}` == active.id);
                                     const newIndex = items.findIndex((nItem)=>`${nItem.id}-${nItem.appID}` == over.id);
-                                    return arrayMove(items, oldIndex, newIndex);
+                                    const collectList = arrayMove(items, oldIndex, newIndex);
+                                    requestFavorite(collectList);
+                                    return collectList;
                                 });
                             },
                             children: /*#__PURE__*/ _jsx(SortableContext, {
                                 items: collects.map((item)=>`${item.id}-${item.appID}`),
                                 strategy: verticalListSortingStrategy,
-                                children: collects.map((item)=>{
-                                    /*#__PURE__*/ return _jsx(DargItem, {
+                                children: collects.map((item)=>/*#__PURE__*/ _jsx(DargItem, {
                                         value: item,
-                                        onDel: ()=>{
-                                            setCollects(collects.filter((c)=>!(c.id === item.id && c.appID === item.appID)));
+                                        onDel: async ()=>{
+                                            const collectList = collects.filter((c)=>!(c.id === item.id && c.appID === item.appID));
+                                            await requestFavorite(collectList);
+                                            setCollects(collectList);
                                         },
-                                        onClick: ()=>{
-                                            var _props_onClick;
-                                            const allApp = all.find((allItem)=>allItem.app.id == item.appID);
-                                            if (allApp) (_props_onClick = props.onClick) === null || _props_onClick === void 0 ? void 0 : _props_onClick.call(props, item, allApp.app);
+                                        onClick: (isOpen)=>{
+                                            onClickItem(item, isOpen);
                                         }
-                                    }, `c${item.id}-${item.appID}`);
-                                })
+                                    }, `c${item.id}-${item.appID}`))
                             })
                         }) : /*#__PURE__*/ _jsx(Empty, {
                             image: Empty.PRESENTED_IMAGE_SIMPLE,
@@ -260,25 +344,28 @@ export default ((props)=>{
                                 style: {
                                     height: latelys.length ? "calc(100% - 164px)" : "calc(100% - 52px)"
                                 },
-                                children: filterList.map((item)=>/*#__PURE__*/ _jsxs("div", {
-                                        className: styles.aggregateMenuDrawerAllMenuColumn,
-                                        children: [
-                                            /*#__PURE__*/ _jsx("div", {
-                                                className: styles.aggregateMenuDrawerAllAppTitle,
-                                                children: item.app.name
-                                            }),
-                                            item.menu.map((menuItem)=>menuItem.kind === AppMenuKind.Menu ? menuItemRender(menuItem) : /*#__PURE__*/ _jsx("div", {
-                                                    className: styles.aggregateMenuDrawerAllMenuItemDir,
-                                                    children: menuItem.name
-                                                }, `${menuItem.appID}-${menuItem.id}`))
-                                        ]
-                                    }, item.app.code))
+                                children: /*#__PURE__*/ _jsx("div", {
+                                    className: styles.aggregateMenuDrawerAllMenuColumn,
+                                    children: filterList.map((item)=>/*#__PURE__*/ _jsxs("div", {
+                                            className: styles.aggregateMenuDrawerAllMenuColumnItem,
+                                            children: [
+                                                /*#__PURE__*/ _jsx("div", {
+                                                    className: styles.aggregateMenuDrawerAllAppTitle,
+                                                    children: item.app.name
+                                                }),
+                                                item.menu.map((menuItem)=>menuItem.kind === AppMenuKind.Menu ? menuItemRender(menuItem) : /*#__PURE__*/ _jsx("div", {
+                                                        className: styles.aggregateMenuDrawerAllMenuItemDir,
+                                                        children: menuItem.name
+                                                    }, `${menuItem.appID}-${menuItem.id}`))
+                                            ]
+                                        }, item.app.code))
+                                })
                             })
                         ]
                     })
                 ]
             })
-        })
+        }))
     });
 });