diff --git a/demoHtml/flex/index.html b/demoHtml/flex/index.html
index ebdb216..0324b89 100644
--- a/demoHtml/flex/index.html
+++ b/demoHtml/flex/index.html
@@ -127,10 +127,6 @@
                         </div>
                         <div class="form-item">
                             <label for="background">背景颜色</label>
-                            <!-- <input
-                                type="text"
-                                id="background"
-                            /> -->
                             <div id="background"></div>
                         </div>
                         <div class="form-item">
@@ -142,10 +138,7 @@
                         </div>
                         <div class="form-item">
                             <label for="color">文字颜色</label>
-                            <input
-                                type="text"
-                                id="color"
-                            />
+                            <div id="color"></div>
                         </div>
                         <div class="form-item">
                             <label for="text">文字内容</label>
@@ -208,10 +201,7 @@
                         </div>
                         <div class="form-item">
                             <label for="focusedStyle_background">获得焦点时背景颜色</label>
-                            <input
-                                type="text"
-                                id="focusedStyle_background"
-                            />
+                            <div id="focusedStyle_background"></div>
                         </div>
                         <div class="form-item">
                             <label for="focusedStyle_border_width">获得焦点时边框宽度</label>
@@ -222,10 +212,7 @@
                         </div>
                         <div class="form-item">
                             <label for="focusedStyle_border_color">获得焦点时边框颜色</label>
-                            <input
-                                type="text"
-                                id="focusedStyle_border_color"
-                            />
+                            <div id="focusedStyle_border_color"></div>
                         </div>
                         <div class="form-item">
                             <label for="focusedStyle_scale">获得焦点时边框缩放大小</label>
@@ -234,21 +221,6 @@
                                 id="focusedStyle_scale"
                             />
                         </div>
-
-                        <!-- <div class="form-actions">
-                            <button
-                                type="button"
-                                class="save-button"
-                            >
-                                保存组件
-                            </button>
-                            <button
-                                type="button"
-                                class="delete-button"
-                            >
-                                删除组件
-                            </button>
-                        </div> -->
                     </form>
                 </div>
             </div>
diff --git a/demoHtml/flex/js/index.js b/demoHtml/flex/js/index.js
index e902151..090c817 100644
--- a/demoHtml/flex/js/index.js
+++ b/demoHtml/flex/js/index.js
@@ -255,6 +255,56 @@
         }
     };
 
