@cloudbase/weda-ui 3.5.2 → 3.6.0

package/dist/web/components/formdetail/index.css

@@ -8,6 +8,7 @@
 .form-detail-wrap
   .form-detail-content-wrap
   .form-detail-group-header-container {
+  margin-top: 0;
   height: 48px;
   display: flex;
   align-items: center;
@@ -38,7 +39,7 @@
 .form-detail-wrap .form-detail-add-button,
 .form-detail-wrap .form-detail-delete-button {
   cursor: pointer;
-  color: #0052d9;
+  color: var(--wd-color-brand, #0052d9);
   font-size: 14px;
 }
 
@@ -183,12 +184,6 @@
 .form-detail-wrap.disabled .form-detail-add-button .t-icon {
   color: #bbd3fb !important;
 }
-.form-detail-wrap.disabled .form-detail-group-content-container {
-  cursor: not-allowed;
-}
-.form-detail-wrap.disabled .form-detail-group-content-container > div {
-  pointer-events: none;
-}
 .form-detail-wrap.disabled
   .form-detail-group-content-container
   .weui-uploader__input {
@@ -202,10 +197,6 @@
   display: none;
 }
 
-.form-detail-wrap.readOnly .form-detail-group-content-container > div {
-  pointer-events: none;
-}
-
 /* 兼容旧的子表单样式,不能采用flex布局 */
 
 .pc-form-detail-wrap .form-detail-group-parent-container {
@@ -264,9 +255,12 @@
 /* 升级后组件样式兼容 */
 .form-detail-wrap .form-detail-add-button .wd-typography,
 .form-detail-wrap .form-detail-delete-button .wd-typography {
-  color: #0052d9;
+  color: var(--wd-color-brand, #0052d9);
   margin-bottom: 0;
 }
+.form-detail-wrap .form-detail-add-button .wd-icon {
+  color: var(--wd-color-brand, #0052d9);
+}
 
 /* 增加表格样式 */
 .form-detail-wrap.form-detail-table
@@ -294,7 +288,7 @@
 .form-detail-wrap.form-detail-table .weda-ui .wedatea2td-form__controls {
   padding: 0;
 }
-.form-detail-wrap.form-detail-list .wd-grid-col.wd-g-align-self-auto {
+.form-detail-wrap.form-detail-list [data-role='wd-col'].wd-g-align-self-auto {
   width: 100%;
   flex: 0 0 auto;
 }
@@ -337,7 +331,7 @@
   .form-detail-content-wrap {
   margin-top: 0;
 }
-.form-detail-wrap.form-detail-list .wd-grid-col.tableIndexContainer {
+.form-detail-wrap.form-detail-list [data-role='wd-col'].tableIndexContainer {
   display: none;
 }
 .form-detail-wrap .form-detail-content-wrap .wd-grid-row {
@@ -380,9 +374,9 @@
   min-width: 100%;
   display: block;
   overflow: auto;
-  border-left: 1px solid #dcdcdc;
-  border-right: 1px solid #dcdcdc;
-  border-bottom: 1px solid #dcdcdc;
+  border-left: 1px solid var(--wd-color-border-separator, #dcdcdc);
+  border-right: 1px solid var(--wd-color-border-separator, #dcdcdc);
+  border-bottom: 1px solid var(--wd-color-border-separator, #dcdcdc);
   margin-bottom: 8px;
   border-radius: 5px;
   overflow-y: hidden;
@@ -405,8 +399,8 @@
   border-top-right-radius: 5px;
   font-weight: 600;
 }
-.form-detail-table .wd-grid-col.form-detail-table-option-container,
-.form-detail-table .wd-grid-col.form-detail-table-delete-btn-container {
+.form-detail-table [data-role='wd-col'].form-detail-table-option-container,
+.form-detail-table [data-role='wd-col'].form-detail-table-delete-btn-container {
   flex: 1 0 0%;
   width: 140px;
   max-width: 140px;
@@ -416,7 +410,7 @@
   align-items: center;
   display: flex;
 }
-.form-detail-table .wd-grid-col.tableIndexContainer {
+.form-detail-table [data-role='wd-col'].tableIndexContainer {
   width: 60px;
   max-width: 60px;
   align-items: center;
@@ -426,13 +420,13 @@
 .form-detail-table
   .form-detail-table-header-container
   .form-detail-group-content-container
-  .wd-grid-col {
+  [data-role='wd-col'] {
   padding: 12px;
 }
 .form-detail-table
   .form-detail-content-wrap
   .form-detail-group-content-container
-  .wd-grid-col {
+  [data-role='wd-col'] {
   padding: 16px 12px;
 }
 .form-detail-table .tableHeaderCellContainer {
@@ -444,17 +438,17 @@
   position: absolute;
   left: -10px;
 }
-.form-detail-table .wd-grid-col.form-detail-table-option-container {
+.form-detail-table [data-role='wd-col'].form-detail-table-option-container {
   background-color: #f3f3f3;
   z-index: 2;
 }
-.form-detail-table .wd-grid-col.form-detail-table-delete-btn-container {
+.form-detail-table [data-role='wd-col'].form-detail-table-delete-btn-container {
   background-color: #fff;
 }
 .form-detail-table.scroll
-  .wd-grid-col.form-detail-table-option-container::before,
+  [data-role='wd-col'].form-detail-table-option-container::before,
 .form-detail-table.scroll
-  .wd-grid-col.form-detail-table-delete-btn-container
+  [data-role='wd-col'].form-detail-table-delete-btn-container
   ::before {
   content: '';
   position: absolute;
@@ -474,11 +468,12 @@
 
 .form-detail-wrap.form-detail-table
   .form-detail-group-parent-container
-  .wd-grid-col-lg.formrichtext
+  [data-role='wd-col']-lg.formrichtext
   .bf-content {
   height: 161px;
 }
-.form-detail-wrap .wd-grid-row > div {
+.form-detail-wrap .wd-grid-row > div,
+.form-detail-wrap .wd-grid .wd-grid-row > div {
   margin: 0;
 }
 
@@ -489,3 +484,52 @@
 .form-detail-wrap.form-detail-table .wd-form-item {
   margin: 0;
 }
+
+/* 标准化样式 start */
+.wd-form.wd-form--weui .wd-form-item.wd-form-detail-root > .wd-form-item-wrap,
+.wd-form-item.wd-form-detail-root > .wd-form-item-wrap {
+  border-bottom: none;
+}
+
+/* h5 */
+.wd-form-item.wd-h5-form-detail-root.wd-form-item--weui.wd-form-item--detail-vertical-left,
+.wd-form-item.wd-h5-form-detail-root.wd-form-item--weui.wd-form-item--detail-vertical-right {
+  padding: 0;
+}
+
+.wd-form-item.wd-h5-form-detail-root.wd-form-item--weui.wd-form-item--detail-vertical-left
+  > .wd-form-item-wrap
+  > .wd-form-item-wrap__label,
+.wd-form-item.wd-h5-form-detail-root.wd-form-item--weui.wd-form-item--detail-vertical-right
+  > .wd-form-item-wrap
+  > .wd-form-item-wrap__label {
+  padding: var(--wd-form-item-pd);
+}
+
+.wd-form-item.wd-h5-form-detail-root.wd-form-item--weui.wd-form-item--detail-vertical-left
+  > .wd-form-item-wrap
+  > .wd-form-item-wrap__control,
+.wd-form-item.wd-h5-form-detail-root.wd-form-item--weui.wd-form-item--detail-vertical-right
+  > .wd-form-item-wrap
+  > .wd-form-item-wrap__control {
+  padding: 0;
+  min-height: auto;
+}
+
+/* pc */
+.wd-form-item.wd-pc-form-detail-root {
+  margin-bottom: 0;
+}
+.wd-form-item.wd-form-detail-root
+  .pc-form-detail-wrap
+  .form-detail-group-parent-container {
+  width: 100%;
+}
+
+.wd-form-item.wd-pc-form-detail-root
+  > .wd-form-item-wrap
+  > .wd-form-item-wrap__control {
+  overflow-x: hidden;
+}
+
+/* 标准化样式 end */

package/dist/web/components/formdetail/index.d.ts

@@ -16,21 +16,29 @@ type TCompRef = ICompRef<{
     remove: (key: string) => void;
 }>;
 export declare const reorderContext: (data: any, name: any, isPureArray: any) => any;
-export declare const newContextItem: (childFormItem: any, name: any, isPureArray: any) => {
+export declare const newContextItem: (childFormItem: any, name: any, isPureArray: any, parent: any) => {
     index: number;
     _id: string;
 };
-export declare const changeHandle: ({ type, name, data, childFormItem, isPureArray, params, }: {
+export declare const changeHandle: ({ type, name, data, childFormItem, isPureArray, params, parent, }: {
     type: any;
     name: any;
     data: any;
     childFormItem: any;
     isPureArray: any;
     params: any;
+    parent: any;
 }) => any;
 declare const FormDetailCom: React.ForwardRefExoticComponent<WdFormDetailProps & React.RefAttributes<TCompRef>>;
 export default FormDetailCom;
 export interface WdFormDetailProps extends CommonPropsType, DataType {
     wrapClassName?: string;
     groupClassName?: string;
+    classRoot?: string;
+    isPureArray?: boolean;
+    fieldAuth?: string;
+    hasInitValue?: boolean;
+    isWdFormDetail?: boolean;
+    readOnly?: boolean;
+    disabled?: boolean;
 }

package/dist/web/components/formdetail/index.js

@@ -1,19 +1,17 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, forwardRef, useImperativeHandle, useState, useCallback, useRef, } from 'react';
-import { useResizeObserver } from '@react-hookz/web';
-// import { WdFormItem, WdInputWrap } from '../wd-form-item';
+import { useResizeObserver, useDebouncedEffect } from '@react-hookz/web';
+import { WdFormItem } from '../wd-form-item';
 import classNames from '../../utils/classnames';
 import { usePlatform, randomStr, isInIde } from '../../utils/platform';
 import isObjectEqual from '../../utils/isObjectEqual';
 import { useFormInputTrait, useParentForm } from '../form-input-hooks';
+import { FormDetailStatusContext } from '../../utils/widget-api';
 import { debug } from '../../utils/console';
 import { noop } from '../../utils/constant';
-import { WdText } from '../wd-text';
 import './style';
-// 获取明细组件子项初始值
-const getChildFormItem = (isPureArray, name, parent) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    let childFormItem = [];
+const getChildFieldSchema = (parent, name) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     let fieldSchema = null;
     if ('model' === (parent === null || parent === void 0 ? void 0 : parent.datasourceType)) {
         fieldSchema = (_c = (_b = (_a = parent === null || parent === void 0 ? void 0 : parent.dataSourceProfile) === null || _a === void 0 ? void 0 : _a.schema) === null || _b === void 0 ? void 0 : _b.properties) === null || _c === void 0 ? void 0 : _c[name];
@@ -23,9 +21,18 @@ const getChildFormItem = (isPureArray, name, parent) => {
         const inParams = (_f = (_e = (_d = parent === null || parent === void 0 ? void 0 : parent.dataSourceProfile) === null || _d === void 0 ? void 0 : _d.methods) === null || _e === void 0 ? void 0 : _e.find((i) => i.name === method)) === null || _f === void 0 ? void 0 : _f.inParams;
         fieldSchema = (_g = inParams === null || inParams === void 0 ? void 0 : inParams.properties) === null || _g === void 0 ? void 0 : _g[name];
     }
-    childFormItem = ((_h = fieldSchema === null || fieldSchema === void 0 ? void 0 : fieldSchema.items) === null || _h === void 0 ? void 0 : _h.properties)
-        ? Object.keys((_j = fieldSchema === null || fieldSchema === void 0 ? void 0 : fieldSchema.items) === null || _j === void 0 ? void 0 : _j.properties)
-        : [];
+    const childFieldSchema = (_h = fieldSchema === null || fieldSchema === void 0 ? void 0 : fieldSchema.items) === null || _h === void 0 ? void 0 : _h.properties;
+    return childFieldSchema;
+};
+// 获取明细组件子项初始值
+const getChildFormItem = ({ isPureArray, name, parent, defaultValue }) => {
+    let childFormItem = [];
+    const childFieldSchema = getChildFieldSchema(parent, name);
+    childFormItem = childFieldSchema ? Object.keys(childFieldSchema) : [];
+    // 兼容旧的子表单，form上取不到schema信息，取value值兜底
+    if (!(childFormItem === null || childFormItem === void 0 ? void 0 : childFormItem.length)) {
+        childFormItem = (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue[0]) ? Object.keys(defaultValue[0]) : [];
+    }
     // 纯数组，默认key值为'arrayItem'
     if (isPureArray) {
         childFormItem = ['arrayItem'];
@@ -46,21 +53,23 @@ export const reorderContext = (data, name, isPureArray) => data.map((i, index) =
     item.index = index;
     return item;
 });
-export const newContextItem = (childFormItem, name, isPureArray) => {
+export const newContextItem = (childFormItem, name, isPureArray, parent) => {
+    const childFieldSchema = getChildFieldSchema(parent, name);
     const mock = { index: 0, _id: randomStr() };
     childFormItem === null || childFormItem === void 0 ? void 0 : childFormItem.forEach((i) => {
+        var _a, _b;
         mock[i] = {
             name: isPureArray ? `${name}[0]` : `${name}[0].${i}`,
-            value: null,
+            value: (_b = (_a = childFieldSchema === null || childFieldSchema === void 0 ? void 0 : childFieldSchema[i]) === null || _a === void 0 ? void 0 : _a.default) !== null && _b !== void 0 ? _b : null,
         };
     });
     return mock;
 };
-export const changeHandle = ({ type, name, data, childFormItem, isPureArray, params, }) => {
+export const changeHandle = ({ type, name, data, childFormItem, isPureArray, params, parent, }) => {
     switch (type) {
         case 'add': {
-            const mock = newContextItem(childFormItem, name, isPureArray);
-            data.push({ ...mock, _id: randomStr() });
+            const mock = newContextItem(childFormItem, name, isPureArray, parent);
+            data.push({ _id: randomStr(), ...mock });
             data = reorderContext(data, name, isPureArray);
             break;
         }
@@ -89,33 +98,42 @@ export const changeHandle = ({ type, name, data, childFormItem, isPureArray, par
 };
 const FormDetailCom = forwardRef(function FormDetail(props, ref) {
     var _a;
-    const { className, id, style, children, events, name, isPureArray, fieldAuth = 'rw', $widget, hasInitValue = false, isWdFormDetail, viewType = 'table', label, } = props;
+    const { className, id, style, children, events, name, isPureArray, fieldAuth = 'rw', $widget, hasInitValue = false, isWdFormDetail, viewType = 'table', label, classRoot = 'form-detail', layout: _currentLayout, $node, } = props;
     const [innerHandle, setInnerHandle] = useState({});
     const inputRef = useRef({});
-    const { value: initDetailValue, readOnly, disabled, } = useFormInputTrait({
+    const { value: initDetailValue, readOnly, disabled, visible, onChange: _onChange, } = useFormInputTrait({
         value: props.value,
         name,
         // @ts-expect-error inputRef 没用
         inputRef,
         readOnly: props.readOnly,
         disabled: props.disabled,
+        status: props.status,
         required: false,
         requiredMsg: '',
         $widget,
         setInnerHandle,
         onChange: noop,
+        $node,
     });
     const tableRef = useRef(null);
     const [isTableView, setIsTableView] = useState(false);
     const [detailValue, setDetailValue] = useState([]);
     const [contextData, setContextData] = useState([]);
+    const [isInit, setIsInit] = useState(false);
     const [childFormItem, setChildFormItem] = useState([]);
     const [hasScroll, setHasScroll] = useState(false);
     const platform = usePlatform();
     const parent = useParentForm($widget);
-    const init = useCallback((defaultValue, childFormItem, isWdFormDetail = false) => {
+    const init = useCallback((defaultValue, isWdFormDetail = false) => {
         var _a;
         const formDetailItemValue = {};
+        const childFormItem = getChildFormItem({
+            isPureArray,
+            name,
+            parent,
+            defaultValue,
+        });
         let initialValues = [];
         try {
             initialValues = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.map((i, index) => {
@@ -136,14 +154,14 @@ const FormDetailCom = forwardRef(function FormDetail(props, ref) {
                     });
                 }
                 item.index = index;
-                item._id = randomStr();
+                item._id = item._id || randomStr();
                 return item;
             });
         }
         catch (error) {
             console.error(error);
         }
-        const mock = newContextItem(childFormItem, name, isPureArray);
+        const mock = newContextItem(childFormItem, name, isPureArray, parent);
         let data = (initialValues === null || initialValues === void 0 ? void 0 : initialValues.length) ? initialValues : [mock];
         // 新的明细组件，开放初始值，根据初始值设置上下文
         if (isWdFormDetail) {
@@ -153,8 +171,7 @@ const FormDetailCom = forwardRef(function FormDetail(props, ref) {
         (_a = events === null || events === void 0 ? void 0 : events.onDataChange) === null || _a === void 0 ? void 0 : _a.call(events, {
             data,
         });
-        return formDetailItemValue;
-    }, [isPureArray, name]);
+    }, [events, isPureArray, name, parent]);
     const addShadow = useCallback(() => {
         var _a, _b;
         // table body 滚动区域
@@ -168,37 +185,52 @@ const FormDetailCom = forwardRef(function FormDetail(props, ref) {
     // 初始化明细组件子项初始值
     useEffect(() => {
         if ((parent === null || parent === void 0 ? void 0 : parent.dataSourceProfile) && name) {
-            const childFormItem = getChildFormItem(isPureArray, name, parent);
+            const childFormItem = getChildFormItem({
+                isPureArray,
+                name,
+                parent,
+                defaultValue: initDetailValue,
+            });
             setChildFormItem(childFormItem);
         }
-    }, [isPureArray, name, (_a = parent === null || parent === void 0 ? void 0 : parent.dataSourceProfile) === null || _a === void 0 ? void 0 : _a.name]);
+    }, [initDetailValue, isPureArray, name, (_a = parent === null || parent === void 0 ? void 0 : parent.dataSourceProfile) === null || _a === void 0 ? void 0 : _a.name]);
+    const setFormDetailValue = useCallback((value) => {
+        if (!isObjectEqual(value, detailValue) && childFormItem.length > 0) {
+            setDetailValue(value || []);
+            init(value || [], isWdFormDetail);
+            setIsInit(true);
+        }
+    }, [childFormItem, detailValue, init, isWdFormDetail]);
     // 初始化context的值
     useEffect(() => {
         logger.debug('initDetailValue', initDetailValue);
-        if (!isObjectEqual(initDetailValue, detailValue) &&
-            childFormItem.length > 0) {
-            setDetailValue(initDetailValue || []);
-            init(initDetailValue || [], childFormItem, isWdFormDetail);
-        }
-        return () => {
-            setDetailValue([]);
-        };
+        setFormDetailValue(initDetailValue);
         // 只有initDetailValue的值改变的时候才执行
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [initDetailValue]);
-    useEffect(() => {
+    useDebouncedEffect(() => {
         var _a;
-        let childFormItem = (initDetailValue === null || initDetailValue === void 0 ? void 0 : initDetailValue[0])
-            ? Object.keys(initDetailValue[0])
-            : [];
-        // 纯数组，默认key值为'arrayItem'
-        if (isPureArray) {
-            childFormItem = ['arrayItem'];
+        // 子表单默认值变化时，若form值不同步，则主动同步（默认值为变量的情况）
+        if (isInit &&
+            detailValue &&
+            !isObjectEqual((_a = parent === null || parent === void 0 ? void 0 : parent.value) === null || _a === void 0 ? void 0 : _a[name], detailValue)) {
+            parent.__setValueImmediate__({ [name]: detailValue }, false);
+            setIsInit(false);
         }
+    }, [detailValue, isInit, name], 15);
+    useEffect(() => {
+        var _a;
+        const childFormItem = getChildFormItem({
+            isPureArray,
+            name,
+            parent,
+            defaultValue: initDetailValue,
+        });
         setChildFormItem(childFormItem);
         // 只有在编辑器里,或存在初始值的时候,或新明细组件（wdFormDetail），才初始化明细单项
         if (isInIde() || hasInitValue || isWdFormDetail) {
-            init(initDetailValue, childFormItem, isWdFormDetail);
+            setDetailValue(initDetailValue || []);
+            init(initDetailValue, isWdFormDetail);
         }
         else {
             (_a = events === null || events === void 0 ? void 0 : events.onDataChange) === null || _a === void 0 ? void 0 : _a.call(events, { data: [] });
@@ -207,10 +239,26 @@ const FormDetailCom = forwardRef(function FormDetail(props, ref) {
         return () => {
             var _a;
             (_a = events === null || events === void 0 ? void 0 : events.onDataChange) === null || _a === void 0 ? void 0 : _a.call(events, { data: [] });
+            setDetailValue([]);
         };
         // 只执行一次;
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
+    const updateFormDetailValue = useCallback((contextData) => {
+        // 更新子表单value值
+        const value = isPureArray
+            ? contextData === null || contextData === void 0 ? void 0 : contextData.map((i) => { var _a; return ((_a = i === null || i === void 0 ? void 0 : i.arrayItem) === null || _a === void 0 ? void 0 : _a.value) || ''; })
+            : contextData === null || contextData === void 0 ? void 0 : contextData.map((i) => {
+                const item = {};
+                childFormItem === null || childFormItem === void 0 ? void 0 : childFormItem.forEach((j) => {
+                    var _a;
+                    item[j] = (_a = i[j]) === null || _a === void 0 ? void 0 : _a.value;
+                });
+                return item;
+            });
+        setDetailValue(value);
+        _onChange(value);
+    }, [_onChange, childFormItem, isPureArray]);
     const onChange = useCallback((type, params) => {
         var _a;
         if (disabled ||
@@ -219,16 +267,31 @@ const FormDetailCom = forwardRef(function FormDetail(props, ref) {
             (parent === null || parent === void 0 ? void 0 : parent.formType) === 'read') {
             return;
         }
-        let data = JSON.parse(JSON.stringify(contextData));
+        let data;
+        try {
+            data = JSON.parse(JSON.stringify(contextData));
+        }
+        catch (e) { }
+        data = Array.isArray(data) ? data : [];
+        const _childFormItem = (childFormItem === null || childFormItem === void 0 ? void 0 : childFormItem.length)
+            ? childFormItem
+            : getChildFormItem({
+                isPureArray,
+                name,
+                parent,
+                defaultValue: initDetailValue,
+            });
         data = changeHandle({
             type,
             name,
             data,
-            childFormItem,
+            childFormItem: _childFormItem,
             isPureArray,
             params,
+            parent,
         });
         if (!isObjectEqual(data, contextData)) {
+            updateFormDetailValue(data);
             setContextData(data);
             (_a = events === null || events === void 0 ? void 0 : events.onDataChange) === null || _a === void 0 ? void 0 : _a.call(events, { data });
         }
@@ -239,8 +302,10 @@ const FormDetailCom = forwardRef(function FormDetail(props, ref) {
         parent === null || parent === void 0 ? void 0 : parent.formType,
         contextData,
         name,
+        initDetailValue,
         childFormItem,
         isPureArray,
+        updateFormDetailValue,
         events,
     ]);
     useEffect(() => {
@@ -258,6 +323,12 @@ const FormDetailCom = forwardRef(function FormDetail(props, ref) {
     useImperativeHandle(ref, () => {
         return {
             ...innerHandle,
+            setValue: (value) => {
+                setFormDetailValue(value);
+            },
+            getValue() {
+                return detailValue;
+            },
             getConfig() {
                 return {
                     componentType: 'formdetail',
@@ -275,8 +346,25 @@ const FormDetailCom = forwardRef(function FormDetail(props, ref) {
                 },
             },
             isTableView,
+            name,
+            value: detailValue,
+            label,
+            visible,
+            disabled,
+            readOnly,
         };
-    }, [innerHandle, onChange, isTableView]);
+    }, [
+        innerHandle,
+        onChange,
+        isTableView,
+        name,
+        detailValue,
+        label,
+        visible,
+        disabled,
+        readOnly,
+        setFormDetailValue,
+    ]);
     // useEffect(() => {
     //   const initArr = lodashGet(parent, 'initialValues.name', null);
     //   logger.debug('initialValue', initArr, name);
@@ -293,29 +381,38 @@ const FormDetailCom = forwardRef(function FormDetail(props, ref) {
     // }, [$widget, name, parent]);
     // fieldAuth返回n,则为无权限
     const isAuthVisible = fieldAuth !== 'n';
+    // 子表单状态
+    const [status, updateStatus] = useState('edit');
+    useEffect(() => {
+        if (readOnly) {
+            updateStatus('readOnly');
+        }
+        else if (disabled || !(fieldAuth === null || fieldAuth === void 0 ? void 0 : fieldAuth.includes('w'))) {
+            updateStatus('disabled');
+        }
+        else {
+            updateStatus('edit');
+        }
+    }, [disabled, readOnly, fieldAuth]);
     const formDetailRender = () => {
-        return isAuthVisible ? (_jsxs("fieldset", { ref: tableRef, disabled: disabled || readOnly || (parent === null || parent === void 0 ? void 0 : parent.formType) === 'read', className: classNames({
-                'weda-ui': true,
-                'gsd-h5-react-formitem': true,
-                'form-detail-wrap': true,
-                'pc-form-detail-wrap': platform === 'pc',
-                'h5-form-detail-wrap': platform === 'h5',
-                [className]: className,
-                disabled: disabled || !(fieldAuth === null || fieldAuth === void 0 ? void 0 : fieldAuth.includes('w')),
-                readOnly: readOnly || (parent === null || parent === void 0 ? void 0 : parent.formType) === 'read',
-                'form-detail-list': !isTableView,
-                'form-detail-table': isWdFormDetail && platform === 'pc' && viewType === 'table',
-                scroll: hasScroll,
-            }), id: id, style: style, role: "container", "data-testid": "formDetail", children: [isWdFormDetail && (_jsx("div", { className: "form-detail-group-label-container", children: _jsx(WdText, { text: label, contenteditable: null }) })), _jsx(_Fragment, { children: children })] })) : null;
+        return isAuthVisible ? (_jsx(FormDetailStatusContext.Provider, { value: status, children: _jsx("fieldset", { ref: tableRef, 
+                // disabled={disabled || readOnly || parent?.formType === 'read'}
+                className: classNames({
+                    'weda-ui': true,
+                    'gsd-h5-react-formitem': true,
+                    'form-detail-wrap': true,
+                    'pc-form-detail-wrap': platform === 'pc',
+                    'h5-form-detail-wrap': platform === 'h5',
+                    disabled: disabled || !(fieldAuth === null || fieldAuth === void 0 ? void 0 : fieldAuth.includes('w')),
+                    readOnly: readOnly || (parent === null || parent === void 0 ? void 0 : parent.formType) === 'read',
+                    'form-detail-list': !isTableView,
+                    'form-detail-table': isWdFormDetail && platform === 'pc' && viewType === 'table',
+                    scroll: hasScroll,
+                }, className), id: id, style: style, role: "container", "data-testid": "formDetail", children: _jsx(_Fragment, { children: children }) }) })) : null;
     };
+    const layout = platform === 'h5' ? 'vertical' : _currentLayout;
+    const formItemProps = { ...props, classRoot, layout, isWdFormDetail };
     // 组件规范化后再考虑是否改动
-    // return isWdFormDetail ? (
-    //   <WdFormItem {...props}>
-    //     <WdInputWrap {...props}>{formDetailRender()}</WdInputWrap>
-    //   </WdFormItem>
-    // ) : (
-    //   formDetailRender()
-    // );
-    return formDetailRender();
+    return isWdFormDetail ? (_jsx(WdFormItem, { ...formItemProps, children: formDetailRender() })) : (formDetailRender());
 });
 export default FormDetailCom;

package/dist/web/components/graphicCard/index.css

@@ -107,12 +107,13 @@
 .weda-graphic-card .weda-graphic-card__col .weda-graphic-card__btn--text {
   font-size: 1em;
   line-height: 1.5714em;
-  color: #0052d9;
+  color: var(--wd-color-brand, #0052d9);
   margin-right: 8px;
 }
 
 .weda-graphic-card .weda-graphic-card__btn-icon {
   margin-bottom: 2px;
+  color: var(--wd-color-brand, #0052d9);
 }
 
 .weda-graphic-card .weda-graphic-card__col .weda-graphic-card__title {

package/dist/web/components/graphicCard/index.d.ts

@@ -15,6 +15,7 @@ export type INavOption = {
     outerUrl?: string;
     newPage?: boolean;
     withParams?: boolean;
+    packageName?: string;
 };
 export interface IGraphicCardPropsType extends CommonPropsType {
     /**