beer-assembly-biz 1.1.3-alpha.1 → 1.1.3-alpha.11

package/UploadModals.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+import { Handler } from './type';
+export type FileType = 'IMAGE' | 'GIT' | 'VIDEO' | 'DOCUMENT';
+/**
+ * 文件上传模态框.
+ */
+export declare class UploadModals {
+    /**
+     * 弹出文件上传.
+     */
+    static useUpload(fileType: FileType[], key?: string): [Handler<File[]>, ReactNode];
+}

package/UploadModals.js

@@ -0,0 +1,233 @@
+import React, { useRef, useState } from 'react';
+import { Button, Checkbox, Modal, Space } from 'antd';
+import { css } from '@emotion/css';
+import ElementUtils from 'beer-network/elementUtils';
+/**
+ * 文件上传模态框.
+ */
+export class UploadModals {
+    /**
+     * 弹出文件上传.
+     */
+    static useUpload(fileType, key = 'DEFAULT') {
+        const [isOpenModal, setIsOpenModal] = useState(false);
+        const [isPop, setIsPop] = useState(false);
+        const callbackRef = useRef(undefined);
+        const getPopStatus = () => {
+            return localStorage.getItem('__UPLOAD_MODALS_' + key) !== '1';
+        };
+        const setPopStatus = (status) => {
+            if (status) {
+                localStorage.setItem('__UPLOAD_MODALS_' + key, '1');
+            }
+        };
+        const filterFile = (files) => {
+            if (files === null) {
+                return [];
+            }
+            const result = [];
+            for (let i = 0; i < files.length; i += 1) {
+                const file = files.item(i) ?? undefined;
+                if (file === undefined) {
+                    continue;
+                }
+                const type = fileType.find(it => {
+                    if (it === 'IMAGE' && ['image/png', 'image/jpeg', 'image/webp'].indexOf(file.type) > -1) {
+                        return true;
+                    }
+                    const fileExtension = file.name.split('.')
+                        ?.pop()
+                        ?.toLowerCase() ?? 'none';
+                    return it === 'VIDEO' && ['wmv', 'avi', '3gp', 'mov', 'mp4', 'flv', 'rmvb', 'mkv', 'm4v', 'x-flv'].indexOf(fileExtension) > -1;
+                });
+                if (type === undefined) {
+                    continue;
+                }
+                let size = 0;
+                switch (type) {
+                    case 'IMAGE':
+                        size = 10 * 1024 * 1024;
+                        break;
+                    case 'VIDEO':
+                        size = 300 * 1024 * 1024;
+                        break;
+                    default:
+                        size = 50 * 1024 * 1024;
+                        break;
+                }
+                if (file.size > size) {
+                    continue;
+                }
+                result.push(file);
+            }
+            return result;
+        };
+        const onSelectFile = async () => {
+            const fileList = await ElementUtils.selectFile(true);
+            await callbackRef.current?.(filterFile(fileList));
+        };
+        const onConfirm = async () => {
+            if (callbackRef.current) {
+                setPopStatus(isPop);
+                onSelectFile()
+                    .then();
+                setIsOpenModal(false);
+            }
+            else {
+                setIsOpenModal(false);
+            }
+            return true;
+        };
+        const handler = {
+            ok: (callback) => {
+                if (!getPopStatus()) {
+                    onSelectFile()
+                        .then();
+                    return;
+                }
+                setIsPop(false);
+                setIsOpenModal(true);
+                callbackRef.current = callback;
+            }
+        };
+        return [handler, React.createElement(React.Fragment, null,
+                React.createElement(Modal, { title: "\u6587\u4EF6\u4E0A\u4F20\u8981\u6C42", width: 360, open: isOpenModal, onCancel: () => setIsOpenModal(false), styles: {
+                        content: {
+                            padding: 0
+                        },
+                        header: {
+                            paddingBlock: '16px 0',
+                            paddingInline: 20,
+                            marginInlineStart: 0,
+                            marginBlockEnd: 0
+                        },
+                        wrapper: {
+                            padding: 0
+                        },
+                        body: {
+                            paddingInline: 20,
+                            paddingBlockStart: 8,
+                            paddingBlockEnd: 4
+                        },
+                        footer: {
+                            margin: 0,
+                            paddingBlockEnd: 12
+                        }
+                    }, footer: React.createElement(Space, { style: {
+                            width: '100%',
+                            boxSizing: 'border-box',
+                            justifyContent: 'space-between',
+                            paddingInline: 20,
+                            paddingBlock: 4
+                        } },
+                        React.createElement(Checkbox, { checked: isPop, onChange: (e) => setIsPop(e.target.checked) }, "\u4E0B\u6B21\u4E0D\u5728\u5F39\u51FA"),
+                        React.createElement(Space, { size: 12 },
+                            React.createElement(Button, { type: "primary", onClick: onConfirm }, "\u786E\u5B9A"),
+                            React.createElement(Button, { onClick: () => setIsOpenModal(false) }, "\u53D6\u6D88"))) },
+                    React.createElement("div", { className: css `
+            .title {
+                font-weight: 500;
+                font-size: 14px;
+                margin: 12px 0 4px 0;
+            }
+
+            .title:first-child {
+                margin-top: 4px;
+            }
+
+            ul {
+                margin: 0;
+                padding-left: 20px;
+            }
+
+            li {
+                padding-block: 2px;
+            }
+
+            .desc {
+                margin: 4px 0;
+                font-size: 12px;
+                color: #444
+            }
+
+            code {
+                background: #EFEFEF;
+                padding: 2px 4px;
+                border-radius: 2px;
+                font-size: 12px;
+            }
+        ` },
+                        fileType.find(it => it === 'IMAGE') !== undefined ? React.createElement(React.Fragment, null,
+                            fileType.length === 1 ? undefined : React.createElement("div", { className: "title" }, "\u56FE\u7247"),
+                            React.createElement("ul", null,
+                                React.createElement("li", null, "\u5355\u5F20\u5927\u5C0F\uFF1A\u226410M"),
+                                React.createElement("li", null,
+                                    "\u683C\u5F0F\uFF1A",
+                                    React.createElement("code", null, "JPEG"),
+                                    "\u3001",
+                                    React.createElement("code", null, "JPG"),
+                                    "\u3001",
+                                    React.createElement("code", null, "PNG"),
+                                    "\u3001",
+                                    React.createElement("code", null, "WEBP")))) : undefined,
+                        fileType.find(it => it === 'GIT') !== undefined ? React.createElement(React.Fragment, null,
+                            fileType.length === 1 ? undefined : React.createElement("div", { className: "title" }, "\u52A8\u56FE\uFF08GIF\uFF09"),
+                            React.createElement("ul", null,
+                                React.createElement("li", null, "\u5355\u4E2A\u5927\u5C0F\uFF1A\u226410M"),
+                                React.createElement("li", null,
+                                    "\u683C\u5F0F\uFF1A",
+                                    React.createElement("code", null, "GIF")))) : undefined,
+                        fileType.find(it => it === 'VIDEO') !== undefined ? React.createElement(React.Fragment, null,
+                            fileType.length === 1 ? undefined : React.createElement("div", { className: "title" }, "\u89C6\u9891"),
+                            React.createElement("ul", null,
+                                React.createElement("li", null, "\u5355\u4E2A\u5927\u5C0F\uFF1A\u2264300M"),
+                                React.createElement("li", null, "\u65F6\u957F\uFF1A\u226410\u5206\u949F"),
+                                React.createElement("li", null,
+                                    "\u683C\u5F0F\uFF1A",
+                                    React.createElement("code", null, "WMV"),
+                                    "\u3001",
+                                    React.createElement("code", null, "AVI"),
+                                    "\u3001",
+                                    React.createElement("code", null, "3GP"),
+                                    "\u3001",
+                                    React.createElement("code", null, "MOV"),
+                                    "\u3001",
+                                    React.createElement("code", null, "MP4"),
+                                    "\u3001",
+                                    React.createElement("code", null, "FLV"),
+                                    "\u3001",
+                                    React.createElement("code", null, "RMVB"),
+                                    "\u3001",
+                                    React.createElement("code", null, "MKV"),
+                                    "\u3001",
+                                    React.createElement("code", null, "M4V"),
+                                    "\u3001",
+                                    React.createElement("code", null, "X-FLV")))) : undefined,
+                        fileType.find(it => it === 'DOCUMENT') !== undefined ? React.createElement(React.Fragment, null,
+                            fileType.length === 1 ? undefined : React.createElement("div", { className: "title" }, "\u6587\u6863"),
+                            React.createElement("ul", null,
+                                React.createElement("li", null, "\u5355\u4E2A\u5927\u5C0F\uFF1A\u226430M"),
+                                React.createElement("li", null,
+                                    "\u683C\u5F0F\uFF1A",
+                                    React.createElement("code", null, "PDF"),
+                                    "\u3001",
+                                    React.createElement("code", null, "DOC"),
+                                    "\u3001",
+                                    React.createElement("code", null, "DOCX"),
+                                    "\u3001",
+                                    React.createElement("code", null, "XLS"),
+                                    "\u3001",
+                                    React.createElement("code", null, "XLSX"),
+                                    "\u3001",
+                                    React.createElement("code", null, "PPT"),
+                                    "\u3001",
+                                    React.createElement("code", null, "PPTX"),
+                                    "\u3001",
+                                    React.createElement("code", null, "TXT")))) : undefined,
+                        React.createElement("div", { style: { marginTop: 12 } },
+                            React.createElement("div", { className: "desc" },
+                                React.createElement("span", { style: { fontWeight: 500 } }, "\u4E25\u7981\u4E0A\u4F20\u5BFC\u6D41\u3001\u8FDD\u89C4\u6216\u8FDD\u7981\u5185\u5BB9"),
+                                "\uFF0C\u8FDD\u8005\u5C06\u5C01\u7981\u8D26\u53F7\u5904\u7406\u3002"),
+                            React.createElement("div", { className: "desc" }, "\u8BF7\u786E\u4FDD\u6587\u4EF6\u7B26\u5408\u683C\u5F0F\u53CA\u5927\u5C0F\u8981\u6C42\uFF0C\u5426\u5219\u53EF\u80FD\u4E0A\u4F20\u5931\u8D25\u3002")))))];
+    }
+}

