beer-assembly-biz 1.1.3-alpha.9 → 1.1.5-beta.1

package/ProgressModal.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+export declare type ProgressCallback = (progress: number, message?: string) => void;
+export declare type ProgressProps = {
+    title?: ReactNode;
+    prompt?: ReactNode;
+};
+export declare const ProgressModal: (props?: ProgressProps) => [() => ProgressCallback, ReactNode];

package/ProgressModal.js

@@ -0,0 +1,34 @@
+import React, { useState } from 'react';
+import { Modal, Progress } from 'antd';
+import { Config } from './config';
+export const ProgressModal = (props) => {
+    const [isOpenModal, setIsOpenModal] = useState(false);
+    const [message, setMessage] = useState('');
+    const [progress, setProgress] = useState(0);
+    const handler = () => {
+        setProgress(0);
+        setMessage('');
+        setIsOpenModal(true);
+        return (progress, message) => {
+            if (progress >= 100) {
+                setIsOpenModal(false);
+                return;
+            }
+            setProgress(progress);
+            setMessage(message ?? '');
+        };
+    };
+    return [handler, React.createElement(React.Fragment, null,
+            React.createElement(Modal, { title: props?.title ?? '提交数据中', width: 360, maskClosable: false, closable: false, open: isOpenModal, onCancel: () => setIsOpenModal(false), footer: false, styles: {
+                    body: { padding: '0' }
+                } },
+                React.createElement(Progress, { percent: progress }),
+                React.createElement("div", { style: {
+                        color: Config.colors.danger,
+                        marginTop: 4,
+                        padding: '2px 0'
+                    } }, props?.prompt ?? '处理过程中请不要刷新（关闭）浏览器'),
+                React.createElement("div", { style: {
+                        color: '#888'
+                    } }, (message ?? '') === '' ? '连接服务器...' : message)))];
+};

package/UploadModals.js

