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

package/AppLayout.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { css } from '@emotion/css';
 import { ProLayout } from '@ant-design/pro-components';
-import { Dropdown, message, Typography } from 'antd';
+import { Dropdown, message, theme, Typography } from 'antd';
 import { Session } from 'beer-network/session';
 import dayjs from 'dayjs';
 import ImageLayout01 from './images/layout_01.png';
@@ -9,6 +9,7 @@ import ImageLayout02 from './images/layout_02.png';
 import ImageLayout03 from './images/layout_03.png';
 dayjs.locale('zh-cn');
 const Component = (props) => {
+    const { token } = theme.useToken();
     const [messageApi, contextHolder] = message.useMessage();
     // App
     const [app, setApp] = useState({});
@@ -136,7 +137,7 @@ const Component = (props) => {
               padding: 3px;
 
               & > div {
-                  height: 36px;
+                  height: ${token.controlHeight + 2}px;
                   line-height: 1.5;
               }
           }
@@ -177,12 +178,12 @@ const Component = (props) => {
                     heightLayoutHeader: 48
                 },
                 sider: {
-                    menuHeight: 32,
+                    menuHeight: token.controlHeight + 2,
                     paddingBlockLayoutMenu: 4,
                     paddingInlineLayoutMenu: 4,
                     colorMenuBackground: '#fff',
                     colorTextMenu: 'rgb(87, 89, 102)',
-                    colorTextMenuSelected: 'rgb(51, 51, 51)',
+                    colorTextMenuSelected: 'rgba(0,0,0,0.8)',
                     colorBgMenuItemSelected: 'rgba(0,0,0,0.08)'
                 },
                 pageContainer: {
@@ -207,9 +208,9 @@ const Component = (props) => {
                     });
                 }
                 return React.createElement(React.Fragment, null, props?.collapsed ? undefined : React.createElement("div", { style: {
-                        padding: props?.isMobile ? '12px 10px' : '2px 0',
+                        padding: '2px 0',
                         textIndent: 10,
-                        fontSize: 15,
+                        fontSize: token.fontSize + 2,
                         color: '#333',
                         fontWeight: 500
                     } }, app?.name));