+    // 颜色选择器统一处理
+    var initColorPicker = function (type, component) {
+        let options = {
+            elem: `#${type}`,
+            alpha: true,
+            format: 'rgb',
+            done: function (color) {
+                const el = $(component.el);
+                let cptColor = rgbaToHex(color);
+                switch (type) {
+                    case 'background':
+                        component.background = cptColor;
+                        if (isScreen(component.type)) {
+                            component.image = '';
+                        }
+                        if (!cptColor) {
+                            if (isScreen(component.type)) {
+                                el.css('background', 'none');
+                            } else {
+                                el.find('.grid-stack-item-content').css('background', 'none');
+                            }
+                        } else {
+                            if (isScreen(component.type)) {
+                                el.css('background', color);
+                            } else {
+                                el.find('.grid-stack-item-content').css('background', color);
+                            }
+                        }
+                        break;
+                    case 'color':
+                        component.color = cptColor;
+                        el.find('span').css('color', cptColor);
+                        break;
+                    case 'focusedStyle_background':
+                        component.focusedStyle_background = cptColor;
+                        el.find('.grid-stack-item-content').css('background', cptColor);
+                        break;
+                    case 'focusedStyle_border_color':
+                        component.focusedStyle_border_color = cptColor;
+                        el.find('.grid-stack-item-content').css('border-color', cptColor);
+                        break;
+                }
+            },
+        };
+        if (component[type]) {
+            options.color = component[type];
+        }
+        layui.colorpicker.render(options);
+    };
+
     //将当前选中组件的属性显示在右侧列表中
     var setCurrentComponentProps = function (component) {
         // 设置标题
@@ -270,6 +320,7 @@
 
         if (!isScreen(component.type)) {
             form.find('#name').val(component.name);
+            form.find('#image').parent().show();
         } else {
             form.find('#name').parent().hide();
         }
@@ -282,36 +333,7 @@
         }
 
         if (component.hasOwnProperty('background')) {
-            let options = {
-                elem: '#background',
-                alpha: true,
-                format: 'rgb',
-                done: function (color) {
-                    const el = $(component.el);
-                    let cptColor = rgbaToHex(color);
-                    component.background = cptColor;
-                    if (isScreen(component.type)) {
-                        component.image = '';
-                    }
-                    if (!cptColor) {
-                        if (isScreen(component.type)) {
-                            el.css('background', 'none');
-                        } else {
-                            el.find('.grid-stack-item-content').css('background', 'none');
-                        }
-                    } else {
-                        if (isScreen(component.type)) {
-                            el.css('background', color);
-                        } else {
-                            el.find('.grid-stack-item-content').css('background', color);
-                        }
-                    }
-                },
-            };
-            if (component.background) {
-                options.color = component.background;
-            }
-            layui.colorpicker.render(options);
+            initColorPicker('background', component);
             form.find('#background').parent().show();
         } else {
             form.find('#background').parent().hide();
@@ -320,7 +342,7 @@
         if (component.type === 'text') {
             form.find('#text').val(component.text);
             form.find('#fontSize').val(component.fontSize);
-            form.find('#color').val(component.color);
+            initColorPicker('color', component);
             form.find('#fontWeight').val(component.fontWeight);
             form.find('#text').parent().show();
             form.find('#fontSize').parent().show();
@@ -342,9 +364,9 @@
             form.find('#upId').val(component.upId);
             form.find('#downId').val(component.downId);
 
-            form.find('#focusedStyle_background').val(component.focusedStyle_background);
+            initColorPicker('focusedStyle_background', component);
             form.find('#focusedStyle_border_width').val(component.focusedStyle_border_width);
-            form.find('#focusedStyle_border_color').val(component.focusedStyle_border_color);
+            initColorPicker('focusedStyle_border_color', component);
             form.find('#focusedStyle_scale').val(component.focusedStyle_scale);
 
             form.find('#eventsType').parent().show();
@@ -376,37 +398,9 @@
     // 定义组件设置配置策略
     const componentStrategies = {
         background: function (el, value, component) {
-            let options = {
-                elem: '#background',
-                alpha: true,
-                format: 'rgb',
-                done: function (color) {
-                    const el = $(component.el);
-                    let cptColor = rgbaToHex(color);
-                    component.background = cptColor;
-                    if (isScreen(component.type)) {
-                        component.image = '';
-                    }
-                    if (!cptColor) {
-                        if (isScreen(component.type)) {
-                            el.css('background', 'none');
-                        } else {
-                            el.find('.grid-stack-item-content').css('background', 'none');
-                        }
-                    } else {
-                        if (isScreen(component.type)) {
-                            el.css('background', color);
-                        } else {
-                            el.find('.grid-stack-item-content').css('background', color);
-                        }
-                    }
-                },
-            };
-            if (component.background) {
-                options.color = component.background;
-            }
-            layui.colorpicker.render(options);
+            initColorPicker('background', component);
 
+            // 初始化的时候调用设置
             if (!isScreen(component.type)) {
                 if (!value) {
                     el.find('.grid-stack-item-content').css('background', 'none');
@@ -428,8 +422,8 @@
             if (!value) return;
             el.find('span').css('font-size', value + 'px');
         },
-        color: function (el, value) {
-            if (!value) return;
+        color: function (el, value, component) {
+            initColorPicker('color', component);
             el.find('span').css('color', value);
         },
         text: function (el, value) {
@@ -441,6 +435,7 @@
             el.find('span').css('font-weight', value);
         },
         focusedStyle_background: function (el, value, component) {
+            initColorPicker('focusedStyle_background', component);
             if (!value) return;
             if (currentComponent && currentComponent.id === component.id) {
                 el.find('.grid-stack-item-content').css('background', value);
@@ -453,6 +448,7 @@
             }
         },
         focusedStyle_border_color: function (el, value, component) {
+            initColorPicker('focusedStyle_border_color', component);
             if (!value) return;
             if (currentComponent && currentComponent.id === component.id) {
                 el.find('.grid-stack-item-content').css('border-color', value);