@zat-design/sisyphus-react 4.3.2 → 4.3.3-beta.2

package/es/ProEnum/hooks/useEnumRequest.js

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 import { useDeepCompareEffect, useRequest as useRequestFunc } from 'ahooks';
 import { diffCode, getEnumData, setEnumData, removeEnumData, cacheFieldNames, baseCacheKey, baseStorage } from "../utils";
 import locale from "../../locale";
@@ -29,13 +29,58 @@ const useEnumRequest = (props, dispatch) => {
       console.warn('proEnum：', msg);
     }
   };
-  const enumRes = useRequestFunc(useRequest?.service, {
+
+  // IndexedDB 缓存策略：包装 service，在 service 层面返回缓存数据，
+  // 而非跳过 run()。这样 enumRes.data/loading 正常变更，
+  // ProConfigProvider 的 onSuccess 回调能正常触发（修复白屏问题）。
+  const fromCacheRef = useRef(null);
+  const originalService = useRequest?.service;
+  const serviceForRequest = useMemo(() => {
+    if (!originalService || storage !== 'indexedDB') {
+      return originalService;
+    }
+    return async (...args) => {
+      if (!requestRefresh) {
+        const cached = await Promise.resolve(getEnumData(storage, cacheKey));
+        if (cached?.data && Object.keys(cached.data).length > 0 && cached?.time && Date.now() - cached.time <= 6e4 * 60) {
+          fromCacheRef.current = cached.data;
+          return {
+            status: 200,
+            data: cached.data
+          };
+        }
+      }
+      fromCacheRef.current = null;
+      return originalService(...args);
+    };
+  }, [originalService, storage, requestRefresh, cacheKey]);
+  const enumRes = useRequestFunc(serviceForRequest, {
     manual: true,
     cacheKey,
     cacheTime: -1,
     staleTime: 6e4 * 60,
     ...useRequest?.options,
     setCache: async res => {
+      // 缓存命中时跳过 transformResponse 和重复处理，直接 dispatch
+      if (fromCacheRef.current) {
+        const cachedData = fromCacheRef.current;
+        dispatch({
+          type: 'setProEnumDic',
+          payload: {
+            ...dics,
+            ...dataSource,
+            ...cachedData
+          }
+        });
+        if (main) {
+          setTimeout(() => {
+            window?.eventCenter?.publish('pro-enum-event', cachedData);
+            logDebug(locale?.ProEnum?.mainInitByCache);
+          }, 10000);
+        }
+        fromCacheRef.current = null;
+        return res;
+      }
       let response = res.data;
       if (transformResponse && typeof transformResponse === 'function') {
         response = await transformResponse(res.data);
@@ -97,40 +142,18 @@ const useEnumRequest = (props, dispatch) => {
       });
       if (main) {
         setTimeout(() => {
-          window?.eventCenter?.publish('zat-design-pro-component-event', res.data);
+          window?.eventCenter?.publish('pro-enum-event', res.data);
           logDebug(locale?.ProEnum?.mainInitByRequest);
         }, 10000);
       }
       return res;
     },
-    getCache: () => {
-      // 支持异步读取
-      const cachePromise = Promise.resolve(getEnumData(storage, cacheKey) || {
-        data: {}
-      });
-
-      // 对于同步存储，直接返回；对于异步存储，返回 Promise
+    getCache: params => {
       if (storage === 'indexedDB') {
-        return cachePromise.then(res => {
-          dispatch({
-            type: 'setProEnumDic',
-            payload: {
-              ...dics,
-              ...dataSource,
-              ...res?.data
-            }
-          });
-          if (main) {
-            setTimeout(() => {
-              window?.eventCenter?.publish('zat-design-pro-component-event', res.data);
-              logDebug(locale?.ProEnum?.mainInitByCache);
-            }, 10000);
-          }
-          return res;
-        });
+        return undefined;
       }
 
-      // 同步存储的处理
+      // 同步存储的处理（原始逻辑）
       const res = getEnumData(storage, cacheKey) || {
         data: {}
       };
@@ -144,7 +167,7 @@ const useEnumRequest = (props, dispatch) => {
       });
       if (main) {
         setTimeout(() => {
-          window?.eventCenter?.publish('zat-design-pro-component-event', res.data);
+          window?.eventCenter?.publish('pro-enum-event', res.data);
           logDebug(locale?.ProEnum?.mainInitByCache);
         }, 10000);
       }
@@ -210,7 +233,7 @@ const useEnumRequest = (props, dispatch) => {
               ...cacheData.data
             }
           });
-        } else if (dataSource && Object.keys(dataSource)) {
+        } else if (dataSource && Object.keys(dataSource).length > 0) {
           // 子系统也可能会有 dataSource
           dispatch({
             type: 'setProEnumDic',
@@ -233,16 +256,13 @@ const useEnumRequest = (props, dispatch) => {
         if (requestRefresh) {
           window.localStorage.removeItem(cacheKey);
           window.sessionStorage.removeItem(cacheKey);
-          // 清除 IndexedDB
           if (storage === 'indexedDB') {
             await removeEnumData('indexedDB', cacheKey);
           }
         }
         enumRes.run(params);
-
-        // TODO 这段代码目前看起来是没啥用的、没起到作用
         mergeData();
-      } else if (Object.keys(dataSource)) {
+      } else if (dataSource && Object.keys(dataSource).length > 0) {
         const res = await Promise.resolve(getEnumData(storage, cacheKey) || {
           data: {}
         });
@@ -283,15 +303,15 @@ const useEnumRequest = (props, dispatch) => {
   };
   useEffect(() => {
     if (main) {
-      window?.eventCenter?.publish('zat-design-pro-component-event', {});
+      window?.eventCenter?.publish('pro-enum-event', {});
       logDebug(locale?.ProEnum?.mainInitOnce);
     }
     if (!main && share) {
-      window?.eventCenter?.subscribe('zat-design-pro-component-event', shareProEnumDic);
+      window?.eventCenter?.subscribe('pro-enum-event', shareProEnumDic);
       logDebug(locale?.ProEnum?.sonInitEvent);
     }
     return () => {
-      window?.eventCenter?.unsubscribe('zat-design-pro-component-event', shareProEnumDic);
+      window?.eventCenter?.unsubscribe('pro-enum-event', shareProEnumDic);
     };
   }, []);
   return enumRes;

package/es/ProForm/components/combination/Group/style/index.less

@@ -108,6 +108,12 @@
         flex: 1;
         margin-right: 0;
         margin-bottom: 0;
+        position: relative;
+
+        &:hover,
+        &:focus-within {
+          z-index: 2;
+        }
 
         // 第一个元素后面的所有元素都左移1px以实现紧密连接
         &:not(:first-child) {
@@ -311,6 +317,12 @@
         flex: 1;
         margin-right: 0;
         margin-bottom: 0;
+        position: relative;
+
+        &:hover,
+        &:focus-within {
+          z-index: 2;
+        }
 
         // 第一个元素后面的所有元素都左移1px以实现紧密连接
         &:not(:first-child) {
@@ -475,6 +487,15 @@
     border-radius: 0 !important;
   }
 
+  > .pro-group-form-item {
+    position: relative;
+
+    &:hover,
+    &:focus-within {
+      z-index: 2;
+    }
+  }
+
   > .pro-group-form-item:not(:first-child) {
     .@{ant-prefix}-input,
     .@{ant-prefix}-select,

package/es/ProForm/components/combination/Group/utils/index.d.ts

@@ -75,30 +75,32 @@ export declare const useFormItemProps: (column: FlexibleGroupColumnType, context
     confirm?: boolean | import("antd").ModalFuncProps | import("../../../render/propsType").FunctionArgs<any, boolean | import("antd").ModalFuncProps>;
     show?: boolean | ReactiveFunction<any, boolean>;
     component?: React.ReactNode | ReactiveFunction<any, React.ReactNode>;
-    className?: string;
+    id?: string;
+    children?: React.ReactNode | ((form: FormInstance<any>) => React.ReactNode);
     style?: React.CSSProperties;
     trim?: boolean;
     normalize?: (value: any, prevValue: any, allValues: import("@rc-component/form/lib/interface").Store) => any;
-    children?: React.ReactNode | ((form: FormInstance<any>) => React.ReactNode);
+    className?: string;
     hidden?: boolean;
-    id?: string;
-    onReset?: () => void;
-    prefixCls?: string;
-    rootClassName?: string;
-    vertical?: boolean;
-    htmlFor?: string;
     layout?: import("antd/es/form/Form").FormItemLayout;
     help?: React.ReactNode;
+    vertical?: boolean;
     preserve?: boolean;
-    trigger?: string;
-    isView?: boolean;
-    status?: "" | "warning" | "error" | "success" | "validating";
+    onReset?: () => void;
     validateTrigger?: string | false | string[];
-    colon?: boolean;
+    isView?: boolean;
+    clearNotShow?: boolean;
     labelAlign?: import("antd/es/form/interface").FormLabelAlign;
+    prefixCls?: string;
+    colon?: boolean;
     labelCol?: import("antd").ColProps;
+    wrapperCol?: import("antd").ColProps;
+    rootClassName?: string;
+    status?: "" | "warning" | "error" | "success" | "validating";
+    htmlFor?: string;
     getValueFromEvent?: (...args: import("@rc-component/form/lib/interface").EventArgs) => any;
     shouldUpdate?: import("@rc-component/form/lib/Field").ShouldUpdate<any>;
+    trigger?: string;
     validateDebounce?: number;
     valuePropName?: string;
     getValueProps?: ((value: any) => Record<string, unknown>) & ((value: any) => Record<string, unknown>);
@@ -112,7 +114,6 @@ export declare const useFormItemProps: (column: FlexibleGroupColumnType, context
         icons: import("antd/es/form/FormItem").FeedbackIcons;
     };
     validateStatus?: "" | "warning" | "error" | "success" | "validating";
-    wrapperCol?: import("antd").ColProps;
     fieldId?: string;
     valueType?: import("../../../render/propsType").ProFormValueType;
     switchValue?: [any, any];
@@ -125,7 +126,6 @@ export declare const useFormItemProps: (column: FlexibleGroupColumnType, context
     upperCase?: boolean;
     toISOString?: boolean;
     toCSTString?: boolean;
-    clearNotShow?: boolean;
     desensitization?: [number, number] | ReactiveFunction<any, [number, number]>;
     name: any;
     dependencies: any[];
@@ -141,7 +141,7 @@ export declare const useFormItemProps: (column: FlexibleGroupColumnType, context
  * 创建组件属性
  */
 export declare const createComponentProps: (column: FlexibleGroupColumnType, formItemProps: any) => {
-    componentProps: import("lodash").Omit<any, "format" | "valueType" | "switchValue" | "dependNames" | "toISOString" | "toCSTString" | "clearNotShow" | "precision">;
+    componentProps: import("lodash").Omit<any, "clearNotShow" | "format" | "valueType" | "switchValue" | "dependNames" | "toISOString" | "toCSTString" | "precision">;
     formItemTransform: {
         getValueProps: any;
         normalize: any;

package/es/ProForm/components/combination/ProModalSelect/style/index.less

@@ -90,24 +90,9 @@
     ):not(.@{ant-prefix}-btn-compact-item-rtl) {
     &:hover {
       position: relative;
-      z-index: 1;
-      transition: none;
-      border-color: var(--ant-primary-color-hover, #1677ff) !important;
-      &::before {
-        opacity: 1;
-      }
-    }
-    &::before {
-      content: '';
-      position: absolute;
-      top: -1px;
-      left: -1px;
-      width: 1px;
-      height: calc(100% + 2px);
-      background: var(--ant-primary-color-hover, #1677ff);
-      opacity: 0;
-      display: block;
       z-index: 2;
+      border-color: var(--zaui-brand-hover, #3387ff) !important;
+      box-shadow: -1px 0 0 0 var(--zaui-brand-hover, #3387ff);
     }
   }
 

package/es/ProForm/components/combination/ProTimeLimit/style/index.less

@@ -26,13 +26,13 @@ span.@{ant-prefix}-input-group-compact,
 
     .@{ant-prefix}-picker {
       flex: 1;
-      border-right: 0;
       border-top-right-radius: 0 !important;
       border-bottom-right-radius: 0 !important;
     }
 
-    .@{ant-prefix}-picker-focused {
-      z-index: 1;
+    .@{ant-prefix}-picker-focused,
+    .@{ant-prefix}-picker:not(.@{ant-prefix}-picker-disabled):hover {
+      z-index: 2;
     }
 
     .forever-checkbox {
@@ -50,12 +50,14 @@ span.@{ant-prefix}-input-group-compact,
         padding: 4px 11px;
         background-color: #ffffff;
         border: 1px solid #d9d9d9;
-        margin-left: 1px;
+        margin-left: 0;
+        position: relative;
         border-top-right-radius: 6px !important;
         border-bottom-right-radius: 6px !important;
         transition: all 0.2s;
 
         &:hover {
+          z-index: 2;
           border-color: #40a9ff;
         }
 
@@ -79,21 +81,18 @@ span.@{ant-prefix}-input-group-compact,
 
     // 确保焦点状态下的边框连接正确
     .@{ant-prefix}-picker:focus {
-      z-index: 1;
-      border-right: 0;
+      z-index: 2;
     }
 
     .forever-checkbox.@{ant-prefix}-input:focus {
-      z-index: 1;
+      z-index: 2;
       border-color: #40a9ff;
-      border-left: 0;
       box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
     }
 
     // 当日期选择器聚焦时，复选框也要有相应的样式
     .@{ant-prefix}-picker-focused + .forever-checkbox.@{ant-prefix}-input {
       border-color: #40a9ff;
-      border-left: 0;
     }
   }
 }

package/es/ProForm/index.js

@@ -227,6 +227,16 @@ const ProForm = (props, ref) => {
     labelAlign: labelAlign ?? config.labelAlign ?? 'left',
     onValuesChange: handleValuesChange,
     onFinish: handleFinish,
+    onFinishFailed: ({
+      errorFields
+    }) => {
+      if (scrollToError && errorFields?.length) {
+        form.scrollToField(errorFields[0]?.name, {
+          block: 'center',
+          behavior: 'smooth'
+        });
+      }
+    },
     initialValues: _initialValues,
     children: [/*#__PURE__*/_jsxs(Row, {
       gutter: 24,

package/es/ProStep/components/Item/index.js

@@ -25,7 +25,8 @@ const ProStepItem = ({
   const {
     register,
     collapse,
-    lazyLoad: globalLazyLoad
+    lazyLoad: globalLazyLoad,
+    targetOffset
   } = useStep();
   const lazyLoad = stepLazyLoad ?? globalLazyLoad;
   useEffect(() => {
@@ -60,6 +61,9 @@ const ProStepItem = ({
     return /*#__PURE__*/_jsx("div", {
       className: "pro-step-item",
       id: id,
+      style: {
+        scrollMarginTop: targetOffset ? `${targetOffset}px` : undefined
+      },
       children: /*#__PURE__*/_jsx(ProCollapse, {
         title: title,
         icon: true,
@@ -83,6 +87,9 @@ const ProStepItem = ({
   return /*#__PURE__*/_jsx("div", {
     className: "pro-step-item",
     id: id,
+    style: {
+      scrollMarginTop: targetOffset ? `${targetOffset}px` : undefined
+    },
     children: renderChildren()
   });
 };

package/es/ProStep/index.js

@@ -27,7 +27,8 @@ const ProStep = ({
   const ids = Object.keys(registerMap.current);
   const {
     collapse = false,
-    lazyLoad = false
+    lazyLoad = false,
+    targetOffset
   } = resetProps;
   const dataSource = useMemo(() => {
     if (resetProps?.dataSource) {
@@ -150,6 +151,7 @@ const ProStep = ({
       triggerTo,
       handleScroll,
       lazyLoad,
+      targetOffset,
       unNotify,
       source: 'ProStep'
     },

package/es/ProStep/propsType.d.ts

@@ -102,6 +102,8 @@ export interface ProStepContextType {
     handleScroll: (id: string, options?: ScrollOptions) => void;
     /** 懒加载配置 */
     lazyLoad?: boolean | any;
+    /** 滚动偏移量 */
+    targetOffset?: number;
     /** 取消注册函数 */
     unNotify: (keys: string | string[]) => void;
     /** 来源 */

package/es/ProStep/utils/index.js

@@ -1,5 +1,6 @@
 import _pick from "lodash/pick";
 import _debounce from "lodash/debounce";
+import scrollIntoView from 'scroll-into-view-if-needed';
 /**
  * 滚动到错误位置, 延迟200ms解决ProForm错误还未生成
  */
@@ -7,9 +8,10 @@ export const handleScrollError = dom => {
   setTimeout(() => {
     const errorDom = dom || document.querySelector('[class*="form-item-has-error"]');
     if (errorDom) {
-      errorDom.scrollIntoView({
+      scrollIntoView(errorDom, {
         behavior: 'smooth',
-        block: 'center'
+        block: 'center',
+        scrollMode: 'if-needed'
       });
     }
   }, 200);
@@ -25,7 +27,6 @@ export const handleScroll = (id, options) => {
     targetOffset = 0,
     scrollToError
   } = options || {};
-  if (!scrollToError) return;
   const dom = document.querySelector(`#${id}`);
   if (dom) {
     // 查找指定id下的错误表单项
@@ -36,10 +37,10 @@ export const handleScroll = (id, options) => {
     } else {
       // 如果没有错误表单项，则滚动到指定元素位置
       setTimeout(_debounce(() => {
-        const rect = dom.getBoundingClientRect();
-        window.scrollTo({
-          top: window.scrollY + rect.top - targetOffset,
-          behavior: 'smooth'
+        scrollIntoView(dom, {
+          behavior: 'smooth',
+          block: 'start',
+          scrollMode: 'if-needed'
         });
       }, 100), 0);
     }

package/es/ProTreeModal/style/index.less

@@ -52,13 +52,13 @@
     }
   }
 
-  &:hover {
-    .pro-enum-input-addonAfter:not(.trigger-no-hover):not(.pro-enum-input-addonAfter-not-allowed) {
-      border-color: var(--zaui-brand-hover, #3387ff);
-      color: var(--zaui-brand-hover, #3387ff);
-    }
-    .pro-enum-input-addonAfter:not(.trigger-no-hover):not(.pro-enum-input-addonAfter-not-allowed)
-      .pro-tree-modal-view-svg-active {
+  .pro-enum-input-addonAfter:not(.trigger-no-hover):not(.pro-enum-input-addonAfter-not-allowed):hover {
+    z-index: 2;
+    border-color: var(--zaui-brand-hover, #3387ff);
+    color: var(--zaui-brand-hover, #3387ff);
+    box-shadow: -1px 0 0 0 var(--zaui-brand-hover, #3387ff);
+
+    .pro-tree-modal-view-svg-active {
       color: var(--zaui-brand-hover, #3387ff);
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zat-design/sisyphus-react",
-  "version": "4.3.2",
+  "version": "4.3.3-beta.2",
   "license": "MIT",
   "files": [
     "es",