@wzyjs/uis 0.3.32 → 0.3.37

package/dist/inputs/FileUploader/index.d.ts

@@ -1,22 +1,25 @@
-import { type ReactElement } from 'react';
+import { type ReactElement, type ReactNode } from 'react';
 import type { UploadProps, UploadFile as AntUploadFile } from 'antd';
+import { type UploadRequestData } from './utils';
 export interface FileUploaderProps {
     value?: AntUploadFile[];
     onChange?: (fileList: AntUploadFile[]) => void;
     mode?: 'file' | 'http';
-    accept?: string;
-    multiple?: boolean;
-    maxCount?: number;
+    accept?: UploadProps['accept'];
+    multiple?: UploadProps['multiple'];
+    maxCount?: UploadProps['maxCount'];
     trigger?: 'button' | 'dragger' | ReactElement;
+    children?: ReactNode;
+    className?: UploadProps['className'];
     listType?: UploadProps['listType'];
-    beforeUpload?: (file: AntUploadFile) => boolean | Promise<void>;
+    beforeUpload?: UploadProps['beforeUpload'];
     immediateUpload?: boolean;
     action?: string;
-    data?: Record<string, unknown> | ((file: AntUploadFile) => Record<string, unknown>);
+    data?: UploadRequestData;
     headers?: UploadProps['headers'];
     withCredentials?: boolean;
     disabled?: boolean;
-    showUploadList?: boolean;
+    showUploadList?: UploadProps['showUploadList'];
     onUploadChange?: UploadProps['onChange'];
 }
 export declare const FileUploader: (props: FileUploaderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/inputs/FileUploader/index.js

@@ -1,10 +1,11 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from 'react';
-import { Upload, Button, } from 'antd';
+import { Upload, Button } from 'antd';
 import { UploadOutlined, InboxOutlined } from '@ant-design/icons';
+import { handleUploadBefore } from './utils';
 export const FileUploader = (props) => {
-    const { value, onChange, mode = 'file', accept, multiple = true, maxCount, trigger = 'dragger', listType = 'text', beforeUpload, immediateUpload = false, action = '/api/file/upload', data, headers, withCredentials, disabled, showUploadList = trigger === 'dragger', onUploadChange, } = props;
+    const { value, onChange, mode = 'file', accept, multiple = true, maxCount, trigger = 'dragger', children, className, listType = 'text', beforeUpload, immediateUpload = false, action = '/api/file/upload', data, headers, withCredentials, disabled, showUploadList = trigger === 'dragger', onUploadChange, } = props;
     const [internalFileList, setInternalFileList] = useState([]);
     const fileList = value || internalFileList;
     const handleChange = (info) => {
@@ -26,20 +27,13 @@ export const FileUploader = (props) => {
         onChange?.(newFileList);
         onUploadChange?.(info);
     };
-    const handleBeforeUpload = async (file) => {
-        // 1. 外部校验
-        if (beforeUpload) {
-            const result = await beforeUpload(file);
-            if (result === false) {
-                return Upload.LIST_IGNORE;
-            }
-        }
-        // 2. 立即上传模式
-        if (immediateUpload) {
-            return true;
-        }
-        // 3. 非立即上传模式，阻止默认上传行为，但添加到列表
-        return false;
+    const handleBeforeUpload = async (file, currentFileList) => {
+        return await handleUploadBefore({
+            beforeUpload,
+            file,
+            currentFileList,
+            immediateUpload,
+        });
     };
     const uploadProps = {
         fileList,
@@ -47,6 +41,7 @@ export const FileUploader = (props) => {
         multiple,
         maxCount,
         listType,
+        className,
         disabled,
         showUploadList,
         beforeUpload: handleBeforeUpload,
@@ -70,10 +65,10 @@ export const FileUploader = (props) => {
         return _jsx("div", { children: "HTTP \u8F93\u5165\u6A21\u5F0F\u6682\u672A\u652F\u6301" });
     }
     if (trigger === 'button') {
-        return (_jsx(Upload, { ...uploadProps, children: _jsx(Button, { type: "primary", icon: _jsx(UploadOutlined, {}), children: "\u4E0A\u4F20\u6587\u4EF6" }) }));
+        return (_jsx(Upload, { ...uploadProps, children: _jsx(Button, { type: 'primary', icon: _jsx(UploadOutlined, {}), children: "\u4E0A\u4F20\u6587\u4EF6" }) }));
     }
     if (trigger === 'dragger') {
-        return (_jsxs(Upload.Dragger, { ...uploadProps, children: [_jsx("p", { className: "ant-upload-drag-icon", children: _jsx(InboxOutlined, {}) }), _jsx("p", { className: "ant-upload-text", children: "\u70B9\u51FB\u6216\u62D6\u62FD\u6587\u4EF6\u5230\u6B64\u533A\u57DF\u4E0A\u4F20" }), _jsxs("p", { className: "ant-upload-hint", children: ["\u652F\u6301\u5355\u4E2A\u6216\u6279\u91CF\u4E0A\u4F20", maxCount ? `，最多 ${maxCount} 个文件` : ''] })] }));
+        return (_jsx(Upload.Dragger, { ...uploadProps, children: children ?? (_jsxs(_Fragment, { children: [_jsx("p", { className: 'ant-upload-drag-icon', children: _jsx(InboxOutlined, {}) }), _jsx("p", { className: 'ant-upload-text', children: "\u70B9\u51FB\u6216\u62D6\u62FD\u6587\u4EF6\u5230\u6B64\u533A\u57DF\u4E0A\u4F20" }), _jsxs("p", { className: 'ant-upload-hint', children: ["\u652F\u6301\u5355\u4E2A\u6216\u6279\u91CF\u4E0A\u4F20", maxCount ? `，最多 ${maxCount} 个文件` : ''] })] })) }));
     }
     return trigger;
 };

package/dist/inputs/FileUploader/utils.d.ts

@@ -0,0 +1,20 @@
+import type { UploadFile as AntUploadFile, UploadProps } from 'antd';
+export type UploadRequestData = Record<string, unknown> | ((file: AntUploadFile) => Record<string, unknown>);
+type BeforeUploadFile = Parameters<NonNullable<UploadProps['beforeUpload']>>[0];
+type BeforeUploadFileList = Parameters<NonNullable<UploadProps['beforeUpload']>>[1];
+export declare const createAntUploadFile: (file: File) => AntUploadFile;
+export declare const handleUploadBefore: ({ beforeUpload, file, currentFileList, immediateUpload, }: {
+    beforeUpload?: UploadProps["beforeUpload"];
+    file: BeforeUploadFile;
+    currentFileList: BeforeUploadFileList;
+    immediateUpload: boolean;
+}) => Promise<string | boolean>;
+export declare const uploadFileByAction: ({ action, file, data, headers, withCredentials, }: {
+    action: string;
+    file: File;
+    data?: UploadRequestData;
+    headers?: UploadProps["headers"];
+    withCredentials?: boolean;
+}) => Promise<any>;
+export declare const getUploadedUrl: (response: unknown) => string;
+export {};

package/dist/inputs/FileUploader/utils.js

@@ -0,0 +1,99 @@
+import { Upload } from 'antd';
+export const createAntUploadFile = (file) => ({
+    uid: `${file.name}_${file.lastModified}`,
+    name: file.name,
+    size: file.size,
+    type: file.type,
+    lastModified: file.lastModified,
+    lastModifiedDate: new Date(file.lastModified),
+    originFileObj: file,
+});
+export const handleUploadBefore = async ({ beforeUpload, file, currentFileList, immediateUpload, }) => {
+    if (beforeUpload) {
+        const result = await beforeUpload(file, currentFileList);
+        if (result === false || result === Upload.LIST_IGNORE) {
+            return Upload.LIST_IGNORE;
+        }
+    }
+    if (immediateUpload) {
+        return true;
+    }
+    return false;
+};
+const resolveUploadData = (data, file) => {
+    if (!data) {
+        return {};
+    }
+    if (typeof data === 'function') {
+        return data(createAntUploadFile(file));
+    }
+    return data;
+};
+const appendFormValue = (formData, key, value) => {
+    if (value == null) {
+        return;
+    }
+    if (value instanceof Blob) {
+        formData.append(key, value);
+        return;
+    }
+    if (typeof value === 'object') {
+        formData.append(key, JSON.stringify(value));
+        return;
+    }
+    formData.append(key, String(value));
+};
+const normalizeHeaders = (headers) => {
+    if (!headers) {
+        return undefined;
+    }
+    const normalizedHeaders = new Headers();
+    Object.entries(headers).forEach(([key, value]) => {
+        if (value != null) {
+            normalizedHeaders.set(key, String(value));
+        }
+    });
+    return normalizedHeaders;
+};
+const getUploadErrorMessage = async (response) => {
+    const contentType = response.headers.get('content-type') || '';
+    if (contentType.includes('application/json')) {
+        const body = await response.json().catch(() => null);
+        if (body && typeof body === 'object' && 'error' in body && typeof body.error === 'string') {
+            return body.error;
+        }
+    }
+    const text = await response.text().catch(() => '');
+    if (text) {
+        return text;
+    }
+    return `上传失败: ${response.status}`;
+};
+export const uploadFileByAction = async ({ action, file, data, headers, withCredentials, }) => {
+    const formData = new FormData();
+    formData.append('file', file);
+    const uploadData = resolveUploadData(data, file);
+    Object.entries(uploadData).forEach(([key, value]) => {
+        appendFormValue(formData, key, value);
+    });
+    const response = await fetch(action, {
+        method: 'POST',
+        body: formData,
+        headers: normalizeHeaders(headers),
+        credentials: withCredentials ? 'include' : 'same-origin',
+    });
+    if (!response.ok) {
+        throw new Error(await getUploadErrorMessage(response));
+    }
+    return await response.json();
+};
+export const getUploadedUrl = (response) => {
+    if (response
+        && typeof response === 'object'
+        && 'url' in response
+        && typeof response.url === 'string'
+        && response.url) {
+        return response.url;
+    }
+    throw new Error('上传接口返回缺少 url 字段');
+};

package/dist/inputs/ImageUploader/index.d.ts

@@ -1,3 +1,5 @@
+import type { UploadProps } from 'antd';
+import { type UploadRequestData } from '../FileUploader/utils';
 interface ImageUploaderProps {
     value?: string[];
     onChange?: (value: string[]) => void;
@@ -7,6 +9,13 @@ interface ImageUploaderProps {
     enableFileSelect?: boolean;
     enablePaste?: boolean;
     enablePasteTip?: boolean;
+    beforeUpload?: UploadProps['beforeUpload'];
+    immediateUpload?: boolean;
+    action?: string;
+    data?: UploadRequestData;
+    headers?: UploadProps['headers'];
+    withCredentials?: boolean;
+    onUploadChange?: UploadProps['onChange'];
 }
 export declare const ImageUploader: (props: ImageUploaderProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/inputs/ImageUploader/index.js

@@ -3,60 +3,206 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
 import { Alert, Button, Modal, Popover, Space, Typography } from 'antd';
 import { DeleteOutlined, PlusOutlined } from '@ant-design/icons';
+import { createAntUploadFile, getUploadedUrl, handleUploadBefore, uploadFileByAction, } from '../FileUploader/utils';
+const createImageFile = (file, index) => {
+    if (file instanceof File) {
+        return file;
+    }
+    return new File([file], `image_${Date.now()}_${index}.png`, {
+        type: file.type || 'image/png',
+        lastModified: Date.now(),
+    });
+};
+const createPreviewFileList = (images) => {
+    return images.map((image, index) => ({
+        uid: `${image}_${index}`,
+        name: `image_${index + 1}`,
+        status: 'done',
+        url: image,
+    }));
+};
+const readAsDataURL = (file) => {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onloadend = () => resolve(reader.result);
+        reader.onerror = () => reject(reader.error || new Error('读取图片失败'));
+        reader.readAsDataURL(file);
+    });
+};
 export const ImageUploader = (props) => {
-    const { value = [], onChange, maxImages = 10, enablePreview = false, enableDragDrop = false, enableFileSelect = false, enablePaste = true, enablePasteTip = false, } = props;
+    const { value = [], onChange, maxImages = 10, enablePreview = false, enableDragDrop = false, enableFileSelect = false, enablePaste = true, enablePasteTip = false, beforeUpload, immediateUpload = false, action = '/api/file/upload', data, headers, withCredentials, onUploadChange, } = props;
     const [isDragging, setIsDragging] = useState(false);
     const fileInputRef = useRef(null);
+    const compressImage = (file) => {
+        return new Promise((resolve) => {
+            const originalSize = file.size / 1024;
+            const img = new Image();
+            img.src = URL.createObjectURL(file);
+            img.onload = () => {
+                URL.revokeObjectURL(img.src);
+                const canvas = document.createElement('canvas');
+                let width = img.width;
+                let height = img.height;
+                const maxWidth = 1200;
+                const maxHeight = 1200;
+                if (width > maxWidth || height > maxHeight) {
+                    const ratio = Math.min(maxWidth / width, maxHeight / height);
+                    width = width * ratio;
+                    height = height * ratio;
+                }
+                canvas.width = width;
+                canvas.height = height;
+                const ctx = canvas.getContext('2d');
+                if (!ctx) {
+                    resolve(file);
+                    return;
+                }
+                ctx.drawImage(img, 0, 0, width, height);
+                canvas.toBlob((blob) => {
+                    if (!blob) {
+                        resolve(file);
+                        return;
+                    }
+                    const compressedSize = blob.size / 1024;
+                    console.log(`原始图片: ${originalSize.toFixed(2)} KB => ${compressedSize.toFixed(2)} KB`);
+                    console.log(`压缩到了: ${((compressedSize / originalSize) * 100).toFixed(2)}%`);
+                    resolve(blob);
+                }, 'image/jpeg', 0.8);
+            };
+        });
+    };
+    const triggerUploadChange = (file, images) => {
+        onUploadChange?.({
+            file,
+            fileList: createPreviewFileList(images),
+        });
+    };
+    const appendImage = (nextImages, image) => {
+        if (!nextImages.includes(image)) {
+            nextImages.push(image);
+            onChange?.(nextImages.slice());
+        }
+    };
+    const uploadImage = async (file) => {
+        const compressed = await compressImage(file);
+        const uploadFile = new File([compressed], file.name, {
+            type: compressed.type || file.type || 'image/jpeg',
+            lastModified: file.lastModified,
+        });
+        const response = await uploadFileByAction({
+            action,
+            file: uploadFile,
+            data,
+            headers,
+            withCredentials,
+        });
+        return {
+            response,
+            url: getUploadedUrl(response),
+            uploadFile,
+        };
+    };
+    const addFiles = async (files) => {
+        const remainCount = maxImages - value.length;
+        if (remainCount <= 0) {
+            alert(`最多允许上传 ${maxImages} 张图片。`);
+            return;
+        }
+        const imageFiles = files
+            .filter(file => file.type.startsWith('image/'))
+            .slice(0, remainCount)
+            .map((file, index) => createImageFile(file, index));
+        const nextImages = value.slice();
+        try {
+            for (const file of imageFiles) {
+                const beforeResult = await handleUploadBefore({
+                    beforeUpload,
+                    file: file,
+                    currentFileList: imageFiles,
+                    immediateUpload,
+                });
+                if (beforeResult !== true && beforeResult !== false) {
+                    continue;
+                }
+                if (immediateUpload) {
+                    const { response, url, uploadFile } = await uploadImage(file);
+                    appendImage(nextImages, url);
+                    triggerUploadChange({
+                        ...createAntUploadFile(uploadFile),
+                        status: 'done',
+                        url,
+                        response,
+                    }, nextImages);
+                    continue;
+                }
+                const compressed = await compressImage(file);
+                const base64String = await readAsDataURL(compressed);
+                appendImage(nextImages, base64String);
+            }
+        }
+        catch (error) {
+            console.error('图片处理失败:', error);
+            if (immediateUpload) {
+                triggerUploadChange({
+                    uid: '-1',
+                    name: 'upload-error',
+                    status: 'error',
+                }, nextImages);
+            }
+            alert(error instanceof Error ? error.message : '图片处理失败，请重试。');
+        }
+        finally {
+            if (fileInputRef.current) {
+                fileInputRef.current.value = '';
+            }
+        }
+    };
     useEffect(() => {
         if (!enablePaste)
             return;
         const handlePaste = (event) => {
-            if (event.clipboardData && event.clipboardData.items) {
-                const items = event.clipboardData.items;
-                for (let i = 0; i < items.length; i++) {
-                    const item = items[i];
-                    if (item && item.type.indexOf('image') !== -1) {
-                        const file = item.getAsFile();
-                        if (file) {
-                            convertToBase64(file);
-                        }
+            const items = event.clipboardData?.items || [];
+            const files = [];
+            for (const item of items) {
+                if (item.type.startsWith('image/')) {
+                    const file = item.getAsFile();
+                    if (file) {
+                        files.push(file);
                     }
                 }
             }
+            if (files.length) {
+                void addFiles(files);
+            }
         };
         document.addEventListener('paste', handlePaste);
         return () => {
             document.removeEventListener('paste', handlePaste);
         };
-    }, [value, enablePaste]);
-    const handleDragOver = (e) => {
+    }, [enablePaste, value, beforeUpload, immediateUpload, action, data, headers, withCredentials, onChange, onUploadChange, maxImages]);
+    const handleDrop = (e) => {
         if (!enableDragDrop)
             return;
         e.preventDefault();
         e.stopPropagation();
-        setIsDragging(true);
+        setIsDragging(false);
+        if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+            void addFiles(Array.from(e.dataTransfer.files));
+        }
     };
-    const handleDragLeave = (e) => {
+    const handleDragOver = (e) => {
         if (!enableDragDrop)
             return;
         e.preventDefault();
         e.stopPropagation();
-        setIsDragging(false);
+        setIsDragging(true);
     };
-    const handleDrop = (e) => {
+    const handleDragLeave = (e) => {
         if (!enableDragDrop)
             return;
         e.preventDefault();
         e.stopPropagation();
         setIsDragging(false);
-        if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
-            const fileList = Array.from(e.dataTransfer.files);
-            fileList.forEach((file) => {
-                if (file.type.match('image.*')) {
-                    convertToBase64(file);
-                }
-            });
-        }
     };
     const handleClick = () => {
         if (!enableFileSelect)
@@ -67,89 +213,31 @@ export const ImageUploader = (props) => {
         if (!enableFileSelect)
             return;
         if (e.target.files && e.target.files.length > 0) {
-            const fileList = Array.from(e.target.files);
-            fileList.forEach((file) => {
-                if (file.type.match('image.*')) {
-                    convertToBase64(file);
-                }
-            });
+            void addFiles(Array.from(e.target.files));
         }
     };
     const handlePasteButton = () => {
         if (!enablePaste)
             return;
         navigator.clipboard.read().then((clipboardItems) => {
+            const files = [];
             for (const clipboardItem of clipboardItems) {
                 for (const type of clipboardItem.types) {
                     if (type.startsWith('image/')) {
-                        clipboardItem.getType(type).then((blob) => {
-                            convertToBase64(blob);
-                        });
+                        files.push(clipboardItem.getType(type));
                     }
                 }
             }
+            return Promise.all(files);
+        }).then((files) => {
+            if (files.length) {
+                void addFiles(files);
+            }
         }).catch(error => {
             console.error('读取剪贴板失败:', error);
             alert('读取剪贴板失败。请尝试使用 Ctrl+V 粘贴或手动上传图片。');
         });
     };
-    const convertToBase64 = (file) => {
-        if (value.length >= maxImages) {
-            alert(`最多允许上传 ${maxImages} 张图片。`);
-            return;
-        }
-        compressImage(file).then(compressedFile => {
-            const reader = new FileReader();
-            reader.onloadend = () => {
-                const base64String = reader.result;
-                if (!value.includes(base64String)) {
-                    onChange?.([...value, base64String]);
-                }
-            };
-            reader.readAsDataURL(compressedFile);
-        });
-    };
-    const compressImage = (file) => {
-        return new Promise((resolve) => {
-            const originalSize = file.size / 1024;
-            const img = new Image();
-            img.src = URL.createObjectURL(file);
-            img.onload = () => {
-                URL.revokeObjectURL(img.src);
-                const canvas = document.createElement('canvas');
-                let width = img.width;
-                let height = img.height;
-                // 计算压缩比例，保持宽高比
-                const maxWidth = 1200;
-                const maxHeight = 1200;
-                if (width > maxWidth || height > maxHeight) {
-                    const ratio = Math.min(maxWidth / width, maxHeight / height);
-                    width = width * ratio;
-                    height = height * ratio;
-                }
-                canvas.width = width;
-                canvas.height = height;
-                const ctx = canvas.getContext('2d');
-                if (!ctx) {
-                    resolve(file);
-                    return;
-                }
-                ctx.drawImage(img, 0, 0, width, height);
-                // 转换为blob，压缩质量为0.8
-                canvas.toBlob((blob) => {
-                    if (!blob) {
-                        resolve(file);
-                        return;
-                    }
-                    // 获取压缩后的图片大小
-                    const compressedSize = blob.size / 1024;
-                    console.log(`原始图片: ${originalSize.toFixed(2)} KB => ${compressedSize.toFixed(2)} KB`);
-                    console.log(`压缩到了: ${((compressedSize / originalSize) * 100).toFixed(2)}%`);
-                    resolve(blob);
-                }, 'image/jpeg', 0.8);
-            };
-        });
-    };
     const handleRemoveImage = (index) => {
         Modal.confirm({
             title: '确认删除',
@@ -176,7 +264,7 @@ export const ImageUploader = (props) => {
                                         height: 'auto',
                                         objectFit: 'contain',
                                     } })), children: imageNode }) }, index));
-                    }), value.length < maxImages && (_jsxs(Space, { style: { width: '100%' }, children: [enableFileSelect && (_jsxs("div", { className: `border-2 border-dashed rounded flex flex-col items-center justify-center cursor-pointer transition-colors ${isDragging && enableDragDrop ? 'border-blue-500 bg-blue-50' : 'border-gray-300 hover:border-blue-500'}`, onDragOver: enableDragDrop ? handleDragOver : undefined, onDragLeave: enableDragDrop ? handleDragLeave : undefined, onDrop: enableDragDrop ? handleDrop : undefined, onClick: handleClick, style: { width: '50px', height: '50px' }, children: [_jsx(PlusOutlined, { style: { fontSize: '24px', color: '#8c8c8c' } }), _jsx(Typography.Text, { type: 'secondary', className: 'm-2', children: "\u4E0A\u4F20" })] })), enablePaste && (_jsxs("div", { style: { width: '50px', height: '50px' }, className: `border-2 border-dashed rounded flex flex-col items-center justify-center cursor-pointer transition-colors ${isDragging ? 'border-blue-500 bg-blue-50' : 'border-gray-300 hover:border-blue-500'}`, onClick: handlePasteButton, children: [_jsx(PlusOutlined, { style: { fontSize: '24px', color: '#8c8c8c' } }), _jsx(Typography.Text, { type: 'secondary', className: 'm-2', children: "\u7C98\u8D34" })] }))] }))] }), enableFileSelect && (_jsx("input", { type: 'file', ref: fileInputRef, onChange: handleFileChange, accept: 'image/*', multiple: true, style: { display: 'none' } })), (enablePasteTip && enablePaste) && (_jsx(Alert, { type: 'info', showIcon: true, title: _jsxs(Typography.Text, { type: 'secondary', children: ["\u63D0\u793A\uFF1A\u60A8\u4E5F\u53EF\u4EE5\u5728\u4EFB\u610F\u4F4D\u7F6E\u6309\u4E0B ", _jsx("kbd", { style: {
+                    }), value.length < maxImages && (_jsxs(Space, { style: { width: '100%' }, children: [enableFileSelect && (_jsxs("div", { className: `border-2 border-dashed rounded flex flex-col items-center justify-center cursor-pointer transition-colors ${isDragging && enableDragDrop ? 'border-blue-500 bg-blue-50' : 'border-gray-300 hover:border-blue-500'}`, onDrop: enableDragDrop ? handleDrop : undefined, onClick: handleClick, onDragOver: enableDragDrop ? handleDragOver : undefined, onDragLeave: enableDragDrop ? handleDragLeave : undefined, style: { width: '50px', height: '50px' }, children: [_jsx(PlusOutlined, { style: { fontSize: '24px', color: '#8c8c8c' } }), _jsx(Typography.Text, { type: 'secondary', className: 'm-2', children: "\u4E0A\u4F20" })] })), enablePaste && (_jsxs("div", { style: { width: '50px', height: '50px' }, className: `border-2 border-dashed rounded flex flex-col items-center justify-center cursor-pointer transition-colors ${isDragging ? 'border-blue-500 bg-blue-50' : 'border-gray-300 hover:border-blue-500'}`, onClick: handlePasteButton, children: [_jsx(PlusOutlined, { style: { fontSize: '24px', color: '#8c8c8c' } }), _jsx(Typography.Text, { type: 'secondary', className: 'm-2', children: "\u7C98\u8D34" })] }))] }))] }), enableFileSelect && (_jsx("input", { type: 'file', ref: fileInputRef, onChange: handleFileChange, accept: 'image/*', multiple: true, style: { display: 'none' } })), (enablePasteTip && enablePaste) && (_jsx(Alert, { type: 'info', showIcon: true, title: _jsxs(Typography.Text, { type: 'secondary', children: ["\u63D0\u793A\uFF1A\u60A8\u4E5F\u53EF\u4EE5\u5728\u4EFB\u610F\u4F4D\u7F6E\u6309\u4E0B ", _jsx("kbd", { style: {
                                 padding: '0.1rem 0.4rem',
                                 background: '#f5f5f5',
                                 border: '1px solid #d9d9d9',

package/dist/layout/PageBase/index.d.ts

@@ -1,6 +1,6 @@
 import type { PropsWithChildren, ReactNode } from 'react';
 interface PageBaseProps extends PropsWithChildren {
-    title: ReactNode;
+    title?: ReactNode;
 }
 export declare const PageBase: (props: PageBaseProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/layout/PanelPage/index.d.ts

@@ -0,0 +1,8 @@
+import { type ReactNode } from 'react';
+export interface PanelPageProps {
+    children: ReactNode;
+    description?: ReactNode;
+    eyebrow: string;
+    title: string;
+}
+export declare const PanelPage: (props: PanelPageProps) => import("react/jsx-runtime").JSX.Element;

package/dist/layout/PanelPage/index.js

@@ -0,0 +1,7 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Typography } from 'antd';
+export const PanelPage = (props) => {
+    const { children, description, eyebrow, title } = props;
+    return (_jsxs("div", { className: 'relative min-h-[calc(100vh-100px)] overflow-hidden bg-[linear-gradient(180deg,_#f8fbff_0%,_#eef4ff_52%,_#f8fafc_100%)] dark:bg-[linear-gradient(180deg,_#0f172a_0%,_#111827_55%,_#0f172a_100%)]', children: [_jsx("div", { className: 'absolute inset-0 bg-[linear-gradient(rgba(148,163,184,0.1)_1px,transparent_1px),linear-gradient(90deg,rgba(148,163,184,0.1)_1px,transparent_1px)] bg-[size:32px_32px] opacity-40 dark:opacity-10' }), _jsx("div", { className: 'relative mx-auto flex min-h-[calc(100vh-100px)] max-w-6xl items-center justify-center px-4 py-8 sm:px-6 lg:px-8', children: _jsxs("div", { className: 'w-full max-w-xl overflow-hidden rounded-lg border border-slate-200/80 bg-white/80 shadow-sm backdrop-blur-sm dark:border-white/10 dark:bg-white/5', children: [_jsxs("div", { className: 'border-b border-slate-200/70 px-6 py-6 dark:border-white/10 sm:px-8', children: [_jsx(Typography.Text, { className: 'text-xs font-semibold uppercase tracking-[0.3em] text-slate-500 dark:text-slate-400', children: eyebrow }), _jsx(Typography.Title, { level: 3, className: '!mb-0 !mt-4 !text-3xl !font-semibold !text-slate-950 dark:!text-slate-50', children: title }), description ? (_jsx("div", { className: 'mt-2 text-sm leading-6 text-slate-500 dark:text-slate-300', children: description })) : null] }), _jsx("div", { className: 'px-4 py-4 sm:px-6 sm:py-6', children: children })] }) })] }));
+};

package/dist/layout/index.d.ts

@@ -4,3 +4,4 @@ export * from './TabsPro';
 export * from './DragSort';
 export * from './PageBase';
 export * from './SideMenu';
+export * from './PanelPage';

package/dist/layout/index.js

@@ -4,3 +4,4 @@ export * from './TabsPro';
 export * from './DragSort';
 export * from './PageBase';
 export * from './SideMenu';
+export * from './PanelPage';

package/dist/web.css

@@ -38,12 +38,21 @@
     margin-left: auto;
     margin-right: auto
 }
+.\!mb-0 {
+    margin-bottom: 0px !important
+}
+.\!mt-4 {
+    margin-top: 1rem !important
+}
 .mb-6 {
     margin-bottom: 1.5rem
 }
 .ml-2 {
     margin-left: 0.5rem
 }
+.mt-2 {
+    margin-top: 0.5rem
+}
 .mt-auto {
     margin-top: auto
 }
@@ -68,6 +77,9 @@
 .h-screen {
     height: 100vh
 }
+.min-h-\[calc\(100vh-100px\)\] {
+    min-height: calc(100vh - 100px)
+}
 .w-16 {
     width: 4rem
 }
@@ -83,9 +95,15 @@
 .w-px {
     width: 1px
 }
+.max-w-6xl {
+    max-width: 72rem
+}
 .max-w-7xl {
     max-width: 80rem
 }
+.max-w-xl {
+    max-width: 36rem
+}
 .flex-1 {
     flex: 1 1 0%
 }
@@ -148,12 +166,18 @@
 .rounded-full {
     border-radius: 9999px
 }
+.rounded-lg {
+    border-radius: 0.5rem
+}
 .border {
     border-width: 1px
 }
 .border-2 {
     border-width: 2px
 }
+.border-b {
+    border-bottom-width: 1px
+}
 .border-t {
     border-top-width: 1px
 }
@@ -175,6 +199,12 @@
     --tw-border-opacity: 1;
     border-color: rgb(209 213 219 / var(--tw-border-opacity, 1))
 }
+.border-slate-200\/70 {
+    border-color: rgb(226 232 240 / 0.7)
+}
+.border-slate-200\/80 {
+    border-color: rgb(226 232 240 / 0.8)
+}
 .\!bg-blue-500 {
     --tw-bg-opacity: 1 !important;
     background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1)) !important
@@ -198,6 +228,18 @@
     --tw-bg-opacity: 1;
     background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))
 }
+.bg-white\/80 {
+    background-color: rgb(255 255 255 / 0.8)
+}
+.bg-\[linear-gradient\(180deg\2c _\#f8fbff_0\%\2c _\#eef4ff_52\%\2c _\#f8fafc_100\%\)\] {
+    background-image: linear-gradient(180deg, #f8fbff 0%, #eef4ff 52%, #f8fafc 100%)
+}
+.bg-\[linear-gradient\(rgba\(148\2c 163\2c 184\2c 0\.1\)_1px\2c transparent_1px\)\2c linear-gradient\(90deg\2c rgba\(148\2c 163\2c 184\2c 0\.1\)_1px\2c transparent_1px\)\] {
+    background-image: linear-gradient(rgba(148,163,184,0.1) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,0.1) 1px,transparent 1px)
+}
+.bg-\[size\:32px_32px\] {
+    background-size: 32px 32px
+}
 .object-contain {
     -o-object-fit: contain;
        object-fit: contain
@@ -212,16 +254,36 @@
     padding-left: 1rem;
     padding-right: 1rem
 }
+.px-6 {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem
+}
 .py-2 {
     padding-top: 0.5rem;
     padding-bottom: 0.5rem
 }
+.py-4 {
+    padding-top: 1rem;
+    padding-bottom: 1rem
+}
+.py-6 {
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem
+}
+.py-8 {
+    padding-top: 2rem;
+    padding-bottom: 2rem
+}
 .pr-4 {
     padding-right: 1rem
 }
 .text-center {
     text-align: center
 }
+.\!text-3xl {
+    font-size: 1.875rem !important;
+    line-height: 2.25rem !important
+}
 .text-2xl {
     font-size: 1.5rem;
     line-height: 2rem
@@ -246,15 +308,34 @@
     font-size: 0.75rem;
     line-height: 1rem
 }
+.\!font-semibold {
+    font-weight: 600 !important
+}
 .font-bold {
     font-weight: 700
 }
 .font-medium {
     font-weight: 500
 }
+.font-semibold {
+    font-weight: 600
+}
+.uppercase {
+    text-transform: uppercase
+}
+.leading-6 {
+    line-height: 1.5rem
+}
 .leading-none {
     line-height: 1
 }
+.tracking-\[0\.3em\] {
+    letter-spacing: 0.3em
+}
+.\!text-slate-950 {
+    --tw-text-opacity: 1 !important;
+    color: rgb(2 6 23 / var(--tw-text-opacity, 1)) !important
+}
 .\!text-white {
     --tw-text-opacity: 1 !important;
     color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important
@@ -271,6 +352,10 @@
     --tw-text-opacity: 1;
     color: rgb(17 24 39 / var(--tw-text-opacity, 1))
 }
+.text-slate-500 {
+    --tw-text-opacity: 1;
+    color: rgb(100 116 139 / var(--tw-text-opacity, 1))
+}
 .text-white {
     --tw-text-opacity: 1;
     color: rgb(255 255 255 / var(--tw-text-opacity, 1))
@@ -284,6 +369,14 @@
 .opacity-30 {
     opacity: 0.3
 }
+.opacity-40 {
+    opacity: 0.4
+}
+.shadow-sm {
+    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
+}
 .outline {
     outline-style: solid
 }
@@ -307,6 +400,10 @@
 .filter {
     filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
 }
+.backdrop-blur-sm {
+    --tw-backdrop-blur: blur(4px);
+    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
+}
 .transition {
     transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -361,3 +458,47 @@
 .focus\:ring-offset-2:focus {
     --tw-ring-offset-width: 2px
 }
+.dark\:border-white\/10:is(.dark *) {
+    border-color: rgb(255 255 255 / 0.1)
+}
+.dark\:bg-white\/5:is(.dark *) {
+    background-color: rgb(255 255 255 / 0.05)
+}
+.dark\:bg-\[linear-gradient\(180deg\2c _\#0f172a_0\%\2c _\#111827_55\%\2c _\#0f172a_100\%\)\]:is(.dark *) {
+    background-image: linear-gradient(180deg, #0f172a 0%, #111827 55%, #0f172a 100%)
+}
+.dark\:\!text-slate-50:is(.dark *) {
+    --tw-text-opacity: 1 !important;
+    color: rgb(248 250 252 / var(--tw-text-opacity, 1)) !important
+}
+.dark\:text-slate-300:is(.dark *) {
+    --tw-text-opacity: 1;
+    color: rgb(203 213 225 / var(--tw-text-opacity, 1))
+}
+.dark\:text-slate-400:is(.dark *) {
+    --tw-text-opacity: 1;
+    color: rgb(148 163 184 / var(--tw-text-opacity, 1))
+}
+.dark\:opacity-10:is(.dark *) {
+    opacity: 0.1
+}
+@media (min-width: 640px) {
+    .sm\:px-6 {
+        padding-left: 1.5rem;
+        padding-right: 1.5rem
+    }
+    .sm\:px-8 {
+        padding-left: 2rem;
+        padding-right: 2rem
+    }
+    .sm\:py-6 {
+        padding-top: 1.5rem;
+        padding-bottom: 1.5rem
+    }
+}
+@media (min-width: 1024px) {
+    .lg\:px-8 {
+        padding-left: 2rem;
+        padding-right: 2rem
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wzyjs/uis",
-  "version": "0.3.32",
+  "version": "0.3.37",
   "description": "description",
   "author": "wzy",
   "type": "module",
@@ -9,7 +9,8 @@
     "**/*.css"
   ],
   "scripts": {
-    "build": "rm -rf dist && tsc && rsync -a --include='*/' --include='*.css' --exclude='*' src/ dist/ && postcss ./src/web.css -o ./dist/web.css"
+    "build": "rm -rf dist && tsc && rsync -a --include='*/' --include='*.css' --exclude='*' src/ dist/ && postcss ./src/web.css -o ./dist/web.css",
+    "typecheck": "tsc --noEmit"
   },
   "files": [
     "dist"
@@ -35,8 +36,8 @@
     "@ant-design/pro-form": "^2.32.0",
     "@ant-design/pro-provider": "^2.16.2",
     "@hello-pangea/dnd": "^18.0.1",
-    "@wzyjs/hooks": "0.3.32",
-    "@wzyjs/utils": "0.3.32",
+    "@wzyjs/hooks": "0.3.37",
+    "@wzyjs/utils": "0.3.37",
     "@xyflow/react": "^12.5.3",
     "echarts": "^5.4.3",
     "echarts-for-react": "^3.0.2",
@@ -69,7 +70,7 @@
     "postcss-cli": "^11.0.1",
     "tailwindcss": "^3.4.18"
   },
-  "gitHead": "260d8290106ef447ec42375d4656af2e89675b15",
+  "gitHead": "66fc9b56ff49d9a725189dbd3360d6987cb9d604",
   "publishConfig": {
     "access": "public"
   }