beer-assembly-biz 1.1.1-alpha.2 → 1.1.1-alpha.21

package/AppLayout.d.ts

@@ -69,7 +69,7 @@ export declare type LayoutProps = {
     /**
      * 布局内容
      */
-    children: ReactNode;
+    children?: ReactNode;
     /**
      * 路径
      */
@@ -78,18 +78,22 @@ export declare type LayoutProps = {
      * 子路径路径分割符号, 用去区分是否子路径判断子路径的菜单归属
      */
     pathPartition: string[];
+    /**
+     * 请求获取用户信息
+     */
+    requestUser: () => Promise<UserInfo>;
     /**
      * 左侧: Logo样式
      */
     logo?: {
-        /**
-         * 高度
-         */
-        height: number;
         /**
          * Logo 路径
          */
         path: string;
+        /**
+         * 高度
+         */
+        height?: number;
     };
     /**
      * 右侧: 用户下拉选菜单
@@ -97,7 +101,7 @@ export declare type LayoutProps = {
     userMenus?: {
         key: string;
         type?: string;
-        label: string;
+        label: ReactNode;
     }[];
     /**
      * 头部: 从右到左菜单
@@ -108,10 +112,6 @@ export declare type LayoutProps = {
      * @param path 路径.
      */
     toLink?: (path: string) => void;
-    /**
-     * 请求获取用户信息
-     */
-    requestUser?: () => Promise<UserInfo>;
     /**
      * 请求获取菜单信息
      * @param appCode 应用代码

package/AppLayout.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { css } from '@emotion/css';
-import { ProConfigProvider, ProLayout } from '@ant-design/pro-components';
+import { ProLayout } from '@ant-design/pro-components';
 import { Dropdown, message, Typography } from 'antd';
 import { Session } from 'beer-network/session';
 import dayjs from 'dayjs';
@@ -99,8 +99,8 @@ const Component = (props) => {
     }, [menus, props.path]);
     // 更新属性触发: 请求用户信息
     useEffect(() => {
-        props?.requestUser?.()
-            ?.then(userInfo => {
+        props.requestUser()
+            .then(userInfo => {
             // 更新缓存到Session
             if (userInfo === undefined || userInfo?.id === undefined) {
                 return;
@@ -108,8 +108,8 @@ const Component = (props) => {
             setUserInfo(userInfo);
             sessionStorage.setItem('SESSION', JSON.stringify(userInfo));
         });
-    }, [props?.requestUser]);
-    return React.createElement(ProConfigProvider, { hashed: false },
+    }, []);
+    return React.createElement(React.Fragment, null,
         contextHolder,
         React.createElement(ProLayout, { className: css `
           .ant-pro-sider-logo {
@@ -259,7 +259,7 @@ const Component = (props) => {
           align-items: center;
 
           & > img {
-              height: ${props?.logo?.height || 22}px;
+              height: ${props?.logo?.height || 28}px;
               display: block;
               margin: 0 6px;
           }
@@ -299,14 +299,13 @@ const Component = (props) => {
                                 {
                                     type: 'divider'
                                 },
-                                ...(props?.userMenus || []),
-                                {
-                                    type: 'divider'
-                                },
+                                ...((props?.userMenus || [])?.length > 0 ? [...(props?.userMenus || []), {
+                                        type: 'divider'
+                                    }] : []),
                                 {
                                     key: 'EXIT',
                                     danger: true,
-                                    label: React.createElement("div", { onClick: onLogout }, "\u9000\u51FA\u767B\u5F55")
+                                    label: React.createElement("div", { style: { width: '100%' }, onClick: onLogout }, "\u9000\u51FA\u767B\u5F55")
                                 }
                             ]
                         } }, dom));

package/BackPageContainer.d.ts

@@ -0,0 +1,7 @@
+import React, { FC } from 'react';
+export declare type BackPageContainerProps = {
+    title?: string | undefined;
+    children?: React.ReactNode | undefined;
+};
+export declare const Component: FC<BackPageContainerProps>;
+export default Component;

package/BackPageContainer.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { css } from '@emotion/css';
+import { PageContainer } from '@ant-design/pro-components';
+import { useNavigate } from 'react-router-dom';
+export const Component = (props) => {
+    const navigate = useNavigate();
+    return React.createElement(React.Fragment, null,
+        React.createElement(PageContainer, { onBack: () => {
+                navigate(-1);
+            }, className: css `
+          .ant-page-header-heading {
+              padding-block-start: 0 !important;
+          }
+
+          .ant-page-header-heading-title {
+              font-size: 15px;
+              line-height: 1.5;
+              color: #333;
+          }
+      `, header: {
+                style: {
+                    background: '#fff',
+                    padding: '10px 24px 10px 24px',
+                    borderBottom: '1px solid rgba(0, 0, 0, 0.06)'
+                }
+            }, title: props.title, ghost: true, childrenContentStyle: {
+                padding: '0'
+            } },
+            React.createElement("div", { className: css `
+          padding: 12px 16px;
+      ` }, props.children)));
+};
+export default Component;

package/InlineContainer.d.ts

@@ -0,0 +1,6 @@
+import React, { FC } from 'react';
+export declare type InlineContainer = {
+    children?: React.ReactNode;
+};
+export declare const Component: FC<InlineContainer>;
+export default Component;

package/InlineContainer.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { App, ConfigProvider } from 'antd';
+export const Component = (props) => {
+    return React.createElement(App, null,
+        React.createElement(ConfigProvider, { theme: {
+                token: {
+                    fontSize: 12,
+                    controlHeight: 26,
+                    fontWeightStrong: 500
+                },
+                components: {
+                    Table: {
+                        motion: false,
+                        headerColor: '#333',
+                        rowHoverBg: '#f5f6f7',
+                        rowSelectedBg: '#f4f5f6',
+                        rowSelectedHoverBg: '#e6e7e8',
+                        headerBg: '#fafafa',
+                        cellPaddingInlineSM: 6,
+                        cellPaddingBlockSM: 7
+                    },
+                    Switch: {
+                        fontSize: 10
+                    }
+                }
+            } }, props?.children));
+};
+export default Component;

package/MediaModals.d.ts

@@ -0,0 +1,32 @@
+import { ReactNode } from 'react';
+import { DirectorySelectProps } from 'beer-assembly/DirectorySelect';
+export type Handler<T> = {
+    ok: (callback?: (params: T) => void) => void;
+};
+type DirectoryRequest = NonNullable<DirectorySelectProps['request']>;
+export declare type MediaItem = {
+    id: string;
+    name: string;
+    type: 'DIRECTORY' | 'FILE';
+    url: string;
+    active: boolean;
+};
+export declare type RequestParams = {
+    /**
+     * 获取列表数据.
+     * @param parentId 父类ID.
+     */
+    requestList: (parentId: string) => Promise<MediaItem[]>;
+    rename: (id: string, name: string) => Promise<Boolean>;
+    copy: (id: string) => Promise<Boolean>;
+    move: (moveId: string, targetId: string) => Promise<Boolean>;
+    remove: (id: string) => Promise<Boolean>;
+    createDirectory: (parentId: string, name: string) => Promise<Boolean>;
+    putFile: (parentId: string, files: FileList) => Promise<Boolean>;
+} & {
+    directory: DirectoryRequest;
+};
+export declare class MediaModals {
+    static useMedia(request?: RequestParams): [Handler<string[]>, ReactNode];
+}
+export {};

package/MediaModals.js

@@ -0,0 +1,372 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { css } from '@emotion/css';
+import { Breadcrumb, Button, Dropdown, Input, message, Modal, Popconfirm, Space, Spin, Typography } from 'antd';
+import ElementUtils from 'beer-network/elementUtils';
+import Flux from 'beer-assembly/Flux';
+import { CloudDownloadOutlined, CopyOutlined, DeleteOutlined, ExclamationCircleFilled, HighlightOutlined, RightCircleOutlined, ScissorOutlined } from '@ant-design/icons';
+import DirectorySelect from 'beer-assembly/DirectorySelect';
+import InlineContainer from './InlineContainer';
+import IconDirectory from './icon/directory.svg';
+import IconMedia from './icon/media.png';
+export class MediaModals {
+    static useMedia(request) {
+        const [messageApi, contextHolder] = message.useMessage();
+        const [isOpenModal, setIsOpenModal] = useState(false);
+        const [isOpenMoveModal, setIsOpenMoveModal] = useState(false);
+        const [isOpenRenameModal, setIsOpenRenameModal] = useState(false);
+        const [isOpenConfirmModal, setIsOpenConfirmModal] = useState(false);
+        const [isLoading, setIsLoading] = useState(false);
+        const [path, setPath] = useState([]);
+        const [dataList, setDataList] = useState([]);
+        const [selectId, setSelectId] = useState('');
+        const [selectName, setSelectName] = useState('');
+        const callbackRef = useRef(undefined);
+        const refreshData = (force) => {
+            const item = path[path.length - 1];
+            const chunkArray = (array, size) => {
+                const result = [];
+                for (let i = 0; i < array.length; i += size) {
+                    result.push(array.slice(i, i + size));
+                }
+                return result;
+            };
+            setIsLoading(true);
+            if (force === true) {
+                setDataList([]);
+            }
+            request?.requestList?.(item.id)
+                .then(result => {
+                setIsLoading(false);
+                setDataList(chunkArray(result || [], 5));
+            })
+                .catch(() => {
+                setIsLoading(false);
+            });
+        };
+        const onActiveItem = (id) => {
+            setDataList(dataList?.map(item => {
+                return item.map(it => {
+                    return {
+                        ...it,
+                        active: it.id === id
+                    };
+                });
+            }));
+        };
+        const onDownload = async (name, url) => {
+            if ((url || '').trim() === '') {
+                return;
+            }
+            ElementUtils.download(url || '', name);
+        };
+        const onPutFile = async () => {
+            const files = await ElementUtils.selectFile();
+            if (files === null) {
+                return;
+            }
+            for (let i = 0; i < files.length; i += 1) {
+                const file = files[i];
+                if (file.size > (1048576 * 15)) {
+                    messageApi.error(`文件 ${file.name} 太大，不能超过 15MB`);
+                    return;
+                }
+                if (!['image/jpeg', 'image/png', 'image/gif', 'image/webp'].includes(file.type)) {
+                    messageApi.error(`文件 ${file.name} 不是有效的图片格式`);
+                    return;
+                }
+            }
+            const parentId = path[path.length - 1]?.id;
+            setIsLoading(true);
+            const result = await request?.putFile(parentId, files);
+            setIsLoading(false);
+            if (result === true) {
+                refreshData();
+            }
+        };
+        const onCreateDirectory = async (name) => {
+            const parentId = path[path.length - 1]?.id;
+            setIsLoading(true);
+            const result = await request?.createDirectory(parentId, name);
+            setIsLoading(false);
+            if (result === true) {
+                refreshData();
+            }
+            setSelectName('');
+            return true;
+        };
+        const onOpenDirectory = async (id, name) => {
+            if (isLoading) {
+                return;
+            }
+            const paths = [...getPaths(), {
+                    id,
+                    name
+                }];
+            setPaths(paths);
+        };
+        const onBackDirectory = async (id) => {
+            if (isLoading) {
+                return;
+            }
+            const paths = getPaths();
+            const index = paths.findIndex(it => it.id === id);
+            if (index < 0) {
+                return;
+            }
+            paths.splice(index + 1);
+            setPaths(paths);
+        };
+        const onSelectItem = async (id, name, url) => {
+            const current = callbackRef?.current;
+            if (current === undefined) {
+                return;
+            }
+            current?.([url || '']);
+            setIsOpenModal(false);
+        };
+        const onRename = async (id, name) => {
+            setIsOpenRenameModal(true);
+            setSelectId(id);
+            setSelectName(name);
+        };
+        const onConfirmRename = async () => {
+            if (await request?.rename(selectId, selectName)) {
+                refreshData();
+                setSelectName('');
+                setIsOpenRenameModal(false);
+            }
+        };
+        const onCopy = async (id) => {
+            const result = await request?.copy(id);
+            if (result === true) {
+                refreshData();
+            }
+            return result;
+        };
+        const onMove = async (id) => {
+            setIsOpenMoveModal(true);
+            setSelectId(id);
+        };
+        const onConfirmMove = async (targetId) => {
+            const result = await request?.move(selectId, targetId);
+            if (result === true) {
+                setIsOpenMoveModal(false);
+                refreshData();
+            }
+        };
+        const onRemove = async (id) => {
+            setIsOpenConfirmModal(true);
+            setSelectId(id);
+        };
+        const onConfirmRemove = async () => {
+            const result = await request?.remove(selectId);
+            if (result === true) {
+                setIsOpenConfirmModal(false);
+                refreshData();
+            }
+            return result;
+        };
+        const setPaths = (items) => {
+            setPath(items);
+            sessionStorage.setItem('MEDIA_MODALS_PATHS', JSON.stringify(items));
+        };
+        const getPaths = () => {
+            const paths = JSON.parse(sessionStorage.getItem('MEDIA_MODALS_PATHS') || '[]');
+            if (paths.length <= 0) {
+                paths.push({
+                    id: '0',
+                    name: '根目录'
+                });
+            }
+            return paths;
+        };
+        const Item = (props) => {
+            const directoryMenusItem = props.type === 'DIRECTORY' ? [
+                {
+                    label: React.createElement(Space, { style: { width: 100 }, size: 5, onClick: () => onOpenDirectory(props.id, props.name) },
+                        React.createElement(RightCircleOutlined, null),
+                        "\u6253\u5F00\u76EE\u5F55"),
+                    key: '0'
+                },
+                {
+                    type: 'divider'
+                }
+            ] : [
+                {
+                    label: React.createElement(Space, { style: { width: 100 }, size: 5, onClick: () => onDownload(props.name, props.src) },
+                        React.createElement(CloudDownloadOutlined, null),
+                        "\u4E0B\u8F7D\u6587\u4EF6"),
+                    key: '0'
+                },
+                {
+                    type: 'divider'
+                }
+            ];
+            const menusItems = [
+                ...directoryMenusItem,
+                {
+                    label: React.createElement(Space, { style: { width: 100 }, size: 5, onClick: () => onRename(props.id, props.name) },
+                        React.createElement(HighlightOutlined, null),
+                        "\u91CD\u547D\u540D"),
+                    key: '1'
+                },
+                {
+                    label: React.createElement(Space, { style: { width: 100 }, size: 5, onClick: () => onCopy(props.id) },
+                        React.createElement(CopyOutlined, null),
+                        props?.type === 'DIRECTORY' ? '复制目录' : '复制文件'),
+                    key: '2'
+                },
+                {
+                    label: React.createElement(Space, { style: { width: 100 }, size: 5, onClick: () => onMove(props.id) },
+                        React.createElement(ScissorOutlined, null),
+                        props?.type === 'DIRECTORY' ? '移动目录' : '移动文件'),
+                    key: '3'
+                },
+                {
+                    type: 'divider'
+                },
+                {
+                    label: React.createElement(Space, { style: { width: 100 }, size: 5, onClick: () => onRemove(props.id) },
+                        React.createElement(DeleteOutlined, null),
+                        props?.type === 'DIRECTORY' ? '删除目录' : '删除文件'),
+                    key: '4',
+                    danger: true
+                }
+            ];
+            return React.createElement(Dropdown, { menu: {
+                    items: menusItems
+                }, trigger: ['contextMenu'] },
+                React.createElement("div", { style: {
+                        padding: '8px 12px',
+                        backgroundColor: props?.active ? '#e6f1ff' : undefined,
+                        display: 'block',
+                        cursor: 'pointer',
+                        userSelect: 'none',
+                        position: 'relative',
+                        ...props.style
+                    }, className: css `
+              border: ${props?.active ? '1px solid #cddef5' : '1px solid #fff'};
+
+              &:hover {
+                  background-color: #eef1f5;
+                  border: 1px solid ${props.active ? '#cddef5' : '#e6e6e6'};
+              }
+          `, onClick: () => {
+                        setTimeout(() => onActiveItem(props.id), 10);
+                    }, onDoubleClick: () => {
+                        if (props.type === 'DIRECTORY') {
+                            onOpenDirectory(props.id, props.name)
+                                .then();
+                            return;
+                        }
+                        onSelectItem(props.id, props.name, props.src)
+                            .then();
+                    } },
+                    React.createElement("img", { src: props?.type === 'DIRECTORY' ? IconDirectory : props?.src, alt: "", style: {
+                            width: 56,
+                            height: 56,
+                            margin: 'auto',
+                            display: 'block',
+                            overflow: 'hidden',
+                            objectFit: props?.type === 'DIRECTORY' ? undefined : 'cover'
+                        } }),
+                    React.createElement(Typography.Text, { style: {
+                            width: 70,
+                            fontSize: 11,
+                            display: 'block',
+                            textAlign: 'center',
+                            color: '#323232',
+                            marginTop: props?.type === 'DIRECTORY' ? undefined : 1
+                        }, ellipsis: true }, props?.name)));
+        };
+        const handler = {
+            ok: (callback) => {
+                setPath(getPaths());
+                setIsOpenModal(true);
+                if (callbackRef !== undefined) {
+                    callbackRef.current = callback;
+                }
+            }
+        };
+        useEffect(() => {
+            if ((path || []).length <= 0) {
+                return;
+            }
+            refreshData(true);
+        }, [path]);
+        return [handler, React.createElement(React.Fragment, null,
+                React.createElement(InlineContainer, null,
+                    React.createElement(Modal, { width: 565, footer: null, styles: {
+                            content: { padding: 0 }
+                        }, open: isOpenModal, maskClosable: false, onCancel: () => {
+                            if (isLoading) {
+                                return;
+                            }
+                            setIsOpenModal(false);
+                        }, title: React.createElement("div", { style: {
+                                padding: '16px 0 0 0'
+                            } },
+                            React.createElement("img", { style: {
+                                    marginInlineStart: 20,
+                                    display: 'block',
+                                    height: '17px',
+                                    padding: '2px 0 0 0'
+                                }, alt: "", src: IconMedia })) },
+                        React.createElement(Flux, { style: {
+                                marginBottom: 6,
+                                padding: '0 20px 10px 20px',
+                                borderBottom: '1px solid #f3f3f3',
+                                justifyContent: 'space-between'
+                            } },
+                            React.createElement(Breadcrumb, { items: path?.map((it, index) => {
+                                    return {
+                                        title: (index + 1 === path.length
+                                            ? React.createElement(Typography.Text, { style: {
+                                                    maxWidth: 70,
+                                                    fontSize: 12
+                                                }, ellipsis: true }, it.name)
+                                            : React.createElement("a", { onClick: () => onBackDirectory(it.id) },
+                                                React.createElement(Typography.Text, { style: {
+                                                        maxWidth: 70,
+                                                        fontSize: 12,
+                                                        color: 'rgba(0, 0, 0, 0.45)'
+                                                    }, ellipsis: true }, it.name)))
+                                    };
+                                }) }),
+                            React.createElement(Space, null,
+                                React.createElement(Button, { type: "primary", onClick: () => onPutFile(), size: "small", style: {
+                                        height: 24,
+                                        fontSize: 12
+                                    }, loading: isLoading }, "\u4E0A\u4F20\u6587\u4EF6"),
+                                React.createElement(Popconfirm, { title: "\u8BF7\u8F93\u5165\u76EE\u5F55\u540D\u79F0", description: React.createElement(Input, { value: selectName, onChange: (e) => setSelectName(e.currentTarget.value) }), onCancel: () => setSelectName(''), onConfirm: () => onCreateDirectory(selectName), okText: "\u786E\u5B9A", cancelText: "\u53D6\u6D88" },
+                                    React.createElement(Button, { size: "small", style: {
+                                            height: 24,
+                                            fontSize: 12
+                                        }, loading: isLoading }, "\u65B0\u5EFA\u76EE\u5F55")))),
+                        React.createElement(Spin, { spinning: isLoading },
+                            React.createElement("div", { style: {
+                                    padding: '6px 0 24px 0',
+                                    height: 333,
+                                    maxHeight: 333,
+                                    overflowY: 'auto',
+                                    overflowX: 'hidden'
+                                } }, dataList?.map((group, index) => (React.createElement("div", { key: index, style: {
+                                    padding: '0 20px 10px 20px',
+                                    display: 'flex'
+                                } }, group?.map((item) => (React.createElement(Item, { id: item.id, key: item.id, active: item.active, style: { marginRight: 10 }, type: item.type, src: item.url, name: item.name })))))))))),
+                React.createElement(Modal, { title: "\u91CD\u547D\u540D", width: 340, open: isOpenRenameModal, onOk: () => onConfirmRename(), onCancel: () => setIsOpenRenameModal(false), okText: "\u786E\u5B9A", cancelText: "\u53D6\u6D88" },
+                    React.createElement(Input, { value: selectName, onChange: (e) => setSelectName(e.currentTarget.value) })),
+                React.createElement(Modal, { title: React.createElement(React.Fragment, null,
+                        React.createElement(ExclamationCircleFilled, { style: {
+                                marginRight: 6,
+                                fontSize: 16,
+                                color: '#faad14'
+                            } }),
+                        "\u662F\u5426\u786E\u8BA4\u5220\u9664?"), width: 400, open: isOpenConfirmModal, onOk: () => onConfirmRemove(), onCancel: () => setIsOpenConfirmModal(false), okText: "\u786E\u5B9A", cancelText: "\u53D6\u6D88" }, "\u5220\u9664\u64CD\u4F5C\u4E0D\u80FD\u56DE\u590D\uFF0C\u786E\u5B9A\u8981\u5220\u9664\u9009\u4E2D\u7684\u6587\u4EF6\u6216\u6587\u4EF6\u5939\u5417\uFF1F"),
+                React.createElement(DirectorySelect, { open: isOpenMoveModal, onCancel: () => {
+                        refreshData();
+                        setIsOpenMoveModal(false);
+                    }, request: request?.directory, onOk: (value) => onConfirmMove(value) }),
+                contextHolder)];
+    }
+}

package/MyPageContainer.d.ts

@@ -0,0 +1,16 @@
+import React, { FC } from 'react';
+import { TabPaneProps } from 'antd';
+export interface Tab extends Omit<TabPaneProps, 'tab'> {
+    key: string;
+    label: React.ReactNode;
+}
+export declare type MyPageContainerProps = {
+    title?: string | undefined;
+    children?: React.ReactNode | undefined;
+    tabList?: Tab[];
+    onTabChange?: (e: string) => void;
+    onRefresh?: () => void;
+    banner?: React.ReactNode;
+};
+export declare const Component: FC<MyPageContainerProps>;
+export default Component;