From 63be968b2346e9ff944856c3ccf643debf050a2c Mon Sep 17 00:00:00 2001
From: LCJ-MinYa <1049468118@qq.com>
Date: Fri, 30 Jan 2026 10:43:39 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=8B=96=E6=8B=BD=E5=B8=83=E5=B1=80-?=
 =?UTF-8?q?=E9=95=BF=E5=BA=A6=EF=BC=8C=E5=AE=BD=E5=BA=A6=EF=BC=8C=E6=96=87?=
 =?UTF-8?q?=E6=9C=AC=E5=AF=B9=E9=BD=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 demoHtml/flex/css/index.css |  2 ++
 demoHtml/flex/index.html    | 27 +++++++++++++++++++++++++++
 demoHtml/flex/js/i18n.js    |  6 ++++++
 demoHtml/flex/js/index.js   | 22 ++++++++++++++++++++++
 4 files changed, 57 insertions(+)

diff --git a/demoHtml/flex/css/index.css b/demoHtml/flex/css/index.css
index cd9f064..dcf752e 100644
--- a/demoHtml/flex/css/index.css
+++ b/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%;
diff --git a/demoHtml/flex/index.html b/demoHtml/flex/index.html
index 1500055..98dc290 100644
--- a/demoHtml/flex/index.html
+++ b/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
diff --git a/demoHtml/flex/js/i18n.js b/demoHtml/flex/js/i18n.js
index 28d1bb7..35d86c1 100644
--- a/demoHtml/flex/js/i18n.js
+++ b/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',
diff --git a/demoHtml/flex/js/index.js b/demoHtml/flex/js/index.js
index 4904e62..97e4c04 100644
--- a/demoHtml/flex/js/index.js
+++ b/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,
@@ -358,16 +359,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 +425,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 +454,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 +535,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' },