feat: 组件标签支持定宽模式

feat: 响应式布局（草稿）

src/components/SimpleForm/src/SimpleForm.vue

@@ -1,9 +1,9 @@
 <template>
-    <div>
+    <div ref="formWrap">
         <Form ref="formRef" :label-col="getProps?.labelCol" :labelAlign="getProps?.labelAlign" :layout="getProps?.layout" :model="formModel" :wrapper-col="getProps?.wrapperCol" @keypress.enter="handleEnterPress">
             <Row v-bind="getRow">
                 <template v-for="schema in getSchemas" :key="schema.field">
-                    <Col v-if="getIfShow(schema, formModel[schema.field])" v-show="getIsShow(schema, formModel[schema.field])" :span="schema.colProps?.span">
+                    <Col v-if="getIfShow(schema, formModel[schema.field])" v-show="getIsShow(schema, formModel[schema.field])" :span="getColWidth(schema)">
                         <template v-if="showComponent(schema)">
                             <SimpleFormItem v-model:value="formModel[schema.field]" :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj" :schema="schema" />
                         </template>
@@ -27,8 +27,8 @@
 </template>
 <script lang="ts" setup>
     import { Form, FormInstance, Row, Col, Modal, message } from 'ant-design-vue';
-    import { cloneDeep, isArray, isBoolean, isFunction, isObject, isString, uniqBy, isNil } from 'lodash-es';
-    import { computed, reactive, ref, provide, unref, nextTick, toRaw, createVNode, inject, onMounted } from 'vue';
+    import { cloneDeep, isArray, isBoolean, isFunction, isObject, isString, uniqBy, isNil, debounce } from 'lodash-es';
+    import { computed, reactive, ref, provide, unref, nextTick, toRaw, createVNode, inject, onMounted, onUnmounted } from 'vue';
     import { CardComponentProps, FormActionType, FormProps, FormSchema, GridComponentProps, TabComponentProps, regTestProps, requestProps } from '../../Form/src/types/form';
     import SimpleFormItem from './components/SimpleFormItem.vue';
     import { NamePath, ValidateOptions } from 'ant-design-vue/lib/form/interface';
@@ -45,6 +45,8 @@
     const { t } = useI18n();
     const { notification } = useMessage();
     const formRef = ref<FormInstance>();
+    const formWrap = ref<HTMLElement>();
+    const wrapWidth = ref(960);
 
     const propsRef = ref<Partial<FormProps>>({});
 
@@ -97,7 +99,35 @@
         };
     });
 
+    function getWrapSize() {
+        const rect = formWrap.value?.getBoundingClientRect();
+        wrapWidth.value = rect?.width || 960;
+    }
+
+    function getColWidth(schema: any) {
+        const compProps = schema.componentProps;
+        if (compProps.responsive) {
+            if (compProps.respNewRow) {
+                return 24; // 响应式布局下独立成行
+            } else {
+                const wrapValue = wrapWidth.value;
+                if (wrapValue > import.meta.env.VITE_RESP_LG_WIDTH) {
+                    return 8;
+                } else if (wrapValue > import.meta.env.VITE_RESP_MD_WIDTH) {
+                    return 12;
+                } else {
+                    return 24;
+                }
+            }
+        }
+        return schema.colProps?.span;
+    }
+
+    const debGetWrapSize = debounce(getWrapSize, 300);
+
     onMounted(() => {
+        window.addEventListener('resize', debGetWrapSize);
+        getWrapSize();
         nextTick(() => {
             //添加隐藏组件
             if (unref(getProps)?.hiddenComponent?.length) {
@@ -108,6 +138,10 @@
         });
     });
 
+    onUnmounted(() => {
+        window.removeEventListener('resize', debGetWrapSize);
+    });
+
     function showComponent(schema) {
         return props.isWorkFlow ? !noShowWorkFlowComponents.includes(schema.type) : !noShowGenerateComponents.includes(schema.type);
     }

src/components/SimpleForm/src/components/SimpleFormItem.vue

@@ -336,7 +336,19 @@
     });
 
     const labelCol = computed(() => {
-        return unref(getComponentsProps).span ? { span: unref(getComponentsProps).span } : unref(itemLabelWidthProp).labelCol;
+        // 列宽支持两种模式 labelWidthMode = flex为百分比宽度 fix 为定宽
+        const commonLabelCol = unref(itemLabelWidthProp).labelCol;
+        const itemLabelCol = unref(getComponentsProps).labelCol;
+        const { labelWidthMode, labelFixWidth } = props.schema.componentProps as any;
+        let labelCol: any = {};
+        if (labelWidthMode !== 'fix') {
+            labelCol.span = itemLabelCol?.span || commonLabelCol?.span;
+        } else {
+            labelCol.style = {
+                width: `${labelFixWidth || 120}px`
+            };
+        }
+        return labelCol;
     });
 
     const rules = computed(() => {