@@ -38,6 +38,9 @@ export class UploadModals {
                     const fileExtension = file.name.split('.')
                         ?.pop()
                         ?.toLowerCase() ?? 'none';
+                    if (it === 'DOCUMENT' && ['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'pdf', 'txt'].indexOf(fileExtension) > -1) {
+                        return true;
+                    }
                     return it === 'VIDEO' && ['wmv', 'avi', '3gp', 'mov', 'mp4', 'flv', 'rmvb', 'mkv', 'm4v', 'x-flv'].indexOf(fileExtension) > -1;
                 });
                 if (type === undefined) {
@@ -48,6 +51,9 @@ export class UploadModals {
                     case 'IMAGE':
                         size = 10 * 1024 * 1024;
                         break;
+                    case 'DOCUMENT':
+                        size = 30 * 1024 * 1024;
+                        break;
                     case 'VIDEO':
                         size = 300 * 1024 * 1024;
                         break;

package/auth/AuthPassword.d.ts

@@ -1,5 +1,5 @@
-import { Slider, SliderCodeToken } from '../slider/SliderCode';
 import React from 'react';
+import { Slider, SliderCodeToken } from '../slider/SliderCode';
 export declare type AuthPasswordProps = {
     /**
      * 是否启用企业登录.

package/auth/AuthPassword.js

@@ -1,8 +1,8 @@
 import { Button, Checkbox, Dropdown, Form, Input, theme } from 'antd';
-import { SliderCode } from '../slider/SliderCode';
 import { css } from '@emotion/css';
 import React, { useState } from 'react';
 import { useForm } from 'antd/es/form/Form';
+import { SliderCode } from '../slider/SliderCode';
 export const AuthPassword = (props) => {
     const { token } = theme.useToken();
     const [form] = useForm();

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

@@ -7,11 +7,13 @@ export { PermissionContext } from './content/PermissionContext';
 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, Async, NumberUtils, CascadeUtils, ArrayUtils, NavigateUtils } from './promises';
+export { ProgressModal, ProgressCallback, ProgressProps } from './ProgressModal';
 export { UserModals } from './UserModals';
 export { UploadModals, FileType } from './UploadModals';

package/index.js

@@ -7,11 +7,13 @@ 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, Async, NumberUtils, CascadeUtils, ArrayUtils, NavigateUtils } from './promises';
+export { ProgressModal } from './ProgressModal';
 export { UserModals } from './UserModals';
 export { UploadModals } from './UploadModals';

package/layout/AppLayout.d.ts

@@ -19,11 +19,11 @@ export declare type App = {
     /**
      * App图标
      */
-    icon: string;
+    icon?: string;
     /**
      * App描述
      */
-    description: string;
+    description?: string;
     /**
      * 路径
      */
@@ -32,6 +32,10 @@ export declare type App = {
      * App 默认路径
      */
     defaultPath: string;
+    /**
+     * 配置.
+     */
+    config?: {};
 };
 /**
  * 用户信息实体.
@@ -66,6 +70,22 @@ export declare type LayoutProps = {
      * App列表 (切换应用)
      */
     apps: App[];
+    /**
+     * 菜单宽度.
+     */
+    siderWidth?: number;
+    /**
+     * 菜单选项高度.
+     */
+    siderMenusItemHeight?: number;
+    /**
+     * 菜单类型.
+     */
+    siderMenuType?: 'sub' | 'group';
+    /**
+     * 头像的标题.
+     */
+    avatarTitle?: (userInfo: UserInfo | undefined) => ReactNode;
     /**
      * 布局内容
      */
@@ -98,6 +118,10 @@ export declare type LayoutProps = {
          * 高度
          */
         height?: number;
+        /**
+         * 宽度
+         */
+        width?: number;
         /**
          * 跳转路径
          */
@@ -115,6 +139,10 @@ export declare type LayoutProps = {
      * 头部: 从右到左菜单
      */
     headerMenus?: ReactNode[];
+    /**
+     * 头部: 从左到右菜单
+     */
+    headerContentRender?: ReactNode;
     /**
      * 切换菜单触发事件
      * @param path 路径.
@@ -125,6 +153,14 @@ export declare type LayoutProps = {
      * @param appCode 应用代码
      */
     requestMenus?: (appCode: string) => Promise<MenuDataItem[]>;
+    /**
+     * 全局消息弹框(走马灯效果)
+     */
+    alter?: {
+        enable: boolean;
+        marquee: boolean;
+        message: ReactNode;
+    };
 };
 /**
  * 通用布局.

package/layout/AppLayout.js

@@ -1,9 +1,10 @@
 import React, { useEffect, useState } from 'react';
 import { css } from '@emotion/css';
 import { ProLayout } from '@ant-design/pro-components';
-import { Dropdown, message, theme, Typography } from 'antd';
+import { Alert, Dropdown, message, theme, Typography } from 'antd';
 import { Session } from 'beer-network/session';
 import dayjs from 'dayjs';
+import Marquee from 'react-fast-marquee';
 import ImageLayout01 from '../images/layout_01.png';
 import ImageLayout02 from '../images/layout_02.png';
 import ImageLayout03 from '../images/layout_03.png';
@@ -103,6 +104,7 @@ export const AppLayout = (props) => {
         refreshPath()
             .then();
     }, [menus, props.path]);
+    // 更新属性触发: 菜单
     // 更新属性触发: 请求用户信息
     useEffect(() => {
         props.requestUser()
@@ -118,6 +120,10 @@ export const AppLayout = (props) => {
     return React.createElement(React.Fragment, null,
         contextHolder,
         React.createElement(ProLayout, { theme: "light", className: css `
+          .ant-pro-global-header-logo {
+              margin-inline-end: 0;
+          }
+
           .ant-pro-sider-logo {
               .ant-pro-layout-apps-icon {
                   display: ${collapsed ? 'flex' : 'none'};
@@ -156,7 +162,9 @@ export const AppLayout = (props) => {
           .ant-pro-sider-collapsed-button {
               inset-block-start: 15px;
           }
-      `, selectedKeys: pathKeys, locale: "zh-CN", navTheme: "light", fixSiderbar: true, layout: "mix", contentWidth: "Fluid", splitMenus: false, bgLayoutImgList: [
+      `, style: {
+                minWidth: 1000
+            }, selectedKeys: pathKeys, locale: "zh-CN", navTheme: "light", fixSiderbar: true, layout: "mix", contentWidth: "Fluid", splitMenus: false, bgLayoutImgList: [
                 {
                     src: ImageLayout01,
                     left: 85,
@@ -175,26 +183,26 @@ export const AppLayout = (props) => {
                     left: 0,
                     width: '331px'
                 }
-            ], siderWidth: 200, token: {
-                bgLayout: '#f5f7fa',
+            ], siderWidth: props?.siderWidth ?? 190, breakpoint: props?.siderMenuType === 'group' ? 'xs' : undefined, token: {
+                bgLayout: '#F5F7FA',
                 header: {
                     heightLayoutHeader: 48
                 },
                 sider: {
-                    menuHeight: token.controlHeight + 2,
+                    menuHeight: props?.siderMenusItemHeight ?? token.controlHeight,
                     paddingBlockLayoutMenu: 4,
                     paddingInlineLayoutMenu: 4,
                     colorMenuBackground: '#fff',
-                    colorTextMenu: 'rgb(87, 89, 102)',
-                    colorTextMenuSelected: 'rgba(0,0,0,0.8)',
+                    colorTextMenu: 'rgba(0,0,0,0.75)',
+                    colorTextMenuSelected: 'rgba(0,0,0,0.85)',
                     colorBgMenuItemSelected: 'rgba(0,0,0,0.08)'
                 },
                 pageContainer: {
                     paddingInlinePageContainerContent: 0,
                     paddingBlockPageContainerContent: 0
                 }
-            }, siderMenuType: 'sub', fixedHeader: true, collapsedButtonRender: (collapsed, reactNode) => {
-                return isMobile ? undefined : reactNode;
+            }, siderMenuType: props?.siderMenuType ?? 'sub', fixedHeader: true, collapsedButtonRender: (_collapsed, reactNode) => {
+                return isMobile || props?.siderMenuType === 'group' ? undefined : reactNode;
             }, appList: (props.apps?.length || 0) > 1 || collapsed ? props.apps?.map(it => {
                 return {
                     ...it,
@@ -203,7 +211,9 @@ export const AppLayout = (props) => {
                     desc: it.description,
                     url: it.defaultPath || it.path
                 };
-            }) : [], menuHeaderRender: (_logo, _title, props) => {
+            }) : [], headerContentRender: () => {
+                return props?.headerContentRender;
+            }, menuHeaderRender: (_logo, _title, props) => {
                 if (props !== undefined) {
                     setTimeout(() => {
                         setCollapsed(props?.collapsed === true);
@@ -215,7 +225,8 @@ export const AppLayout = (props) => {
                         textIndent: 10,
                         fontSize: token.fontSize + 2,
                         color: '#333',
-                        fontWeight: 500
+                        fontWeight: 600,
+                        minWidth: ((props?.siderWidth ?? 190) - 30)
                     } }, app?.name));
             }, menu: {
                 collapsedShowTitle: false,
@@ -224,35 +235,40 @@ export const AppLayout = (props) => {
                 request: async () => {
                     return requestMenuItems();
                 }
-            }, subMenuItemRender: (props, _defaultDom, menuProps) => {
+            }, subMenuItemRender: (menuDataItemProps, _defaultDom, menuProps) => {
+                if (props?.siderMenuType === 'group') {
+                    return React.createElement("span", { style: {
+                            marginLeft: 4,
+                            color: 'rgba(0,0,0,0.55)',
+                            fontSize: token.fontSize - 2
+                        } }, menuDataItemProps.name);
+                }
                 return React.createElement("div", { style: {
-                        height: token.controlHeight + 2,
+                        height: props?.siderMenusItemHeight ?? token.controlHeight,
                         fontSize: token.fontSize,
                         display: 'flex',
                         alignItems: 'center',
                         justifyContent: menuProps.collapsed ? 'center' : undefined,
                         cursor: 'pointer',
-                        width: '100%',
-                        color: '#0c0d0e'
+                        width: '100%'
                     } },
-                    React.createElement("img", { src: (props.icon || '') === '' ? undefined : props.icon?.toString(), style: {
+                    React.createElement("img", { src: (menuDataItemProps.icon || '') === '' ? undefined : menuDataItemProps.icon?.toString(), style: {
                             width: 20,
                             display: 'block',
-                            marginInlineEnd: menuProps.collapsed ? 0 : 4
+                            marginInlineEnd: menuDataItemProps.collapsed ? 0 : 4
                         }, alt: "" }),
-                    menuProps.collapsed ? undefined : props.name);
+                    menuProps.collapsed ? undefined : menuDataItemProps.name);
             }, menuItemRender: (props, defaultDom, menuProps) => {
                 const isSub = (props.locale?.toString()
                     ?.split('.') || []).length > 2;
                 return React.createElement("a", { style: {
                         fontSize: token.fontSize,
                         userSelect: 'none',
-                        height: token.controlHeight + 2,
+                        height: props?.siderMenusItemHeight ?? token.controlHeight,
                         display: 'flex',
                         alignItems: 'center',
                         justifyContent: menuProps.collapsed && !isSub ? 'center' : undefined,
-                        cursor: 'pointer',
-                        color: '#0c0d0e'
+                        cursor: 'pointer'
                     }, onClick: (e) => {
                         e.preventDefault();
                         if (props.isUrl || !props.path) {
@@ -269,6 +285,8 @@ export const AppLayout = (props) => {
             }, logo: React.createElement("div", { className: css `
           display: flex;
           align-items: center;
+          ${props?.logo?.width === undefined ? undefined : `min-width: ${props?.logo?.width}px`};
+          ${props?.logo?.width === undefined ? undefined : `max-width: ${props?.logo?.width}px`};
 
           & > img {
               height: ${props?.logo?.height || 28}px;
@@ -285,10 +303,7 @@ export const AppLayout = (props) => {
                 React.createElement("img", { src: props?.logo?.path, alt: "" })), title: false, avatarProps: {
                 src: (userInfo?.avatar || '') === '' ? '/avatar.png' : userInfo?.avatar,
                 size: 'small',
-                title: React.createElement("span", { style: {
-                        color: '#333',
-                        fontSize: token.fontSize + 1
-                    } }, userInfo?.nickName || '系统用户'),
+                title: props?.avatarTitle?.(userInfo),
                 render: (_props, dom) => {
                     return (React.createElement(Dropdown, { menu: {
                             items: [
@@ -336,5 +351,9 @@ export const AppLayout = (props) => {
                     return [];
                 }
                 return props?.headerMenus || [];
-            } }, props.children));
+            } },
+            props?.alter?.enable === true ? React.createElement(Alert, { banner: true, style: {
+                    paddingInline: 24
+                }, message: props?.alter?.marquee === true ? React.createElement(Marquee, { pauseOnHover: true, gradient: false }, props?.alter?.message) : props?.alter?.message }) : undefined,
+            props.children));
 };

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))));
+};