@zjlab-fe/data-hub-ui 0.21.6 → 0.22.0

package/es/components/tip-tap/toolbar/components/color-picker.js

@@ -0,0 +1,76 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useEditorState } from '@tiptap/react';
+import { useState, useRef, useEffect } from 'react';
+import { IconBold, IconHighlight } from '../../icons/index.js';
+
+function ColorPicker({ editor, type, tooltip }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const dropdownRef = useRef(null);
+    const colors = [
+        '#000000',
+        '#374151',
+        '#6b7280',
+        '#9ca3af',
+        '#ef4444',
+        '#f97316',
+        '#eab308',
+        '#22c55e',
+        '#14b8a6',
+        '#3b82f6',
+        '#6366f1',
+        '#a855f7',
+        '#ec4899',
+        '#f43f5e',
+        '#84cc16',
+        '#06b6d4',
+    ];
+    // 使用 useEditorState 来同步编辑器状态
+    const editorState = useEditorState({
+        editor,
+        selector: (ctx) => {
+            if (type === 'textColor') {
+                return {
+                    isActive: !!ctx.editor.getAttributes('textStyle').color,
+                    color: ctx.editor.getAttributes('textStyle').color,
+                };
+            }
+            else {
+                return {
+                    isActive: ctx.editor.isActive('highlight'),
+                    color: ctx.editor.getAttributes('highlight').color,
+                };
+            }
+        },
+    });
+    useEffect(() => {
+        function handleClickOutside(e) {
+            if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
+                setIsOpen(false);
+            }
+        }
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, []);
+    function handleColorSelect(color) {
+        if (type === 'textColor') {
+            if (color) {
+                editor.chain().focus().setColor(color).run();
+            }
+            else {
+                editor.chain().focus().unsetColor().run();
+            }
+        }
+        else {
+            if (color) {
+                editor.chain().focus().toggleHighlight({ color }).run();
+            }
+            else {
+                editor.chain().focus().unsetHighlight().run();
+            }
+        }
+        setIsOpen(false);
+    }
+    return (jsxs("div", { className: `tip-tap-dropdown ${isOpen ? 'tip-tap-dropdown--open' : ''}`, ref: dropdownRef, children: [jsxs("button", { className: `tip-tap-btn ${(editorState === null || editorState === void 0 ? void 0 : editorState.isActive) ? 'tip-tap-btn--active' : ''}`, onClick: () => setIsOpen(!isOpen), type: "button", style: type === 'textColor' && (editorState === null || editorState === void 0 ? void 0 : editorState.color) ? { color: editorState.color } : {}, children: [type === 'textColor' ? (jsx(IconBold, { style: { borderBottom: `3px solid ${(editorState === null || editorState === void 0 ? void 0 : editorState.color) || '#000'}` } })) : (jsx(IconHighlight, {})), jsx("span", { className: "tip-tap-tooltip", children: tooltip })] }), jsx("div", { className: "tip-tap-dropdown__menu", children: jsxs("div", { className: "tip-tap-color-picker", children: [jsx("button", { className: "tip-tap-color-picker__swatch tip-tap-color-picker__swatch--reset", onClick: () => handleColorSelect(null), title: "\u79FB\u9664\u989C\u8272", type: "button" }), colors.map((color) => (jsx("button", { className: "tip-tap-color-picker__swatch", style: { background: color }, onClick: () => handleColorSelect(color), type: "button" }, color)))] }) })] }));
+}
+
+export { ColorPicker };

package/es/components/tip-tap/toolbar/components/heading-dropdown.js

