foxit-component 0.0.1-alpha.9 → 0.0.2

package/es/Alert/Alert.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @name Alert
+ */
+import React from 'react';
+import './alert.css';
+interface AlertProps {
+    message: string | React.ReactNode;
+    showIcon?: boolean;
+    type?: 'success' | 'warning' | 'error' | 'gradient';
+}
+declare const Alert: React.FC<AlertProps>;
+export { Alert };

package/es/Alert/Alert.js

@@ -0,0 +1,24 @@
+import { __assign } from '../node_modules/tslib/tslib.es6.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Icon } from '../Icon/index.js';
+
+var Alert = function (_a) {
+    var message = _a.message, _b = _a.showIcon, showIcon = _b === void 0 ? true : _b, _c = _a.type, type = _c === void 0 ? 'success' : _c;
+    var getIconName = function (type) {
+        switch (type) {
+            case 'success':
+                return 'SuccessColoursOutlined';
+            case 'error':
+                return 'ErrorColoursOutlined';
+            case 'warning':
+                return 'WarningColoursOutlined';
+            case 'loading':
+                return 'LoadingOutlined';
+            default:
+                return 'WarningColoursOutlined';
+        }
+    };
+    return (jsxs("div", __assign({ className: "foxit-alert foxit-alert-".concat(type) }, { children: [showIcon && (jsx("div", __assign({ className: "foxit-alert-icon-container" }, { children: jsx(Icon, { name: getIconName(type), className: "foxit-alert-icon" }) }))), jsx("div", __assign({ className: "foxit-alert-message" }, { children: message }))] })));
+};
+
+export { Alert };

package/es/Button/Button.js

@@ -6,7 +6,7 @@ import { Icon } from '../Icon/index.js';
 var Button = function (_a) {
     var _b = _a.primary, primary = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? 'large' : _c, _d = _a.children, children = _d === void 0 ? '' : _d, className = _a.className, style = _a.style, loading = _a.loading, props = __rest(_a, ["primary", "size", "children", "className", "style", "loading"]);
     var mode = primary ? 'foxit-button-primary' : 'foxit-button-secondary';
-    return (jsxs("button", __assign({ type: "button", className: classNames('foxit-button', "foxit-button-".concat(size), mode, className), style: style }, props, { children: [loading && jsx(Icon, { name: "LoadingOutlined", className: "foxit-button-loading" }), children] })));
+    return (jsxs("button", __assign({ type: "button", className: classNames('foxit-button', "foxit-button-".concat(size), mode, className, loading && 'foxit-button-prevent-click'), style: style }, props, { children: [loading && jsx(Icon, { name: "LoadingOutlined", className: "foxit-button-loading" }), children] })));
 };
 
 export { Button };

package/es/Drawer/Drawer.d.ts

@@ -0,0 +1,10 @@
+import React, { ReactNode } from 'react';
+import './drawer.css';
+interface DrawerProps {
+    open?: boolean;
+    width?: number | string;
+    onClose?: () => void;
+    children?: ReactNode;
+}
+declare const Drawer: React.FC<DrawerProps>;
+export { Drawer };

package/es/Drawer/Drawer.js

@@ -0,0 +1,14 @@
+import { __assign } from '../node_modules/tslib/tslib.es6.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import classNames from 'classnames';
+
+var Drawer = function (_a) {
+    var open = _a.open, _b = _a.width, width = _b === void 0 ? 375 : _b, onClose = _a.onClose, children = _a.children;
+    return (jsxs(Fragment, { children: [jsx("div", { className: classNames('foxit-drawer-mask', {
+                    'foxit-drawer-mask-open': open
+                }), onClick: onClose, style: { display: open ? 'block' : 'none' } }), jsx("div", __assign({ className: classNames('foxit-drawer', {
+                    'foxit-drawer-open': open
+                }), style: { width: width, right: open ? 0 : -width } }, { children: jsx("div", __assign({ className: "foxit-drawer-content" }, { children: children })) }))] }));
+};
+
+export { Drawer };

package/es/Form/Form.d.ts

@@ -1,6 +1,7 @@
 import React, { ReactNode } from 'react';
 import { FormRefInstance } from './Form.types';
 import FormItem from './FormItem';
+import { useFormWatch } from './useFormWatch';
 export type { FormRefInstance } from './Form.types';
 interface FormProps {
     children: ReactNode;
@@ -9,6 +10,6 @@ interface FormProps {
         [key: string]: unknown;
     };
 }
-export { FormItem };
+export { FormItem, useFormWatch };
 declare const _default: React.ForwardRefExoticComponent<FormProps & React.RefAttributes<FormRefInstance>>;
 export default _default;