@@ -222,8 +223,8 @@ const Component = (props) => {
                 }
             }, subMenuItemRender: (props, _defaultDom, menuProps) => {
                 return React.createElement("div", { style: {
-                        height: 32,
-                        fontSize: 13,
+                        height: token.controlHeight + 2,
+                        fontSize: token.fontSize,
                         display: 'flex',
                         alignItems: 'center',
                         justifyContent: menuProps.collapsed ? 'center' : undefined,
@@ -241,9 +242,9 @@ const Component = (props) => {
                 const isSub = (props.locale?.toString()
                     ?.split('.') || []).length > 2;
                 return React.createElement("a", { style: {
-                        fontSize: 13,
+                        fontSize: token.fontSize,
                         userSelect: 'none',
-                        height: 32,
+                        height: token.controlHeight + 2,
                         display: 'flex',
                         alignItems: 'center',
                         justifyContent: menuProps.collapsed && !isSub ? 'center' : undefined,
@@ -283,7 +284,7 @@ const Component = (props) => {
                 size: 'small',
                 title: React.createElement("span", { style: {
                         color: '#333',
-                        fontSize: 14
+                        fontSize: token.fontSize + 1
                     } }, userInfo?.nickName || '系统用户'),
                 render: (_props, dom) => {
                     return (React.createElement(Dropdown, { menu: {
@@ -303,7 +304,7 @@ const Component = (props) => {
                                             React.createElement(Typography.Text, { ellipsis: true, style: {
                                                     width: 200,
                                                     fontWeight: 500,
-                                                    fontSize: 14
+                                                    fontSize: token.fontSize + 1
                                                 } }, userInfo?.companyName || userInfo?.nickName)),
                                         React.createElement("p", null,
                                             React.createElement(Typography.Text, { ellipsis: true, style: { width: 200 } },

package/BackPageContainer.js

@@ -2,7 +2,9 @@ import React from 'react';
 import { css } from '@emotion/css';
 import { PageContainer } from '@ant-design/pro-components';
 import { useNavigate } from 'react-router-dom';
+import { theme } from 'antd';
 export const Component = (props) => {
+    const { token } = theme.useToken();
     const navigate = useNavigate();
     return React.createElement(React.Fragment, null,
         React.createElement(PageContainer, { onBack: () => {
@@ -13,14 +15,14 @@ export const Component = (props) => {
           }
 
           .ant-page-header-heading-title {
-              font-size: 15px;
+              font-size: ${token.fontSize + 2}px;
               line-height: 1.5;
               color: #333;
           }
       `, header: {
                 style: {
                     background: '#fff',
-                    padding: '10px 24px 10px 24px',
+                    padding: '10px 24px',
                     borderBottom: '1px solid rgba(0, 0, 0, 0.06)'
                 }
             }, title: props.title, ghost: true, childrenContentStyle: {

package/InlineContainer.js

@@ -1,10 +1,11 @@
 import React from 'react';
-import { App, ConfigProvider } from 'antd';
+import { App, ConfigProvider, theme } from 'antd';
 export const Component = (props) => {
+    const { token } = theme.useToken();
     return React.createElement(App, null,
         React.createElement(ConfigProvider, { theme: {
                 token: {
-                    fontSize: 12,
+                    fontSize: token.fontSize - 1,
                     controlHeight: 26,
                     fontWeightStrong: 500
                 },
@@ -20,7 +21,7 @@ export const Component = (props) => {
                         cellPaddingBlockSM: 7
                     },
                     Switch: {
-                        fontSize: 10
+                        fontSize: token.fontSize - 3
                     }
                 }
             } }, props?.children));

package/MediaModals.js

@@ -1,6 +1,6 @@
 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 { Breadcrumb, Button, Dropdown, Input, message, Modal, Popconfirm, Space, Spin, theme, 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';
@@ -11,6 +11,7 @@ import IconMedia from './icon/media.png';
 export class MediaModals {
     static useMedia(request) {
         const [messageApi, contextHolder] = message.useMessage();
+        const { token } = theme.useToken();
         const [isOpenModal, setIsOpenModal] = useState(false);
         const [isOpenMoveModal, setIsOpenMoveModal] = useState(false);
         const [isOpenRenameModal, setIsOpenRenameModal] = useState(false);
@@ -272,7 +273,7 @@ export class MediaModals {
                         } }),
                     React.createElement(Typography.Text, { style: {
                             width: 70,
-                            fontSize: 11,
+                            fontSize: token.fontSize - 2,
                             display: 'block',
                             textAlign: 'center',
                             color: '#323232',
@@ -323,12 +324,12 @@ export class MediaModals {
                                         title: (index + 1 === path.length
                                             ? React.createElement(Typography.Text, { style: {
                                                     maxWidth: 70,
-                                                    fontSize: 12
+                                                    fontSize: token.fontSize - 1
                                                 }, ellipsis: true }, it.name)
                                             : React.createElement("a", { onClick: () => onBackDirectory(it.id) },
                                                 React.createElement(Typography.Text, { style: {
                                                         maxWidth: 70,
-                                                        fontSize: 12,
+                                                        fontSize: token.fontSize - 1,
                                                         color: 'rgba(0, 0, 0, 0.45)'
                                                     }, ellipsis: true }, it.name)))
                                     };
@@ -336,12 +337,12 @@ export class MediaModals {
                             React.createElement(Space, null,
                                 React.createElement(Button, { type: "primary", onClick: () => onPutFile(), size: "small", style: {
                                         height: 24,
-                                        fontSize: 12
+                                        fontSize: token.fontSize - 1
                                     }, 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
+                                            fontSize: token.fontSize - 1
                                         }, loading: isLoading }, "\u65B0\u5EFA\u76EE\u5F55")))),
                         React.createElement(Spin, { spinning: isLoading },
                             React.createElement("div", { style: {
@@ -359,7 +360,7 @@ export class MediaModals {
                 React.createElement(Modal, { title: React.createElement(React.Fragment, null,
                         React.createElement(ExclamationCircleFilled, { style: {
                                 marginRight: 6,
-                                fontSize: 16,
+                                fontSize: token.fontSize + 3,
                                 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"),

package/MyPageContainer.d.ts

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { CSSProperties, FC } from 'react';
 import { TabPaneProps } from 'antd';
 export interface Tab extends Omit<TabPaneProps, 'tab'> {
     key: string;
@@ -6,6 +6,8 @@ export interface Tab extends Omit<TabPaneProps, 'tab'> {
 }
 export declare type MyPageContainerProps = {
     title?: string | undefined;
+    padding?: string | number | undefined;
+    style?: CSSProperties | undefined;
     children?: React.ReactNode | undefined;
     tabList?: Tab[];
     onTabChange?: (e: string) => void;

package/MyPageContainer.js

@@ -1,13 +1,14 @@
 import React, { useEffect, useState } from 'react';
 import { css } from '@emotion/css';
 import { PageContainer } from '@ant-design/pro-components';
-import { message, Modal, Tabs } from 'antd';
+import { message, Modal, Tabs, theme } from 'antd';
 import { Outlet, useLocation } from 'react-router-dom';
 import ParentContext from './content/ParentContext';
 const pathPartition = (sessionStorage.getItem('DETAIL_PARTITION') || '') === ''
     ? ['CREATE', 'EDIT', 'COPY', 'AUDIT', 'PREVIEW', 'DETAIL', 'READ', 'IN', 'INPUT', 'OUTPUT']
     : JSON.parse(sessionStorage.getItem('DETAIL_PARTITION') || '[]');
 export const Component = (props) => {
+    const { token } = theme.useToken();
     const location = useLocation();
     const [messageApi, contextHolder] = message.useMessage();
     const [modal, contextModalHolder] = Modal.useModal();
@@ -40,7 +41,7 @@ export const Component = (props) => {
             }
 
             .ant-page-header-heading-title {
-                font-size: 15px;
+                font-size: ${token.fontSize + 2}px;
                 line-height: 1.5;
                 color: #333;
             }
@@ -64,8 +65,8 @@ export const Component = (props) => {
             `, tabBarStyle: { margin: '0 24px' }, onChange: (e) => props?.onTabChange?.(e) })) : undefined,
                 props?.banner,
                 React.createElement("div", { className: css `
-            padding: 12px 16px;
-        ` }, props.children)),
+            padding: ${props?.padding || '12px 16px'};
+        `, style: props?.style }, props.children)),
             React.createElement(Outlet, null)));
 };
 export default Component;

package/SubMenusContainer.d.ts

@@ -0,0 +1,28 @@
+import React, { CSSProperties, FC } from 'react';
+import type { ComponentToken as MenuComponentToken } from 'antd/es/menu/style';
+export declare type MenusItem = {
+    key?: string;
+    value?: string;
+    label: string | React.ReactNode;
+    children: MenusItem[];
+};
+export declare type SubMenusProps = {
+    items: MenusItem[];
+    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 Component: FC<SubMenusProps>;
+export default Component;

package/SubMenusContainer.js

@@ -0,0 +1,72 @@
+import React, { useEffect, useState } from 'react';
+import { ConfigProvider, Menu } from 'antd';
+export const Component = (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))));
+};
+export default Component;

package/Upgrade.js

@@ -1,7 +1,8 @@
 import React, { useEffect } from 'react';
-import { Modal } from 'antd';
+import { Modal, theme } from 'antd';
 const TIME_KEY = 'VERSION_TIME';
 const App = (props) => {
+    const { token } = theme.useToken();
     useEffect(() => {
         // 每5分钟执行一次
         setTimeout(async () => {
@@ -30,7 +31,7 @@ const App = (props) => {
                 title: '版本更新提示',
                 content: React.createElement(React.Fragment, null,
                     React.createElement("p", { style: {
-                            fontSize: '15px',
+                            fontSize: token.fontSize + 2,
                             lineHeight: '26px'
                         } }, "\u60A8\u5DF2\u7ECF\u957F\u65F6\u95F4\u672A\u4F7F\u7528\u6B64\u9875\u9762\uFF0C\u5728\u6B64\u671F\u95F4\u5E73\u53F0\u6709\u8FC7\u66F4\u65B0\uFF0C\u5982\u60A8\u6B64\u65F6\u5728\u9875\u9762\u4E2D\u6CA1\u6709\u586B\u5199\u76F8\u5173\u4FE1\u606F\u7B49\u64CD\u4F5C\uFF0C\u8BF7\u70B9\u51FB\u5237\u65B0\u9875\u9762\u4F7F\u7528\u6700\u65B0\u7248\u672C\uFF01")),
                 okText: '确定',

package/UserModals.js

@@ -28,7 +28,7 @@ export class UserModals {
             }
         };
         return [handler, React.createElement(React.Fragment, null,
-                React.createElement(Modal, { title: "\u91CD\u7F6E\u5BC6\u7801", width: 380, open: isOpenModal, onOk: () => onConfirm(), onCancel: () => setIsOpenModal(false), styles: { body: { padding: '12px 0' } } },
+                React.createElement(Modal, { title: "\u91CD\u7F6E\u5BC6\u7801", width: 340, open: isOpenModal, onOk: () => onConfirm(), onCancel: () => setIsOpenModal(false), styles: { body: { padding: '6px 0' } } },
                     React.createElement(Form, { form: form, labelCol: { span: 5 } },
                         React.createElement(Form.Item, { name: "password", style: { margin: 0 }, rules: [{
                                     required: true,

package/auth/AuthPassword.js

@@ -1,9 +1,10 @@
-import { Button, Checkbox, Dropdown, Form, Input } from 'antd';
+import { Button, Checkbox, Dropdown, Form, Input, theme } from 'antd';
 import SliderCode from 'beer-assembly/SliderCode';
 import { css } from '@emotion/css';
 import React, { useState } from 'react';
 import { useForm } from 'antd/es/form/Form';
 const App = (props) => {
+    const { token } = theme.useToken();
     const [form] = useForm();
     const [isLoading, setIsLoading] = useState(false);
     const [protocol, setProtocol] = useState(false);
@@ -52,7 +53,7 @@ const App = (props) => {
         React.createElement(Form.Item, { name: "password", style: { marginBottom: 12 } },
             React.createElement(Input.Password, { className: "input", maxLength: 32, placeholder: "\u8BF7\u8F93\u5165\u5BC6\u7801", autoComplete: "on", style: { height: 36 } })),
         props?.protocol === undefined ? undefined : React.createElement(Form.Item, { style: { marginBottom: 12 } },
-            React.createElement(Checkbox, { style: { fontSize: 13 }, onChange: (e) => {
+            React.createElement(Checkbox, { style: { fontSize: token.fontSize + 1 }, onChange: (e) => {
                     setProtocol(e.target.checked);
                 } },
                 React.createElement("span", { dangerouslySetInnerHTML: { __html: props?.protocol } }))),

package/auth/AuthStyle01.js

@@ -89,8 +89,8 @@ const App = (props) => {
                   min-height: 200px;
               ` },
                                 errorMessage !== '' ? React.createElement(Alert, { style: {
-                                        fontSize: '12px',
-                                        marginBottom: '12px',
+                                        fontSize: token.fontSize - 1,
+                                        marginBottom: 12,
                                         color: '#fa2c19',
                                         padding: '6px 10px',
                                         fontWeight: '500'

package/auth/AuthStyle02.js

@@ -82,8 +82,8 @@ const App = (props) => {
                   min-height: 200px;
               ` },
                                 errorMessage !== '' ? React.createElement(Alert, { style: {
-                                        fontSize: '12px',
-                                        marginBottom: '12px',
+                                        fontSize: token.fontSize - 1,
+                                        marginBottom: 12,
                                         color: '#fa2c19',
                                         padding: '6px 10px',
                                         fontWeight: '500'

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "beer-assembly-biz",
   "private": false,
-  "version": "1.1.2-alpha.1",
+  "version": "1.1.2-alpha.11",
   "scripts": {
     "pub-w": "tsc && copy package.json .\\dist\\package.json && npm publish ./dist",
     "pub-m": "tsc && cp -a src/icon ./dist && cp -a src/fonts ./dist && cp -a src/images ./dist && cp package.json ./dist/package.json && npm publish ./dist"
   },
   "dependencies": {
     "@ant-design/icons": "5.5.2",
-    "@ant-design/pro-components": "2.7.19",
+    "@ant-design/pro-components": "2.8.4",
     "@emotion/css": "^11.11.2",
     "antd": "5.23.2",
     "beer-network": "^1.1.1-alpha.17",
-    "beer-assembly": "^1.1.2-alpha.1",
+    "beer-assembly": "^1.1.2-alpha.2",
     "dayjs": "^1.11.13",
     "history": "^5.3.0",
     "lodash": "^4.17.21",