@@ -0,0 +1,44 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useEditorState } from '@tiptap/react';
+import { useState, useRef, useEffect } from 'react';
+import { IconParagraph, IconH1, IconH2, IconH3, IconChevronDown } from '../../icons/index.js';
+
+function HeadingDropdown({ editor }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const dropdownRef = useRef(null);
+    const headings = [
+        { level: 0, label: '正文', icon: jsx(IconParagraph, {}) },
+        { level: 1, label: '标题 1', icon: jsx(IconH1, {}) },
+        { level: 2, label: '标题 2', icon: jsx(IconH2, {}) },
+        { level: 3, label: '标题 3', icon: jsx(IconH3, {}) },
+    ];
+    // 使用 useEditorState 来同步编辑器状态
+    const editorState = useEditorState({
+        editor,
+        selector: (ctx) => {
+            const currentLevel = headings.find((h) => h.level === 0 ? ctx.editor.isActive('paragraph') : ctx.editor.isActive('heading', { level: h.level }));
+            return currentLevel;
+        },
+    });
+    useEffect(() => {
+        function handleClickOutside(e) {
+            if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
+                setIsOpen(false);
+            }
+        }
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, []);
+    function handleSelect(level) {
+        if (level === 0) {
+            editor.chain().focus().setParagraph().run();
+        }
+        else {
+            editor.chain().focus().toggleHeading({ level }).run();
+        }
+        setIsOpen(false);
+    }
+    return (jsxs("div", { className: `tip-tap-dropdown ${isOpen ? 'tip-tap-dropdown--open' : ''}`, ref: dropdownRef, children: [jsxs("button", { className: `tip-tap-dropdown__trigger ${editorState && editorState.level !== 0 ? 'tip-tap-dropdown__trigger--active' : ''}`, onClick: () => setIsOpen(!isOpen), type: "button", children: [(editorState === null || editorState === void 0 ? void 0 : editorState.icon) || jsx(IconParagraph, {}), jsx("span", { children: (editorState === null || editorState === void 0 ? void 0 : editorState.label) || '正文' }), jsx(IconChevronDown, { className: "tip-tap-dropdown__arrow" })] }), jsx("div", { className: "tip-tap-dropdown__menu", children: headings.map(({ level, label, icon }) => (jsxs("button", { className: `tip-tap-dropdown__item ${(editorState === null || editorState === void 0 ? void 0 : editorState.level) === level ? 'tip-tap-dropdown__item--active' : ''}`, onClick: () => handleSelect(level), type: "button", children: [jsx("span", { className: "tip-tap-dropdown__item-icon", children: icon }), label] }, level))) })] }));
+}
+
+export { HeadingDropdown };

package/es/components/tip-tap/toolbar/components/image-button.js