package/es/Form/Form.js

@@ -21,13 +21,14 @@ var Form = function (_a, ref) {
         }
     }, [onFinish]);
     useImperativeHandle(ref, function () {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f;
         return ({
             setFieldsValue: (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.setFieldsValue,
             getFieldsValue: (_b = formRef.current) === null || _b === void 0 ? void 0 : _b.getFieldsValue,
             resetFields: (_c = formRef.current) === null || _c === void 0 ? void 0 : _c.resetFields,
             validateFields: (_d = formRef.current) === null || _d === void 0 ? void 0 : _d.validateFields,
-            setFieldsStatus: (_e = formRef.current) === null || _e === void 0 ? void 0 : _e.setFieldsStatus
+            setFieldsStatus: (_e = formRef.current) === null || _e === void 0 ? void 0 : _e.setFieldsStatus,
+            subscribe: (_f = formRef.current) === null || _f === void 0 ? void 0 : _f.subscribe
         });
     });
     return (jsx(FormProvider, __assign({ initialValues: initialValues, ref: formRef }, { children: jsx("form", __assign({ onSubmit: handleSubmit }, { children: children })) })));

package/es/Form/Form.types.d.ts

@@ -11,6 +11,12 @@ export interface ValidationRule {
     min?: number;
     max?: number;
 }
+export interface FieldSubscriber {
+    fieldNames: string[];
+    callback: (values: {
+        [key: string]: unknown;
+    }) => void;
+}
 export interface FormInstance {
     setFieldsValue: (values: {
         [key: string]: unknown;
@@ -29,6 +35,9 @@ export interface FormInstance {
     }[]) => void;
     registerField: (name: string, rules: ValidationRule[]) => void;
     unregisterField: (name: string) => void;
+    subscribe: (fieldNames: string[], callback: (values: {
+        [key: string]: unknown;
+    }) => void) => () => void;
 }
 export type FormRefInstance = Omit<FormInstance, 'registerField' | 'unregisterField'>;
 export interface FormContextProps {

package/es/Form/FormItem.d.ts

@@ -2,7 +2,8 @@ import React, { ReactNode } from 'react';
 import './form.css';
 interface FormItemProps {
     name: string;
-    label?: string;
+    label?: string | ReactNode;
+    extra?: string | ReactNode;
     rules?: {
         required?: boolean;
         message?: string;

package/es/Form/FormItem.js

@@ -1,11 +1,11 @@
 import { __assign } from '../node_modules/tslib/tslib.es6.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import React, { useContext, useEffect, useCallback } from 'react';
 import { FormContext } from './FormContext.js';
 
 var FormItem = function (_a) {
     var _b, _c, _d;
-    var name = _a.name, label = _a.label, _e = _a.rules, rules = _e === void 0 ? [] : _e, children = _a.children;
+    var name = _a.name, label = _a.label, extra = _a.extra, _e = _a.rules, rules = _e === void 0 ? [] : _e, children = _a.children;
     var _f = useContext(FormContext), form = _f.form, formFields = _f.formFields;
     // Register field when component mounts
     useEffect(function () {
@@ -23,7 +23,7 @@ var FormItem = function (_a) {
         var newValue = ((_b = e === null || e === void 0 ? void 0 : e.target) === null || _b === void 0 ? void 0 : _b.value) !== undefined ? e.target.value : e;
         form.setFieldsValue((_a = {}, _a[name] = newValue, _a));
     }, [form, name]);
-    return (jsxs("div", __assign({ className: "foxit-form-item" }, { children: [label && jsx("label", { children: label }), jsx("span", __assign({ className: "".concat(error ? 'foxit-form-error-component' : warning ? 'foxit-form-warning-component' : '') }, { children: React.Children.map(children, function (child) {
+    return (jsxs("div", __assign({ className: "foxit-form-item", style: error || warning ? { marginBottom: 0 } : {} }, { children: [label && (jsxs("label", { children: [label, rules.some(function (rule) { return rule.required; }) && jsx("span", __assign({ className: "foxit-form-required" }, { children: "*" })), extra && jsx(Fragment, { children: extra })] })), jsx("span", __assign({ className: "".concat(error ? 'foxit-form-error-component' : warning ? 'foxit-form-warning-component' : '') }, { children: React.Children.map(children, function (child) {
                     return React.cloneElement(child, {
                         value: value,
                         onChange: handleChange

package/es/Form/FormProvider.js

@@ -8,6 +8,7 @@ var FormProvider = function (_a, ref) {
     var formFieldsRef = useRef({});
     var _c = useState({}), forceUpdate = _c[1]; // Used to force re-render when ref changes
     var formInstanceRef = useRef({});
+    var subscribersRef = useRef([]);
     // 初始值的设置
     useEffect(function () {
         if (Object.keys(initialValues).length > 0) {
@@ -23,6 +24,22 @@ var FormProvider = function (_a, ref) {
             forceUpdate({}); // Trigger re-render
         }
     }, [initialValues]);
+    // 订阅方法
+    var subscribe = useCallback(function (fieldNames, callback) {
+        var subscriber = { fieldNames: fieldNames, callback: callback };
+        subscribersRef.current.push(subscriber);
+        // 立即触发一次回调，提供当前值
+        var currentValues = fieldNames.reduce(function (acc, fieldName) {
+            var _a;
+            acc[fieldName] = (_a = formFieldsRef.current[fieldName]) === null || _a === void 0 ? void 0 : _a.value;
+            return acc;
+        }, {});
+        callback(currentValues);
+        // 返回取消订阅函数
+        return function () {
+            subscribersRef.current = subscribersRef.current.filter(function (s) { return s !== subscriber; });
+        };
+    }, []);
     // 注册字段
     var registerField = useCallback(function (name, rules) {
         formFieldsRef.current = __assign({}, formFieldsRef.current); // Create a new object
@@ -56,13 +73,17 @@ var FormProvider = function (_a, ref) {
             if (rule.type === 'string' && typeof value !== 'string') {
                 return { type: 'error', message: rule.message || 'The input is not a string' };
             }
-            if (rule.min !== undefined && typeof value === 'string' && value.length < rule.min) {
+            if (rule.min !== undefined &&
+                typeof value === 'string' &&
+                new Blob([value]).size < rule.min) {
                 return {
                     type: 'error',
                     message: rule.message || "The input is less than ".concat(rule.min, " characters")
                 };
             }
-            if (rule.max !== undefined && typeof value === 'string' && value.length > rule.max) {
+            if (rule.max !== undefined &&
+                typeof value === 'string' &&
+                new Blob([value]).size > rule.max) {
                 return {
                     type: 'error',
                     message: rule.message || "The input is more than ".concat(rule.max, " characters")
@@ -73,14 +94,19 @@ var FormProvider = function (_a, ref) {
     }, []);
     // 设置字段值
     var setFieldsValue = useCallback(function (values) {
-        var _a;
+        var _a, _b;
+        var changedFields = [];
         formFieldsRef.current = __assign({}, formFieldsRef.current); // Create a new object
         for (var key in values) {
             if (Object.prototype.hasOwnProperty.call(values, key)) {
                 var newValue = values[key];
+                var oldValue = (_a = formFieldsRef.current[key]) === null || _a === void 0 ? void 0 : _a.value;
+                if (JSON.stringify(oldValue) !== JSON.stringify(newValue)) {
+                    changedFields.push(key);
+                }
                 formFieldsRef.current[key] = __assign(__assign({}, formFieldsRef.current[key]), { value: newValue });
                 // 验证字段
-                var validation = validateField(key, newValue, ((_a = formFieldsRef.current[key]) === null || _a === void 0 ? void 0 : _a.rules) || []);
+                var validation = validateField(key, newValue, ((_b = formFieldsRef.current[key]) === null || _b === void 0 ? void 0 : _b.rules) || []);
                 if (validation) {
                     if (validation.type === 'error') {
                         formFieldsRef.current[key] = __assign(__assign({}, formFieldsRef.current[key]), { error: validation.message, warning: undefined // Clear any previous warnings
@@ -96,6 +122,24 @@ var FormProvider = function (_a, ref) {
                 }
             }
         }
+        // 通知订阅者
+        if (changedFields.length > 0 && subscribersRef.current.length > 0) {
+            subscribersRef.current.forEach(function (subscriber) {
+                // 检查是否有该订阅者关心的字段发生变化
+                var relevantFields = subscriber.fieldNames.filter(function (name) {
+                    return changedFields.includes(name);
+                });
+                if (relevantFields.length > 0) {
+                    // 提取订阅者关心的所有字段当前值
+                    var watchValues = subscriber.fieldNames.reduce(function (acc, fieldName) {
+                        var _a;
+                        acc[fieldName] = (_a = formFieldsRef.current[fieldName]) === null || _a === void 0 ? void 0 : _a.value;
+                        return acc;
+                    }, {});
+                    subscriber.callback(watchValues);
+                }
+            });
+        }
         forceUpdate({}); // Trigger re-render
     }, [validateField]);
     // 获取字段值
@@ -144,12 +188,12 @@ var FormProvider = function (_a, ref) {
                 if (!field)
                     continue; // Skip if field is not registered
                 var validation = validateField(key, values[key], field.rules || []);
-                if (validation) {
-                    if (validation.type === 'error') {
-                        errors[key] = validation.message;
+                if (validation || field.error || field.warning) {
+                    if ((validation === null || validation === void 0 ? void 0 : validation.type) === 'error' || field.error) {
+                        errors[key] = (validation === null || validation === void 0 ? void 0 : validation.message) || field.error || '';
                     }
-                    else if (validation.type === 'warning') {
-                        validation.message;
+                    else if ((validation === null || validation === void 0 ? void 0 : validation.type) === 'warning' || field.warning) {
+                        (validation === null || validation === void 0 ? void 0 : validation.message) || field.warning || '';
                     }
                 }
             }
@@ -204,7 +248,8 @@ var FormProvider = function (_a, ref) {
         validateFields: validateFields,
         setFieldsStatus: setFieldsStatus,
         registerField: registerField,
-        unregisterField: unregisterField
+        unregisterField: unregisterField,
+        subscribe: subscribe
     };
     // 暴露给外部的方法
     useImperativeHandle(ref, function () { return (__assign({}, formInstanceRef.current)); });

package/es/Form/useFormWatch.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { FormRefInstance } from './Form.types';
+export declare function useFormWatch(formRef: React.RefObject<FormRefInstance>, callback: (values: Record<string, unknown>) => void, fieldNames: string[]): void;

package/es/Form/useFormWatch.js

@@ -0,0 +1,37 @@
+import { useRef, useEffect } from 'react';
+
+function useFormWatch(formRef, callback, fieldNames) {
+    var callbackRef = useRef(callback);
+    useEffect(function () {
+        callbackRef.current = callback;
+    }, [callback]);
+    // 处理表单字段监听
+    useEffect(function () {
+        // 如果表单引用不存在，设置轮询检查
+        if (!formRef.current) {
+            var checkInterval_1 = setInterval(function () {
+                if (formRef.current) {
+                    clearInterval(checkInterval_1);
+                    subscribeToFields();
+                }
+            }, 100);
+            // 清理轮询
+            return function () { return clearInterval(checkInterval_1); };
+        }
+        else {
+            // 表单引用存在，直接订阅
+            return subscribeToFields();
+        }
+        function subscribeToFields() {
+            var _a;
+            var unsubscribe = (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.subscribe(fieldNames, function (newValues) {
+                callbackRef.current(newValues);
+            });
+            return function () {
+                unsubscribe === null || unsubscribe === void 0 ? void 0 : unsubscribe();
+            };
+        }
+    }, [formRef, fieldNames.join(',')]);
+}
+
+export { useFormWatch };

package/es/Menu/Menu.d.ts

@@ -15,7 +15,9 @@ interface MenuProps {
     }) => void;
     defaultSelectedKeys?: string[];
     defaultOpenKeys?: string[];
+    selectedKeys?: string[];
     style?: React.CSSProperties;
+    inlineCollapsed?: boolean;
 }
 export declare const getItem: (label: ReactNode, key: Key, icon?: ReactNode, children?: MenuItem[], type?: 'group') => MenuItem;
 declare const Menu: React.FC<MenuProps>;

package/es/Menu/Menu.js

@@ -1,6 +1,6 @@
 import { __assign, __spreadArray } from '../node_modules/tslib/tslib.es6.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useState } from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
 import { Icon } from '../Icon/index.js';
 
 var getItem = function (label, key, icon, children, type) {
@@ -13,23 +13,30 @@ var getItem = function (label, key, icon, children, type) {
     };
 };
 var Menu = function (_a) {
-    var items = _a.items, onClick = _a.onClick, _b = _a.defaultSelectedKeys, defaultSelectedKeys = _b === void 0 ? [] : _b, _c = _a.defaultOpenKeys, defaultOpenKeys = _c === void 0 ? [] : _c, style = _a.style;
-    var _d = useState(defaultOpenKeys), openKeys = _d[0], setOpenKeys = _d[1];
-    var _e = useState(defaultSelectedKeys), selectedKeys = _e[0], setSelectedKeys = _e[1];
+    var items = _a.items, onClick = _a.onClick, _b = _a.defaultSelectedKeys, defaultSelectedKeys = _b === void 0 ? [] : _b, _c = _a.defaultOpenKeys, defaultOpenKeys = _c === void 0 ? [] : _c, controlledSelectedKeys = _a.selectedKeys, // 新增
+    style = _a.style, _d = _a.inlineCollapsed, inlineCollapsed = _d === void 0 ? false : _d;
+    var _e = useState(defaultOpenKeys), openKeys = _e[0], setOpenKeys = _e[1];
+    var _f = useState(defaultSelectedKeys), uncontrolledSelectedKeys = _f[0], setUncontrolledSelectedKeys = _f[1];
+    var selectedKeys = controlledSelectedKeys !== undefined ? controlledSelectedKeys : uncontrolledSelectedKeys;
+    var _g = useState(null), hoveredKey = _g[0], setHoveredKey = _g[1];
+    var _h = useState({ top: 0, left: 0 }), popupPosition = _h[0], setPopupPosition = _h[1];
+    var menuItemRefs = useRef({});
+    var popupRef = useRef(null);
     var handleMenuClick = function (e) {
         onClick === null || onClick === void 0 ? void 0 : onClick(e);
-        setSelectedKeys([e.key]);
+        if (controlledSelectedKeys === undefined) {
+            setUncontrolledSelectedKeys([e.key]);
+        }
     };
-    // const handleOpenChange = (keys: string[]) => {
-    //   setOpenKeys(keys);
-    // };
     var isFirstLevel = function (item) {
         return items.some(function (i) { return i.key === item.key; });
     };
+    // 标准展开模式的菜单项渲染
     var renderMenuItem = function (item) {
         var isSelected = selectedKeys.includes(item.key.toString());
         return (jsx("div", __assign({ className: "foxit-menu-item ".concat(isSelected ? 'selected' : '') }, { children: jsxs("div", __assign({ className: "foxit-menu-item-content", onClick: function () { return handleMenuClick({ key: item.key.toString() }); } }, { children: [item.icon && jsx("span", __assign({ style: { marginRight: '8px' } }, { children: item.icon })), jsx("span", __assign({ className: isFirstLevel(item) ? 'foxit-menu-item-label' : '' }, { children: item.label }))] })) }), item.key));
     };
+    // 标准展开模式的子菜单渲染
     var renderSubMenu = function (item) {
         var isOpen = openKeys.includes(item.key.toString());
         return (jsxs("div", { children: [jsxs("div", __assign({ className: "foxit-menu-submenu-title", onClick: function () {
@@ -43,7 +50,118 @@ var Menu = function (_a) {
                         return child.children ? renderSubMenu(child) : renderMenuItem(child);
                     }) })))] }, item.key));
     };
-    return (jsx("div", __assign({ className: "foxit-menu", style: __assign({}, style) }, { children: items.map(function (item) { return (item.children ? renderSubMenu(item) : renderMenuItem(item)); }) })));
+    // 收起模式的菜单项渲染
+    var renderMenuCollapsedItem = function (item) {
+        var isSelected = selectedKeys.includes(item.key.toString());
+        return (jsx("div", __assign({ ref: function (el) { return (menuItemRefs.current[item.key.toString()] = el); }, className: "foxit-menu-item foxit-menu-collapsed-item ".concat(isSelected ? 'selected' : ''), onMouseEnter: function () { return handleMouseEnter(item.key.toString()); }, onMouseLeave: handleMouseLeave }, { children: jsx("div", __assign({ className: "foxit-menu-item-content", onClick: function () { return handleMenuClick({ key: item.key.toString() }); } }, { children: item.icon && (jsx("span", __assign({ className: "foxit-menu-item-icon foxit-menu-item-icon-collapsed" }, { children: item.icon }))) })) }), item.key));
+    };
+    // 收起模式的子菜单渲染
+    var renderSubCollapsedMenu = function (item) {
+        var isSelected = selectedKeys.includes(item.key.toString());
+        return (jsx("div", __assign({ ref: function (el) { return (menuItemRefs.current[item.key.toString()] = el); }, className: "foxit-menu-submenu foxit-menu-collapsed-item ".concat(isSelected ? 'selected' : ''), onMouseEnter: function () { return handleMouseEnter(item.key.toString()); }, onMouseLeave: handleMouseLeave }, { children: jsx("div", __assign({ className: "foxit-menu-submenu-title" }, { children: item.icon && (jsx("span", __assign({ className: "foxit-menu-item-icon foxit-menu-item-icon-collapsed" }, { children: item.icon }))) })) }), item.key));
+    };
+    // 处理鼠标悬浮事件
+    var handleMouseEnter = function (key) {
+        setHoveredKey(key);
+        var itemRef = menuItemRefs.current[key];
+        if (itemRef) {
+            var rect = itemRef.getBoundingClientRect();
+            setPopupPosition({
+                top: rect.top,
+                left: rect.right + 5
+            });
+        }
+    };
+    // 处理鼠标离开事件
+    var handleMouseLeave = function () {
+        // 使用延时，允许鼠标移到弹出菜单上
+        setTimeout(function () {
+            if (!isMouseInPopup() && !isMouseOverAnyMenuItem()) {
+                setHoveredKey(null);
+            }
+        }, 50);
+    };
+    // 检查鼠标是否在弹出菜单中
+    var isMouseInPopup = function () {
+        return popupRef.current && popupRef.current.matches(':hover');
+    };
+    // 检查鼠标是否在任何菜单项上
+    var isMouseOverAnyMenuItem = function () {
+        return Object.values(menuItemRefs.current).some(function (ref) { return ref && ref.matches(':hover'); });
+    };
+    // 弹出子菜单渲染
+    var renderPopupMenu = function () {
+        if (!hoveredKey)
+            return null;
+        var item = findItemByKey(items, hoveredKey);
+        if (!(item === null || item === void 0 ? void 0 : item.children))
+            return null;
+        return (jsx("div", __assign({ ref: popupRef, className: "foxit-menu-popup", style: {
+                position: 'fixed',
+                top: "".concat(popupPosition.top, "px"),
+                left: "".concat(popupPosition.left, "px"),
+                zIndex: 1000
+            }, onMouseEnter: function () { return setHoveredKey(hoveredKey); }, onMouseLeave: function () { return setHoveredKey(null); } }, { children: jsxs("div", __assign({ className: "foxit-menu foxit-menu-popup-content" }, { children: [jsxs("div", __assign({ className: "foxit-menu-popup-title" }, { children: [jsx("span", __assign({ className: "foxit-menu-item-icon" }, { children: item.icon })), jsx("span", { children: item.label })] })), item.children.map(function (child) {
+                        return child.children ? renderPopupSubMenu(child) : renderPopupMenuItem(child);
+                    })] })) })));
+    };
+    // 弹出菜单中的普通菜单项渲染
+    var renderPopupMenuItem = function (item) {
+        var isSelected = selectedKeys.includes(item.key.toString());
+        return (jsx("div", __assign({ className: "foxit-menu-item ".concat(isSelected ? 'selected' : '') }, { children: jsxs("div", __assign({ className: "foxit-menu-item-content", onClick: function () {
+                    handleMenuClick({ key: item.key.toString() });
+                    setHoveredKey(null);
+                } }, { children: [item.icon && jsx("span", __assign({ className: "foxit-menu-item-icon" }, { children: item.icon })), jsx("span", { children: item.label })] })) }), item.key));
+    };
+    // 弹出菜单中的子菜单渲染
+    var renderPopupSubMenu = function (item) {
+        var isOpen = openKeys.includes(item.key.toString());
+        return (jsxs("div", { children: [jsxs("div", __assign({ className: "foxit-menu-submenu-title", onClick: function () {
+                        if (isOpen) {
+                            setOpenKeys(openKeys.filter(function (key) { return key !== item.key.toString(); }));
+                        }
+                        else {
+                            setOpenKeys(__spreadArray(__spreadArray([], openKeys, true), [item.key.toString()], false));
+                        }
+                    } }, { children: [jsxs("div", __assign({ style: { display: 'flex', alignItems: 'center' } }, { children: [item.icon && jsx("span", __assign({ className: "foxit-menu-item-icon" }, { children: item.icon })), jsx("span", { children: item.label })] })), jsx("span", { children: jsx(Icon, { name: "DownOutlined", className: "foxit-menu-icon ".concat(isOpen ? '' : 'foxit-menu-rotated-icon') }) })] })), isOpen && item.children && (jsx("div", __assign({ className: "foxit-menu-submenu-items" }, { children: item.children.map(function (child) {
+                        return child.children ? renderPopupSubMenu(child) : renderPopupMenuItem(child);
+                    }) })))] }, item.key));
+    };
+    // 根据key查找菜单项
+    var findItemByKey = function (items, key) {
+        for (var _i = 0, items_1 = items; _i < items_1.length; _i++) {
+            var item = items_1[_i];
+            if (item.key.toString() === key) {
+                return item;
+            }
+            if (item.children) {
+                var found = findItemByKey(item.children, key);
+                if (found)
+                    return found;
+            }
+        }
+        return undefined;
+    };
+    // 关闭副作用处理
+    useEffect(function () {
+        var handleClickOutside = function (event) {
+            if (hoveredKey &&
+                popupRef.current &&
+                !popupRef.current.contains(event.target) &&
+                !Object.values(menuItemRefs.current).some(function (ref) { return ref && ref.contains(event.target); })) {
+                setHoveredKey(null);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return function () {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [hoveredKey]);
+    return (jsxs(Fragment, { children: [jsx("div", __assign({ className: "foxit-menu", style: __assign({}, style) }, { children: inlineCollapsed
+                    ? items.map(function (item) {
+                        return item.children ? renderSubCollapsedMenu(item) : renderMenuCollapsedItem(item);
+                    })
+                    : items.map(function (item) { return (item.children ? renderSubMenu(item) : renderMenuItem(item)); }) })), inlineCollapsed && hoveredKey && renderPopupMenu()] }));
 };
 
 export { Menu, getItem };

package/es/Modal/Modal.d.ts

@@ -10,6 +10,8 @@ interface IModalProps {
     maskClosable?: boolean;
     children?: React.ReactNode;
     width?: string;
+    type?: 'success';
+    closable?: boolean;
 }
 interface ModalComponent extends FC<IModalProps> {
     confirm: (props: IModalProps & {

package/es/Modal/Modal.js

@@ -2,80 +2,67 @@ import { __assign, __awaiter, __generator } from '../node_modules/tslib/tslib.es
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useState } from 'react';
 import { Icon } from '../Icon/index.js';
+import classNames from 'classnames';
 import { createRoot } from 'react-dom/client';
 import { Modal as Modal$1 } from './ModalTemp.js';
 import { Button } from '../Button/Button.js';
 
 var ModalContent = function (_a) {
-    var title = _a.title, onCancel = _a.onCancel, _b = _a.onCancelText, onCancelText = _b === void 0 ? undefined : _b, onOk = _a.onOk, _c = _a.onOkText, onOkText = _c === void 0 ? undefined : _c, children = _a.children, _d = _a.width, width = _d === void 0 ? '400px' : _d;
-    var _e = useState(false), loading = _e[0], setLoading = _e[1];
-    var _f = useState(false), cancelLoading = _f[0], setCancelLoading = _f[1];
+    var title = _a.title, onCancel = _a.onCancel, _b = _a.onCancelText, onCancelText = _b === void 0 ? undefined : _b, onOk = _a.onOk, _c = _a.onOkText, onOkText = _c === void 0 ? undefined : _c, children = _a.children, _d = _a.width, width = _d === void 0 ? '400px' : _d, type = _a.type, _e = _a.closable, closable = _e === void 0 ? true : _e;
+    var _f = useState(false), loading = _f[0], setLoading = _f[1];
+    var _g = useState(false), cancelLoading = _g[0], setCancelLoading = _g[1];
     var handleOk = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var result;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    if (!onOk) return [3 /*break*/, 6];
+                    if (!onOk) return [3 /*break*/, 4];
                     _a.label = 1;
                 case 1:
-                    _a.trys.push([1, , 5, 6]);
-                    result = onOk();
-                    if (!(result instanceof Promise)) return [3 /*break*/, 3];
+                    _a.trys.push([1, , 3, 4]);
                     setLoading(true);
-                    return [4 /*yield*/, result];
+                    return [4 /*yield*/, onOk()];
                 case 2:
                     _a.sent();
                     return [3 /*break*/, 4];
                 case 3:
-                    onOk();
-                    _a.label = 4;
-                case 4: return [3 /*break*/, 6];
-                case 5:
                     setLoading(false);
                     return [7 /*endfinally*/];
-                case 6: return [2 /*return*/];
+                case 4: return [2 /*return*/];
             }
         });
     }); };
     var handleCancel = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var result;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    if (!onCancel) return [3 /*break*/, 6];
+                    if (!onCancel) return [3 /*break*/, 4];
                     _a.label = 1;
                 case 1:
-                    _a.trys.push([1, , 5, 6]);
-                    result = onCancel();
-                    if (!(result instanceof Promise)) return [3 /*break*/, 3];
+                    _a.trys.push([1, , 3, 4]);
                     setCancelLoading(true);
-                    return [4 /*yield*/, result];
+                    return [4 /*yield*/, onCancel()];
                 case 2:
                     _a.sent();
                     return [3 /*break*/, 4];
                 case 3:
-                    onCancel();
-                    _a.label = 4;
-                case 4: return [3 /*break*/, 6];
-                case 5:
                     setCancelLoading(false);
                     return [7 /*endfinally*/];
-                case 6: return [2 /*return*/];
+                case 4: return [2 /*return*/];
             }
         });
     }); };
-    return (jsxs("div", __assign({ className: "foxit-modal-content-container", style: {
-            maxWidth: width,
+    return (jsxs("div", __assign({ className: classNames('foxit-modal-content-container', type === 'success' ? 'foxit-modal-success' : ''), style: {
+            maxWidth: "min(".concat(width, ", calc(100vw - 32px))"),
             width: width
-        } }, { children: [jsxs("div", __assign({ className: "foxit-modal-head" }, { children: [jsx("div", __assign({ className: "foxit-modal-title" }, { children: title })), jsx("div", __assign({ onClick: onCancel, className: "foxit-modal-close-button" }, { children: jsx(Icon, { name: "CloseOutlined" }) }))] })), jsx("div", { children: children }), jsxs("div", __assign({ className: "foxit-modal-footer" }, { children: [onCancelText && (jsx(Button, __assign({ size: "medium", onClick: handleCancel, loading: cancelLoading }, { children: onCancelText }))), onOkText && (jsx(Button, __assign({ primary: true, size: "medium", onClick: handleOk, loading: loading }, { children: onOkText })))] }))] })));
+        } }, { children: [jsxs("div", __assign({ className: "foxit-modal-head" }, { children: [jsx("div", __assign({ className: "foxit-modal-title" }, { children: title })), closable && (jsx("div", __assign({ onClick: onCancel, className: type === 'success' ? 'foxit-modal-success-icon' : 'foxit-modal-close-button' }, { children: type === 'success' ? (jsx(Icon, { name: "FireWorkColoursOutlined" })) : (jsx(Icon, { name: "CloseOutlined" })) })))] })), jsx("div", __assign({ className: "foxit-modal-children" }, { children: children })), jsxs("div", __assign({ className: "foxit-modal-footer" }, { children: [onCancelText && (jsx(Button, __assign({ size: "medium", onClick: handleCancel, loading: cancelLoading }, { children: onCancelText }))), onOkText && (jsx(Button, __assign({ primary: true, size: "medium", onClick: handleOk, loading: loading }, { children: onOkText })))] }))] })));
 };
 var Modal = function (_a) {
-    var title = _a.title, opened = _a.opened, onOk = _a.onOk, onOkText = _a.onOkText, onCancel = _a.onCancel, onCancelText = _a.onCancelText, maskClosable = _a.maskClosable, children = _a.children, width = _a.width;
-    return (jsx(Modal$1, __assign({ opened: opened, onClose: onCancel || (function () { }), maskClosable: maskClosable, position: "top" }, { children: jsx(ModalContent, __assign({ title: title, width: width, onCancel: onCancel, onCancelText: onCancelText, onOk: onOk, onOkText: onOkText }, { children: children })) })));
+    var title = _a.title, opened = _a.opened, onOk = _a.onOk, onOkText = _a.onOkText, onCancel = _a.onCancel, onCancelText = _a.onCancelText, maskClosable = _a.maskClosable, children = _a.children, width = _a.width, type = _a.type, closable = _a.closable;
+    return (jsx(Modal$1, __assign({ opened: opened, onClose: onCancel || (function () { }), maskClosable: maskClosable, position: "top" }, { children: jsx(ModalContent, __assign({ title: title, width: width, onCancel: onCancel, onCancelText: onCancelText, onOk: onOk, onOkText: onOkText, type: type, closable: closable }, { children: children })) })));
 };
 // 语法糖的调用方式
 Modal.confirm = function (_a) {
-    var title = _a.title, onOk = _a.onOk, onCancel = _a.onCancel, onOkText = _a.onOkText, onCancelText = _a.onCancelText, _b = _a.maskClosable, maskClosable = _b === void 0 ? true : _b, content = _a.content, width = _a.width;
+    var title = _a.title, onOk = _a.onOk, onCancel = _a.onCancel, onOkText = _a.onOkText, onCancelText = _a.onCancelText, _b = _a.maskClosable, maskClosable = _b === void 0 ? true : _b, content = _a.content, width = _a.width, closable = _a.closable;
     var modalRoot = document.createElement('div');
     document.body.appendChild(modalRoot);
     var root = createRoot(modalRoot);
@@ -117,7 +104,7 @@ Modal.confirm = function (_a) {
                 : function () {
                     onOk === null || onOk === void 0 ? void 0 : onOk();
                     handleClose();
-                }, onOkText: onOkText }, { children: content })) })));
+                }, onOkText: onOkText, closable: closable }, { children: content })) })));
 };
 
 export { Modal };