beer-assembly-biz 1.1.2-alpha.9 → 1.1.3-alpha.10

package/rich/AIEditor.d.ts

@@ -0,0 +1,51 @@
+import React, { HTMLAttributes } from 'react';
+import { AiEditorOptions } from 'aieditor';
+import './AIEditor.css';
+export interface HttpRequestParams {
+    [key: string]: string;
+}
+export interface HttpRequestHeader {
+    [key: string]: string;
+}
+export type AIEditorProps = Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> & {
+    /**
+     * 图片上传地址.
+     */
+    actionImage?: string;
+    /**
+     * 图片上传参数.
+     */
+    params?: HttpRequestParams;
+    /**
+     * 上传头.
+     */
+    headers?: HttpRequestHeader;
+    placeholder?: string;
+    defaultValue?: string;
+    value?: string;
+    onChange?: (val: string) => void;
+    options?: Omit<AiEditorOptions, 'element'>;
+};
+/**
+ * AIEditor 的富文本编辑器.
+ * @see https://aieditor.dev/zh/
+ */
+export declare const AIEditor: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> & {
+    /**
+     * 图片上传地址.
+     */
+    actionImage?: string;
+    /**
+     * 图片上传参数.
+     */
+    params?: HttpRequestParams;
+    /**
+     * 上传头.
+     */
+    headers?: HttpRequestHeader;
+    placeholder?: string;
+    defaultValue?: string;
+    value?: string;
+    onChange?: (val: string) => void;
+    options?: Omit<AiEditorOptions, "element">;
+} & React.RefAttributes<HTMLDivElement>>;

package/rich/AIEditor.js

@@ -0,0 +1,90 @@
+import React, { forwardRef, useEffect, useRef } from 'react';
+import { AiEditor } from 'aieditor';
+import './AIEditor.css';
+import { Session } from 'beer-network/session';
+/**
+ * AIEditor 的富文本编辑器.
+ * @see https://aieditor.dev/zh/
+ */
+export const AIEditor = forwardRef(function AIEditor({ actionImage, params, headers, placeholder, defaultValue, value, onChange, options, ...props }, ref) {
+    const divRef = useRef(null);
+    const aiEditorRef = useRef(null);
+    const getAction = () => {
+        if (actionImage === undefined) {
+            return undefined;
+        }
+        const paramQuery = new URLSearchParams();
+        Object.keys(params || {})
+            .forEach(key => {
+            paramQuery.append(key, params?.[key] || '');
+        });
+        return actionImage + '?' + paramQuery.toString();
+    };
+    useEffect(() => {
+        if (!divRef.current)
+            return;
+        if (!aiEditorRef.current) {
+            aiEditorRef.current = new AiEditor({
+                element: divRef.current,
+                placeholder,
+                content: defaultValue,
+                image: {
+                    defaultSize: 350,
+                    uploadFormName: getAction() !== undefined ? 'file' : undefined,
+                    uploadUrl: getAction(),
+                    uploadHeaders: {
+                        ...(headers || {}),
+                        authorization: 'Bearer ' + (Session.getBearer() || '')
+                    },
+                    uploaderEvent: {
+                        onSuccess: (file, response) => {
+                            return {
+                                errorCode: 0,
+                                data: {
+                                    src: response.data,
+                                    alt: file.name
+                                }
+                            };
+                        }
+                    }
+                },
+                toolbarKeys: [
+                    'heading',
+                    '|', 'bold', 'italic', 'underline', 'strike', 'link',
+                    '|', 'highlight', 'font-color',
+                    '|', 'align', 'line-height',
+                    '|', 'bullet-list', 'ordered-list', 'indent-decrease', 'indent-increase', 'break',
+                    '|', 'image'
+                ],
+                onChange: (ed) => {
+                    if (typeof onChange === 'function') {
+                        onChange(ed.getHtml());
+                    }
+                },
+                ...options
+            });
+        }
+        return () => {
+            if (aiEditorRef.current) {
+                aiEditorRef.current.destroy();
+                aiEditorRef.current = null;
+            }
+        };
+    }, []);
+    useEffect(() => {
+        if (ref) {
+            if (typeof ref === 'function') {
+                ref(divRef.current);
+            }
+            else {
+                ref.current = divRef.current;
+            }
+        }
+    }, [ref]);
+    useEffect(() => {
+        if (aiEditorRef.current && value !== aiEditorRef.current.getHtml()) {
+            aiEditorRef.current.setContent(value || '');
+        }
+    }, [value]);
+    return React.createElement("div", { ref: divRef, ...props });
+});