@@ -0,0 +1,26 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useRef } from 'react';
+import { IconImage } from '../../icons/index.js';
+
+function ImageButton({ editor }) {
+    const fileInputRef = useRef(null);
+    function handleFileSelect(e) {
+        var _a;
+        const file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
+        if (file) {
+            const reader = new FileReader();
+            reader.onload = (event) => {
+                var _a;
+                const result = (_a = event.target) === null || _a === void 0 ? void 0 : _a.result;
+                if (typeof result === 'string') {
+                    editor.chain().focus().setImage({ src: result }).run();
+                }
+            };
+            reader.readAsDataURL(file);
+        }
+        e.target.value = '';
+    }
+    return (jsxs(Fragment, { children: [jsxs("button", { className: "tip-tap-btn", onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, type: "button", children: [jsx(IconImage, {}), jsx("span", { className: "tip-tap-tooltip", children: "\u63D2\u5165\u56FE\u7247" })] }), jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", style: { display: 'none' }, onChange: handleFileSelect })] }));
+}
+
+export { ImageButton };

package/es/components/tip-tap/toolbar/components/link-button.js

@@ -0,0 +1,107 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useEditorState } from '@tiptap/react';
+import { getMarkRange } from '@tiptap/core';
+import { useState, useRef, useEffect } from 'react';
+import { IconLink, IconCheck, IconTrash } from '../../icons/index.js';
+
+function LinkButton({ editor }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [label, setLabel] = useState('');
+    const [url, setUrl] = useState('');
+    const dropdownRef = useRef(null);
+    const labelInputRef = useRef(null);
+    // 使用 useEditorState 来同步编辑器状态
+    const editorState = useEditorState({
+        editor,
+        selector: (ctx) => ({
+            isActive: ctx.editor.isActive('link'),
+            href: ctx.editor.getAttributes('link').href || '',
+        }),
+    });
+    useEffect(() => {
+        function handleClickOutside(e) {
+            if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
+                setIsOpen(false);
+            }
+        }
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, []);
+    function handleToggleOpen() {
+        if (!isOpen) {
+            // 打开时：获取选中的文本作为标签，获取链接 URL
+            let selectedText = '';
+            const { from, to } = editor.state.selection;
+            if (editorState === null || editorState === void 0 ? void 0 : editorState.isActive) {
+                // 如果当前在链接上，获取整个链接的文本
+                const linkType = editor.schema.marks.link;
+                const $pos = editor.state.doc.resolve(from);
+                const range = getMarkRange($pos, linkType);
+                if (range) {
+                    selectedText = editor.state.doc.textBetween(range.from, range.to, '');
+                }
+            }
+            else {
+                // 普通选择文本
+                selectedText = editor.state.doc.textBetween(from, to, '');
+            }
+            setLabel(selectedText || '');
+            setUrl((editorState === null || editorState === void 0 ? void 0 : editorState.href) || '');
+            setIsOpen(true);
+            // 使用 queueMicrotask 代替 setTimeout，更可靠且不需要延迟
+            queueMicrotask(() => {
+                var _a;
+                (_a = labelInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            });
+        }
+        else {
+            setIsOpen(false);
+        }
+    }
+    function normalizeUrl(inputUrl) {
+        const trimmed = inputUrl.trim();
+        if (!trimmed)
+            return '';
+        // 如果已经有协议前缀，直接返回
+        if (/^https?:\/\//i.test(trimmed) || /^mailto:/i.test(trimmed) || /^tel:/i.test(trimmed)) {
+            return trimmed;
+        }
+        // 否则添加 https:// 前缀
+        return `https://${trimmed}`;
+    }
+    function handleSubmit() {
+        const normalizedUrl = normalizeUrl(url);
+        if (normalizedUrl && label) {
+            // 插入带标签的链接
+            editor
+                .chain()
+                .focus()
+                .insertContent({
+                type: 'text',
+                text: label,
+                marks: [{ type: 'link', attrs: { href: normalizedUrl } }],
+            })
+                .run();
+        }
+        else if (normalizedUrl) {
+            // 只有 URL，使用现有逻辑
+            editor.chain().focus().extendMarkRange('link').setLink({ href: normalizedUrl }).run();
+        }
+        else {
+            // 没有 URL，移除链接
+            editor.chain().focus().unsetLink().run();
+        }
+        setIsOpen(false);
+        setLabel('');
+        setUrl('');
+    }
+    function handleRemove() {
+        editor.chain().focus().unsetLink().run();
+        setIsOpen(false);
+        setLabel('');
+        setUrl('');
+    }
+    return (jsxs("div", { className: `tip-tap-dropdown ${isOpen ? 'tip-tap-dropdown--open' : ''}`, ref: dropdownRef, children: [jsxs("button", { className: `tip-tap-btn ${(editorState === null || editorState === void 0 ? void 0 : editorState.isActive) ? 'tip-tap-btn--active' : ''}`, onClick: handleToggleOpen, type: "button", children: [jsx(IconLink, {}), jsx("span", { className: "tip-tap-tooltip", children: "\u94FE\u63A5" })] }), jsx("div", { className: "tip-tap-dropdown__menu", style: { width: 'auto', padding: 0 }, children: jsxs("div", { className: "tip-tap-link-popup", style: { flexDirection: 'column', alignItems: 'stretch' }, children: [jsx("input", { ref: labelInputRef, type: "text", className: "tip-tap-link-popup__input", placeholder: "\u8F93\u5165\u94FE\u63A5\u6587\u672C...", value: label, onChange: (e) => setLabel(e.target.value), onKeyDown: (e) => e.key === 'Enter' && handleSubmit(), style: { marginBottom: '8px' } }), jsx("input", { type: "text", className: "tip-tap-link-popup__input", placeholder: "\u8F93\u5165\u94FE\u63A5\u5730\u5740...", value: url, onChange: (e) => setUrl(e.target.value), onKeyDown: (e) => e.key === 'Enter' && handleSubmit() }), jsxs("div", { style: { display: 'flex', gap: '4px', marginTop: '8px' }, children: [jsx("button", { className: "tip-tap-link-popup__btn", onClick: handleSubmit, type: "button", children: jsx(IconCheck, {}) }), (editorState === null || editorState === void 0 ? void 0 : editorState.isActive) && (jsx("button", { className: "tip-tap-link-popup__btn tip-tap-link-popup__btn--danger", onClick: handleRemove, type: "button", children: jsx(IconTrash, {}) }))] })] }) })] }));
+}
+
+export { LinkButton };

package/es/components/tip-tap/toolbar/components/table-button.js

@@ -0,0 +1,37 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useEditorState } from '@tiptap/react';
+import { useState, useRef, useEffect } from 'react';
+import { IconTable } from '../../icons/index.js';
+
+function TableButton({ editor }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [hoveredCell, setHoveredCell] = useState({ row: 0, col: 0 });
+    const dropdownRef = useRef(null);
+    // 使用 useEditorState 来同步编辑器状态
+    const editorState = useEditorState({
+        editor,
+        selector: (ctx) => ({
+            isActive: ctx.editor.isActive('table'),
+        }),
+    });
+    useEffect(() => {
+        function handleClickOutside(e) {
+            if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
+                setIsOpen(false);
+            }
+        }
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, []);
+    function handleInsertTable(rows, cols) {
+        editor.chain().focus().insertTable({ rows, cols, withHeaderRow: true }).run();
+        setIsOpen(false);
+    }
+    return (jsxs("div", { className: `tip-tap-dropdown ${isOpen ? 'tip-tap-dropdown--open' : ''}`, ref: dropdownRef, children: [jsxs("button", { className: `tip-tap-btn ${(editorState === null || editorState === void 0 ? void 0 : editorState.isActive) ? 'tip-tap-btn--active' : ''}`, onClick: () => setIsOpen(!isOpen), type: "button", children: [jsx(IconTable, {}), jsx("span", { className: "tip-tap-tooltip", children: "\u63D2\u5165\u8868\u683C" })] }), jsx("div", { className: "tip-tap-dropdown__menu", style: { padding: 0 }, children: jsxs("div", { className: "tip-tap-table-menu", children: [jsx("div", { className: "tip-tap-table-menu__label", children: "\u9009\u62E9\u8868\u683C\u5927\u5C0F" }), jsx("div", { className: "tip-tap-table-menu__grid", children: Array.from({ length: 36 }, (_, i) => {
+                                const row = Math.floor(i / 6) + 1;
+                                const col = (i % 6) + 1;
+                                return (jsx("button", { className: `tip-tap-table-menu__cell ${row <= hoveredCell.row && col <= hoveredCell.col ? 'tip-tap-table-menu__cell--active' : ''}`, onMouseEnter: () => setHoveredCell({ row, col }), onClick: () => handleInsertTable(row, col), type: "button" }, i));
+                            }) }), jsx("div", { className: "tip-tap-table-menu__size", children: hoveredCell.row > 0 ? `${hoveredCell.row} × ${hoveredCell.col}` : '选择大小' })] }) })] }));
+}
+
+export { TableButton };

package/es/components/tip-tap/toolbar/components/toolbar-button.js

@@ -0,0 +1,7 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function ToolbarButton({ icon, tooltip, onClick, active = false, disabled = false, }) {
+    return (jsxs("button", { className: `tip-tap-btn ${active ? 'tip-tap-btn--active' : ''}`, onClick: onClick, disabled: disabled, type: "button", children: [icon, jsx("span", { className: "tip-tap-tooltip", children: tooltip })] }));
+}
+
+export { ToolbarButton };

package/es/components/tip-tap/toolbar/index.js

@@ -0,0 +1,39 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useEditorState } from '@tiptap/react';
+import { IconUndo, IconRedo, IconBold, IconItalic, IconUnderline, IconStrikethrough, IconAlignLeft, IconAlignCenter, IconAlignRight, IconListBullet, IconListNumbered, IconQuote, IconCode, IconMinus } from '../icons/index.js';
+import { ToolbarButton } from './components/toolbar-button.js';
+import { HeadingDropdown } from './components/heading-dropdown.js';
+import { ColorPicker } from './components/color-picker.js';
+import { LinkButton } from './components/link-button.js';
+import { ImageButton } from './components/image-button.js';
+import { TableButton } from './components/table-button.js';
+
+function Toolbar({ editor, className = '' }) {
+    // 使用 useEditorState 来同步编辑器状态
+    const editorState = useEditorState({
+        editor,
+        selector: (ctx) => ({
+            // 文本格式
+            isBold: ctx.editor.isActive('bold'),
+            isItalic: ctx.editor.isActive('italic'),
+            isUnderline: ctx.editor.isActive('underline'),
+            isStrike: ctx.editor.isActive('strike'),
+            // 对齐方式
+            isAlignLeft: ctx.editor.isActive({ textAlign: 'left' }),
+            isAlignCenter: ctx.editor.isActive({ textAlign: 'center' }),
+            isAlignRight: ctx.editor.isActive({ textAlign: 'right' }),
+            // 列表
+            isBulletList: ctx.editor.isActive('bulletList'),
+            isOrderedList: ctx.editor.isActive('orderedList'),
+            // 块元素
+            isBlockquote: ctx.editor.isActive('blockquote'),
+            isCodeBlock: ctx.editor.isActive('codeBlock'),
+            // 撤销/重做能力
+            canUndo: ctx.editor.can().undo(),
+            canRedo: ctx.editor.can().redo(),
+        }),
+    });
+    return (jsxs("div", { className: `tip-tap-toolbar ${className}`, children: [jsxs("div", { className: "tip-tap-toolbar__group", children: [jsx(ToolbarButton, { icon: jsx(IconUndo, {}), tooltip: "\u64A4\u9500", onClick: () => editor.chain().focus().undo().run(), disabled: !(editorState === null || editorState === void 0 ? void 0 : editorState.canUndo) }), jsx(ToolbarButton, { icon: jsx(IconRedo, {}), tooltip: "\u91CD\u505A", onClick: () => editor.chain().focus().redo().run(), disabled: !(editorState === null || editorState === void 0 ? void 0 : editorState.canRedo) })] }), jsx("div", { className: "tip-tap-toolbar__divider" }), jsxs("div", { className: "tip-tap-toolbar__group", children: [jsx(ToolbarButton, { icon: jsx(IconBold, {}), tooltip: "\u7C97\u4F53", onClick: () => editor.chain().focus().toggleBold().run(), active: editorState === null || editorState === void 0 ? void 0 : editorState.isBold }), jsx(ToolbarButton, { icon: jsx(IconItalic, {}), tooltip: "\u659C\u4F53", onClick: () => editor.chain().focus().toggleItalic().run(), active: editorState === null || editorState === void 0 ? void 0 : editorState.isItalic }), jsx(ToolbarButton, { icon: jsx(IconUnderline, {}), tooltip: "\u4E0B\u5212\u7EBF", onClick: () => editor.chain().focus().toggleUnderline().run(), active: editorState === null || editorState === void 0 ? void 0 : editorState.isUnderline }), jsx(ToolbarButton, { icon: jsx(IconStrikethrough, {}), tooltip: "\u5220\u9664\u7EBF", onClick: () => editor.chain().focus().toggleStrike().run(), active: editorState === null || editorState === void 0 ? void 0 : editorState.isStrike })] }), jsx("div", { className: "tip-tap-toolbar__divider" }), jsx(HeadingDropdown, { editor: editor }), jsx("div", { className: "tip-tap-toolbar__divider" }), jsxs("div", { className: "tip-tap-toolbar__group", children: [jsx(ColorPicker, { editor: editor, type: "textColor", tooltip: "\u6587\u5B57\u989C\u8272" }), jsx(ColorPicker, { editor: editor, type: "highlight", tooltip: "\u80CC\u666F\u9AD8\u4EAE" })] }), jsx("div", { className: "tip-tap-toolbar__divider" }), jsxs("div", { className: "tip-tap-toolbar__group", children: [jsx(ToolbarButton, { icon: jsx(IconAlignLeft, {}), tooltip: "\u5DE6\u5BF9\u9F50", onClick: () => editor.chain().focus().setTextAlign('left').run(), active: editorState === null || editorState === void 0 ? void 0 : editorState.isAlignLeft }), jsx(ToolbarButton, { icon: jsx(IconAlignCenter, {}), tooltip: "\u5C45\u4E2D\u5BF9\u9F50", onClick: () => editor.chain().focus().setTextAlign('center').run(), active: editorState === null || editorState === void 0 ? void 0 : editorState.isAlignCenter }), jsx(ToolbarButton, { icon: jsx(IconAlignRight, {}), tooltip: "\u53F3\u5BF9\u9F50", onClick: () => editor.chain().focus().setTextAlign('right').run(), active: editorState === null || editorState === void 0 ? void 0 : editorState.isAlignRight })] }), jsx("div", { className: "tip-tap-toolbar__divider" }), jsxs("div", { className: "tip-tap-toolbar__group", children: [jsx(ToolbarButton, { icon: jsx(IconListBullet, {}), tooltip: "\u65E0\u5E8F\u5217\u8868", onClick: () => editor.chain().focus().toggleBulletList().run(), active: editorState === null || editorState === void 0 ? void 0 : editorState.isBulletList }), jsx(ToolbarButton, { icon: jsx(IconListNumbered, {}), tooltip: "\u6709\u5E8F\u5217\u8868", onClick: () => editor.chain().focus().toggleOrderedList().run(), active: editorState === null || editorState === void 0 ? void 0 : editorState.isOrderedList })] }), jsx("div", { className: "tip-tap-toolbar__divider" }), jsxs("div", { className: "tip-tap-toolbar__group", children: [jsx(ToolbarButton, { icon: jsx(IconQuote, {}), tooltip: "\u5F15\u7528", onClick: () => editor.chain().focus().toggleBlockquote().run(), active: editorState === null || editorState === void 0 ? void 0 : editorState.isBlockquote }), jsx(ToolbarButton, { icon: jsx(IconCode, {}), tooltip: "\u4EE3\u7801\u5757", onClick: () => editor.chain().focus().toggleCodeBlock().run(), active: editorState === null || editorState === void 0 ? void 0 : editorState.isCodeBlock }), jsx(ToolbarButton, { icon: jsx(IconMinus, {}), tooltip: "\u5206\u5272\u7EBF", onClick: () => editor.chain().focus().setHorizontalRule().run() })] }), jsx("div", { className: "tip-tap-toolbar__divider" }), jsxs("div", { className: "tip-tap-toolbar__group", children: [jsx(LinkButton, { editor: editor }), jsx(ImageButton, { editor: editor }), jsx(TableButton, { editor: editor })] })] }));
+}
+
+export { Toolbar as default };

package/es/components/uploadDrawer/UploadStoreProvider.js

@@ -0,0 +1,61 @@
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useReducer } from 'react';
+import { FILE_UPLOAD_STATUS } from './utils/constant.js';
+import 'tslib';
+import { useSaveUnfinishedUploads } from './hooks/useSaveUnfinishedUploads.js';
+
+const TEMP_STORE = {};
+const UploadStoreContext = createContext(TEMP_STORE);
+const UploadStoreDispatchContext = createContext(() => null);
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ */
+function UploadDrawerUploadStoreProvider({ children }) {
+    const [uploadStore, dispatch] = useReducer(uploadReducer, {});
+    useSaveUnfinishedUploads(uploadStore);
+    return (jsx(UploadStoreContext.Provider, { value: uploadStore, children: jsx(UploadStoreDispatchContext.Provider, { value: dispatch, children: children }) }));
+}
+function uploadReducer(uploads, action) {
+    switch (action.type) {
+        case 'add': {
+            return Object.assign(Object.assign({}, uploads), { [action.identifier]: [] });
+        }
+        case 'remove_file': {
+            const fileList = uploads[action.identifier];
+            const fileIndex = fileList.findIndex((p) => p.fileName === action.file.fileName);
+            return Object.assign(Object.assign({}, uploads), { [action.identifier]: [...fileList.slice(0, fileIndex), ...fileList.slice(fileIndex + 1)] });
+        }
+        case 'edit_file': {
+            const fileList = uploads[action.identifier];
+            const fileIndex = fileList.findIndex((p) => p.fileName === action.file.fileName);
+            return Object.assign(Object.assign({}, uploads), { [action.identifier]: [...fileList.slice(0, fileIndex), action.file, ...fileList.slice(fileIndex + 1)] });
+        }
+        case 'add_file': {
+            const fileList = uploads[action.identifier];
+            const fileIndex = fileList.findIndex((p) => p.fileName === action.file.fileName);
+            if (fileIndex === -1) {
+                return Object.assign(Object.assign({}, uploads), { [action.identifier]: [...fileList, action.file] });
+            }
+            else {
+                return Object.assign(Object.assign({}, uploads), { [action.identifier]: [
+                        ...fileList.slice(0, fileIndex),
+                        action.file,
+                        ...fileList.slice(fileIndex + 1),
+                    ] });
+            }
+        }
+        case 'add_files': {
+            const fileList = uploads[action.identifier];
+            return Object.assign(Object.assign({}, uploads), { [action.identifier]: [...fileList, ...action.files] });
+        }
+        case 'clear_finished': {
+            const fileList = uploads[action.identifier];
+            return Object.assign(Object.assign({}, uploads), { [action.identifier]: fileList.filter((f) => f.fileStatus !== FILE_UPLOAD_STATUS.FINISHED) });
+        }
+        default: {
+            throw Error('Unknown action');
+        }
+    }
+}
+
+export { TEMP_STORE, UploadStoreContext, UploadStoreDispatchContext, UploadDrawerUploadStoreProvider as default };

package/es/components/uploadDrawer/fileUploadDrawer.js

@@ -0,0 +1,66 @@
+import { __awaiter } from 'tslib';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Drawer, Empty } from 'antd';
+import { useContext, useState, useRef, useEffect } from 'react';
+import { LoadingOutlined } from '@ant-design/icons';
+import { UploadStoreContext, UploadStoreDispatchContext } from './UploadStoreProvider.js';
+import FileUploadDrawerFileDragger from './fileUploadDrawerFileDragger.js';
+import FileUploading from './fileUploadDrawerList.js';
+import { FILE_UPLOAD_STATUS } from './utils/constant.js';
+import { useFormatFiles } from './hooks/useFormatFiles.js';
+import { useUploadFileToOSS } from './hooks/useUploadFileToOSS.js';
+import { useResumeUnfinishedUploads } from './hooks/useResumeUnfinishedUploads.js';
+import { FileUploadDrawerContext } from './index.js';
+
+function FileUploadDrawer({ open, identifier, accept, dragAreaDescription, footer, title = '数据上传', showFinished = false, directory = false, onClose, }) {
+    var _a, _b;
+    const uploadStore = useContext(UploadStoreContext);
+    const setUploadsStore = useContext(UploadStoreDispatchContext);
+    const { onSuccess } = useContext(FileUploadDrawerContext);
+    const formatFiles = useFormatFiles();
+    const uploadFileToOSS = useUploadFileToOSS();
+    const resumeUnfinishedUploads = useResumeUnfinishedUploads(identifier);
+    const [raws, setRaws] = useState([]);
+    const currentIdentifier = useRef('');
+    useEffect(() => {
+        if (currentIdentifier.current === identifier) {
+            return;
+        }
+        // 添加对uploadStoreContext的检测
+        if (!uploadStore || !setUploadsStore) {
+            console.warn('FileUploadDrawer 必须在 UploadStoreProvider 内使用');
+            return;
+        }
+        currentIdentifier.current = identifier;
+        if (!uploadStore[identifier]) {
+            setUploadsStore({ type: 'add', identifier });
+        }
+        resumeUnfinishedUploads();
+    }, [identifier, resumeUnfinishedUploads, uploadStore, setUploadsStore]);
+    useEffect(() => {
+        const fileList = uploadStore[identifier];
+        if (!fileList)
+            return;
+        const shouldUpload = !fileList.some((file) => file.fileStatus === FILE_UPLOAD_STATUS.UPLOADING);
+        const fileToUpload = fileList.find((file) => file.fileStatus === FILE_UPLOAD_STATUS.INIT);
+        if (shouldUpload && fileToUpload) {
+            uploadFileToOSS(fileToUpload, onSuccess);
+        }
+    }, [identifier, onSuccess, uploadFileToOSS, uploadStore]);
+    return (jsxs(Drawer, { className: "mylib-upload-drawer", open: open, title: title, width: 480, onClose: onClose, footer: footer, children: [jsx(FileUploadDrawerFileDragger, { directory: directory, accept: accept, dragAreaDescription: dragAreaDescription, onFileReceived: onFileReceived }), raws.length === 0 && ((_a = uploadStore[identifier]) === null || _a === void 0 ? void 0 : _a.length) === 0 && (jsx(Empty, { className: "mt-20", description: "\u6682\u65E0\u4E0A\u4F20\u5185\u5BB9" })), raws.length > 0 && (jsxs("div", { className: "flex justify-center gap-4 mt-4", children: [jsx(LoadingOutlined, {}), "\u9884\u68C0\u4E0A\u4F20\u6587\u4EF6\u4E2D(", raws.length, ")"] })), ((_b = uploadStore[identifier]) === null || _b === void 0 ? void 0 : _b.length) > 0 && (jsx(FileUploading, { showFinished: showFinished, identifier: identifier }))] }));
+    function onFileReceived(files) {
+        return __awaiter(this, void 0, void 0, function* () {
+            setRaws((prev) => [...prev, ...files]);
+            yield formatFiles(files);
+            setRaws((prev) => {
+                const prevSet = new Set(prev);
+                for (const file of files) {
+                    prevSet.delete(file);
+                }
+                return [...prevSet];
+            });
+        });
+    }
+}
+
+export { FileUploadDrawer as default };

