feat: 拖拽布局-长度，宽度发生变化时处理

demoHtml/flex/css/index.css

@@ -120,6 +120,8 @@ html {
 .component-item span,
 .grid-stack-item span {
     font-size: 14px;
+    width: 100%;
+    text-align: center;
 }
 .image-container {
     width: 100%;

demoHtml/flex/index.html

@@ -154,6 +154,33 @@
                                 <label for="background">{{= i18n.$t('user.background') }}</label>
                                 <div id="background"></div>
                             </div>
+                            <div class="form-item">
+                                <label for="width">{{= i18n.$t('user.width') }}</label>
+                                <input
+                                    disabled
+                                    type="text"
+                                    id="width"
+                                    placeholder="{{= i18n.$t('user.please_input') }}"
+                                />
+                            </div>
+                            <div class="form-item">
+                                <label for="height">{{= i18n.$t('user.height') }}</label>
+                                <input
+                                    disabled
+                                    type="text"
+                                    id="height"
+                                    placeholder="{{= i18n.$t('user.please_input') }}"
+                                />
+                            </div>
+                            <div class="form-item">
+                                <label for="textAlign">{{= i18n.$t('user.text_align') }}</label>
+                                <select id="textAlign">
+                                    <option value="">{{= i18n.$t('user.please_select') }}</option>
+                                    <option value="left">left</option>
+                                    <option value="center">center</option>
+                                    <option value="right">right</option>
+                                </select>
+                            </div>
                             <div class="form-item">
                                 <label for="fontSize">{{= i18n.$t('user.font_size') }}</label>
                                 <input

demoHtml/flex/js/i18n.js

@@ -34,6 +34,9 @@ var userLangConfig = {
             yes: '是',
             no: '否',
             background: '背景颜色',
+            width: '宽度',
+            height: '高度',
+            text_align: '文本对齐',
             font_size: '文字大小',
             font_color: '文字颜色',
             text_content: '文字内容',
@@ -101,6 +104,9 @@ var userLangConfig = {
             yes: 'yes',
             no: 'no',
             background: 'background color',
+            width: 'width',
+            height: 'height',
+            text_align: 'text align',
             font_size: 'font size',
             font_color: 'font color',
             text_content: 'text content',

demoHtml/flex/js/index.js

@@ -45,6 +45,7 @@
                 childrenType: '',
                 name: userLangConfig[locale].user.text_default_name,
                 background: '#fff',
+                textAlign: 'center',
                 fontSize: 14,
                 color: '#333',
                 text: userLangConfig[locale].user.text_default_content,
@@ -146,6 +147,13 @@
                 handleRemoveComponent(item);
             });
         });
+
+        self['grid'].on('change', function (_event, itemArray) {
+            console.log(itemArray, '这里触发了布局的change事件');
+            itemArray.forEach((item) => {
+                handleChangeComponent(item, self);
+            });
+        });
     };
 
     // 处理添加组件之后的操作
@@ -246,6 +254,15 @@
         });
     };
 
+    var handleChangeComponent = (component) => {
+        if (currentComponent && currentComponent.id === component.id) {
+            let width = component.w * (1920 / 24);
+            $('#width').val(width);
+            let height = component.h * cellHeight * 2;
+            $('#height').val(height);
+        }
+    };
+
     var handleRemoveComponent = (component) => {
         if (currentComponent && currentComponent.id === component.id) {
             currentComponent = null;
@@ -358,16 +375,24 @@
             form.find('#background').parent().hide();
         }
 
+        let width = isScreen(component.type) ? component.width : component.w * (1920 / 24);
+        form.find('#width').val(width);
+        let height = isScreen(component.type) ? component.height : component.h * cellHeight * 2;
+        form.find('#height').val(height);
+
         if (component.type === 'text') {
+            form.find('#textAlign').val(component.textAlign);
             form.find('#text').val(component.text);
             form.find('#fontSize').val(component.fontSize);
             initColorPicker('color', component);
             form.find('#fontWeight').val(component.fontWeight);
+            form.find('#textAlign').parent().show();
             form.find('#text').parent().show();
             form.find('#fontSize').parent().show();
             form.find('#color').parent().show();
             form.find('#fontWeight').parent().show();
         } else {
+            form.find('#textAlign').parent().hide();
             form.find('#text').parent().hide();
             form.find('#fontSize').parent().hide();
             form.find('#color').parent().hide();
@@ -416,6 +441,14 @@
 
     // 定义组件设置配置策略
     const componentStrategies = {
+        width: function (el, value, component) {
+            let width = isScreen(component.type) ? component.width : component.w * (1920 / 24);
+            $('#width').val(width);
+        },
+        height: function (el, value, component) {
+            let height = isScreen(component.type) ? component.height : component.h * cellHeight * 2;
+            $('#height').val(height);
+        },
         background: function (el, value, component) {
             initColorPicker('background', component);
 
@@ -437,6 +470,10 @@
                 el.find('img').attr('src', value);
             }
         },
+        textAlign: function (el, value) {
+            if (!value) return;
+            el.find('span').css('text-align', value);
+        },
         fontSize: function (el, value) {
             if (!value) return;
             el.find('span').css('font-size', value + 'px');
@@ -514,6 +551,7 @@
         childrenType: { event: 'change', property: 'childrenType' },
         background: { event: 'blur', property: 'background' },
         image: { event: 'change', property: 'image' },
+        textAlign: { event: 'change', property: 'textAlign' },
         fontSize: { event: 'blur', property: 'fontSize' },
         color: { event: 'blur', property: 'color' },
         text: { event: 'blur', property: 'text' },