@zat-design/sisyphus-react 4.0.0-beta.8 → 4.0.0

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

@@ -1,6 +1,9 @@
 .pro-group {
   display: flex;
   width: unset !important;
+
+
+
   &.pro-group-view {
     .@{ant-prefix}-space {
       .@{ant-prefix}-space-item {
@@ -38,7 +41,7 @@
 
   .@{ant-prefix}-space-compact {
     flex: auto;
-    align-items: center;
+    align-items: flex-start; // 改为顶部对齐，避免错误信息影响对齐
     width: 100%;
 
     .@{ant-prefix}-form-item {
@@ -46,12 +49,23 @@
     }
 
     .group-separator {
+      height: 32px; // 明确设置高度与输入框一致
       padding: 0 12px;
+      color: #999;
+      font-size: 14px;
+      line-height: 30px; // 调整行高匹配32px输入框高度
       background-color: #fff;
+      border: 1px solid #d9d9d9; // 使用标准的1px边框
+      outline: none;
+
+      // 移除默认button样式
+      box-shadow: none;
       cursor: default;
-      margin-inline-end: -2px;
-      margin-inline-start: -1px;
+      margin-inline-start: -2px;
+      border-radius: 0;
+
     }
+
     .pro-modal-select {
       margin-left: -1px;
     }
@@ -70,4 +84,412 @@
       border-color: #ff4d4f;
     }
   }
+
+  // 针对灵活模式的样式优化
+  &.pro-group-flexible {
+    // Space.Compact的样式优化
+    .@{ant-prefix}-space-compact {
+      display: flex;
+      align-items: flex-start;
+      width: 100%;
+
+      // Form.Item在compact模式下的样式
+      .@{ant-prefix}-form-item {
+        flex: 1;
+        margin-right: 0;
+        margin-bottom: 0;
+
+        // 第一个元素后面的所有元素都左移1px以实现紧密连接
+        &:not(:first-child) {
+          margin-left: -1px;
+        }
+
+        // 确保输入框完全贴合
+        .@{ant-prefix}-input,
+        .@{ant-prefix}-select .@{ant-prefix}-select-selector,
+        .@{ant-prefix}-input-number,
+        .@{ant-prefix}-input-number-input {
+          // 重置z-index确保正确的层级关系
+          position: relative;
+          // 重置圆角
+          border-radius: 0;
+        }
+
+        // 第一个表单项：左边保持圆角
+        &:first-child {
+          .@{ant-prefix}-input,
+          .@{ant-prefix}-select .@{ant-prefix}-select-selector,
+          .@{ant-prefix}-input-number,
+          .@{ant-prefix}-input-number-input {
+            border-top-left-radius: 8px;
+            border-bottom-left-radius: 8px;
+          }
+        }
+
+        // 最后一个表单项：右边保持圆角
+        &:last-child {
+          .@{ant-prefix}-input,
+          .@{ant-prefix}-select .@{ant-prefix}-select-selector,
+          .@{ant-prefix}-input-number,
+          .@{ant-prefix}-input-number-input {
+            border-top-right-radius: 8px;
+            border-bottom-right-radius: 8px;
+          }
+        }
+
+        // 中间元素和最后元素：去掉左边框避免重复
+        &:not(:first-child) {
+          .@{ant-prefix}-input-number-input {
+            border-left: 0;
+          }
+
+          // 聚焦时恢复左边框
+          .@{ant-prefix}-input:focus,
+          .@{ant-prefix}-select:focus .@{ant-prefix}-select-selector,
+          .@{ant-prefix}-input-number:focus,
+          .@{ant-prefix}-input-number:focus .@{ant-prefix}-input-number-input {
+            margin-left: -1px;
+            border-left-width: 1px;
+          }
+        }
+
+        // 错误状态：确保边框变红（优先级要高于上面的 border-left-width: 0）
+        &.@{ant-prefix}-form-item-has-error {
+          .@{ant-prefix}-input,
+          .@{ant-prefix}-select .@{ant-prefix}-select-selector,
+          .@{ant-prefix}-input-number,
+          .@{ant-prefix}-input-number-input {
+            border-color: #ff4d4f !important;
+          }
+
+          // 错误状态下，中间元素也需要恢复左边框并设置为红色
+          &:not(:first-child) {
+            .@{ant-prefix}-input,
+            .@{ant-prefix}-select .@{ant-prefix}-select-selector,
+            .@{ant-prefix}-input-number {
+              border-left-color: #ff4d4f !important;
+              border-left-width: 1px !important;
+            }
+
+            .@{ant-prefix}-input-number-input {
+              border-left: 0 !important;
+            }
+          }
+
+          // 聚焦时保持红色边框
+          .@{ant-prefix}-input:focus,
+          .@{ant-prefix}-select:focus .@{ant-prefix}-select-selector,
+          .@{ant-prefix}-input-number:focus,
+          .@{ant-prefix}-input-number:focus .@{ant-prefix}-input-number-input {
+            border-color: #ff4d4f !important;
+          }
+
+          // Select 组件的错误状态处理
+          .@{ant-prefix}-select.@{ant-prefix}-select-status-error .@{ant-prefix}-select-selector {
+            border-color: #ff4d4f !important;
+          }
+        }
+      }
+
+      // 分隔符样式 - 确保与输入框完美对齐
+      .pro-group-separator {
+        position: relative;
+        display: inline-flex;
+        flex: none;
+        align-items: center;
+        height: 32px;
+        margin-right: -1px;
+        margin-left: -1px;
+        padding: 0 8px;
+        color: #666;
+        font-size: 14px;
+        line-height: 32px;
+        background-color: #fafafa;
+        border-top: 1px solid #d9d9d9;
+        border-right: 0;
+        border-bottom: 1px solid #d9d9d9;
+        border-left: 0;
+        user-select: none;
+      }
+
+      .@{ant-prefix}-form-item-has-error + .pro-group-separator-compact {
+        border-color: red;
+      }
+
+      // compact模式分隔符样式
+      .pro-group-separator-compact {
+        display: inline-flex;
+        flex: none;
+        align-items: center;
+        justify-items: center;
+        height: 32px;
+        padding: 0 12px;
+        color: #666;
+        line-height: 32px;
+        border: 1px solid #d9d9d9;
+        user-select: none;
+        margin-inline-start: -2px;
+      }
+    }
+
+    // Space模式分隔符样式
+    .pro-group-separator-space {
+      display: flex;
+      flex-shrink: 0;
+      align-items: center;
+      padding: 0 8px;
+      color: #999;
+      font-size: 14px;
+      user-select: none;
+    }
+
+    // 错误提示样式
+    .pro-group-error-tip {
+      padding: 8px;
+      color: #ff4d4f;
+      border: 1px dashed #ff4d4f;
+    }
+
+    // compact模式容器
+    .pro-group-compact-container {
+      width: 100%;
+    }
+
+    // Form.Item无边距样式
+    .pro-group-form-item {
+      flex: 1;
+      margin-left: 0 !important;
+      &.@{ant-prefix}-form-item-has-error{
+        margin-left: -1px !important;
+      }
+    }
+
+    // 当有自定义宽度时，只有设置了宽度的 Form.Item 不使用 flex:1
+    // 没有设置宽度的 Form.Item 保持 flex: 1，自动占据剩余空间
+    &.pro-group-diy-width {
+      // 覆盖 Space.Compact 内设置了宽度的 Form.Item
+      .@{ant-prefix}-space-compact {
+        .@{ant-prefix}-form-item.pro-group-form-item-has-width {
+          flex: none;
+        }
+      }
+
+      // 覆盖 compact 容器内设置了宽度的 Form.Item
+      .pro-group-compact-container {
+        .@{ant-prefix}-form-item.pro-group-form-item-has-width {
+          flex: none;
+        }
+      }
+
+      // 覆盖直接使用 pro-group-form-item 类且设置了宽度的 Form.Item
+      .pro-group-form-item.pro-group-form-item-has-width {
+        flex: none;
+      }
+    }
+  }
+
+  // 传统模式也需要相同的样式规则（不在 pro-group-flexible 下）
+  &:not(.pro-group-flexible) {
+    // compact模式容器
+    .pro-group-compact-container {
+      display: flex;
+      align-items: flex-start;
+      width: 100%;
+
+      // Form.Item在compact模式下的样式
+      .@{ant-prefix}-form-item {
+        flex: 1;
+        margin-right: 0;
+        margin-bottom: 0;
+
+        // 第一个元素后面的所有元素都左移1px以实现紧密连接
+        &:not(:first-child) {
+          margin-left: -1px;
+        }
+
+        // 确保输入框完全贴合
+        .@{ant-prefix}-input,
+        .@{ant-prefix}-select .@{ant-prefix}-select-selector,
+        .@{ant-prefix}-input-number,
+        .@{ant-prefix}-input-number-input {
+          // 重置z-index确保正确的层级关系
+          position: relative;
+          // 重置圆角
+          border-radius: 0;
+        }
+
+        // 第一个表单项：左边保持圆角
+        &:first-child {
+          .@{ant-prefix}-input,
+          .@{ant-prefix}-select .@{ant-prefix}-select-selector,
+          .@{ant-prefix}-input-number,
+          .@{ant-prefix}-input-number-input {
+            border-top-left-radius: 8px;
+            border-bottom-left-radius: 8px;
+          }
+        }
+
+        // 最后一个表单项：右边保持圆角
+        &:last-child {
+          .@{ant-prefix}-input,
+          .@{ant-prefix}-select .@{ant-prefix}-select-selector,
+          .@{ant-prefix}-input-number,
+          .@{ant-prefix}-input-number-input {
+            border-top-right-radius: 8px;
+            border-bottom-right-radius: 8px;
+          }
+        }
+
+        // 中间元素和最后元素：去掉左边框避免重复
+        &:not(:first-child) {
+          // 聚焦时恢复左边框
+          .@{ant-prefix}-input:focus,
+          .@{ant-prefix}-select:focus .@{ant-prefix}-select-selector,
+          .@{ant-prefix}-input-number:focus,
+          .@{ant-prefix}-input-number:focus .@{ant-prefix}-input-number-input {
+            margin-left: -1px;
+            border-left-width: 1px;
+          }
+        }
+      }
+
+      // compact模式分隔符样式
+      .pro-group-separator-compact {
+        display: inline-flex;
+        flex: none;
+        align-items: center;
+        justify-items: center;
+        height: 32px;
+        padding: 0 12px;
+        color: #666;
+        line-height: 32px;
+        border: 1px solid #d9d9d9;
+        user-select: none;
+        margin-inline-start: -1px;
+      }
+
+      // 错误状态的分隔符
+      .@{ant-prefix}-form-item-has-error + .pro-group-separator-compact {
+        border-color: #ff4d4f;
+      }
+    }
+
+    // Form.Item无边距样式（传统模式）
+    .pro-group-form-item {
+      flex: 1;
+      // margin: 0 !important;
+    }
+
+    // 当有自定义宽度时，只有设置了宽度的 Form.Item 不使用 flex:1
+    &.pro-group-diy-width {
+      // 覆盖 Space.Compact 内设置了宽度的 Form.Item
+      .@{ant-prefix}-space-compact {
+        .@{ant-prefix}-form-item.pro-group-form-item-has-width {
+          flex: none;
+        }
+      }
+
+      // 覆盖 compact 容器内设置了宽度的 Form.Item
+      .pro-group-compact-container {
+        .@{ant-prefix}-form-item.pro-group-form-item-has-width {
+          flex: none;
+        }
+      }
+
+      // 覆盖直接使用 pro-group-form-item 类且设置了宽度的 Form.Item
+      .pro-group-form-item.pro-group-form-item-has-width {
+        flex: none;
+      }
+    }
+  }
 }
+
+
+.@{ant-prefix}-form-item-has-error{
+  &:not(.pro-group-flexible) {
+     // 错误状态：确保边框变红（优先级要高于上面的 border-left-width: 0）
+      .@{ant-prefix}-input,
+      .@{ant-prefix}-select .@{ant-prefix}-select-selector,
+      .@{ant-prefix}-input-number,
+      .@{ant-prefix}-input-number-input {
+        border-color: #ff4d4f !important;
+      }
+
+      // 错误状态下，中间元素也需要恢复左边框并设置为红色
+      &:not(:first-child) {
+        .@{ant-prefix}-input,
+        .@{ant-prefix}-select .@{ant-prefix}-select-selector,
+        .@{ant-prefix}-input-number {
+          border-left-color: #ff4d4f !important;
+          border-left-width: 1px !important;
+        }
+
+        .@{ant-prefix}-input-number-input {
+          border-left: 1px solid #ff4d4f !important;
+        }
+      }
+
+      // 聚焦时保持红色边框
+      .@{ant-prefix}-input:focus,
+      .@{ant-prefix}-select:focus .@{ant-prefix}-select-selector,
+      .@{ant-prefix}-input-number:focus,
+      .@{ant-prefix}-input-number:focus .@{ant-prefix}-input-number-input {
+        border-color: #ff4d4f !important;
+      }
+
+      // Select 组件的错误状态处理
+      .@{ant-prefix}-select.@{ant-prefix}-select-status-error .@{ant-prefix}-select-selector {
+        border-color: #ff4d4f !important;
+      }
+    }
+}
+
+// compact模式容器, 修复antd6定制模式下，Group组件内嵌套Form.Item时，表单样式问题
+.pro-group-compact-container {
+  .@{ant-prefix}-select {
+    border-radius: 0;
+    border-radius: 0;
+  }
+
+  > .pro-group-form-item:not(:first-child) {
+    .@{ant-prefix}-input,
+    .@{ant-prefix}-select,
+    .@{ant-prefix}-input-number {
+     margin-left: -1px;
+    }
+  }
+  .pro-group-separator-compact{
+    margin-left: -1px;
+  }
+
+
+  /* 1. 处理第一个子元素：左上、左下圆角 */
+  > .pro-group-form-item:first-child{
+    .pro-select .@{ant-prefix}-select, 
+    .@{ant-prefix}-select, 
+    .@{ant-prefix}-input-number  {
+      border-top-left-radius: 8px;
+      border-bottom-left-radius: 8px;
+    }
+  }
+
+  /* 2. 处理最后一个子元素：右上、右下圆角 */
+  > .pro-group-form-item:last-child {
+    .pro-select .@{ant-prefix}-select, 
+    .@{ant-prefix}-select, 
+    .@{ant-prefix}-input-number  {
+      border-top-right-radius: 8px;
+      border-bottom-right-radius: 8px;
+    }
+  }
+}
+.@{ant-prefix}-form-item-has-error  {
+  .pro-group-compact-container{
+    .@{ant-prefix}-select {
+      border-color: var(--zaui-danger);
+    }
+  }
+  
+}
+// compact模式容器 结束
+

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

@@ -0,0 +1,154 @@
+/// <reference types="lodash" />
+import { InternalNamePath, NamePath } from 'antd/lib/form/interface';
+import { FormInstance } from 'antd';
+import React from 'react';
+import type { GroupColumnType, SpaceType, FlexibleGroupColumnType } from '../propsType';
+import type { ProFormColumnType, ReactiveFunction } from '../../../render/propsType';
+export type EventArgs = any[];
+/**
+ * 插入间隔符
+ * @param columns 表单配置数组
+ * @returns
+ */
+export declare const insertSeparator: (columns: GroupColumnType[], space?: SpaceType) => any[];
+/** 带出event的组件默认取值方法 */
+export declare function defaultGetValueFromEvent(valuePropName: string, ...args: EventArgs): any;
+/** 转换names */
+export declare const transformNamesString: (arr: (string | string[])[]) => (string | string[])[];
+/**
+ * Input TextArea 小写自动转大写
+ * @param type 组件类型
+ * @param upperCase 是否小写转大写
+ * @returns {}
+ */
+export declare const isUpperCase: (type: string, upperCase: boolean) => any;
+interface Params {
+    form?: FormInstance;
+    index?: number;
+    type?: string;
+    namePath?: InternalNamePath;
+    disabled?: boolean | ReactiveFunction<any, boolean>;
+    show?: boolean | ReactiveFunction<any, boolean>;
+    component?: React.ReactNode | ReactiveFunction<any, React.ReactNode>;
+    fieldProps?: boolean | ReactiveFunction<any, boolean>;
+    name?: NamePath;
+    desensitization?: [number, number] | ReactiveFunction<any, [number, number]>;
+}
+/** 计算响应式参数的值 */
+export declare const getReactiveProps: (params: Params) => {
+    disabled: boolean;
+    show: boolean;
+    component: React.ReactNode;
+    fieldProps: boolean;
+    desensitization: [number, number];
+};
+type ValueTypeGetterParams = Pick<ProFormColumnType, 'valueType' | 'switchValue' | 'toISOString' | 'toCSTString' | 'disabled' | 'desensitization'> & {
+    type?: any;
+    mode?: string;
+};
+/** 获取当前字段的转换函数 */
+export declare const getValueTypeTrans: (params: ValueTypeGetterParams) => any;
+/** 执行所有中间件 返回处理后的值 */
+export declare const getValueMiddleware: (value: any, callbacks?: any[]) => any;
+/** 获取中间件处理后的value */
+export declare const valueFromEventWrapper: (column: any, args: any) => any;
+interface ContextProps {
+    form: FormInstance;
+    namePath?: InternalNamePath;
+    isView?: boolean;
+    names?: NamePath[];
+    index?: number;
+}
+interface GroupProps {
+    disabled?: boolean;
+    formDisabled?: boolean;
+}
+/**
+ * 创建FormItem属性（Hook版本）
+ */
+export declare const useFormItemProps: (column: FlexibleGroupColumnType, contextProps: ContextProps, groupProps: GroupProps) => {
+    rules: any[];
+    required: boolean;
+    label: string;
+    before?: React.ReactNode;
+    after?: React.ReactNode;
+    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>;
+    trim?: boolean;
+    normalize?: (value: any, prevValue: any, allValues: import("@rc-component/form/lib/interface").Store) => any;
+    children?: React.ReactNode | ((form: FormInstance<any>) => React.ReactNode);
+    vertical?: boolean;
+    id?: string;
+    className?: string;
+    hidden?: boolean;
+    style?: React.CSSProperties;
+    onReset?: () => void;
+    prefixCls?: string;
+    rootClassName?: string;
+    status?: "" | "success" | "error" | "warning" | "validating";
+    trigger?: string;
+    colon?: boolean;
+    isView?: boolean;
+    desensitization?: [number, number] | ReactiveFunction<any, [number, number]>;
+    getValueProps?: ((value: any) => Record<string, unknown>) & ((value: any) => Record<string, unknown>);
+    htmlFor?: string;
+    labelAlign?: import("antd/es/form/interface").FormLabelAlign;
+    labelCol?: import("antd").ColProps;
+    getValueFromEvent?: (...args: import("@rc-component/form/lib/interface").EventArgs) => any;
+    shouldUpdate?: import("@rc-component/form/lib/Field").ShouldUpdate<any>;
+    validateTrigger?: string | false | string[];
+    validateDebounce?: number;
+    valuePropName?: string;
+    messageVariables?: Record<string, string>;
+    initialValue?: any;
+    onMetaChange?: (meta: import("@rc-component/form/lib/Field").MetaEvent) => void;
+    preserve?: boolean;
+    isListField?: boolean;
+    isList?: boolean;
+    noStyle?: boolean;
+    hasFeedback?: boolean | {
+        icons: import("antd/es/form/FormItem").FeedbackIcons;
+    };
+    validateStatus?: "" | "success" | "error" | "warning" | "validating";
+    layout?: import("antd/es/form/Form").FormItemLayout;
+    wrapperCol?: import("antd").ColProps;
+    help?: React.ReactNode;
+    fieldId?: string;
+    valueType?: import("../../../render/propsType").ProFormValueType;
+    switchValue?: [any, any];
+    viewRender?: (value: any, record: any, { form, index, namePath, }: {
+        [key: string]: any;
+        form: FormInstance<any>;
+        index?: number;
+    }) => string | React.ReactElement<any, any>;
+    viewType?: import("../../../render/propsType").ViewType;
+    upperCase?: boolean;
+    toISOString?: boolean;
+    toCSTString?: boolean;
+    clearNotShow?: boolean;
+    name: any;
+    dependencies: any[];
+    tooltip: string | {
+        title: string;
+        icon?: React.ReactNode;
+    };
+    extra: React.ReactNode;
+    validateFirst: boolean | "parallel";
+    disabled: any;
+};
+/**
+ * 创建组件属性
+ */
+export declare const createComponentProps: (column: FlexibleGroupColumnType, formItemProps: any) => {
+    componentProps: import("lodash").Omit<any, "format" | "valueType" | "switchValue" | "dependNames" | "toISOString" | "toCSTString" | "clearNotShow" | "precision">;
+    formItemTransform: {
+        getValueProps: any;
+        normalize: any;
+    };
+};
+/**
+ * 配置验证组件
+ */
+export declare const validateChildren: (children: FlexibleGroupColumnType[]) => boolean;
+export {};