package/es/components/uploadDrawer/fileUploadDrawerFileDragger.js

@@ -0,0 +1,71 @@
+import { __awaiter } from 'tslib';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Flex } from 'antd';
+import { InboxOutlined } from '@ant-design/icons';
+import { useMemo, useRef, useState } from 'react';
+import './utils/constant.js';
+import { retrieveAllFiles } from './utils/retrieveAllFiles.js';
+
+const containerClassName = 'border-dashed rounded border bg-gray-50 p-4 hover:border-green-600 border-gray-300';
+function FileUploadDrawerFileDragger({ accept = '', directory = true, dragAreaDescription, onFileReceived, }) {
+    // 将accept字符串转换为Set以便快速查找
+    const acceptList = useMemo(() => new Set(accept ? accept.split(',') : []), [accept]);
+    const fileInputRef = useRef(null);
+    const [isDragOver, setIsDragOver] = useState(false);
+    // 拖拽相关的事件处理函数
+    const handleDragEvents = {
+        onDragLeave: () => setIsDragOver(false),
+        onDragEnter: (e) => e.preventDefault(),
+        onDragOver: (e) => {
+            e.preventDefault();
+            setIsDragOver(true);
+        },
+        onDrop: handleDrop,
+    };
+    return (jsxs(Fragment, { children: [jsxs(Flex, Object.assign({ vertical: true, gap: "1rem", align: "center", className: `${isDragOver ? 'border-green-600' : ''} ${containerClassName}` }, handleDragEvents, { onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, children: [jsx("p", { className: "text-5xl text-green-600 m-0", children: jsx(InboxOutlined, {}) }), jsx("div", { className: "text-base text-center", children: renderDragAreaDescription() })] })), jsx("input", { ref: fileInputRef, type: "file", accept: accept, hidden: true, multiple: true, onChange: handleInputChange, onClick: () => {
+                    if (fileInputRef.current) {
+                        fileInputRef.current.value = ''; // 清空input的value,确保同一文件可以重复上传
+                    }
+                } })] }));
+    // 处理文件拖拽
+    function handleDrop(e) {
+        return __awaiter(this, void 0, void 0, function* () {
+            e.preventDefault();
+            setIsDragOver(false);
+            // 获取所有拖拽的文件或文件夹
+            const filePromises = Array.from(e.dataTransfer.items)
+                .map((item) => item.webkitGetAsEntry())
+                .filter(Boolean)
+                .map((entry) => retrieveAllFiles(entry, directory, acceptList));
+            // 等待所有文件处理完成
+            const results = yield Promise.allSettled(filePromises);
+            // 过滤出成功的结果并展平数组
+            const files = results
+                .filter((result) => result.status === 'fulfilled')
+                .flatMap((result) => result.value);
+            if (files.length) {
+                onFileReceived(files);
+            }
+        });
+    }
+    // 处理文件选择
+    function handleInputChange() {
+        var _a;
+        const files = (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.files;
+        if (files === null || files === void 0 ? void 0 : files.length) {
+            onFileReceived(Array.from(files));
+        }
+    }
+    // 渲染拖拽区域的描述文本
+    function renderDragAreaDescription() {
+        if (!dragAreaDescription) {
+            return jsx("p", { className: "text-base m-0", children: "\u70B9\u51FB\u6216\u62D6\u62FD\u4E0A\u4F20\u6587\u4EF6" });
+        }
+        if (Array.isArray(dragAreaDescription)) {
+            return dragAreaDescription.map((text, index) => (jsx("p", { className: "text-base m-0", children: text }, index)));
+        }
+        return jsx("p", { className: "text-base m-0", children: dragAreaDescription });
+    }
+}
+
+export { FileUploadDrawerFileDragger as default };

package/es/components/uploadDrawer/fileUploadDrawerList.js

@@ -0,0 +1,54 @@
+import { __awaiter } from 'tslib';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { FileTextOutlined, DeleteOutlined } from '@ant-design/icons';
+import { useContext, useState, useEffect } from 'react';
+import { UploadStoreContext, UploadStoreDispatchContext } from './UploadStoreProvider.js';
+import { FILE_UPLOAD_STATUS } from './utils/constant.js';
+import FileUploadDrawerListProgressButton from './fileUploadDrawerListProgressButton.js';
+import { Flex, Button } from 'antd';
+import { useRetryUpload } from './hooks/useRetryUpload.js';
+import { useCancelUpload } from './hooks/useCancelUpload.js';
+
+function FileUploading({ identifier, showFinished, }) {
+    const uploadContext = useContext(UploadStoreContext);
+    const cancelUpload = useCancelUpload();
+    const retryUpload = useRetryUpload();
+    const [fileList, setFileList] = useState([]);
+    useEffect(() => {
+        // 根据条件过滤文件列表
+        const filteredList = uploadContext[identifier].filter((file) => {
+            // 排除已取消的文件
+            if (file.fileStatus === FILE_UPLOAD_STATUS.CANCELED) {
+                return false;
+            }
+            // 如果不显示已完成文件,则排除已完成的文件
+            if (showFinished === false && file.fileStatus === FILE_UPLOAD_STATUS.FINISHED) {
+                return false;
+            }
+            return true;
+        });
+        setFileList(filteredList);
+    }, [identifier, showFinished, uploadContext]);
+    return (jsx("div", { className: "my-4", children: fileList.map((file) => (jsx(FileListItem, { identifier: identifier, file: file, showFinished: showFinished, onButtonClick: handleButtonClick }, file.fileName))) }));
+    // 处理按钮点击事件
+    function handleButtonClick(file) {
+        file.fileStatus === FILE_UPLOAD_STATUS.PAUSED
+            ? retryUpload(file) // 如果文件暂停,则重试上传
+            : cancelUpload(file); // 否则取消上传
+    }
+}
+function FileListItem({ identifier, file, showFinished, onButtonClick }) {
+    const setUploadsStore = useContext(UploadStoreDispatchContext);
+    const showDelete = typeof showFinished === 'object' && showFinished.withDelete;
+    return (jsx("div", { className: "mb-2 last:mb-0", children: jsxs("div", { className: "px-4 my-2 relative flex justify-between items-center", children: [jsxs(Flex, { align: "center", gap: ".5rem", title: file.fileName, children: [jsx(FileTextOutlined, {}), jsx("span", { className: "truncate w-40", children: file.fileName })] }), jsxs(Flex, { align: "center", gap: ".5rem", children: [jsx(FileUploadDrawerListProgressButton, { status: file.fileStatus, percent: Number(file.percentage.toFixed(0)), onClick: () => onButtonClick(file) }), file.fileStatus === FILE_UPLOAD_STATUS.FINISHED && showDelete && (jsx(Button, { type: "text", size: "large", className: "px-3", disabled: showDelete.disabled, title: `${showDelete.disabled ? '删除-已禁用' : '删除'}`, onClick: () => onDelete(file, showDelete.onDelete), children: jsx(DeleteOutlined, {}) }))] })] }) }));
+    function onDelete(file, onDeleteImpl) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const result = yield onDeleteImpl(file.fileName);
+            if (result) {
+                setUploadsStore({ type: 'remove_file', identifier, file });
+            }
+        });
+    }
+}
+
+export { FileUploading as default };