beer-assembly-biz 1.1.3-alpha.2 → 1.1.3-alpha.20

package/layout/AppLayout.js

@@ -1,12 +1,13 @@
 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 ImageLayout01 from './images/layout_01.png';
-import ImageLayout02 from './images/layout_02.png';
-import ImageLayout03 from './images/layout_03.png';
+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';
 dayjs.locale('zh-cn');
 /**
  * 通用布局.
@@ -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) {
@@ -285,10 +301,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 +349,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/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))));
+};

package/media/Media.d.ts

@@ -0,0 +1,84 @@
+import { CSSProperties, FC, Key } from 'react';
+import { TreeDataNode } from 'antd';
+export declare type MediaItem = {
+    /**
+     * 资源唯一标识.
+     */
+    key: string;
+    /**
+     * 文件名称.
+     */
+    fileName: string;
+    /**
+     * 文件长度.
+     */
+    fileLength?: string;
+    /**
+     * 文件属性.
+     */
+    attribute?: {
+        resolution?: string;
+    };
+    /**
+     * 文件实际地址.
+     */
+    url?: string;
+    /**
+     * 预览地址 缩略图.
+     */
+    preview?: string;
+};
+export declare type DirectoryItem = {
+    /**
+     * 宽度 (控制是否显示省略号).
+     */
+    width?: number;
+    children?: DirectoryItem[];
+} & TreeDataNode;
+export declare type MediaProps = {
+    /**
+     * 已选组件.
+     */
+    value?: MediaItem[];
+    /**
+     * 样式.
+     */
+    style?: CSSProperties;
+    /**
+     * 目录宽度.
+     */
+    directoryWidth?: number;
+    /**
+     * 组件高度.
+     */
+    height?: number;
+    /**
+     * 目录项.
+     */
+    directoryItems?: DirectoryItem[];
+    /**
+     * 资源项.
+     */
+    items?: MediaItem[];
+    /**
+     * 选择目录回执.
+     * @param key 目录ID.
+     * @param sortType 排序类型.
+     * @param callback 异步状态.
+     */
+    onDirectoryChange?: (key: Key, sortType: string, callback: (status: boolean) => void) => void;
+    /**
+     * 选择资源发生变化.
+     * @param items 资源列表。
+     */
+    onFileChange?: (items: MediaItem[]) => void;
+    /**
+     * 上传文件.
+     */
+    onUpload?: () => void;
+    /**
+     * 最大长度.
+     */
+    maxLength?: number;
+};
+export declare const Media: FC<MediaProps>;

package/media/Media.js