package/slider/SliderCode.d.ts

@@ -0,0 +1,23 @@
+import { CSSProperties, FC } from 'react';
+export declare type SliderCodeComponentProps = {
+    style?: CSSProperties;
+    request: () => Promise<Slider>;
+    onReceipt?: (code: string, slider: Slider) => Promise<boolean>;
+    token?: SliderCodeToken | undefined;
+};
+export declare type Slider = {
+    authCode: string;
+    background: string;
+    cutout: string;
+    y: number;
+};
+export declare type SliderCodeToken = {
+    colorPrimary?: string;
+    colorBar?: string;
+    boxShadow?: string;
+    gradient?: string[];
+};
+/**
+ * 滑块验证码.
+ */
+export declare const SliderCode: FC<SliderCodeComponentProps>;

package/slider/SliderCode.js

@@ -0,0 +1,203 @@
+import React, { useEffect, useState } from 'react';
+import { css } from '@emotion/css';
+import { theme } from 'antd';
+import { ReloadOutlined } from '@ant-design/icons';
+const sliderParams = {
+    // 缩放比例
+    scale: 0.694,
+    // 控件原始坐标
+    x: 0,
+    // 起点坐标
+    start: 8,
+    // 终点坐标
+    end: 225,
+    disable: false
+};
+/**
+ * 滑块验证码.
+ */
+export const SliderCode = (props = {
+    token: {
+        colorPrimary: '#1677ff',
+        boxShadow: 'rgba(22, 93, 255, 0.4)',
+        gradient: ['#578aff', '#165dff'],
+        colorBar: '#165dff'
+    },
+    request: async () => {
+        throw new Error('Function not implemented.');
+    }
+}) => {
+    const { token } = theme.useToken();
+    const [offset, setOffset] = useState(8);
+    const [slider, setSlider] = useState({});
+    const [status, setStatus] = useState(false);
+    const onRefreshSlider = async () => {
+        const slider = await props.request();
+        sliderParams.disable = false;
+        setOffset(sliderParams.start);
+        setSlider(slider);
+    };
+    useEffect(() => {
+        onRefreshSlider()
+            .then();
+    }, []);
+    const onMouseDownSlider = (x) => {
+        if (sliderParams.disable) {
+            return;
+        }
+        sliderParams.x = x;
+        let offsetX = 0;
+        const disableSelection = (e) => {
+            e.preventDefault();
+        };
+        const moveSlider = (e) => {
+            let offset = e.x - sliderParams.x + sliderParams.start;
+            if (offset <= sliderParams.start) {
+                offset = sliderParams.start;
+            }
+            else if (offset >= sliderParams.end) {
+                offset = sliderParams.end;
+            }
+            offsetX = offset;
+            setOffset(offset);
+        };
+        window.addEventListener('mousemove', moveSlider);
+        window.addEventListener('selectstart', disableSelection);
+        const onMouseUp = async () => {
+            sliderParams.disable = true;
+            const x = Math.floor((offsetX - sliderParams.start) / sliderParams.scale);
+            window.removeEventListener('mousemove', moveSlider);
+            window.removeEventListener('selectstart', disableSelection);
+            window.removeEventListener('mouseup', onMouseUp);
+            const code = Number('1' + x.toString(2))
+                .toString(16);
+            const result = await props.onReceipt?.(code, slider);
+            if (result === false) {
+                setStatus(true);
+                setTimeout(() => {
+                    setStatus(false);
+                    setOffset(sliderParams.start);
+                    onRefreshSlider()
+                        .then(() => sliderParams.disable = false);
+                }, 1200);
+            }
+        };
+        window.addEventListener('mouseup', onMouseUp);
+    };
+    return React.createElement(React.Fragment, null,
+        React.createElement("div", { style: props.style, className: css `
+        background: #fff;
+        border-radius: ${token.borderRadius}px;
+        box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.03);
+        padding: 15px 10px;
+        width: 250px;
+        position: relative;
+    ` },
+            React.createElement("div", { className: css `
+          display: flex;
+          justify-content: space-between;
+          margin-bottom: 10px;
+      ` },
+                React.createElement("span", null, "\u5B8C\u6210\u62FC\u56FE\u9A8C\u8BC1"),
+                React.createElement("a", { style: {
+                        userSelect: 'none',
+                        color: props.token?.colorPrimary || token.colorPrimary
+                    }, onClick: onRefreshSlider },
+                    React.createElement(ReloadOutlined, null),
+                    "\u00A0\u6362\u4E00\u5F20")),
+            React.createElement("div", { className: css `
+          width: 250px;
+          height: 95px;
+          background: #eee;
+          border-radius: ${token.borderRadius}px;
+          position: relative;
+          overflow: hidden;
+      ` },
+                React.createElement("div", { className: css `
+            width: 100%;
+            height: 100%;
+
+            & > img {
+                width: 100%;
+                display: block;
+            }
+        ` }, slider.background === undefined || slider.background === '' ? undefined : React.createElement("img", { alt: "", src: slider.background })),
+                React.createElement("div", { className: css `
+            display: block;
+            position: absolute;
+            left: 0;
+            top: 0;
+            bottom: 0;
+
+            & > img {
+                width: 100%;
+                display: block;
+            }
+        `, style: {
+                        left: offset - 8 + 'px',
+                        width: 50 * sliderParams.scale,
+                        height: 50 * sliderParams.scale
+                    } }, slider.cutout === undefined || slider.cutout === '' ? undefined : React.createElement("img", { src: slider.cutout, style: { marginTop: (slider.y * sliderParams.scale) + 'px' }, alt: "" }))),
+            React.createElement("div", { className: css `
+          width: 100%;
+          height: 32px;
+          margin: 10px 0 0 0;
+      ` },
+                React.createElement("div", { className: css `
+            width: 36px;
+            height: 36px;
+            border-radius: 50%;
+            background: #fff;
+            box-shadow: 4px 2px 19px ${props.token?.boxShadow || token.colorPrimary};
+            filter: brightness(1.2);
+            position: absolute;
+            margin-top: -2px;
+            cursor: pointer;
+            z-index: 9;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            user-select: none;
+        `, style: { left: offset + 'px' }, onMouseDown: (e) => {
+                        onMouseDownSlider(e.clientX);
+                    } },
+                    React.createElement("div", { style: {
+                            width: '20px',
+                            height: '20px',
+                            userSelect: 'none'
+                        } },
+                        React.createElement("svg", { className: "icon", viewBox: "0 0 1024 1024", version: "1.1", xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20" },
+                            React.createElement("path", { d: "M613.504 512L274.752 173.248l90.496-90.496L794.496 512l-429.248 429.248-90.496-90.496z", fill: props.token?.colorBar || '#000' })))),
+                React.createElement("div", { className: css `
+            width: 100%;
+            height: 32px;
+            background: #fff;
+            border-radius: 16px;
+            overflow: hidden;
+            position: relative;
+            box-shadow: inset 0 2px 16px ${props.token?.boxShadow || token.colorPrimary};
+        ` },
+                    React.createElement("div", { className: css `
+              height: 32px;
+              position: absolute;
+          `, style: {
+                            width: ((offset > 8 ? offset + 8 : offset) - 8) + 'px',
+                            background: status ? '#FF3C21' : `linear-gradient(90deg, ${props.token?.gradient?.[0]} 0%, ${props.token?.gradient?.[1]} 100%)`,
+                            display: 'flex',
+                            justifyContent: 'center',
+                            alignItems: 'center',
+                            color: '#fff',
+                            fontSize: '13px'
+                        } },
+                        React.createElement("div", { style: { minWidth: '140px' } }, status ? '滑块验证失败，请重试' : undefined)),
+                    React.createElement("div", { className: css `
+              width: 100%;
+              height: 100%;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              font-size: 13px;
+              font-weight: 500;
+              color: ${props.token?.colorPrimary || token.colorPrimary}
+          ` }, "\u5411\u53F3\u6ED1\u52A8\u5B8C\u6210\u62FC\u56FE")))));
+};

package/type.d.ts

@@ -0,0 +1,3 @@
+export type Handler<T> = {
+    ok: (callback: (params: T) => Promise<boolean>, args?: {}, initialValues?: {}) => void;
+};

package/type.js

@@ -0,0 +1 @@
+export {};

package/InlineContainer.d.ts

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

package/InlineContainer.js

@@ -1,28 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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 {};