package/auth/AuthStyle01.d.ts

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { Slider, SliderCodeToken } from '../slider/SliderCode';
-export declare type AuthStyleProps = {
+export declare type AuthStyle01Props = {
     /**
      * 主颜色.
      */
@@ -67,4 +67,4 @@ export declare type AuthStyleProps = {
      */
     login?: (userInfo: any) => void;
 };
-export declare const AuthStyle: FC<AuthStyleProps>;
+export declare const AuthStyle01: FC<AuthStyle01Props>;

package/auth/AuthStyle01.js

@@ -4,7 +4,7 @@ import { css } from '@emotion/css';
 import { AuthPassword } from './AuthPassword';
 import ImageBackground from '../images/assets_background_01.png';
 import { Session } from './session';
-export const AuthStyle = (props) => {
+export const AuthStyle01 = (props) => {
     const { token } = theme.useToken();
     const [errorMessage, setErrorMessage] = useState('');
     const onConfirmLogin = async (code, slider, params) => {

package/auth/AuthStyle02.d.ts

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { Slider, SliderCodeToken } from '../slider/SliderCode';
-export declare type AuthStyleProps = {
+export declare type AuthStyle02Props = {
     /**
      * 主颜色.
      */
@@ -63,4 +63,4 @@ export declare type AuthStyleProps = {
      */
     login?: (userInfo: any) => void;
 };
-export declare const AuthStyle: FC<AuthStyleProps>;
+export declare const AuthStyle02: FC<AuthStyle02Props>;

package/auth/AuthStyle02.js

@@ -4,7 +4,7 @@ import { css } from '@emotion/css';
 import ImageBackground from '../images/assets_background_01.png';
 import { Session } from './session';
 import { AuthPassword } from './AuthPassword';
-export const AuthStyle = (props) => {
+export const AuthStyle02 = (props) => {
     const { token } = theme.useToken();
     const [errorMessage, setErrorMessage] = useState('');
     const onConfirmLogin = async (code, slider, params) => {

package/config/index.js

@@ -1,78 +1,78 @@
 export class Config {
+    static colors = {
+        primary: '#108ee9',
+        success: '#389e0d',
+        danger: '#cf1322',
+        warning: '#faad14',
+        info: '#0958d9',
+        light: '#999'
+    };
+    static loadingText = [
+        '请稍候，正在加载数据...',
+        '系统准备中，请稍等...',
+        '准备您的体验，马上回来...',
+        '系统正在整理文件...',
+        '在与未来建立联系...',
+        '正在构建您的旅程...',
+        '数据正在装载，请耐心等待...',
+        '读取档案中，请稍候...',
+        '正在开启您的应用...',
+        '加载中，请稍后...',
+        '系统正在同步，请耐心等候...',
+        '正在准备您的界面...',
+        '系统正在激活中...',
+        '正在处理中，请稍后...',
+        '一切都在准备中，马上见...',
+        '正在初始化设置...',
+        '在计算最优路径...',
+        '数据加载中，稍等片刻...',
+        '正在准备资源...',
+        '正在收集信息，请稍候...',
+        '在构建数字世界...',
+        '载入中，请稍等...',
+        '正在启动服务...',
+        '数据处理中，请稍后...',
+        '正在连接网络...',
+        '在获取最新信息...',
+        '加载模块中，请耐心等候...',
+        '系统优化中，请稍后...',
+        '正在初始化，请稍等...',
+        '快要完成了，谢谢您的耐心...'
+    ];
+    static goodMorning = [
+        '早安！愿您拥有愉快的一天。',
+        '早上好！开启新的一天。',
+        '早晨的阳光给你带来美好的一天。',
+        '愿您今天充满活力，早上好！',
+        '早安！新的一天，新的希望。',
+        '早上好！一起迎接新的开始。',
+        '早晨的微风让您的心情更加愉快。',
+        '早上好！迎接美好的一天。',
+        '早安！享受这美好的清晨。',
+        '早上好！愿您有个美好的一天。'
+    ];
+    static goodAfternoon = [
+        '下午好！下午的时光给您带来温暖。',
+        '愿您度过一个愉快的下午。',
+        '下午好！保持积极的心态。',
+        '下午的阳光洒满大地，祝您心情愉悦。',
+        '下午好！希望今天的一切都顺利。',
+        '祝您度过一个轻松的下午。',
+        '下午好！享受这片刻的宁静。',
+        '下午是小憩的好时光，祝您下午愉快。',
+        '下午好！愿您今天过得顺利。',
+        '下午是忙碌中的小憩时光，祝您愉快。'
+    ];
+    static goodEvening = [
+        '晚上好！愿您度过一个愉快的夜晚。',
+        '夜幕降临，祝您晚上愉快。',
+        '晚上好！希望您有一个美好的夜晚。',
+        '在星光下，愿您心情愉悦。',
+        '晚上好！祝您一晚安宁。',
+        '夜晚的宁静带给您舒适的感觉。',
+        '愿您度过一个平静的夜晚，晚上好！',
+        '晚上好！请享受这宁静的夜晚。',
+        '在星光的陪伴下，祝您晚安。',
+        '晚上好！愿您有个温馨的夜晚。'
+    ];
 }
-Config.colors = {
-    primary: '#108ee9',
-    success: '#389e0d',
-    danger: '#cf1322',
-    warning: '#faad14',
-    info: '#0958d9',
-    light: '#999'
-};
-Config.loadingText = [
-    '请稍候，正在加载数据...',
-    '系统准备中，请稍等...',
-    '准备您的体验，马上回来...',
-    '系统正在整理文件...',
-    '在与未来建立联系...',
-    '正在构建您的旅程...',
-    '数据正在装载，请耐心等待...',
-    '读取档案中，请稍候...',
-    '正在开启您的应用...',
-    '加载中，请稍后...',
-    '系统正在同步，请耐心等候...',
-    '正在准备您的界面...',
-    '系统正在激活中...',
-    '正在处理中，请稍后...',
-    '一切都在准备中，马上见...',
-    '正在初始化设置...',
-    '在计算最优路径...',
-    '数据加载中，稍等片刻...',
-    '正在准备资源...',
-    '正在收集信息，请稍候...',
-    '在构建数字世界...',
-    '载入中，请稍等...',
-    '正在启动服务...',
-    '数据处理中，请稍后...',
-    '正在连接网络...',
-    '在获取最新信息...',
-    '加载模块中，请耐心等候...',
-    '系统优化中，请稍后...',
-    '正在初始化，请稍等...',
-    '快要完成了，谢谢您的耐心...'
-];
-Config.goodMorning = [
-    '早安！愿您拥有愉快的一天。',
-    '早上好！开启新的一天。',
-    '早晨的阳光给你带来美好的一天。',
-    '愿您今天充满活力，早上好！',
-    '早安！新的一天，新的希望。',
-    '早上好！一起迎接新的开始。',
-    '早晨的微风让您的心情更加愉快。',
-    '早上好！迎接美好的一天。',
-    '早安！享受这美好的清晨。',
-    '早上好！愿您有个美好的一天。'
-];
-Config.goodAfternoon = [
-    '下午好！下午的时光给您带来温暖。',
-    '愿您度过一个愉快的下午。',
-    '下午好！保持积极的心态。',
-    '下午的阳光洒满大地，祝您心情愉悦。',
-    '下午好！希望今天的一切都顺利。',
-    '祝您度过一个轻松的下午。',
-    '下午好！享受这片刻的宁静。',
-    '下午是小憩的好时光，祝您下午愉快。',
-    '下午好！愿您今天过得顺利。',
-    '下午是忙碌中的小憩时光，祝您愉快。'
-];
-Config.goodEvening = [
-    '晚上好！愿您度过一个愉快的夜晚。',
-    '夜幕降临，祝您晚上愉快。',
-    '晚上好！希望您有一个美好的夜晚。',
-    '在星光下，愿您心情愉悦。',
-    '晚上好！祝您一晚安宁。',
-    '夜晚的宁静带给您舒适的感觉。',
-    '愿您度过一个平静的夜晚，晚上好！',
-    '晚上好！请享受这宁静的夜晚。',
-    '在星光的陪伴下，祝您晚安。',
-    '晚上好！愿您有个温馨的夜晚。'
-];

package/index.d.ts

@@ -1,14 +1,18 @@
 export { AuthPassword, AuthPasswordProps } from './auth/AuthPassword';
-export { AuthStyle as AuthStyle01, AuthStyleProps as AuthStyleProps01 } from './auth/AuthStyle01';
-export { AuthStyle as AuthStyle02, AuthStyleProps as AuthStyleProps02 } from './auth/AuthStyle02';
+export { AuthStyle01, AuthStyle01Props } from './auth/AuthStyle01';
+export { AuthStyle02, AuthStyle02Props } from './auth/AuthStyle02';
 export { Config } from './config';
 export { ParentContext } from './content/ParentContext';
 export { PermissionContext } from './content/PermissionContext';
-export { AppLayout } from './layout/AppLayout';
+export { AppLayout, App, UserInfo } from './layout/AppLayout';
 export { BackPageContainer } from './layout/BackPageContainer';
 export { MyPageContainer } from './layout/MyPageContainer';
+export { SubMenusContainer, SubMenusItem, SubMenusProps } from './layout/SubMenusContainer';
+export { MediaItem, DirectoryItem, Media, MediaProps } from './media/Media';
+export { MediaModals } from './media/MediaModals';
 export { Permission } from './permission/Permission';
 export { AIEditor, AIEditorProps } from './rich/AIEditor';
 export { Slider, SliderCode, SliderCodeToken } from './slider/SliderCode';
-export { Promises } from './promises';
+export { Promises, Async, NumberUtils, CascadeUtils, ArrayUtils, NavigateUtils } from './promises';
 export { UserModals } from './UserModals';
+export { UploadModals, FileType } from './UploadModals';

package/index.js

@@ -1,14 +1,18 @@
 export { AuthPassword } from './auth/AuthPassword';
-export { AuthStyle as AuthStyle01 } from './auth/AuthStyle01';
-export { AuthStyle as AuthStyle02 } from './auth/AuthStyle02';
+export { AuthStyle01 } from './auth/AuthStyle01';
+export { AuthStyle02 } from './auth/AuthStyle02';
 export { Config } from './config';
 export { ParentContext } from './content/ParentContext';
 export { PermissionContext } from './content/PermissionContext';
 export { AppLayout } from './layout/AppLayout';
 export { BackPageContainer } from './layout/BackPageContainer';
 export { MyPageContainer } from './layout/MyPageContainer';
+export { SubMenusContainer } from './layout/SubMenusContainer';
+export { Media } from './media/Media';
+export { MediaModals } from './media/MediaModals';
 export { Permission } from './permission/Permission';
 export { AIEditor } from './rich/AIEditor';
 export { SliderCode } from './slider/SliderCode';
-export { Promises } from './promises';
+export { Promises, Async, NumberUtils, CascadeUtils, ArrayUtils, NavigateUtils } from './promises';
 export { UserModals } from './UserModals';
+export { UploadModals } from './UploadModals';

package/layout/AppLayout.js

@@ -4,9 +4,9 @@ import { ProLayout } from '@ant-design/pro-components';
 import { Dropdown, message, theme, Typography } from 'antd';
 import { Session } from 'beer-network/session';
 import dayjs from 'dayjs';
-import ImageLayout01 from './images/layout_01.png';
-import ImageLayout02 from './images/layout_02.png';
-import ImageLayout03 from './images/layout_03.png';
+import ImageLayout01 from '../images/layout_01.png';
+import ImageLayout02 from '../images/layout_02.png';
+import ImageLayout03 from '../images/layout_03.png';
 dayjs.locale('zh-cn');
 /**
  * 通用布局.
@@ -215,7 +215,7 @@ export const AppLayout = (props) => {
                         textIndent: 10,
                         fontSize: token.fontSize + 2,
                         color: '#333',
-                        fontWeight: 500
+                        fontWeight: 600
                     } }, app?.name));
             }, menu: {
                 collapsedShowTitle: false,

package/layout/BackPageContainer.d.ts

@@ -2,6 +2,7 @@ import React, { FC } from 'react';
 export declare type BackPageContainerProps = {
     title?: string | undefined;
     children?: React.ReactNode | undefined;
+    onBack?: () => void;
 };
 /**
  * 子页面容器布局.

package/layout/BackPageContainer.js

@@ -11,7 +11,10 @@ export const BackPageContainer = (props) => {
     const navigate = useNavigate();
     return React.createElement(React.Fragment, null,
         React.createElement(PageContainer, { onBack: () => {
-                navigate(-1);
+                const defaultBack = () => {
+                    return navigate(-1);
+                };
+                (props?.onBack ?? defaultBack)?.();
             }, className: css `
           .ant-page-header-heading {
               padding-block-start: 0 !important;

package/layout/SubMenusContainer.d.ts

@@ -0,0 +1,27 @@
+import React, { CSSProperties, FC } from 'react';
+import type { ComponentToken as MenuComponentToken } from 'antd/es/menu/style';
+export declare type SubMenusItem = {
+    key?: string;
+    value?: string;
+    label: string | React.ReactNode;
+    children: SubMenusItem[];
+};
+export declare type SubMenusProps = {
+    items: SubMenusItem[];
+    token?: MenuComponentToken | undefined;
+    gap?: number | undefined;
+    height?: number | string | undefined;
+    width?: number | undefined;
+    padding?: number | string | undefined;
+    styles?: {
+        menus?: CSSProperties | undefined;
+        body?: CSSProperties | undefined;
+    };
+    header?: React.ReactNode | undefined;
+    children?: React.ReactNode | undefined;
+    value?: string | undefined;
+    openKeys?: string[] | undefined;
+    onChange?: (key: string) => void;
+    onOpenChange?: (keys: string[]) => void;
+};
+export declare const SubMenusContainer: FC<SubMenusProps>;

package/layout/SubMenusContainer.js

@@ -0,0 +1,71 @@
+import React, { useEffect, useState } from 'react';
+import { ConfigProvider, Menu } from 'antd';
+export const SubMenusContainer = (props) => {
+    const [selectKeys, setSelectKeys] = useState([]);
+    const [openKeys, setOpenKeys] = useState([]);
+    useEffect(() => {
+        if (props?.value === undefined) {
+            return;
+        }
+        setSelectKeys([props.value]);
+    }, [props?.value]);
+    useEffect(() => {
+        if (props?.openKeys === undefined) {
+            return;
+        }
+        setOpenKeys(props.openKeys);
+    }, [props?.openKeys]);
+    return React.createElement(React.Fragment, null,
+        React.createElement(ConfigProvider, { theme: {
+                components: {
+                    Menu: props?.token || {
+                        itemHeight: 36,
+                        itemBorderRadius: 0,
+                        iconMarginInlineEnd: 0,
+                        itemMarginBlock: 0,
+                        itemMarginInline: 0,
+                        itemPaddingInline: 0,
+                        subMenuItemBg: 'transparent',
+                        itemHoverBg: 'rgba(22,100,255,.04)',
+                        itemHoverColor: '#000',
+                        itemActiveBg: 'rgba(22,100,255,.08)',
+                        itemSelectedBg: 'rgba(22,100,255,.08)'
+                    }
+                }
+            } },
+            React.createElement("div", { style: {
+                    display: 'flex',
+                    gap: `${props?.gap || 12}px`,
+                    alignItems: 'flex-start',
+                    width: '100%'
+                } },
+                React.createElement("div", { style: {
+                        width: props?.width || 200,
+                        backgroundColor: '#fff',
+                        height: props?.height || '100vh',
+                        userSelect: 'none',
+                        overflow: 'hidden',
+                        ...(props?.styles?.menus || {})
+                    } },
+                    props?.header !== undefined ? React.createElement("div", { style: {
+                            padding: '12px 0',
+                            fontWeight: 500,
+                            borderInlineEnd: '1px solid rgba(5,5,5,.06)',
+                            borderBlockEnd: '1px solid rgba(5,5,5,.06)'
+                        } }, props?.header) : undefined,
+                    React.createElement(Menu, { style: {
+                            height: '100%'
+                        }, onClick: (e) => {
+                            props?.onChange?.(e.key);
+                        }, onOpenChange: (e) => {
+                            props?.onOpenChange?.(e);
+                        }, subMenuCloseDelay: 0, selectedKeys: selectKeys, openKeys: openKeys, mode: "inline", inlineIndent: 16, items: props?.items })),
+                React.createElement("div", { style: {
+                        width: `calc(100% - ${(props?.width || 200) + (props?.gap || 12) + (props?.gap || 12)}px)`,
+                        marginRight: (props?.gap || 12),
+                        height: '100%',
+                        padding: props?.padding || '12px 0',
+                        ...(props?.styles?.body || {}),
+                        overflow: 'auto'
+                    } }, props?.children))));
+};