@@ -0,0 +1,241 @@
+import React, { useEffect, useState } from 'react';
+import { Button, Checkbox, ConfigProvider, Form, Input, Select, Space, Spin, theme, Tree, Typography } from 'antd';
+import { Flux } from 'beer-assembly-plus';
+import { CaretDownOutlined, CloudUploadOutlined, SearchOutlined, UnorderedListOutlined } from '@ant-design/icons';
+import { css } from '@emotion/css';
+export const Media = (props) => {
+    const { token } = theme.useToken();
+    const [form] = Form.useForm();
+    const [loading, setLoading] = useState(false);
+    const [keyword, setKeyword] = useState('');
+    const [selectedKeys, setSelectedKeys] = useState([]);
+    const [expandedKeys, setExpandedKeys] = useState([]);
+    const onChange = (current) => {
+        if (current !== undefined && current?.sortType !== undefined) {
+            onDirectoryChange();
+            return;
+        }
+        const values = form.getFieldsValue();
+        props?.onFileChange?.(Object.keys(values)
+            .filter(key => values[key] === true)
+            .map((key) => {
+            return (props?.items ?? []).find(it => it.key === key);
+        })
+            .filter(it => it !== undefined));
+    };
+    const onDirectoryChange = (key) => {
+        key = key === undefined ? selectedKeys?.[0] : key;
+        if (key === undefined) {
+            return;
+        }
+        setSelectedKeys([key]);
+        props?.onDirectoryChange?.(key, form.getFieldValue('sortType') ?? 'DEFAULT', (status) => {
+            setLoading(status);
+        });
+    };
+    const recursion = (items, depth = 3) => {
+        if (depth <= 0) {
+            return [];
+        }
+        const result = items.filter(item => (item?.children ?? []).length > 0) ?? [];
+        return [...(result.map(item => item.key)), ...recursion(result?.map(item => item?.children ?? [])
+                .flat(), depth - 1)];
+    };
+    useEffect(() => {
+        const values = {};
+        for (const key of (props?.value?.map(item => item.key) ?? [])) {
+            values[key] = true;
+        }
+        form.setFieldsValue(values);
+    }, [props?.value]);
+    useEffect(() => {
+        if (selectedKeys.length > 0) {
+            return;
+        }
+        if (props?.directoryItems === undefined) {
+            return;
+        }
+        const directoryItem = props?.directoryItems?.[0];
+        if (directoryItem === undefined) {
+            return;
+        }
+        const directoryItemKey = directoryItem.key;
+        setSelectedKeys([directoryItemKey]);
+        setExpandedKeys(recursion(props?.directoryItems?.filter(item => (item.children ?? []).length > 0) ?? []));
+        onDirectoryChange(directoryItemKey);
+        form.setFieldsValue({ sortType: 'CREATE_TIME_DESC' });
+    }, [props?.directoryItems]);
+    return React.createElement(ConfigProvider, { theme: {
+            algorithm: theme.defaultAlgorithm,
+            token: {
+                colorBgContainerDisabled: '#fff',
+                colorBgTextHover: 'rgba(6,6,6,0.06)'
+            },
+            components: {
+                Tree: {
+                    paddingXS: 0,
+                    borderRadius: 2,
+                    directoryNodeSelectedBg: token.colorPrimaryBg,
+                    directoryNodeSelectedColor: token.colorPrimary,
+                    // 屏蔽样式
+                    nodeHoverColor: 'none',
+                    nodeSelectedColor: '#333',
+                    indentSize: 6,
+                    titleHeight: 20,
+                    fontSize: 13
+                }
+            }
+        } },
+        React.createElement("div", { style: {
+                ...(props?.style ?? {}),
+                borderRadius: token.borderRadius + 2,
+                display: 'flex',
+                justifyContent: 'space-between',
+                userSelect: 'none',
+                alignItems: 'stretch'
+            } },
+            React.createElement(Tree.DirectoryTree, { className: css `
+            .ant-tree-treenode {
+                padding-inline: 4px;
+                align-items: center;
+            }
+        `, expandAction: false, style: {
+                    height: '100%',
+                    display: 'block',
+                    minWidth: props?.directoryWidth ?? 180,
+                    maxWidth: props?.directoryWidth ?? 180,
+                    paddingBlockStart: 12,
+                    paddingInlineEnd: 12,
+                    overflow: 'auto'
+                }, onSelect: (selectKeys) => {
+                    const key = selectKeys[selectKeys.length - 1];
+                    onDirectoryChange(key);
+                }, onExpand: (expandedKeys) => {
+                    setExpandedKeys(expandedKeys);
+                }, treeData: props?.directoryItems ?? [], selectedKeys: selectedKeys, expandedKeys: expandedKeys, icon: false, switcherIcon: () => {
+                    return React.createElement(CaretDownOutlined, { style: {
+                            fontSize: 10,
+                            marginBlockEnd: 2
+                        } });
+                }, titleRender: (data) => {
+                    return React.createElement("div", { style: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            height: 30
+                        } },
+                        React.createElement("div", { style: {
+                                width: data?.width ?? 100,
+                                overflow: 'hidden',
+                                textOverflow: 'ellipsis',
+                                whiteSpace: 'nowrap'
+                            } }, data.title));
+                } }),
+            React.createElement(Form, { style: {
+                    width: '100%',
+                    paddingBlockStart: 12,
+                    paddingLeft: 12,
+                    borderLeft: '1px solid rgba(0,0,0,0.08)'
+                }, form: form, onValuesChange: (current) => onChange(current) },
+                React.createElement(Flux, { style: {
+                        justifyContent: 'space-between',
+                        paddingInlineStart: 2,
+                        paddingInlineEnd: 6,
+                        paddingBlockEnd: 12,
+                        borderBottom: '1px solid rgba(0,0,0,0.08)'
+                    } },
+                    React.createElement(Space, null,
+                        React.createElement(Form.Item, { noStyle: true, name: "sortType" },
+                            React.createElement(Select, { options: [{
+                                        label: '文件名称（升序）',
+                                        value: 'NAME_ASC'
+                                    }, {
+                                        label: '文件名称（降序）',
+                                        value: 'NAME_DESC'
+                                    }, {
+                                        label: '上传时间（升序）',
+                                        value: 'CREATE_TIME_ASC'
+                                    }, {
+                                        label: '上传时间（降序）',
+                                        value: 'CREATE_TIME_DESC'
+                                    }], prefix: React.createElement(UnorderedListOutlined, { style: { marginRight: 4 } }) })),
+                        React.createElement(Input, { placeholder: "\u8BF7\u8F93\u5165\u6587\u4EF6\u540D\u79F0", prefix: React.createElement(SearchOutlined, { style: { marginRight: 4 } }), onChange: (e) => {
+                                setKeyword(e.target.value);
+                            } })),
+                    React.createElement(Button, { icon: React.createElement(CloudUploadOutlined, { style: {
+                                marginRight: 0,
+                                fontSize: token.fontSize + 2
+                            } }), type: "primary", onClick: () => {
+                            props?.onUpload?.();
+                        } }, "\u672C\u5730\u4E0A\u4F20")),
+                React.createElement(Spin, { spinning: loading },
+                    React.createElement(Flux, { style: {
+                            marginBlock: 4,
+                            paddingBlock: 4,
+                            paddingInlineStart: 2,
+                            paddingInlineEnd: 6,
+                            flexWrap: 'wrap',
+                            overflow: 'auto',
+                            height: props?.height ?? 500
+                        }, size: 12, alignItems: "flex-start" }, props?.items?.filter(item => {
+                        return item?.fileName?.indexOf(keyword) > -1;
+                    })
+                        .map((item, i) => (React.createElement("div", { key: i, style: {
+                            width: 140,
+                            borderRadius: token.borderRadius + 2,
+                            border: '1px solid rgba(0,0,0,0.1)',
+                            overflow: 'hidden',
+                            position: 'relative',
+                            padding: 4,
+                            cursor: (props?.maxLength ?? 1) <= (props?.value ?? []).length && props?.value?.find(it => it.key === item.key) === undefined ? 'not-allowed' : 'pointer'
+                        }, className: css `
+                    &:hover {
+                        outline: 1px solid ${token.colorPrimary} !important;
+                        border-color: ${token.colorPrimary} !important;
+                    }
+                ` },
+                        React.createElement(Form.Item, { noStyle: true, name: [item.key], valuePropName: "checked" },
+                            React.createElement(Checkbox, { style: {
+                                    position: 'absolute',
+                                    top: 8,
+                                    right: 12
+                                }, disabled: (props?.maxLength ?? 1) <= (props?.value ?? []).length && props?.value?.find(it => it.key === item.key) === undefined })),
+                        React.createElement("div", { onClick: () => {
+                                const status = form.getFieldValue([item.key]);
+                                if ((props?.maxLength ?? 1) <= (props?.value ?? []).length && !(status === true)) {
+                                    return;
+                                }
+                                form.setFieldsValue({
+                                    [item.key]: !form.getFieldValue([item.key])
+                                });
+                                onChange();
+                            } },
+                            React.createElement("img", { src: item?.preview ?? item?.url, alt: "", style: {
+                                    display: 'block',
+                                    width: 140,
+                                    height: 120,
+                                    objectFit: 'cover',
+                                    userSelect: 'none',
+                                    pointerEvents: 'none',
+                                    borderRadius: token.borderRadius
+                                } }),
+                            React.createElement("div", { style: {
+                                    padding: '2px 2px 0 2px'
+                                } },
+                                React.createElement(Typography.Paragraph, { ellipsis: true, style: {
+                                        margin: 0,
+                                        padding: 0,
+                                        fontSize: 12,
+                                        lineHeight: 1.6,
+                                        color: '#333'
+                                    } }, item?.fileName),
+                                React.createElement(Flux, { style: {
+                                        margin: 0,
+                                        padding: 0,
+                                        lineHeight: 1.45,
+                                        fontSize: token.fontSize - 2,
+                                        justifyContent: 'space-between',
+                                        color: '#666'
+                                    } },
+                                    React.createElement("span", null, item?.attribute?.resolution),
+                                    React.createElement("span", null, item?.fileLength))))))))))));
+};

package/media/MediaModals.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import { Handler } from '../type';
+import { DirectoryItem, MediaItem } from './Media';
+/**
+ * 图片空间模态框.
+ */
+export declare class MediaModals {
+    /**
+     * 打开图片选择模态框.
+     * @param request 请求接口.
+     */
+    static use(request: {
+        getDirectory: () => Promise<DirectoryItem[]>;
+        getItems: (directoryId: string, sortType: string) => Promise<MediaItem[]>;
+        uploadFile: (file: File) => Promise<boolean>;
+    }): [Handler<MediaItem[]>, ReactNode];
+}