@zat-design/sisyphus-react 4.0.0-beta.9 → 4.0.1

package/es/ProForm/components/combination/Group/index.js

@@ -1,4 +1,8 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import { Space } from 'antd';
 import React from 'react';
 import { isEmpty, omit } from 'lodash';
@@ -7,19 +11,18 @@ import { insertSeparator } from "./utils";
 import { useTransformColumns } from "./hooks";
 import ProForm from "../../../../ProForm";
 import ComRender from "./component/ComRender";
+import FlexibleGroup from "./component/FlexibleGroup";
 
 /**
- * 1. 外层过滤FormItem相关属性, 但是子元素上的 required [disabled] [show] rules [fieldProps] [component] 需要取到并
- * 2.
- *
- * render内部能力 show, component, value, onChange, disabled, clearNotShow, fieldProps
+ * 传统数组模式Group组件（保持向后兼容）
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-var Group = props => {
+var LegacyGroup = props => {
+  var _ref, _fieldProps;
   var children = props.children,
     className = props.className,
     _props$space = props.space,
-    space = _props$space === void 0 ? {
+    propsSpace = _props$space === void 0 ? {
       size: 12
     } : _props$space,
     value = props.value,
@@ -28,8 +31,15 @@ var Group = props => {
     id = props.id,
     isParentView = props.isView,
     formDisabled = props.disabled,
-    _props$split = props.split,
-    split = _props$split === void 0 ? '/' : _props$split;
+    separator = props.separator,
+    split = props.split;
+
+  // 向后兼容处理：优先使用 separator，如果没有则使用 split，最后使用默认值
+  var finalSeparator = (_ref = separator !== null && separator !== void 0 ? separator : split) !== null && _ref !== void 0 ? _ref : '/';
+
+  // 支持从 fieldProps.space 获取 space 配置
+  var fieldPropsSpace = (_fieldProps = props.fieldProps) === null || _fieldProps === void 0 ? void 0 : _fieldProps.space;
+  var space = fieldPropsSpace || propsSpace;
   var contextProps = ProForm.useFieldProps() || {};
   var names = contextProps.names,
     name = contextProps.name,
@@ -62,6 +72,7 @@ var Group = props => {
   var columns = insertSeparator(columnsProps, space);
   var nextClassName = classnames({
     'pro-group': true,
+    'pro-group-unflexible': true,
     'pro-group-diy-width': columns.some(item => {
       var _item$fieldProps;
       return item === null || item === void 0 || (_item$fieldProps = item.fieldProps) === null || _item$fieldProps === void 0 || (_item$fieldProps = _item$fieldProps.style) === null || _item$fieldProps === void 0 ? void 0 : _item$fieldProps.width;
@@ -75,26 +86,71 @@ var Group = props => {
   if (nextIsView && isEmpty(value)) {
     return (otherProps === null || otherProps === void 0 ? void 0 : otherProps.viewEmpty) || '-';
   }
+
+  // compact模式专用：为每个字段创建可见的Form.Item，并应用宽度样式
+  var renderCompactFormItems = () => {
+    var elements = [];
+    columns.forEach((column, index) => {
+      var _column$fieldProps;
+      // 检测是否有自定义宽度
+      var childWidth = column === null || column === void 0 || (_column$fieldProps = column.fieldProps) === null || _column$fieldProps === void 0 || (_column$fieldProps = _column$fieldProps.style) === null || _column$fieldProps === void 0 ? void 0 : _column$fieldProps.width;
+      var formItemStyle = childWidth ? {
+        width: childWidth
+      } : undefined;
+      var formItemClassName = childWidth ? 'pro-group-form-item pro-group-form-item-has-width' : 'pro-group-form-item';
+
+      // 创建新的 column 对象，避免直接修改原对象
+      var newColumn = _objectSpread({}, column);
+      newColumn.otherProps = otherProps;
+
+      // 如果子组件有自定义宽度，将子组件的宽度改为 100%，让它填充 Form.Item
+      if (childWidth) {
+        var _newColumn$fieldProps;
+        newColumn.fieldProps = _objectSpread(_objectSpread({}, newColumn.fieldProps), {}, {
+          style: _objectSpread(_objectSpread({}, (_newColumn$fieldProps = newColumn.fieldProps) === null || _newColumn$fieldProps === void 0 ? void 0 : _newColumn$fieldProps.style), {}, {
+            width: '100%'
+          })
+        });
+      }
+
+      // 自定义间隔移除对应参数
+      if (newColumn !== null && newColumn !== void 0 && newColumn.separator) {
+        delete newColumn.separator;
+        delete newColumn.otherProps;
+      }
+
+      // 传统模式 compact 模式：将 Form.Item 相关的 props 传递给 ComRender
+      // ComRender 内部会处理 Form.Item 的渲染，避免嵌套
+      var dependencies = names && names.length > 0 ? names.filter(n => n !== newColumn.name) : undefined;
+      var formElement = /*#__PURE__*/_jsx(ComRender, _objectSpread({
+        contextProps: contextProps,
+        isView: nextIsView,
+        formItemClassName: formItemClassName,
+        formItemStyle: formItemStyle,
+        dependencies: dependencies
+      }, newColumn), newColumn.name || index);
+      elements.push(formElement);
+
+      // 添加分隔符
+      if (newColumn !== null && newColumn !== void 0 && newColumn.separator && index < columns.length - 1) {
+        elements.push( /*#__PURE__*/_jsx("span", {
+          className: "pro-group-separator-compact",
+          children: newColumn.separator
+        }, `separator-${newColumn.name || index}`));
+      }
+    });
+    return /*#__PURE__*/_jsx("div", {
+      className: "ant-space ant-space-horizontal ant-space-compact pro-group-compact-container",
+      children: elements
+    });
+  };
   return /*#__PURE__*/_jsx("div", {
     className: nextClassName,
     id: id,
-    children: (space.compact || space !== null && space !== void 0 && space.separator) && !nextIsView ? /*#__PURE__*/_jsx(Space.Compact, {
-      children: columns.map((column, index) => {
-        column.otherProps = otherProps;
-        // 自定义间隔移除对应参数
-        if (column !== null && column !== void 0 && column.separator) {
-          delete column.separator;
-          delete column.otherProps;
-        }
-        return /*#__PURE__*/_jsx(ComRender, _objectSpread({
-          contextProps: contextProps,
-          isView: nextIsView
-        }, column), column.name || index);
-      })
-    }) : /*#__PURE__*/_jsx(Space, _objectSpread(_objectSpread({
+    children: (space.compact || space !== null && space !== void 0 && space.separator) && !nextIsView ? renderCompactFormItems() : /*#__PURE__*/_jsx(Space, _objectSpread(_objectSpread({
       align: "start"
     }, omit(space, ['separator', 'compact'])), {}, {
-      split: nextIsView ? split : null,
+      separator: nextIsView ? finalSeparator : null,
       size: nextIsView ? 0 : space.size,
       children: columns.map((column, index) => {
         column.otherProps = otherProps;
@@ -110,4 +166,32 @@ var Group = props => {
     }))
   });
 };
+
+/**
+ * Group组件 - 支持传统模式和灵活模式
+ * - 有names属性 → 传统数组模式（保持向后兼容）
+ * - 无names属性 → 新的灵活模式（子组件必须配置name）
+ */
+var Group = props => {
+  var _ref2 = props,
+    children = _ref2.children,
+    names = _ref2.names,
+    otherProps = _ref2.otherProps;
+
+  // names可能在props.names或props.otherProps.names中（来自ProForm的传递）
+  var actualNames = names || (otherProps === null || otherProps === void 0 ? void 0 : otherProps.names);
+
+  // 模式检测：基于names属性判断使用哪种模式
+  // 传统模式：有names属性且为非空数组
+  // 灵活模式：无names属性或names为空，children中的子项必须配置name
+  var isLegacyMode = Array.isArray(actualNames) && actualNames.length > 0;
+  if (isLegacyMode) {
+    // 传统模式：使用names数组管理值，确保names被传递给LegacyGroup
+    return /*#__PURE__*/_jsx(LegacyGroup, _objectSpread(_objectSpread({}, props), {}, {
+      names: actualNames
+    }));
+  }
+  // 灵活模式：子组件独立管理name和rules
+  return /*#__PURE__*/_jsx(FlexibleGroup, _objectSpread({}, props));
+};
 export default Group;

package/es/ProForm/components/combination/Group/propsType.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { FormItemProps, ModalFuncProps, SpaceProps } from 'antd';
+import type { RuleObject } from 'antd/es/form';
 import { FormInstance } from 'antd/es/form/Form';
 import { NamePath } from 'antd/lib/form/interface';
 import type { ColumnTypeMap, FunctionArgs, ProFormValueType, ReactiveFunction, ViewType } from '../../render/propsType';
@@ -18,7 +19,9 @@ export interface SpaceType extends SpaceProps {
     size?: number;
 }
 export interface GroupType {
-    children?: GroupColumnType[];
+    children?: GroupColumnType[] | FlexibleGroupColumnType[];
+    /** 传统模式：字段名称数组（与children索引对应） */
+    names?: NamePath[];
     space?: SpaceType;
     className?: string;
     id?: string;
@@ -28,6 +31,10 @@ export interface GroupType {
     onChange?: (value: any[] | null, options?: any[]) => void;
     otherProps?: any;
     /** 分隔符 */
+    separator?: string | React.ReactNode;
+    /**
+     * @deprecated 已弃用，请使用 separator 替代
+     */
     split?: string | React.ReactNode;
 }
 export type GroupColumnType<Values = any> = {
@@ -54,6 +61,42 @@ export type GroupColumnType<Values = any> = {
     getValueProps?: (value: any) => Record<string, unknown>;
     desensitization?: [number, number] | ReactiveFunction<Values, [number, number]>;
 } & ColumnTypeMap & FormItemProps;
+/**
+ * 灵活模式子组件类型定义（新模式）
+ */
+export interface FlexibleGroupColumnType<Values = any> extends Omit<GroupColumnType<Values>, 'names' | 'tooltip' | 'rules'> {
+    /** 字段名称，新模式下必须 */
+    name: NamePath;
+    /** 字段标签 */
+    label?: React.ReactNode;
+    /** 校验规则，支持函数化 */
+    rules?: RuleObject[] | ReactiveFunction<Values, RuleObject[]>;
+    /** 是否必填 */
+    required?: boolean;
+    /** 字段依赖 */
+    dependencies?: NamePath[];
+    /** 提示信息 */
+    tooltip?: string | {
+        title: string;
+        icon?: React.ReactNode;
+    };
+    /** 额外信息 */
+    extra?: React.ReactNode;
+    /** 前置内容 */
+    before?: React.ReactNode;
+    /** 后置内容 */
+    after?: React.ReactNode;
+    /** 确认操作 */
+    confirm?: boolean | ModalFuncProps | FunctionArgs<Values, boolean | ModalFuncProps>;
+    /** 显示控制，支持函数化 */
+    show?: boolean | ReactiveFunction<Values, boolean>;
+    /** 禁用状态，支持函数化 */
+    disabled?: boolean | ReactiveFunction<Values, boolean>;
+    /** 自定义组件，支持函数化 */
+    component?: React.ReactNode | ReactiveFunction<Values, React.ReactNode>;
+    /** 字段属性，支持函数化 */
+    fieldProps?: any | ReactiveFunction<Values, any>;
+}
 /**
  * 兼容旧命名导出
  */

package/es/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模式容器 结束
+