diff --git a/designer-base/src/main/java/com/fr/design/jxbrowser/JxUIPane.java b/designer-base/src/main/java/com/fr/design/jxbrowser/JxUIPane.java
index 97ffeadc75..463cf39b7d 100644
--- a/designer-base/src/main/java/com/fr/design/jxbrowser/JxUIPane.java
+++ b/designer-base/src/main/java/com/fr/design/jxbrowser/JxUIPane.java
@@ -206,12 +206,11 @@ public class JxUIPane<T> extends ModernUIPane<T> {
      * 执行一段js
      *
      * @param javaScript 待执行的js脚本
+     * @see JxUIPane#executeJS(String)
      */
     public void executeJavaScript(String javaScript) {
         if (browser != null) {
-            browser.mainFrame().ifPresent(frame -> {
-                frame.executeJavaScript(javaScript);
-            });
+            browser.mainFrame().ifPresent(frame -> frame.executeJavaScript(javaScript));
         }
     }
 
@@ -227,6 +226,22 @@ public class JxUIPane<T> extends ModernUIPane<T> {
         return Optional.ofNullable(frame.executeJavaScript(name));
     }
 
+    /**
+     * 执行js脚本并返回,使用范围包含{@link JxUIPane#executeJavaScript(String)},可以代替使用
+     *
+     * @param name 变量命名
+     * @return js对象
+     */
+    public <P> Optional<P> executeJS(String name) {
+        if (browser != null) {
+            Optional<Frame> frame = browser.mainFrame();
+            if (frame.isPresent()) {
+                return Optional.ofNullable(frame.get().executeJavaScript(name));
+            }
+        }
+        return Optional.empty();
+    }
+
     /**
      * 由于自定义scheme目前走的是url，因此路径会被自动转化，比如windows路径下对冒号问题
      * C:\\abc 变成 /C/abc，这里对冒号进行编码转义
diff --git a/designer-base/src/main/java/com/fr/design/mainframe/mobile/provider/checkboxgroup/CapsuleCheckboxGroupStyleProvider.java b/designer-base/src/main/java/com/fr/design/mainframe/mobile/provider/checkboxgroup/CapsuleCheckboxGroupStyleProvider.java
new file mode 100644
index 0000000000..3f84336c33
--- /dev/null
+++ b/designer-base/src/main/java/com/fr/design/mainframe/mobile/provider/checkboxgroup/CapsuleCheckboxGroupStyleProvider.java
@@ -0,0 +1,41 @@
+package com.fr.design.mainframe.mobile.provider.checkboxgroup;
+
+import com.fr.design.fun.impl.AbstractMobileWidgetStyleProvider;
+import com.fr.design.i18n.Toolkit;
+import com.fr.design.mainframe.mobile.ui.MobileStyleCustomDefinePane;
+import com.fr.design.mainframe.mobile.ui.radiogroup.CapsuleCustomDefinePane;
+import com.fr.form.ui.mobile.MobileStyle;
+import com.fr.form.ui.mobile.radiogroup.CapsuleMobileStyle;
+
+/**
+ * 移动端复选框provider
+ * @author crawford.zhou
+ * @since 11.0
+ * Created on 2024/1/25
+ */
+public class CapsuleCheckboxGroupStyleProvider extends AbstractMobileWidgetStyleProvider {
+    @Override
+    public Class<? extends MobileStyle> classForMobileStyle() {
+        return CapsuleMobileStyle.class;
+    }
+
+    @Override
+    public Class<? extends MobileStyleCustomDefinePane> classForWidgetAppearance() {
+        return CapsuleCustomDefinePane.class;
+    }
+
+    @Override
+    public String xTypeForWidget() {
+        return "checkboxgroup";
+    }
+
+    @Override
+    public String displayName() {
+        return Toolkit.i18nText("Fine-Plugin-RadioGroup_Capsule_Button");
+    }
+
+    @Override
+    public int currentAPILevel() {
+        return CURRENT_LEVEL;
+    }
+}
diff --git a/designer-base/src/main/java/com/fr/design/mainframe/mobile/provider/checkboxgroup/ImageCheckboxGroupStyleProvider.java b/designer-base/src/main/java/com/fr/design/mainframe/mobile/provider/checkboxgroup/ImageCheckboxGroupStyleProvider.java
new file mode 100644
index 0000000000..bafb50a43b
--- /dev/null
+++ b/designer-base/src/main/java/com/fr/design/mainframe/mobile/provider/checkboxgroup/ImageCheckboxGroupStyleProvider.java
@@ -0,0 +1,40 @@
+package com.fr.design.mainframe.mobile.provider.checkboxgroup;
+
+import com.fr.design.fun.impl.AbstractMobileWidgetStyleProvider;
+import com.fr.design.i18n.Toolkit;
+import com.fr.design.mainframe.mobile.ui.MobileStyleCustomDefinePane;
+import com.fr.design.mainframe.mobile.ui.radiogroup.ImageCustomDefinePane;
+import com.fr.form.ui.mobile.MobileStyle;
+import com.fr.form.ui.mobile.radiogroup.ImageMobileStyle;
+/**
+ * 移动端复选框provider
+ * @author crawford.zhou
+ * @since 11.0
+ * Created on 2024/1/25
+ */
+public class ImageCheckboxGroupStyleProvider extends AbstractMobileWidgetStyleProvider {
+    @Override
+    public Class<? extends MobileStyle> classForMobileStyle() {
+        return ImageMobileStyle.class;
+    }
+
+    @Override
+    public Class<? extends MobileStyleCustomDefinePane> classForWidgetAppearance() {
+        return ImageCustomDefinePane.class;
+    }
+
+    @Override
+    public String xTypeForWidget() {
+        return "checkboxgroup";
+    }
+
+    @Override
+    public String displayName() {
+        return Toolkit.i18nText("Fine-Plugin-RadioGroup_Graphic_Button");
+    }
+
+    @Override
+    public int currentAPILevel() {
+        return CURRENT_LEVEL;
+    }
+}
diff --git a/designer-base/src/main/java/com/fr/design/mainframe/mobile/provider/checkboxgroup/UnitedCheckboxGroupStyleProvider.java b/designer-base/src/main/java/com/fr/design/mainframe/mobile/provider/checkboxgroup/UnitedCheckboxGroupStyleProvider.java
new file mode 100644
index 0000000000..81249fee8c
--- /dev/null
+++ b/designer-base/src/main/java/com/fr/design/mainframe/mobile/provider/checkboxgroup/UnitedCheckboxGroupStyleProvider.java
@@ -0,0 +1,40 @@
+package com.fr.design.mainframe.mobile.provider.checkboxgroup;
+
+import com.fr.design.fun.impl.AbstractMobileWidgetStyleProvider;
+import com.fr.design.i18n.Toolkit;
+import com.fr.design.mainframe.mobile.ui.MobileStyleCustomDefinePane;
+import com.fr.design.mainframe.mobile.ui.radiogroup.UnitedCustomDefinePane;
+import com.fr.form.ui.mobile.MobileStyle;
+import com.fr.form.ui.mobile.radiogroup.UnitedMobileStyle;
+/**
+ * 移动端复选框provider
+ * @author crawford.zhou
+ * @since 11.0
+ * Created on 2024/1/25
+ */
+public class UnitedCheckboxGroupStyleProvider extends AbstractMobileWidgetStyleProvider {
+    @Override
+    public Class<? extends MobileStyle> classForMobileStyle() {
+        return UnitedMobileStyle.class;
+    }
+
+    @Override
+    public Class<? extends MobileStyleCustomDefinePane> classForWidgetAppearance() {
+        return UnitedCustomDefinePane.class;
+    }
+
+    @Override
+    public String xTypeForWidget() {
+        return "checkboxgroup";
+    }
+
+    @Override
+    public String displayName() {
+        return Toolkit.i18nText("Fine-Plugin-RadioGroup_Linkage_Button");
+    }
+
+    @Override
+    public int currentAPILevel() {
+        return CURRENT_LEVEL;
+    }
+}
diff --git a/designer-base/src/main/java/com/fr/design/mainframe/mobile/ui/radiogroup/CapsuleCustomDefinePane.java b/designer-base/src/main/java/com/fr/design/mainframe/mobile/ui/radiogroup/CapsuleCustomDefinePane.java
index 072a7a57a1..6bc3821b06 100644
--- a/designer-base/src/main/java/com/fr/design/mainframe/mobile/ui/radiogroup/CapsuleCustomDefinePane.java
+++ b/designer-base/src/main/java/com/fr/design/mainframe/mobile/ui/radiogroup/CapsuleCustomDefinePane.java
@@ -36,11 +36,23 @@ public class CapsuleCustomDefinePane extends MobileStyleCustomDefinePane {
     private UIComboBox custom;
     private JPanel centerPane;
 
+    // 按钮排布+按钮排布下拉框panel；
+    private JPanel buttonAlignPane;
+
+    // 固定列数 数字panel
+    private JPanel columnSizePane;
     private UISpinner leftSpinner;
     private UISpinner rightSpinner;
     private UISpinner topSpinner;
     private UISpinner bottomSpinner;
 
+    private UIComboBox layoutTypeCombo;
+
+    private UIComboBox buttonAlignCombo;
+
+
+    private UISpinner columnSizeSpinner;
+
     private JRadioButton leftAlignRadioButton;
     private JRadioButton centerAlignRadioButton;
 
@@ -121,13 +133,95 @@ public class CapsuleCustomDefinePane extends MobileStyleCustomDefinePane {
         return FRGUIPaneFactory.createVerticalFlowLayout_Pane(true, FlowLayout.LEADING, 0, 10);
     }
 
+    /**
+     * 初始化布局方式下拉框
+     */
+    private void initLayoutCombo() {
+        layoutTypeCombo = new UIComboBox(new String[]{
+                Toolkit.i18nText("Fine-Plugin-RadioGroup_Layout_Single_Line"),
+                Toolkit.i18nText("Fine-Plugin-RadioGroup_Layout_Auto"),
+                Toolkit.i18nText("Fine-Plugin-RadioGroup_Layout_Fixed")
+        });
+        layoutTypeCombo.setPreferredSize(new Dimension(DesignerUtils.NORMAL_COMBO_WIDTH, 20));
+        layoutTypeCombo.addItemListener(new ItemListener() {
+            @Override
+            public void itemStateChanged(ItemEvent e) {
+                if (layoutTypeCombo.getSelectedIndex() == DesignerUtils.K_LAYOUT_SINGLE) {
+                    buttonAlignPane.setVisible(true);
+                    columnSizePane.setVisible(false);
+                }
+                if (layoutTypeCombo.getSelectedIndex() == DesignerUtils.K_LAYOUT_AUTO) {
+                    buttonAlignPane.setVisible(false);
+                    columnSizePane.setVisible(false);
+                }
+                if (layoutTypeCombo.getSelectedIndex() == DesignerUtils.K_LAYOUT_FIXED) {
+                    buttonAlignPane.setVisible(false);
+                    columnSizePane.setVisible(true);
+                }
+            }
+        });
+    }
+
+    /**
+     * 初始化按钮排布面板
+     */
+    private void initButtonAlignPane() {
+        UILabel buttonAlignLabel = DesignerUtils.createConfigLabel(Toolkit.i18nText("Fine-Plugin-RadioGroup_Alignment"));
+        buttonAlignCombo = new UIComboBox(new String[]{
+                Toolkit.i18nText("Fine-Plugin-RadioGroup_Alignment_Nature"),
+                Toolkit.i18nText("Fine-Plugin-RadioGroup_Alignment_Center"),
+        });
+        buttonAlignCombo.setPreferredSize(new Dimension(DesignerUtils.LARGE_COMBO_WIDTH, 20));
+        buttonAlignPane = TableLayoutHelper.createGapTableLayoutPane(
+                new Component[][]{new Component[]{buttonAlignLabel, buttonAlignCombo}},
+                TableLayoutHelper.FILL_LASTCOLUMN, IntervalConstants.INTERVAL_L1,
+                LayoutConstants.VGAP_SMALL
+        );
+    }
+
+    /**
+     * 初始化固定列数面板
+     */
+    private void initColumnSizePane() {
+        UILabel columnSizeLabel = DesignerUtils.createConfigLabel("");
+        columnSizeSpinner = new UISpinner(0, Integer.MAX_VALUE, 1, DesignerUtils.INITIAL_COLUMN_SIZE);
+        columnSizeSpinner.setPreferredSize(new Dimension(DesignerUtils.LARGE_COMBO_WIDTH, 20));
+        columnSizePane = TableLayoutHelper.createGapTableLayoutPane(new Component[][]{new Component[]{columnSizeLabel, columnSizeSpinner}}, TableLayoutHelper.FILL_LASTCOLUMN, IntervalConstants.INTERVAL_L1, LayoutConstants.VGAP_SMALL);
+        columnSizePane.setVisible(false);
+    }
+
+    private JPanel initVPaddingConfig() {
+
+        UILabel topLabel = new UILabel(Toolkit.i18nText("Fine-Plugin-RadioGroup_Padding_Top"));
+        topSpinner = new UISpinner(0, Integer.MAX_VALUE, 1, DesignerUtils.kDefaultVerticalPadding);
+
+        UILabel bottomLabel = new UILabel(Toolkit.i18nText("Fine-Plugin-RadioGroup_Padding_Bottom"));
+        bottomSpinner = new UISpinner(0, Integer.MAX_VALUE, 1, DesignerUtils.kDefaultVerticalPadding);
+        JPanel topSpinnerPanel = TableLayoutHelper.createGapTableLayoutPane(new Component[][]{new Component[]{topLabel, topSpinner}}, TableLayoutHelper.FILL_LASTCOLUMN, IntervalConstants.INTERVAL_L1, LayoutConstants.VGAP_SMALL);
+        JPanel bottomSpinnerPanel = TableLayoutHelper.createGapTableLayoutPane(new Component[][]{new Component[]{bottomLabel, bottomSpinner}}, TableLayoutHelper.FILL_LASTCOLUMN, IntervalConstants.INTERVAL_L1, LayoutConstants.VGAP_SMALL);
+
+        return TableLayoutHelper.createGapTableLayoutPane(new Component[][]{new Component[]{topSpinnerPanel, bottomSpinnerPanel}}, TableLayoutHelper.FILL_LASTCOLUMN, IntervalConstants.INTERVAL_W1, LayoutConstants.VGAP_SMALL);
+
+    }
+    private JPanel initHPaddingConfig() {
+        UILabel leftLabel = new UILabel(Toolkit.i18nText("Fine-Plugin-RadioGroup_Padding_Left"));
+        leftSpinner = new UISpinner(0, Integer.MAX_VALUE, 1, DesignerUtils.kDefaultHorizontalPadding);
+
+        UILabel rightLabel = new UILabel(Toolkit.i18nText("Fine-Plugin-RadioGroup_Padding_Right"));
+        rightSpinner = new UISpinner(0, Integer.MAX_VALUE, 1, DesignerUtils.kDefaultHorizontalPadding);
+        JPanel leftSpinnerPanel = TableLayoutHelper.createGapTableLayoutPane(new Component[][]{new Component[]{leftLabel, leftSpinner}}, TableLayoutHelper.FILL_LASTCOLUMN, IntervalConstants.INTERVAL_L1, LayoutConstants.VGAP_SMALL);
+        JPanel rightSpinnerPanel = TableLayoutHelper.createGapTableLayoutPane(new Component[][]{new Component[]{rightLabel, rightSpinner}}, TableLayoutHelper.FILL_LASTCOLUMN, IntervalConstants.INTERVAL_L1, LayoutConstants.VGAP_SMALL);
+
+        return TableLayoutHelper.createGapTableLayoutPane(new Component[][]{new Component[]{leftSpinnerPanel, rightSpinnerPanel}}, TableLayoutHelper.FILL_LASTCOLUMN, IntervalConstants.INTERVAL_W1, LayoutConstants.VGAP_SMALL);
+    }
+
     private void addPaddingPane() {
+        double p = TableLayout.PREFERRED;
+        double[] rowSize = {p, p, p};
+        double[] columnSize = {p, p};
         centerPane.add(DesignerUtils.createTitleSplitLine(Toolkit.i18nText("Fine-Plugin-RadioGroup_Layout")));
-
         UILabel paddingHintLabel = DesignerUtils.createConfigLabel(Toolkit.i18nText("Fine-Plugin-RadioGroup_Button_Padding"));
         UILabel emptyHintLabel = DesignerUtils.createConfigLabel(Toolkit.i18nText(""));
-        UILabel buttonAlignHintLabel = DesignerUtils.createConfigLabel(Toolkit.i18nText("Fine-Plugin-RadioGroup_Alignment"));
-
         UILabel leftLabel = new UILabel(Toolkit.i18nText("Fine-Plugin-RadioGroup_Padding_Left"));
         leftSpinner = new UISpinner(0, Integer.MAX_VALUE, 1, DesignerUtils.kDefaultHorizontalPadding);
 
@@ -140,33 +234,33 @@ public class CapsuleCustomDefinePane extends MobileStyleCustomDefinePane {
         UILabel bottomLabel = new UILabel(Toolkit.i18nText("Fine-Plugin-RadioGroup_Padding_Bottom"));
         bottomSpinner = new UISpinner(0, Integer.MAX_VALUE, 1, DesignerUtils.kDefaultVerticalPadding);
 
+        UILabel layoutTypeLabel = DesignerUtils.createConfigLabel(Toolkit.i18nText("Fine-Plugin-RadioGroup_Layout_Type"));
+        initLayoutCombo();
+        initButtonAlignPane();
+        initColumnSizePane();
         leftAlignRadioButton = new JRadioButton(Toolkit.i18nText("Fine-Plugin-RadioGroup_Alignment_Left"), true);
         centerAlignRadioButton = new JRadioButton(Toolkit.i18nText("Fine-Plugin-RadioGroup_Alignment_Center"), false);
 
-        JPanel leftSpinnerPanel = TableLayoutHelper.createGapTableLayoutPane(new Component[][]{new Component[]{leftLabel, leftSpinner}}, TableLayoutHelper.FILL_LASTCOLUMN, IntervalConstants.INTERVAL_L1, LayoutConstants.VGAP_SMALL);
-        JPanel rightSpinnerPanel = TableLayoutHelper.createGapTableLayoutPane(new Component[][]{new Component[]{rightLabel, rightSpinner}}, TableLayoutHelper.FILL_LASTCOLUMN, IntervalConstants.INTERVAL_L1, LayoutConstants.VGAP_SMALL);
-        JPanel topSpinnerPanel = TableLayoutHelper.createGapTableLayoutPane(new Component[][]{new Component[]{topLabel, topSpinner}}, TableLayoutHelper.FILL_LASTCOLUMN, IntervalConstants.INTERVAL_L1, LayoutConstants.VGAP_SMALL);
-        JPanel bottomSpinnerPanel = TableLayoutHelper.createGapTableLayoutPane(new Component[][]{new Component[]{bottomLabel, bottomSpinner}}, TableLayoutHelper.FILL_LASTCOLUMN, IntervalConstants.INTERVAL_L1, LayoutConstants.VGAP_SMALL);
-
-        JPanel vPaddingSpinnerPanel = TableLayoutHelper.createGapTableLayoutPane(new Component[][]{new Component[]{topSpinnerPanel, bottomSpinnerPanel}}, TableLayoutHelper.FILL_LASTCOLUMN, IntervalConstants.INTERVAL_W1, LayoutConstants.VGAP_SMALL);
 
-        JPanel hPaddingSpinnerPanel = TableLayoutHelper.createGapTableLayoutPane(new Component[][]{new Component[]{leftSpinnerPanel, rightSpinnerPanel}}, TableLayoutHelper.FILL_LASTCOLUMN, IntervalConstants.INTERVAL_W1, LayoutConstants.VGAP_SMALL);
-
-        JPanel layoutPanel = TableLayoutHelper.createGapTableLayoutPane(new Component[][]{new Component[]{leftAlignRadioButton, centerAlignRadioButton}}, TableLayoutHelper.FILL_LASTCOLUMN, IntervalConstants.INTERVAL_W1, LayoutConstants.VGAP_SMALL);
+        JPanel layoutTypePanel = TableLayoutHelper.createGapTableLayoutPane(
+                new Component[][]{new Component[]{layoutTypeCombo}},
+                TableLayoutHelper.FILL_LASTCOLUMN,
+                IntervalConstants.INTERVAL_W1,
+                LayoutConstants.VGAP_SMALL
+        );
 
         ButtonGroup layoutRadioButtonGroup = new ButtonGroup();
         layoutRadioButtonGroup.add(leftAlignRadioButton);
         layoutRadioButtonGroup.add(centerAlignRadioButton);
-
-        double p = TableLayout.PREFERRED;
-        double[] rowSize = {p, p, p};
-        double[] columnSize = {p, p};
         JPanel paddingPanel = TableLayoutHelper.createCommonTableLayoutPane(new Component[][]{
-                {paddingHintLabel, vPaddingSpinnerPanel},
-                {emptyHintLabel, hPaddingSpinnerPanel},
-                {buttonAlignHintLabel, layoutPanel},
+                {paddingHintLabel, initVPaddingConfig()},
+                {emptyHintLabel, initHPaddingConfig()},
+                {layoutTypeLabel, layoutTypePanel},
         }, rowSize, columnSize, 10);
+
         centerPane.add(paddingPanel);
+        centerPane.add(buttonAlignPane);
+        centerPane.add(columnSizePane);
     }
 
     private void addBackgroundPane() {
@@ -240,7 +334,7 @@ public class CapsuleCustomDefinePane extends MobileStyleCustomDefinePane {
 
         UILabel initialFontLabel = DesignerUtils.createConfigLabel(Toolkit.i18nText("Fine-Plugin-RadioGroup_Font_init"));
         initialFontConfPane = new FontConfigPane();
-        initialFontConfPane.setFontColor(new Color(204, 204, 204));
+        initialFontConfPane.setFontColor(new Color(102, 102, 102));
         JPanel fontPanel = TableLayoutHelper.createGapTableLayoutPane(new Component[][]{new Component[]{initialFontLabel, initialFontConfPane}}, TableLayoutHelper.FILL_LASTCOLUMN, IntervalConstants.INTERVAL_L1, LayoutConstants.VGAP_MEDIUM);
         centerPane.add(fontPanel);
         UILabel selectedFontLabel = DesignerUtils.createConfigLabel(Toolkit.i18nText("Fine-Plugin-RadioGroup_Font_Select"));
@@ -260,6 +354,9 @@ public class CapsuleCustomDefinePane extends MobileStyleCustomDefinePane {
         rightSpinner.setValue(mobileStyle.getRightPadding());
         topSpinner.setValue(mobileStyle.getTopPadding());
         bottomSpinner.setValue(mobileStyle.getBottomPadding());
+        layoutTypeCombo.setSelectedIndex(mobileStyle.getButtonLayoutType());
+        buttonAlignCombo.setSelectedIndex(mobileStyle.getButtonAlign());
+        columnSizeSpinner.setValue(mobileStyle.getButtonColumnSize());
         leftAlignRadioButton.setSelected(mobileStyle.getButtonAlign() == DesignerUtils.kAlignLeft);
         centerAlignRadioButton.setSelected(mobileStyle.getButtonAlign() == DesignerUtils.kAlignCenter);
         initialColorSelectBox.setSelectObject(mobileStyle.getInitialBackgroundColor());
@@ -285,7 +382,9 @@ public class CapsuleCustomDefinePane extends MobileStyleCustomDefinePane {
         mobileStyle.setRightPadding(rightSpinner.getValue());
         mobileStyle.setTopPadding(topSpinner.getValue());
         mobileStyle.setBottomPadding(bottomSpinner.getValue());
-        mobileStyle.setButtonAlign(leftAlignRadioButton.isSelected() ? DesignerUtils.kAlignLeft : DesignerUtils.kAlignCenter);
+        mobileStyle.setButtonAlign(buttonAlignCombo.getSelectedIndex());
+        mobileStyle.setButtonLayoutType(layoutTypeCombo.getSelectedIndex());
+        mobileStyle.setButtonColumnSize((int)columnSizeSpinner.getValue());
         mobileStyle.setInitialBackgroundColor(initialColorSelectBox.getSelectObject());
         mobileStyle.setSelectedBackgroundColor(selectedColorSelectBox.getSelectObject());
         mobileStyle.setBorderType(borderLineCombo.getSelectedLineStyle());
diff --git a/designer-base/src/main/java/com/fr/design/mainframe/mobile/ui/radiogroup/IconConfigPane.java b/designer-base/src/main/java/com/fr/design/mainframe/mobile/ui/radiogroup/IconConfigPane.java
index 08e0ecd09a..85f4f3601b 100644
--- a/designer-base/src/main/java/com/fr/design/mainframe/mobile/ui/radiogroup/IconConfigPane.java
+++ b/designer-base/src/main/java/com/fr/design/mainframe/mobile/ui/radiogroup/IconConfigPane.java
@@ -1,5 +1,6 @@
 package com.fr.design.mainframe.mobile.ui.radiogroup;
 
+import com.fr.base.BaseUtils;
 import com.fr.base.IconManager;
 import com.fr.design.dialog.BasicDialog;
 import com.fr.design.dialog.DialogActionAdapter;
@@ -12,11 +13,13 @@ import com.fr.design.web.CustomIconPane;
 import com.fr.form.ui.WidgetInfoConfig;
 import com.fr.general.ComparatorUtils;
 import com.fr.general.FRFont;
+import com.fr.stable.ArrayUtils;
 import com.fr.stable.StringUtils;
 
 import javax.swing.*;
 import javax.swing.event.ChangeEvent;
 import javax.swing.event.ChangeListener;
+import javax.swing.event.EventListenerList;
 import javax.swing.plaf.basic.BasicButtonUI;
 import java.awt.*;
 import java.awt.event.ActionEvent;
@@ -24,24 +27,125 @@ import java.awt.event.ActionListener;
 import java.util.ArrayList;
 
 public class IconConfigPane extends JPanel {
+    private final int northPaneWidth = 330;
+    private final int listenerStep = 2;
+    private final Icon addIcon = BaseUtils.readIcon("/com/fr/design/images/buttonicon/icon_add.png");
+
+    private final Icon deleteIcon = BaseUtils.readIcon("/com/fr/design/images/buttonicon/icon_delete.png");
     private UIButton editIconButton;
     private UIButton deleteIconButton;
     private String curIconName;
     private IconButton selectIconButton;
     private ArrayList<IconButton> iconButtons = new ArrayList<IconButton>();
 
+    private UIButton addCountButton;
+
+    private UIButton deleteCountButton;
+
+    private EventListenerList addCountListener = new EventListenerList();
+    private EventListenerList deleteCountListener = new EventListenerList();
+
+    private JPanel northPane;
+
     public IconConfigPane(int count) {
-        initComp(count);
+        initComp(count, false);
+    }
+    public IconConfigPane(int count, boolean canChangeCount) {
+        initComp(count, canChangeCount);
     }
 
-    public void initComp(int count) {
-        this.setLayout(FRGUIPaneFactory.createBorderLayout());
-        JPanel panel = FRGUIPaneFactory.createNormalFlowInnerContainer_M_Pane();
-        panel.setBorder(BorderFactory.createEmptyBorder(5, 0, 5, 0));
+    /**
+     * 删除一个图标
+     */
+    public void deleteCount() {
+        if (!iconButtons.isEmpty()) {
+            northPane.remove(iconButtons.get(iconButtons.size() - 1));
+            iconButtons.remove(iconButtons.size() - 1);
+            adjustNorthPaneHeight();
+            IconConfigPane.this.revalidate(); // 重新验证并更新布局
+            IconConfigPane.this.repaint(); // 可选：刷新JPanel以更新界面显示
+            deleteCountButton.setEnabled(!iconButtons.isEmpty());
+        }
+        deleteCountButton.setEnabled(!iconButtons.isEmpty());
+    }
+    /**
+     * 添加一个图标
+     */
+    public void addCount() {
+        deleteCountButton.setEnabled(true);
+        IconButton iconButton = new IconButton("");
+        selectIconButton = iconButton;
+        editIconButton.setEnabled(true);
+        iconButtons.add(iconButton);
+        int indexToInsert = northPane.getComponentCount() - 2;
+        deleteCountButton.setEnabled(!iconButtons.isEmpty());
+        // 创建新的按钮并插入到倒数第三个组件后面
+        northPane.add(iconButton, indexToInsert);
+        adjustNorthPaneHeight();
+        IconConfigPane.this.revalidate(); // 重新验证并更新布局
+        IconConfigPane.this.repaint(); // 可选：刷新JPanel以更新界面显示
+    }
+    private void adjustNorthPaneHeight() {
+        northPane.setPreferredSize(new Dimension(northPaneWidth, getNorthPanelHeight(iconButtons.size())));
+    }
+
+    private int getNorthPanelHeight(int iconNum) {
+        return (int) Math.ceil((iconNum + 2) / 13.0) * 30;
+    }
+
+    private void initAddAndDeleteCountButton(Boolean deleteCountButtonEnabled) {
+        addCountButton = new UIButton(addIcon);
+        addCountButton.setPreferredSize(new Dimension(20, 20));
+        addCountButton.setName("add");
+        deleteCountButton = new UIButton(deleteIcon);
+        deleteCountButton.setPreferredSize(new Dimension(20, 20));
+        deleteCountButton.setName("delete");
+        deleteCountButton.setEnabled(deleteCountButtonEnabled);
+        addCountButton.addActionListener(new ActionListener() {
+            @Override
+            public void actionPerformed(ActionEvent e) {
+                fireAddCountListener();
+            }
+        });
+        deleteCountButton.addActionListener(new ActionListener() {
+            @Override
+            public void actionPerformed(ActionEvent e) {
+                fireDeleteCountListener();
+            }
+        });
+        northPane.add(addCountButton);
+        northPane.add(deleteCountButton);
+    }
+
+    /**
+     * 根据图标名称刷新字体配置面板
+     * @param names 字体名称
+     * @param canChangeCount 是否支持改变数目
+     */
+    public void refreshByIconNames(String[] names, Boolean canChangeCount) {
+        northPane.removeAll();
+        northPane.setPreferredSize(new Dimension(northPaneWidth, getNorthPanelHeight(names.length)));
+        ArrayList<IconButton> newIconButtons = new ArrayList<>();
+        for (String name : names) {
+            IconButton iconButton = new IconButton(name);
+            northPane.add(iconButton);
+            newIconButtons.add(iconButton);
+        }
+        iconButtons = newIconButtons;
+        if (canChangeCount) {
+            initAddAndDeleteCountButton(!ArrayUtils.isEmpty(names));
+        }
+        IconConfigPane.this.revalidate();
+        IconConfigPane.this.repaint();
+    }
+
+    /**
+     * 初始化编辑按钮
+     */
+    private void initEditIconButton() {
         editIconButton = new UIButton(Toolkit.i18nText("Fine-Design_Basic_Edit"));
         editIconButton.setFont(FRFont.getInstance("Helvetica", Font.PLAIN, 12, Color.decode("#3A383A")));
         editIconButton.setPreferredSize(new Dimension(62, 20));
-        panel.add(editIconButton);
         editIconButton.addActionListener(new ActionListener() {
             public void actionPerformed(ActionEvent e) {
                 final CustomIconPane cip = new CustomIconPane(){
@@ -62,11 +166,14 @@ public class IconConfigPane extends JPanel {
             }
         });
         editIconButton.setEnabled(false);
-
+    }
+    /**
+     * 初始化删除按钮
+     */
+    private void initDeleteIconButton() {
         deleteIconButton = new UIButton(Toolkit.i18nText("Fine-Design_Basic_Delete"));
         deleteIconButton.setFont(FRFont.getInstance("Helvetica", Font.PLAIN, 12, Color.decode("#3A383A")));
         deleteIconButton.setPreferredSize(new Dimension(62, 20));
-        panel.add(deleteIconButton);
         deleteIconButton.addActionListener(new ActionListener() {
             @Override
             public void actionPerformed(ActionEvent e) {
@@ -75,30 +182,89 @@ public class IconConfigPane extends JPanel {
             }
         });
         deleteIconButton.setEnabled(false);
-
-
+    }
+    /**
+     * 重载形式
+     * @param count 图标数目
+     * @param canChangeCount 是否可以动态增减
+     */
+    public void initComp(int count, boolean canChangeCount) {
+        this.setLayout(FRGUIPaneFactory.createBorderLayout());
+        JPanel panel = FRGUIPaneFactory.createNormalFlowInnerContainer_M_Pane();
+        panel.setBorder(BorderFactory.createEmptyBorder(5, 0, 5, 0));
+        initEditIconButton();
+        initDeleteIconButton();
+        panel.add(editIconButton);
+        panel.add(deleteIconButton);
+        northPane = FRGUIPaneFactory.createNormalFlowInnerContainer_S_Pane();
+        northPane.setPreferredSize(new Dimension(northPaneWidth, getNorthPanelHeight(count)));
         this.add(panel, BorderLayout.CENTER);
-
-        JPanel northPane = new JPanel();
-        northPane.setLayout(new FlowLayout(FlowLayout.LEFT, 5, 0));
         for (int i = 0; i < count; i++) {
             IconButton iconButton = new IconButton("");
             northPane.add(iconButton);
             iconButtons.add(iconButton);
         }
+        if (canChangeCount) {
+            initAddAndDeleteCountButton(count != 0);
+        }
         this.add(northPane, BorderLayout.NORTH);
     }
 
     public void setShowIconImage() {
         selectIconButton.setIconName(curIconName);
     }
+    /**
+     * 添加事件的监听
+     * @param changeListener 监听列表
+     */
+    public void addAddCountListener(ChangeListener changeListener) {
+        addCountListener.add(ChangeListener.class, changeListener);
+    }
+    /**
+     * 删除事件的监听
+     * @param changeListener 监听列表
+     */
+    public void addDeleteCountListener(ChangeListener changeListener) {
+        deleteCountListener.add(ChangeListener.class, changeListener);
+    }
+    /**
+     * 点击增加按钮
+     */
+    public void fireAddCountListener() {
+        Object[] listeners = addCountListener.getListenerList();
+        ChangeEvent e = null;
+
+        for (int i = listeners.length - listenerStep; i >= 0; i -= listenerStep) {
+            if (listeners[i] == ChangeListener.class) {
+                if (e == null) {
+                    e = new ChangeEvent(this);
+                }
+                ((ChangeListener) listeners[i + 1]).stateChanged(e);
+            }
+        }
+    }
+    /**
+     * 点击删除按钮
+     */
+    public void fireDeleteCountListener() {
+        Object[] listeners = deleteCountListener.getListenerList();
+        ChangeEvent e = null;
+
+        for (int i = listeners.length - listenerStep; i >= 0; i -= listenerStep) {
+            if (listeners[i] == ChangeListener.class) {
+                if (e == null) {
+                    e = new ChangeEvent(this);
+                }
+                ((ChangeListener) listeners[i + 1]).stateChanged(e);
+            }
+        }
+    }
 
     public void populate(ArrayList<String> iconArr) {
         for (int i = 0; i < iconButtons.size(); i++) {
             iconButtons.get(i).setIconName(iconArr.get(i));
         }
     }
-
     public ArrayList<String> update() {
         ArrayList<String> iconNames = new ArrayList<String>();
         for (int i = 0; i < iconButtons.size(); i++) {
@@ -107,7 +273,6 @@ public class IconConfigPane extends JPanel {
         return iconNames;
     }
 
-
     private class IconButton extends JToggleButton implements ActionListener {
         private String iconName;
         private Image iconImage = null;
diff --git a/designer-base/src/main/java/com/fr/design/mainframe/mobile/ui/radiogroup/ImageCustomDefinePane.java b/designer-base/src/main/java/com/fr/design/mainframe/mobile/ui/radiogroup/ImageCustomDefinePane.java
index 7288d3263c..30fbe2d4a9 100644
--- a/designer-base/src/main/java/com/fr/design/mainframe/mobile/ui/radiogroup/ImageCustomDefinePane.java
+++ b/designer-base/src/main/java/com/fr/design/mainframe/mobile/ui/radiogroup/ImageCustomDefinePane.java
@@ -9,6 +9,7 @@ import com.fr.design.gui.ibutton.UIColorButton;
 import com.fr.design.gui.ibutton.UIToggleButton;
 import com.fr.design.gui.icombobox.UIComboBox;
 import com.fr.design.gui.ilable.UILabel;
+import com.fr.design.gui.iscrollbar.UIScrollBar;
 import com.fr.design.gui.ispinner.UISpinner;
 import com.fr.design.i18n.Toolkit;
 import com.fr.design.layout.FRGUIPaneFactory;
@@ -23,11 +24,12 @@ import com.fr.form.ui.mobile.radiogroup.ImageMobileStyle;
 import com.fr.general.FRFont;
 
 import javax.swing.*;
+import javax.swing.event.ChangeEvent;
+import javax.swing.event.ChangeListener;
 import java.awt.*;
 import java.awt.event.ItemEvent;
 import java.awt.event.ItemListener;
 import java.util.ArrayList;
-import java.util.Arrays;
 
 public class ImageCustomDefinePane extends MobileStyleCustomDefinePane {
 
@@ -36,12 +38,21 @@ public class ImageCustomDefinePane extends MobileStyleCustomDefinePane {
     private JPanel scrollPanel;
     private UIComboBox custom;
     private JPanel centerPane;
+    // 按钮排布+按钮排布下拉框panel；
+    private JPanel buttonAlignPane;
 
+    // 固定列数 数字panel
+    private JPanel columnSizePane;
     private UISpinner leftSpinner;
     private UISpinner rightSpinner;
     private UISpinner topSpinner;
     private UISpinner bottomSpinner;
 
+    private UIComboBox layoutTypeCombo;
+
+    private UIComboBox buttonAlignCombo;
+
+    private UISpinner columnSizeSpinner;
     private IconConfigPane initialIconConfigPane;
     private IconConfigPane selectedIconConfigPane;
 
@@ -73,6 +84,14 @@ public class ImageCustomDefinePane extends MobileStyleCustomDefinePane {
             protected JPanel createContentPane() {
                 return scrollPanel;
             }
+
+            @Override
+            protected void setLeftContentPaneBounds(Container parent, UIScrollBar scrollBar, int beginY, int maxheight) {
+                int width = parent.getWidth();
+                int height = parent.getHeight();
+                leftcontentPane.setBounds(0, -beginY, width - scrollBar.getWidth() + getOverWidth(), leftcontentPane.getPreferredSize().height);
+                scrollBar.setBounds(width - scrollBar.getWidth(), 0, scrollBar.getWidth(), height);
+            }
         };
         this.add(basicScrollPane);
     }
@@ -115,53 +134,155 @@ public class ImageCustomDefinePane extends MobileStyleCustomDefinePane {
         return FRGUIPaneFactory.createVerticalFlowLayout_Pane(true, FlowLayout.LEADING, 0, 10);
     }
 
-    private void addPaddingPane() {
-        centerPane.add(DesignerUtils.createTitleSplitLine(Toolkit.i18nText("Fine-Plugin-RadioGroup_Layout")));
+    private void initLayoutCombo() {
+        layoutTypeCombo = new UIComboBox(new String[]{
+                Toolkit.i18nText("Fine-Plugin-RadioGroup_Layout_Single_Line"),
+                Toolkit.i18nText("Fine-Plugin-RadioGroup_Layout_Auto"),
+                Toolkit.i18nText("Fine-Plugin-RadioGroup_Layout_Fixed")
+        });
+        layoutTypeCombo.setPreferredSize(new Dimension(DesignerUtils.LARGE_COMBO_WIDTH, 20));
+        layoutTypeCombo.addItemListener(new ItemListener() {
+            @Override
+            public void itemStateChanged(ItemEvent e) {
+                if (layoutTypeCombo.getSelectedIndex() == DesignerUtils.K_LAYOUT_SINGLE) {
+                    buttonAlignPane.setVisible(true);
+                    columnSizePane.setVisible(false);
+                }
+                if (layoutTypeCombo.getSelectedIndex() == DesignerUtils.K_LAYOUT_AUTO) {
+                    buttonAlignPane.setVisible(false);
+                    columnSizePane.setVisible(false);
+                }
+                if (layoutTypeCombo.getSelectedIndex() == DesignerUtils.K_LAYOUT_FIXED) {
+                    buttonAlignPane.setVisible(false);
+                    columnSizePane.setVisible(true);
+                }
+            }
+        });
+    }
 
-        UILabel paddingHintLabel = DesignerUtils.createConfigLabel(Toolkit.i18nText("Fine-Plugin-RadioGroup_Button_Padding"));
-        UILabel emptyHintLabel = DesignerUtils.createConfigLabel(Toolkit.i18nText(""));
+    /**
+     * 初始化按钮排布面板
+     */
+    private void initButtonAlignPane() {
+        UILabel buttonAlignLabel = DesignerUtils.createConfigLabel(Toolkit.i18nText("Fine-Plugin-RadioGroup_Alignment"));
+        buttonAlignCombo = new UIComboBox(new String[]{
+                Toolkit.i18nText("Fine-Plugin-RadioGroup_Alignment_Nature"),
+                Toolkit.i18nText("Fine-Plugin-RadioGroup_Alignment_Split"),
+        });
+        buttonAlignCombo.setSelectedIndex(1);
+        buttonAlignCombo.setPreferredSize(new Dimension(DesignerUtils.LARGE_COMBO_WIDTH, 20));
+        buttonAlignPane = TableLayoutHelper.createGapTableLayoutPane(new Component[][]{new Component[]{buttonAlignLabel, buttonAlignCombo}}, TableLayoutHelper.FILL_LASTCOLUMN, IntervalConstants.INTERVAL_L1, LayoutConstants.VGAP_SMALL);
+    }
 
-        UILabel leftLabel = new UILabel(Toolkit.i18nText("Fine-Plugin-RadioGroup_Padding_Left"));
-        leftSpinner = new UISpinner(0, Integer.MAX_VALUE, 1, DesignerUtils.kDefaultHorizontalPadding);
+    /**
+     * 初始化固定列数面板
+     */
+    private void initColumnSizePane() {
+        UILabel columnSizeLabel = DesignerUtils.createConfigLabel("");
+        columnSizeSpinner = new UISpinner(1, Integer.MAX_VALUE, 1, DesignerUtils.INITIAL_COLUMN_SIZE);
+        columnSizeSpinner.setPreferredSize(new Dimension(DesignerUtils.LARGE_COMBO_WIDTH, 20));
+        columnSizePane = TableLayoutHelper.createGapTableLayoutPane(new Component[][]{new Component[]{columnSizeLabel, columnSizeSpinner}}, TableLayoutHelper.FILL_LASTCOLUMN, IntervalConstants.INTERVAL_L1, LayoutConstants.VGAP_SMALL);
+        columnSizePane.setVisible(false);
+    }
 
-        UILabel rightLabel = new UILabel(Toolkit.i18nText("Fine-Plugin-RadioGroup_Padding_Right"));
-        rightSpinner = new UISpinner(0, Integer.MAX_VALUE, 1, DesignerUtils.kDefaultHorizontalPadding);
+    private JPanel initVPaddingConfig() {
 
         UILabel topLabel = new UILabel(Toolkit.i18nText("Fine-Plugin-RadioGroup_Padding_Top"));
         topSpinner = new UISpinner(0, Integer.MAX_VALUE, 1, DesignerUtils.kDefaultVerticalPadding);
 
         UILabel bottomLabel = new UILabel(Toolkit.i18nText("Fine-Plugin-RadioGroup_Padding_Bottom"));
         bottomSpinner = new UISpinner(0, Integer.MAX_VALUE, 1, DesignerUtils.kDefaultVerticalPadding);
+        JPanel topSpinnerPanel = TableLayoutHelper.createGapTableLayoutPane(new Component[][]{new Component[]{topLabel, topSpinner}}, TableLayoutHelper.FILL_LASTCOLUMN, IntervalConstants.INTERVAL_L1, LayoutConstants.VGAP_SMALL);
+        JPanel bottomSpinnerPanel = TableLayoutHelper.createGapTableLayoutPane(new Component[][]{new Component[]{bottomLabel, bottomSpinner}}, TableLayoutHelper.FILL_LASTCOLUMN, IntervalConstants.INTERVAL_L1, LayoutConstants.VGAP_SMALL);
+
+        return TableLayoutHelper.createGapTableLayoutPane(new Component[][]{new Component[]{topSpinnerPanel, bottomSpinnerPanel}}, TableLayoutHelper.FILL_LASTCOLUMN, IntervalConstants.INTERVAL_W1, LayoutConstants.VGAP_SMALL);
 
+    }
+    private JPanel initHPaddingConfig() {
+        UILabel leftLabel = new UILabel(Toolkit.i18nText("Fine-Plugin-RadioGroup_Padding_Left"));
+        leftSpinner = new UISpinner(0, Integer.MAX_VALUE, 1, DesignerUtils.kDefaultHorizontalPadding);
+
+        UILabel rightLabel = new UILabel(Toolkit.i18nText("Fine-Plugin-RadioGroup_Padding_Right"));
+        rightSpinner = new UISpinner(0, Integer.MAX_VALUE, 1, DesignerUtils.kDefaultHorizontalPadding);
         JPanel leftSpinnerPanel = TableLayoutHelper.createGapTableLayoutPane(new Component[][]{new Component[]{leftLabel, leftSpinner}}, TableLayoutHelper.FILL_LASTCOLUMN, IntervalConstants.INTERVAL_L1, LayoutConstants.VGAP_SMALL);
         JPanel rightSpinnerPanel = TableLayoutHelper.createGapTableLayoutPane(new Component[][]{new Component[]{rightLabel, rightSpinner}}, TableLayoutHelper.FILL_LASTCOLUMN, IntervalConstants.INTERVAL_L1, LayoutConstants.VGAP_SMALL);
-        JPanel topSpinnerPanel = TableLayoutHelper.createGapTableLayoutPane(new Component[][]{new Component[]{topLabel, topSpinner}}, TableLayoutHelper.FILL_LASTCOLUMN, IntervalConstants.INTERVAL_L1, LayoutConstants.VGAP_SMALL);
-        JPanel bottomSpinnerPanel = TableLayoutHelper.createGapTableLayoutPane(new Component[][]{new Component[]{bottomLabel, bottomSpinner}}, TableLayoutHelper.FILL_LASTCOLUMN, IntervalConstants.INTERVAL_L1, LayoutConstants.VGAP_SMALL);
 
-        JPanel vPaddingSpinnerPanel = TableLayoutHelper.createGapTableLayoutPane(new Component[][]{new Component[]{topSpinnerPanel, bottomSpinnerPanel}}, TableLayoutHelper.FILL_LASTCOLUMN, IntervalConstants.INTERVAL_W1, LayoutConstants.VGAP_SMALL);
-        JPanel hPaddingSpinnerPanel = TableLayoutHelper.createGapTableLayoutPane(new Component[][]{new Component[]{leftSpinnerPanel, rightSpinnerPanel}}, TableLayoutHelper.FILL_LASTCOLUMN, IntervalConstants.INTERVAL_W1, LayoutConstants.VGAP_SMALL);
+        return TableLayoutHelper.createGapTableLayoutPane(new Component[][]{new Component[]{leftSpinnerPanel, rightSpinnerPanel}}, TableLayoutHelper.FILL_LASTCOLUMN, IntervalConstants.INTERVAL_W1, LayoutConstants.VGAP_SMALL);
+    }
+
+    private void addPaddingPane() {
+        centerPane.add(DesignerUtils.createTitleSplitLine(Toolkit.i18nText("Fine-Plugin-RadioGroup_Layout")));
+
+        UILabel paddingHintLabel = DesignerUtils.createConfigLabel(Toolkit.i18nText("Fine-Plugin-RadioGroup_Button_Padding"));
+        UILabel emptyHintLabel = DesignerUtils.createConfigLabel(Toolkit.i18nText(""));
+
+        UILabel layoutTypeLabel = DesignerUtils.createConfigLabel(Toolkit.i18nText("Fine-Plugin-RadioGroup_Layout_Type"));
+        initLayoutCombo();
+        initButtonAlignPane();
+        initColumnSizePane();
 
         double p = TableLayout.PREFERRED;
-        double[] rowSize = {p, p};
+        double[] rowSize = {p, p, p};
         double[] columnSize = {p, p};
         JPanel paddingPanel = TableLayoutHelper.createCommonTableLayoutPane(new Component[][]{
-                {paddingHintLabel, vPaddingSpinnerPanel},
-                {emptyHintLabel, hPaddingSpinnerPanel},
+                {paddingHintLabel, initVPaddingConfig()},
+                {emptyHintLabel, initHPaddingConfig()},
+                {layoutTypeLabel, layoutTypeCombo},
         }, rowSize, columnSize, 10);
 
         centerPane.add(paddingPanel);
+        centerPane.add(buttonAlignPane);
+        centerPane.add(columnSizePane);
     }
 
-    private void addIconPane() {
+    /**
+     * 初始化默认字体配置面版
+     */
+    private void initInitialIconConfigPane() {
+        initialIconConfigPane = new IconConfigPane(8, true);
+        initialIconConfigPane.addAddCountListener(new ChangeListener() {
+            @Override
+            public void stateChanged(ChangeEvent e) {
+                initialIconConfigPane.addCount();
+                selectedIconConfigPane.addCount();
+            }
+        });
+        initialIconConfigPane.addDeleteCountListener(new ChangeListener() {
+            @Override
+            public void stateChanged(ChangeEvent e) {
+                initialIconConfigPane.deleteCount();
+                selectedIconConfigPane.deleteCount();
+            }
+        });
+    }
 
+    /**
+     * 初始化选择字体配置面板
+     */
+    private void initSelectedIconConfigPane() {
+        selectedIconConfigPane = new IconConfigPane(8, true);
+        selectedIconConfigPane.addAddCountListener(new ChangeListener() {
+            @Override
+            public void stateChanged(ChangeEvent e) {
+                initialIconConfigPane.addCount();
+                selectedIconConfigPane.addCount();
+            }
+        });
+        selectedIconConfigPane.addDeleteCountListener(new ChangeListener() {
+            @Override
+            public void stateChanged(ChangeEvent e) {
+                initialIconConfigPane.deleteCount();
+                selectedIconConfigPane.deleteCount();
+            }
+        });
+    }
+    private void addIconPane() {
         centerPane.add(DesignerUtils.createTitleSplitLine(Toolkit.i18nText("Fine-Plugin-RadioGroup_Icon")));
 
         UILabel initialLabel = DesignerUtils.createConfigLabel(Toolkit.i18nText("Fine-Plugin-RadioGroup_Icon_Init"));
         UILabel selectedLabel = DesignerUtils.createConfigLabel(Toolkit.i18nText("Fine-Plugin-RadioGroup_Icon_Select"));
-
-        initialIconConfigPane = new IconConfigPane(8);
-        selectedIconConfigPane = new IconConfigPane(8);
-
+        initInitialIconConfigPane();
+        initSelectedIconConfigPane();
         JPanel container = FRGUIPaneFactory.createVerticalFlowLayout_Pane(true, FlowLayout.LEADING, 0, 5);
 
         JPanel initialPane = FRGUIPaneFactory.createNormalFlowInnerContainer_S_Pane();
@@ -175,7 +296,6 @@ public class ImageCustomDefinePane extends MobileStyleCustomDefinePane {
         container.add(selectedPane);
 
         centerPane.add(container);
-
     }
 
     private void addFontPane() {
@@ -183,7 +303,7 @@ public class ImageCustomDefinePane extends MobileStyleCustomDefinePane {
 
         UILabel initialFontLabel = DesignerUtils.createConfigLabel(Toolkit.i18nText("Fine-Plugin-RadioGroup_Font_init"));
         initialFontConfPane = new FontConfigPane();
-        initialFontConfPane.setFontColor(new Color(204, 204, 204));
+        initialFontConfPane.setFontColor(new Color(102, 102, 102));
         JPanel fontPanel = TableLayoutHelper.createGapTableLayoutPane(new Component[][]{new Component[]{initialFontLabel, initialFontConfPane}}, TableLayoutHelper.FILL_LASTCOLUMN, IntervalConstants.INTERVAL_L1, LayoutConstants.VGAP_MEDIUM);
         centerPane.add(fontPanel);
         UILabel selectedFontLabel = DesignerUtils.createConfigLabel(Toolkit.i18nText("Fine-Plugin-RadioGroup_Font_Select"));
@@ -205,8 +325,11 @@ public class ImageCustomDefinePane extends MobileStyleCustomDefinePane {
         rightSpinner.setValue(mobileStyle.getRightPadding());
         topSpinner.setValue(mobileStyle.getTopPadding());
         bottomSpinner.setValue(mobileStyle.getBottomPadding());
-        initialIconConfigPane.populate(new ArrayList<>(Arrays.asList(mobileStyle.getInitialIconNames())));
-        selectedIconConfigPane.populate(new ArrayList<>(Arrays.asList(mobileStyle.getSelectedIconNames())));
+        layoutTypeCombo.setSelectedIndex(mobileStyle.getButtonLayoutType());
+        buttonAlignCombo.setSelectedIndex(mobileStyle.getButtonAlign());
+        columnSizeSpinner.setValue(mobileStyle.getButtonColumnSize());
+        initialIconConfigPane.refreshByIconNames(mobileStyle.getInitialIconNames(), true);
+        selectedIconConfigPane.refreshByIconNames(mobileStyle.getSelectedIconNames(), true);
         if(mobileStyle.getInitialFont() != null) {
             initialFontConfPane.populate(mobileStyle.getInitialFont());
         }
@@ -224,6 +347,9 @@ public class ImageCustomDefinePane extends MobileStyleCustomDefinePane {
         mobileStyle.setRightPadding(rightSpinner.getValue());
         mobileStyle.setTopPadding(topSpinner.getValue());
         mobileStyle.setBottomPadding(bottomSpinner.getValue());
+        mobileStyle.setButtonLayoutType(layoutTypeCombo.getSelectedIndex());
+        mobileStyle.setButtonAlign(buttonAlignCombo.getSelectedIndex());
+        mobileStyle.setButtonColumnSize((int)columnSizeSpinner.getValue());
         ArrayList<String> initialIconNamesList = initialIconConfigPane.update();
         ArrayList<String> selectedIconNamesList = selectedIconConfigPane.update();
         mobileStyle.setInitialIconNames(initialIconNamesList.toArray(new String[initialIconNamesList.size()]));
diff --git a/designer-base/src/main/java/com/fr/design/mainframe/mobile/ui/radiogroup/UnitedCustomDefinePane.java b/designer-base/src/main/java/com/fr/design/mainframe/mobile/ui/radiogroup/UnitedCustomDefinePane.java
index 8d9b425740..0badf3498d 100644
--- a/designer-base/src/main/java/com/fr/design/mainframe/mobile/ui/radiogroup/UnitedCustomDefinePane.java
+++ b/designer-base/src/main/java/com/fr/design/mainframe/mobile/ui/radiogroup/UnitedCustomDefinePane.java
@@ -41,6 +41,7 @@ public class UnitedCustomDefinePane extends MobileStyleCustomDefinePane {
     private UISpinner topSpinner;
     private UISpinner bottomSpinner;
 
+    private UIComboBox buttonAlignCombo;
     private NewColorSelectBox initialColorSelectBox;
     private NewColorSelectBox selectedColorSelectBox;
 
@@ -117,7 +118,7 @@ public class UnitedCustomDefinePane extends MobileStyleCustomDefinePane {
 
     private void addPaddingPane() {
         centerPane.add(DesignerUtils.createTitleSplitLine(Toolkit.i18nText("Fine-Plugin-RadioGroup_Layout")));
-
+        UILabel buttonAlignLabel = DesignerUtils.createConfigLabel(Toolkit.i18nText("Fine-Plugin-RadioGroup_Alignment"));
         UILabel paddingHintLabel = DesignerUtils.createConfigLabel(Toolkit.i18nText("Fine-Plugin-RadioGroup_Button_Padding"));
         UILabel emptyHintLabel = DesignerUtils.createConfigLabel(Toolkit.i18nText(""));
 
@@ -140,13 +141,20 @@ public class UnitedCustomDefinePane extends MobileStyleCustomDefinePane {
 
         JPanel vPaddingSpinnerPanel = TableLayoutHelper.createGapTableLayoutPane(new Component[][]{new Component[]{topSpinnerPanel, bottomSpinnerPanel}}, TableLayoutHelper.FILL_LASTCOLUMN, IntervalConstants.INTERVAL_W1, LayoutConstants.VGAP_SMALL);
         JPanel hPaddingSpinnerPanel = TableLayoutHelper.createGapTableLayoutPane(new Component[][]{new Component[]{leftSpinnerPanel, rightSpinnerPanel}}, TableLayoutHelper.FILL_LASTCOLUMN, IntervalConstants.INTERVAL_W1, LayoutConstants.VGAP_SMALL);
-
+        // 按钮排布下拉框
+        buttonAlignCombo = new UIComboBox(new String[]{
+                Toolkit.i18nText("Fine-Plugin-RadioGroup_Alignment_Nature"),
+                Toolkit.i18nText("Fine-Plugin-RadioGroup_Alignment_Split")
+        });
+        buttonAlignCombo.setSelectedIndex(1);
+        buttonAlignCombo.setPreferredSize(new Dimension(DesignerUtils.NORMAL_COMBO_WIDTH, 20));
         double p = TableLayout.PREFERRED;
-        double[] rowSize = {p, p};
+        double[] rowSize = {p, p, p};
         double[] columnSize = {p, p};
         JPanel paddingPanel = TableLayoutHelper.createCommonTableLayoutPane(new Component[][]{
                 {paddingHintLabel, vPaddingSpinnerPanel},
                 {emptyHintLabel, hPaddingSpinnerPanel},
+                {buttonAlignLabel, buttonAlignCombo}
         }, rowSize, columnSize, 10);
 
         centerPane.add(paddingPanel);
@@ -234,6 +242,7 @@ public class UnitedCustomDefinePane extends MobileStyleCustomDefinePane {
         rightSpinner.setValue(mobileStyle.getRightPadding());
         topSpinner.setValue(mobileStyle.getTopPadding());
         bottomSpinner.setValue(mobileStyle.getBottomPadding());
+        buttonAlignCombo.setSelectedIndex(mobileStyle.getButtonAlign());
         initialColorSelectBox.setSelectObject(mobileStyle.getInitialBackgroundColor());
         selectedColorSelectBox.setSelectObject(mobileStyle.getSelectedBackgroundColor());
         borderLineCombo.setSelectedLineStyle(mobileStyle.getBorderType());
@@ -256,6 +265,7 @@ public class UnitedCustomDefinePane extends MobileStyleCustomDefinePane {
         mobileStyle.setRightPadding(rightSpinner.getValue());
         mobileStyle.setTopPadding(topSpinner.getValue());
         mobileStyle.setBottomPadding(bottomSpinner.getValue());
+        mobileStyle.setButtonAlign(buttonAlignCombo.getSelectedIndex());
         mobileStyle.setInitialBackgroundColor(initialColorSelectBox.getSelectObject());
         mobileStyle.setSelectedBackgroundColor(selectedColorSelectBox.getSelectObject());
         mobileStyle.setBorderType(borderLineCombo.getSelectedLineStyle());
diff --git a/designer-base/src/main/java/com/fr/design/mainframe/mobile/utils/DesignerUtils.java b/designer-base/src/main/java/com/fr/design/mainframe/mobile/utils/DesignerUtils.java
index bcadac1c74..a2e8d0656f 100644
--- a/designer-base/src/main/java/com/fr/design/mainframe/mobile/utils/DesignerUtils.java
+++ b/designer-base/src/main/java/com/fr/design/mainframe/mobile/utils/DesignerUtils.java
@@ -16,10 +16,19 @@ import java.awt.*;
 public class DesignerUtils {
 
     public static final int NORMAL_COMBO_WIDTH = 152;
+
+    public static final int LARGE_COMBO_WIDTH = 174;
     public static final int kDefaultHorizontalPadding = 0;
     public static final int kDefaultVerticalPadding = 15;
     public static final int kAlignLeft = 0;
     public static final int kAlignCenter = 1;
+
+    public static final int K_LAYOUT_SINGLE = 0;
+    public static final int K_LAYOUT_AUTO = 1;
+    public static final int K_LAYOUT_FIXED = 2;
+
+    public static final int INITIAL_COLUMN_SIZE = 1;
+
     public static final int[] BORDER_LINE_STYLE_ARRAY = new int[]{
             Constants.LINE_NONE,
             Constants.LINE_THIN,
diff --git a/designer-base/src/main/java/com/fr/design/mainframe/mobile/utils/MobileStyleProviderManager.java b/designer-base/src/main/java/com/fr/design/mainframe/mobile/utils/MobileStyleProviderManager.java
index 7c3194ba61..96113e90af 100644
--- a/designer-base/src/main/java/com/fr/design/mainframe/mobile/utils/MobileStyleProviderManager.java
+++ b/designer-base/src/main/java/com/fr/design/mainframe/mobile/utils/MobileStyleProviderManager.java
@@ -1,5 +1,8 @@
 package com.fr.design.mainframe.mobile.utils;
 
+import com.fr.design.mainframe.mobile.provider.checkboxgroup.CapsuleCheckboxGroupStyleProvider;
+import com.fr.design.mainframe.mobile.provider.checkboxgroup.ImageCheckboxGroupStyleProvider;
+import com.fr.design.mainframe.mobile.provider.checkboxgroup.UnitedCheckboxGroupStyleProvider;
 import com.fr.design.mainframe.mobile.provider.combo.SimpleComboCheckBoxStyleProvider;
 import com.fr.design.mainframe.mobile.provider.combo.SimpleComboStyleProvider;
 import com.fr.design.mainframe.mobile.provider.date.NavigationStyleProvider;
@@ -26,6 +29,9 @@ public class MobileStyleProviderManager {
         add(new CapsuleRadioGroupStyleProvider());
         add(new UnitedRadioGroupStyleProvider());
         add(new ImageRadioGroupStyleProvider());
+        add(new CapsuleCheckboxGroupStyleProvider());
+        add(new UnitedCheckboxGroupStyleProvider());
+        add(new ImageCheckboxGroupStyleProvider());
     }};
     private static Set<Mutable> mobileParamUIProviderSet = new HashSet<Mutable>() {{
         add(new MobileTopParamStyleProvider());
diff --git a/designer-base/src/main/java/com/fr/design/mainframe/theme/TemplateThemeEditorPane.java b/designer-base/src/main/java/com/fr/design/mainframe/theme/TemplateThemeEditorPane.java
index 963f387f33..5432109dc0 100644
--- a/designer-base/src/main/java/com/fr/design/mainframe/theme/TemplateThemeEditorPane.java
+++ b/designer-base/src/main/java/com/fr/design/mainframe/theme/TemplateThemeEditorPane.java
@@ -5,6 +5,7 @@ import com.fr.base.theme.TemplateTheme;
 import com.fr.base.theme.TemplateThemeConfig;
 import com.fr.base.theme.settings.ThemedCellStyleList;
 import com.fr.base.theme.settings.ThemedColorScheme;
+import com.fr.widgettheme.ThemePreviewTerminal;
 import com.fr.widgettheme.util.WidgetThemeDesignerUtils;
 import com.fr.design.ExtraDesignClassManager;
 import com.fr.design.beans.BasicBeanPane;
@@ -340,4 +341,20 @@ public abstract class TemplateThemeEditorPane<T extends TemplateTheme> extends J
             }
         }
     }
+
+    /**
+     * 开启控件显示增强时，从配置面板处获取主题样式预览的终端类型
+     * 默认为PC端，兼容原有场景
+     */
+    public ThemePreviewTerminal getWidgetStyleEditorTerminal() {
+        if (!WidgetThemeDesignerUtils.enableWidgetEnhance()) {
+            return ThemePreviewTerminal.PC;
+        }
+        for (BasicBeanPane<T> pane : extraPaneList) {
+            if (pane instanceof WidgetStyleEditContainerPane) {
+                return ((WidgetStyleEditContainerPane<T>) pane).getTerminalStyle();
+            }
+        }
+        return ThemePreviewTerminal.PC;
+    }
 }
\ No newline at end of file
diff --git a/designer-base/src/main/java/com/fr/design/mainframe/theme/TemplateThemeProfilePane.java b/designer-base/src/main/java/com/fr/design/mainframe/theme/TemplateThemeProfilePane.java
index 92acb5c71e..c79ccd9090 100644
--- a/designer-base/src/main/java/com/fr/design/mainframe/theme/TemplateThemeProfilePane.java
+++ b/designer-base/src/main/java/com/fr/design/mainframe/theme/TemplateThemeProfilePane.java
@@ -14,12 +14,13 @@ import com.fr.design.mainframe.theme.dialog.TemplateThemeProfileDialog;
 import com.fr.design.mainframe.theme.edit.ui.LabelUtils;
 import com.fr.design.mainframe.theme.ui.AutoCheckTextField;
 import com.fr.design.mainframe.theme.ui.AutoCheckThemeNameTextField;
-import com.fr.design.mainframe.theme.ui.BorderUtils;
 import com.fr.design.mainframe.toast.DesignerToastMsgUtil;
 import com.fr.design.utils.gui.GUICoreUtils;
 import com.fr.log.FineLoggerFactory;
 import com.fr.stable.StringUtils;
 import com.fr.transaction.CallBackAdaptor;
+import com.fr.widgettheme.ThemePreviewTerminal;
+import com.fr.widgettheme.theme.widget.theme.WidgetThemeDisplayConstants;
 
 import javax.swing.BorderFactory;
 import javax.swing.JDialog;
@@ -51,7 +52,8 @@ public abstract class TemplateThemeProfilePane<T extends TemplateTheme> extends
 
     protected TemplateThemePreviewPane<T> themePreviewPane;
     protected TemplateThemeEditorPane<T> themeEditorPane;
-
+    protected UILabel leftTitleLabel;
+    protected UILabel leftTitlePromptLabel;
     protected boolean isPopulating = false;
     protected boolean isMutable = false;
 
@@ -83,10 +85,9 @@ public abstract class TemplateThemeProfilePane<T extends TemplateTheme> extends
     private JPanel createLeftPane() {
         JPanel titleContainer = FRGUIPaneFactory.createBorderLayout_S_Pane();
         titleContainer.setPreferredSize(new Dimension(LEFT_TITLE_PANE_WIDTH, LEFT_TITLE_PANE_HEIGHT));
-        titleContainer.setBorder(BorderUtils.createTitleBorder(Toolkit.i18nText("Fine-Design_Basic_Template_Theme_Preview_Pane_Title"), TITLE_BORDER_FONT));
-
         JPanel previewContainer = FRGUIPaneFactory.createBorderLayout_S_Pane();
         previewContainer.setBorder(BorderFactory.createEmptyBorder(5, 4, 10, 4));
+        titleContainer.add(createTitlePane(), BorderLayout.NORTH);
         titleContainer.add(previewContainer, BorderLayout.CENTER);
 
         themePreviewPane = createThemePreviewPane();
@@ -103,7 +104,10 @@ public abstract class TemplateThemeProfilePane<T extends TemplateTheme> extends
                 if (isPopulating) {
                     return;
                 }
-                themePreviewPane.refresh(updateBean());
+                ThemePreviewTerminal terminal = themeEditorPane.getWidgetStyleEditorTerminal();
+                themePreviewPane.refresh(updateBean(), terminal);
+                String prompt = terminal == ThemePreviewTerminal.PC ? Toolkit.i18nText("Fine-Design_Theme_Control_PC_Prompt") : Toolkit.i18nText("Fine-Design_Theme_Control_Mobile_Prompt");
+                leftTitlePromptLabel.setText(prompt);
                 saveButton.setEnabled(themeEditorPane.checkNameValid() && isMutable);
             }
         });
@@ -367,4 +371,20 @@ public abstract class TemplateThemeProfilePane<T extends TemplateTheme> extends
         @Override
         public void onSaved(TemplateTheme theme) {}
     }
+
+    /**
+     * 创建预览界面标题面板
+     */
+    protected JPanel createTitlePane() {
+        JPanel titlePane = new JPanel();
+        titlePane.setBorder(BorderFactory.createEmptyBorder(0, 5, 0, 5));
+        titlePane.setLayout(new BorderLayout());
+        leftTitleLabel = new UILabel(Toolkit.i18nText("Fine-Design_Basic_Template_Theme_Preview_Pane_Title"));
+        leftTitlePromptLabel = new UILabel(Toolkit.i18nText("Fine-Design_Theme_Control_PC_Prompt"));
+        leftTitleLabel.setForeground(WidgetThemeDisplayConstants.THEME_PREVIEW_TITLE_COLOR);
+        leftTitlePromptLabel.setForeground(WidgetThemeDisplayConstants.COMPATIBLE_STYLE_FONT_COLOR);
+        titlePane.add(leftTitleLabel, BorderLayout.WEST);
+        titlePane.add(leftTitlePromptLabel, BorderLayout.EAST);
+        return titlePane;
+    }
 }
\ No newline at end of file
diff --git a/designer-base/src/main/java/com/fr/design/mainframe/theme/edit/chart/ChartTitleAndBackgroundStylePane.java b/designer-base/src/main/java/com/fr/design/mainframe/theme/edit/chart/ChartTitleAndBackgroundStylePane.java
index 5705935866..2dc0659d00 100644
--- a/designer-base/src/main/java/com/fr/design/mainframe/theme/edit/chart/ChartTitleAndBackgroundStylePane.java
+++ b/designer-base/src/main/java/com/fr/design/mainframe/theme/edit/chart/ChartTitleAndBackgroundStylePane.java
@@ -83,10 +83,13 @@ public class ChartTitleAndBackgroundStylePane extends AbstractChartStylePane {
     }
 
     protected Component[][] getComponent() {
+        String chartAreaBgLabelName = Toolkit.i18nText("Fine-Design_Chart_Area_Background_Color");
+        UILabel chartAreaBgLabel = new UILabel(chartAreaBgLabelName);
+        chartAreaBgLabel.setToolTipText(chartAreaBgLabelName);
         return new Component[][]{
                 new Component[]{chartFontPane, null},
                 new Component[]{null, null},
-                new Component[]{new UILabel(Toolkit.i18nText("Fine-Design_Chart_Area_Background_Color")), typeComboBox},
+                new Component[]{chartAreaBgLabel, typeComboBox},
                 new Component[]{null, centerPane},
                 new Component[]{new UILabel(Toolkit.i18nText("Fine-Design_Chart_Grid_Line_Color")), mainGridColor}
         };
diff --git a/designer-base/src/main/java/com/fr/design/mainframe/theme/preview/ThemePreviewed.java b/designer-base/src/main/java/com/fr/design/mainframe/theme/preview/ThemePreviewed.java
index bb2aa05c22..272c7716c8 100644
--- a/designer-base/src/main/java/com/fr/design/mainframe/theme/preview/ThemePreviewed.java
+++ b/designer-base/src/main/java/com/fr/design/mainframe/theme/preview/ThemePreviewed.java
@@ -1,5 +1,7 @@
 package com.fr.design.mainframe.theme.preview;
 
+import com.fr.widgettheme.ThemePreviewTerminal;
+
 /**
  * @author Starryi
  * @version 1.0
@@ -7,4 +9,14 @@ package com.fr.design.mainframe.theme.preview;
  */
 public interface ThemePreviewed<T> {
     void refresh(T style);
+
+    /**
+     * 根据主题预览样式类型进行刷新
+     *
+     * @param style    样式，可以包含多个终端展现效果
+     * @param terminal 终端类型
+     */
+    default void refresh(T style, ThemePreviewTerminal terminal) {
+        refresh(style);
+    }
 }
diff --git a/designer-base/src/main/java/com/fr/widgettheme/ThemePreviewTerminal.java b/designer-base/src/main/java/com/fr/widgettheme/ThemePreviewTerminal.java
new file mode 100644
index 0000000000..844e642191
--- /dev/null
+++ b/designer-base/src/main/java/com/fr/widgettheme/ThemePreviewTerminal.java
@@ -0,0 +1,62 @@
+package com.fr.widgettheme;
+
+import com.fr.base.theme.TemplateTheme;
+import com.fr.widgettheme.theme.widget.style.MobileThemedWidgetStyle;
+import com.fr.widgettheme.theme.widget.style.ThemedWidgetStyle;
+
+/**
+ * 主题样式预览终端类型
+ *
+ * @author obo
+ * @since 11.0
+ * Created on 2024/2/2
+ */
+public enum ThemePreviewTerminal {
+
+    /**
+     * 桌面端,为默认类型
+     */
+    PC(0) {
+        @Override
+        public ThemedWidgetStyle getThemeWidgetStyle(TemplateTheme theme) {
+            return (ThemedWidgetStyle) theme.getWidgetStyle();
+        }
+    },
+
+    /**
+     * 移动端
+     */
+    MOBILE(1) {
+        @Override
+        public ThemedWidgetStyle getThemeWidgetStyle(TemplateTheme theme) {
+            return (MobileThemedWidgetStyle) theme.getMobileWidgetStyle();
+        }
+    };
+
+    /**
+     * 类型码
+     */
+    final int code;
+
+    ThemePreviewTerminal(int code) {
+        this.code = code;
+    }
+
+    public int getCode() {
+        return code;
+    }
+
+    public abstract ThemedWidgetStyle getThemeWidgetStyle(TemplateTheme theme);
+
+    /**
+     * 根据code获取对应的枚举
+     */
+    public static ThemePreviewTerminal getTypeByCode(int code) {
+        for (ThemePreviewTerminal type : ThemePreviewTerminal.values()) {
+            if (type.code == code) {
+                return type;
+            }
+        }
+        throw new IllegalArgumentException("Invalid ThemePreviewTerminalType code :" + code);
+    }
+}
diff --git a/designer-base/src/main/java/com/fr/widgettheme/theme/edit/widget/DesktopWidgetStyleEditPane.java b/designer-base/src/main/java/com/fr/widgettheme/theme/edit/widget/DesktopWidgetStyleEditPane.java
index aca4b690de..8bae70e837 100644
--- a/designer-base/src/main/java/com/fr/widgettheme/theme/edit/widget/DesktopWidgetStyleEditPane.java
+++ b/designer-base/src/main/java/com/fr/widgettheme/theme/edit/widget/DesktopWidgetStyleEditPane.java
@@ -2,20 +2,24 @@ package com.fr.widgettheme.theme.edit.widget;
 
 import com.fr.base.background.ColorBackground;
 import com.fr.base.theme.TemplateTheme;
+import com.fr.design.gui.icombobox.LineComboBox;
+import com.fr.design.gui.icombobox.UIComboBox;
 import com.fr.design.style.color.NewColorSelectBox;
+import com.fr.design.utils.DesignUtils;
+import com.fr.locale.InterProviderFactory;
+import com.fr.stable.StringUtils;
+import com.fr.util.ColorUtils;
 import com.fr.widgettheme.theme.widget.style.BorderStyle;
 import com.fr.widgettheme.theme.widget.style.ButtonBackgroundStyle;
 import com.fr.widgettheme.theme.widget.style.ThemeTextStyle;
 import com.fr.widgettheme.theme.widget.style.ThemedWidgetStyle;
-import com.fr.design.gui.ibutton.UIRadioButton;
 import com.fr.design.gui.ilable.UILabel;
 import com.fr.design.i18n.Toolkit;
-import com.fr.design.layout.FRGUIPaneFactory;
 import com.fr.widgettheme.theme.widget.theme.WidgetThemeDisplayConstants;
-import com.fr.widgettheme.util.ThemeTextStylePaneCreator;
+import com.fr.widgettheme.util.WidgetStyleComponentCombiner;
+import com.fr.widgettheme.util.WidgetThemeDesignerUtils;
 
-import javax.swing.ButtonGroup;
-import javax.swing.JPanel;
+import java.awt.Color;
 import java.awt.Component;
 
 
@@ -27,52 +31,47 @@ import java.awt.Component;
  * Created on 2023/3/28
  */
 public class DesktopWidgetStyleEditPane<T extends TemplateTheme> extends WidgetStyleEditPane<T> {
-    // 风格1
-    protected UIRadioButton style1;
-    // 风格2
-    protected UIRadioButton style2;
+
+    /**
+     * 字体名选择器
+     */
+    protected UIComboBox fontNameSelectBox;
 
     /**
      * 下拉面板背景颜色
      */
     private NewColorSelectBox selectBackgroundColorBox;
+
     public DesktopWidgetStyleEditPane() {
         super();
     }
 
     @Override
     public Component[][] generateComponent() {
-        initStyleEditor();
         initSelectBackgroundColorBox();
-        // 容纳风格1和风格2的panel
-        JPanel stylePane = new JPanel(FRGUIPaneFactory.createBoxFlowLayout());
-        stylePane.add(style1);
-        stylePane.add(style2);
-
+        initFontNameSelectBox();
         return new Component[][]{
                 new Component[]{new UILabel(Toolkit.i18nText("Fine-Design_Widget_Theme_Color")), colorSelectBox},
-                new Component[]{new UILabel(Toolkit.i18nText("Fine-Design_Widget_Theme_Style")), stylePane},
+                new Component[]{WidgetThemeDesignerUtils.createTopAlignmentLabel(Toolkit.i18nText("Fine-Design_Widget_Theme_Widget_Background")), WidgetStyleComponentCombiner.combineWidgetBackgroundComponent(widgetBgColorSelectBox, widgetBgAlphaDragPane, colorSelectBox.getPreferredSize().width)},
                 new Component[]{new UILabel(Toolkit.i18nText("Fine-Design_Widget_Theme_Border_Line")), lineComboBox},
+                new Component[]{null, lineComboColorSelectBox},
                 new Component[]{new UILabel(Toolkit.i18nText("Fine-Design_Widget_Theme_Border_Radius")), borderRadiusSpinner},
-                new Component[]{new UILabel(Toolkit.i18nText("Fine-Design_Widget_Theme_Text_Style")), ThemeTextStylePaneCreator.create(fontSizePane, fontColorButton)},
+                new Component[]{new UILabel(Toolkit.i18nText("Fine-Design_Widget_Theme_Icon_Color")), iconColorSelectBox},
+                new Component[]{new UILabel(Toolkit.i18nText("Fine-Design_Widget_Theme_Text_Style")), fontNameSelectBox},
+                new Component[]{new UILabel(Toolkit.i18nText("Fine-Design_Widget_Theme_Text_Style")), WidgetStyleComponentCombiner.combineTextStyleComponent(fontSizePane, fontColorButton, italic, bold)},
                 new Component[]{new UILabel(Toolkit.i18nText("Fine-Design_Widget_Background_Select_Box")), selectBackgroundColorBox}
         };
     }
 
-
-    private void initStyleEditor() {
-        style1 = new UIRadioButton(Toolkit.i18nText("Fine-Design_Widget_Theme_Style_1"));
-        style2 = new UIRadioButton(Toolkit.i18nText("Fine-Design_Widget_Theme_Style_2"));
-        ButtonGroup buttonGroup = new ButtonGroup();
-        buttonGroup.add(style1);
-        buttonGroup.add(style2);
-    }
-
     private void initSelectBackgroundColorBox() {
         selectBackgroundColorBox = new NewColorSelectBox(140, true);
         selectBackgroundColorBox.setSelectObject(WidgetThemeDisplayConstants.DEFAULT_THEME_COLOR);
     }
 
+    private void initFontNameSelectBox() {
+        fontNameSelectBox = new UIComboBox(DesignUtils.getAvailableFontFamilyNames4Report());
+    }
+
     @Override
     public void populateBean(T t) {
         ThemedWidgetStyle style = (ThemedWidgetStyle) t.getWidgetStyle();
@@ -80,17 +79,12 @@ public class DesktopWidgetStyleEditPane<T extends TemplateTheme> extends WidgetS
             style = new ThemedWidgetStyle();
             t.setWidgetStyle(style);
         }
-        if (style.getStyleType() == 1) {
-            style1.setSelected(true);
-        } else {
-            style2.setSelected(true);
-        }
         colorSelectBox.setSelectObject(style.getThemeColor());
-        lineComboBox.setSelectedLineStyle(style.getBorderStyle().getLineType());
-        borderRadiusSpinner.setValue(style.getBorderStyle().getRadius());
-        fontSizePane.setValue(style.getTextStyle().getFontSize());
-        fontColorButton.setColor(style.getTextStyle().getFontColor());
         selectBackgroundColorBox.setSelectObject(style.getSelectBackgroundColor());
+        iconColorSelectBox.setSelectObject(style.getIconColor());
+        populateBorder(style);
+        populateTextStyle(style);
+        populateWidgetBackground(style);
     }
 
     @Override
@@ -100,22 +94,72 @@ public class DesktopWidgetStyleEditPane<T extends TemplateTheme> extends WidgetS
             style = new ThemedWidgetStyle();
             t.setWidgetStyle(style);
         }
+        updateBorderStyle(style);
+        updateTextStyle(style);
+        updateButtonBackground(style);
+        updateWidgetBackground(style);
         style.setThemeColor(colorSelectBox.getSelectObject());
+        style.setSelectBackgroundColor(selectBackgroundColorBox.getSelectObject());
+        style.setIconColor(iconColorSelectBox.getSelectObject());
+    }
+
+    private void updateBorderStyle(ThemedWidgetStyle style) {
         BorderStyle borderStyle = new BorderStyle();
         borderStyle.setLineType(lineComboBox.getSelectedLineStyle());
         borderStyle.setRadius((int) borderRadiusSpinner.getValue());
+        borderStyle.setBorderColor(lineComboColorSelectBox.getSelectObject());
         style.setBorderStyle(borderStyle);
+    }
+
+    private void updateTextStyle(ThemedWidgetStyle style) {
         ThemeTextStyle textStyle = new ThemeTextStyle();
         textStyle.setFontSize(fontSizePane.getValue());
         textStyle.setFontColor(fontColorButton.getColor());
+        textStyle.setName((String) fontNameSelectBox.getSelectedItem());
+        textStyle.setBold(bold.isSelected());
+        textStyle.setItalic(italic.isSelected());
         style.setTextStyle(textStyle);
+    }
+
+    private void updateButtonBackground(ThemedWidgetStyle style) {
         ButtonBackgroundStyle buttonBackgroundStyle = new ButtonBackgroundStyle();
         ColorBackground buttonBackground = ColorBackground.getInstance(style.getThemeColor());
         buttonBackgroundStyle.setInitialBackground(buttonBackground);
         buttonBackgroundStyle.setOverBackground(buttonBackground);
         buttonBackgroundStyle.setClickBackground(buttonBackground);
         style.setButtonBackgroundStyle(buttonBackgroundStyle);
-        style.setStyleType(style1.isSelected() ? 1 : 2);
-        style.setSelectBackgroundColor(selectBackgroundColorBox.getSelectObject());
+    }
+
+    private void updateWidgetBackground(ThemedWidgetStyle style) {
+        Color bgColor = widgetBgColorSelectBox.getSelectObject();
+        style.setWidgetBackground(ColorUtils.createColorBackgroundWithAlpha(bgColor, widgetBgAlphaDragPane.updateBean()));
+    }
+
+    private void populateTextStyle(ThemedWidgetStyle style) {
+        ThemeTextStyle textStyle = style.getTextStyle();
+        fontSizePane.setValue(textStyle.getFontSize());
+        fontColorButton.setColor(textStyle.getFontColor());
+        bold.setSelected(textStyle.isBold());
+        italic.setSelected(textStyle.isItalic());
+        String fontName = StringUtils.isEmpty(textStyle.getName()) ? InterProviderFactory.getProvider().getLocText("Fine-Engine_Base_Song_TypeFace") : textStyle.getName();
+        fontNameSelectBox.setSelectedItem(fontName);
+    }
+
+    private void populateBorder(ThemedWidgetStyle style) {
+        lineComboBox.setSelectedLineStyle(style.getBorderStyle().getLineType());
+        lineComboColorSelectBox.setSelectObject(style.getBorderStyle().getBorderColor());
+        borderRadiusSpinner.setValue(style.getBorderStyle().getRadius());
+    }
+
+    private void populateWidgetBackground(ThemedWidgetStyle style) {
+        widgetBgColorSelectBox.setSelectObject(ColorUtils.ignoreColorAlpha(style.getWidgetBackground().getColor()));
+        widgetBgAlphaDragPane.populateBean(ColorUtils.roundColorAlphaDouble(style.getWidgetBackground().getColor()));
+    }
+
+    @Override
+    public void initLineBox() {
+        lineComboBox = new LineComboBox(WidgetThemeDisplayConstants.BORDER_LINE_STYLE_ARRAY);
+        lineComboColorSelectBox = new NewColorSelectBox(WidgetThemeDisplayConstants.THEME_WIDGET_COMPONENT_WIDTH, true);
+        lineComboBox.addItemListener(e -> lineComboColorSelectBox.setVisible(!Integer.valueOf(0).equals(e.getItem())));
     }
 }
\ No newline at end of file
diff --git a/designer-base/src/main/java/com/fr/widgettheme/theme/edit/widget/MobileWidgetStyleEditPane.java b/designer-base/src/main/java/com/fr/widgettheme/theme/edit/widget/MobileWidgetStyleEditPane.java
index ec6ef9aebb..0e5200418f 100644
--- a/designer-base/src/main/java/com/fr/widgettheme/theme/edit/widget/MobileWidgetStyleEditPane.java
+++ b/designer-base/src/main/java/com/fr/widgettheme/theme/edit/widget/MobileWidgetStyleEditPane.java
@@ -2,6 +2,8 @@ package com.fr.widgettheme.theme.edit.widget;
 
 import com.fr.base.theme.TemplateTheme;
 import com.fr.design.gui.frpane.FontSizeComboPane;
+import com.fr.design.style.color.NewColorSelectBox;
+import com.fr.util.ColorUtils;
 import com.fr.widgettheme.theme.widget.style.BorderStyle;
 import com.fr.widgettheme.theme.widget.style.MobileThemedWidgetStyle;
 import com.fr.design.gui.icombobox.LineComboBox;
@@ -36,6 +38,8 @@ public class MobileWidgetStyleEditPane<T extends TemplateTheme> extends WidgetSt
     public void initLineBox() {
         lineComboBox = new LineComboBox(WidgetThemeDisplayConstants.MOBILE_BORDER_LINE_STYLE_ARRAY);
         lineComboBox.setSelectedLineStyle(com.fr.stable.Constants.LINE_THIN);
+        lineComboColorSelectBox = new NewColorSelectBox(WidgetThemeDisplayConstants.THEME_WIDGET_COMPONENT_WIDTH, true);
+        lineComboBox.addItemListener(e -> lineComboColorSelectBox.setVisible(!Integer.valueOf(0).equals(e.getItem())));
     }
 
     @Override
@@ -51,10 +55,16 @@ public class MobileWidgetStyleEditPane<T extends TemplateTheme> extends WidgetSt
             t.setMobileWidgetStyle(style);
         }
         colorSelectBox.setSelectObject(style.getThemeColor());
+        widgetBgColorSelectBox.setSelectObject(ColorUtils.ignoreColorAlpha(style.getWidgetBackground().getColor()));
+        widgetBgAlphaDragPane.populateBean(ColorUtils.roundColorAlphaDouble(style.getWidgetBackground().getColor()));
         lineComboBox.setSelectedLineStyle(style.getBorderStyle().getLineType());
+        lineComboColorSelectBox.setSelectObject(style.getBorderStyle().getBorderColor());
+        iconColorSelectBox.setSelectObject(style.getIconColor());
         borderRadiusSpinner.setValue(style.getBorderStyle().getRadius());
         fontSizePane.setValue(style.getTextStyle().getFontSize());
         fontColorButton.setColor(style.getTextStyle().getFontColor());
+        bold.setSelected(style.getTextStyle().isBold());
+        italic.setSelected(style.getTextStyle().isItalic());
     }
 
     @Override
@@ -65,13 +75,18 @@ public class MobileWidgetStyleEditPane<T extends TemplateTheme> extends WidgetSt
             t.setMobileWidgetStyle(style);
         }
         style.setThemeColor(colorSelectBox.getSelectObject());
+        style.setWidgetBackground(ColorUtils.createColorBackgroundWithAlpha(widgetBgColorSelectBox.getSelectObject(), widgetBgAlphaDragPane.updateBean()));
         BorderStyle borderStyle = new BorderStyle();
         borderStyle.setLineType(lineComboBox.getSelectedLineStyle());
         borderStyle.setRadius((int) borderRadiusSpinner.getValue());
+        borderStyle.setBorderColor(lineComboColorSelectBox.getSelectObject());
         style.setBorderStyle(borderStyle);
+        style.setIconColor(iconColorSelectBox.getSelectObject());
         ThemeTextStyle textStyle = new ThemeTextStyle();
         textStyle.setFontSize(fontSizePane.getValue());
         textStyle.setFontColor(fontColorButton.getColor());
+        textStyle.setBold(bold.isSelected());
+        textStyle.setItalic(italic.isSelected());
         style.setTextStyle(textStyle);
     }
 
diff --git a/designer-base/src/main/java/com/fr/widgettheme/theme/edit/widget/WidgetStyleEditContainerPane.java b/designer-base/src/main/java/com/fr/widgettheme/theme/edit/widget/WidgetStyleEditContainerPane.java
index 789c0f61ac..16e4a4f58c 100644
--- a/designer-base/src/main/java/com/fr/widgettheme/theme/edit/widget/WidgetStyleEditContainerPane.java
+++ b/designer-base/src/main/java/com/fr/widgettheme/theme/edit/widget/WidgetStyleEditContainerPane.java
@@ -8,6 +8,7 @@ import com.fr.design.i18n.Toolkit;
 import com.fr.design.layout.FRGUIPaneFactory;
 import com.fr.design.layout.TableLayout;
 import com.fr.design.layout.TableLayoutHelper;
+import com.fr.widgettheme.ThemePreviewTerminal;
 import org.jetbrains.annotations.Nullable;
 
 import javax.swing.JPanel;
@@ -133,4 +134,8 @@ public class WidgetStyleEditContainerPane<T extends TemplateTheme> extends Basic
     protected String title4PopupWindow() {
         return Toolkit.i18nText("Fine-Design_Theme_Widget_Style");
     }
+
+    public ThemePreviewTerminal getTerminalStyle() {
+        return ThemePreviewTerminal.getTypeByCode(terminalStyleGroup.getSelectedIndex());
+    }
 }
\ No newline at end of file
diff --git a/designer-base/src/main/java/com/fr/widgettheme/theme/edit/widget/WidgetStyleEditPane.java b/designer-base/src/main/java/com/fr/widgettheme/theme/edit/widget/WidgetStyleEditPane.java
index 1c8ab2ff14..21a64ad229 100644
--- a/designer-base/src/main/java/com/fr/widgettheme/theme/edit/widget/WidgetStyleEditPane.java
+++ b/designer-base/src/main/java/com/fr/widgettheme/theme/edit/widget/WidgetStyleEditPane.java
@@ -4,8 +4,11 @@ import com.fr.base.theme.TemplateTheme;
 import com.fr.design.beans.BasicBeanPane;
 import com.fr.design.designer.IntervalConstants;
 import com.fr.design.gui.frpane.FontSizeComboPane;
+import com.fr.design.gui.frpane.UIPercentDragPane;
 import com.fr.design.gui.ibutton.UIColorButton;
+import com.fr.design.gui.ibutton.UIToggleButton;
 import com.fr.design.gui.icombobox.LineComboBox;
+import com.fr.design.gui.icontainer.UIScrollPane;
 import com.fr.design.gui.ilable.UILabel;
 import com.fr.design.gui.ispinner.UISpinner;
 import com.fr.design.gui.style.FRFontPane;
@@ -14,9 +17,11 @@ import com.fr.design.layout.FRGUIPaneFactory;
 import com.fr.design.layout.TableLayout;
 import com.fr.design.layout.TableLayoutHelper;
 import com.fr.design.style.color.NewColorSelectBox;
+import com.fr.general.IOUtils;
 import com.fr.stable.StringUtils;
 import com.fr.widgettheme.theme.widget.theme.WidgetThemeDisplayConstants;
-import com.fr.widgettheme.util.ThemeTextStylePaneCreator;
+import com.fr.widgettheme.util.WidgetStyleComponentCombiner;
+import com.fr.widgettheme.util.WidgetThemeDesignerUtils;
 import org.jetbrains.annotations.Nullable;
 
 import javax.swing.BorderFactory;
@@ -39,6 +44,11 @@ public class WidgetStyleEditPane<T extends TemplateTheme> extends BasicBeanPane<
 
     // 边框线型
     protected LineComboBox lineComboBox;
+
+    /**
+     * 边框颜色
+     */
+    protected NewColorSelectBox lineComboColorSelectBox;
     // 圆角边框
     protected UISpinner borderRadiusSpinner;
     /**
@@ -48,6 +58,24 @@ public class WidgetStyleEditPane<T extends TemplateTheme> extends BasicBeanPane<
 
     protected UIColorButton fontColorButton;
 
+    /**
+     * 控件背景和透明度配置面板
+     */
+    protected NewColorSelectBox widgetBgColorSelectBox;
+    protected UIPercentDragPane widgetBgAlphaDragPane;
+    /**
+     * 图标颜色
+     */
+    protected NewColorSelectBox iconColorSelectBox;
+
+    /**
+     * 字体粗体斜体配置
+     */
+    protected UIToggleButton bold;
+    protected UIToggleButton italic;
+
+    protected JPanel leftPanel;
+
     public WidgetStyleEditPane() {
         initComponents();
     }
@@ -55,15 +83,17 @@ public class WidgetStyleEditPane<T extends TemplateTheme> extends BasicBeanPane<
     private void initComponents() {
         this.setLayout(FRGUIPaneFactory.createBorderLayout());
         initCommonStyleEditor();
-        double f = TableLayout.PREFERRED;
+        double f = TableLayout.FILL;
         final double p = TableLayout.PREFERRED;
-        double[] rowSize = {p, p, p, p, p, p};
-        double[] columnSize = {p, p};
-        int[][] rowCount = {{1, 1}, {1, 1}, {1, 1}, {1, 1}, {1, 1}, {1, 1}};
+        double[] rowSize = {p, p, p, p, p, p, p, p, p};
+        double[] columnSize = {p, WidgetThemeDisplayConstants.THEME_WIDGET_COMPONENTS_COL_WIDTH};
+        int[][] rowCount = {{1, 1}, {1, 1}, {1, 1}, {1, 1}, {1, 1}, {1, 1}, {1, 1}, {1, 1}, {1, 1}};
         Component[][] components = generateComponent();
         JPanel customPane = TableLayoutHelper.createGapTableLayoutPane(components, rowSize, columnSize, rowCount, IntervalConstants.INTERVAL_W1, IntervalConstants.INTERVAL_L1);
-        customPane.setBorder(BorderFactory.createEmptyBorder(20, 10, 0, 10));
+        customPane.setBorder(BorderFactory.createEmptyBorder(20, 10, 20, 10));
         this.add(customPane, BorderLayout.NORTH);
+        UIScrollPane scrollPane = new UIScrollPane(customPane);
+        this.add(scrollPane);
     }
 
     /**
@@ -72,21 +102,29 @@ public class WidgetStyleEditPane<T extends TemplateTheme> extends BasicBeanPane<
      * @return components
      */
     public Component[][] generateComponent() {
-        return new Component[][]{new Component[]{
-                new UILabel(Toolkit.i18nText("Fine-Design_Widget_Theme_Color")), colorSelectBox},
+        return new Component[][]{
+                new Component[]{new UILabel(Toolkit.i18nText("Fine-Design_Widget_Theme_Color")), colorSelectBox},
+                new Component[]{WidgetThemeDesignerUtils.createTopAlignmentLabel(Toolkit.i18nText("Fine-Design_Widget_Theme_Widget_Background")), WidgetStyleComponentCombiner.combineWidgetBackgroundComponent(widgetBgColorSelectBox, widgetBgAlphaDragPane, colorSelectBox.getPreferredSize().width)},
                 new Component[]{new UILabel(Toolkit.i18nText("Fine-Design_Widget_Theme_Border_Line")), lineComboBox},
+                new Component[]{null, lineComboColorSelectBox},
                 new Component[]{new UILabel(Toolkit.i18nText("Fine-Design_Widget_Theme_Border_Radius")), borderRadiusSpinner},
-                new Component[]{new UILabel(Toolkit.i18nText("Fine-Design_Widget_Theme_Text_Style")), ThemeTextStylePaneCreator.create(fontSizePane, fontColorButton)}
+                new Component[]{new UILabel(Toolkit.i18nText("Fine-Design_Widget_Theme_Icon_Color")), iconColorSelectBox},
+                new Component[]{new UILabel(Toolkit.i18nText("Fine-Design_Widget_Theme_Text_Style")), WidgetStyleComponentCombiner.combineTextStyleComponent(fontSizePane, fontColorButton, italic, bold)}
         };
     }
 
     private void initCommonStyleEditor() {
         colorSelectBox = new NewColorSelectBox(WidgetThemeDisplayConstants.THEME_WIDGET_COMPONENT_WIDTH, true);
         colorSelectBox.setSelectObject(WidgetThemeDisplayConstants.DEFAULT_THEME_COLOR);
+        widgetBgColorSelectBox = new NewColorSelectBox(WidgetThemeDisplayConstants.THEME_WIDGET_COMPONENT_WIDTH, true);
+        widgetBgAlphaDragPane = new UIPercentDragPane();
         initLineBox();
         borderRadiusSpinner = new UISpinner(0, Integer.MAX_VALUE, 1);
+        iconColorSelectBox = new NewColorSelectBox(WidgetThemeDisplayConstants.THEME_WIDGET_COMPONENT_WIDTH, true);
         initFontSizePane();
         fontColorButton = new UIColorButton();
+        bold = new UIToggleButton(IOUtils.readIcon("/com/fr/design/images/m_format/cellstyle/bold.png"));
+        italic = new UIToggleButton(IOUtils.readIcon("/com/fr/design/images/m_format/cellstyle/italic.png"));
     }
 
     protected void initFontSizePane() {
@@ -97,7 +135,6 @@ public class WidgetStyleEditPane<T extends TemplateTheme> extends BasicBeanPane<
      * 初始化边框线型
      */
     public void initLineBox() {
-        lineComboBox = new LineComboBox(WidgetThemeDisplayConstants.BORDER_LINE_STYLE_ARRAY);
     }
 
 
diff --git a/designer-base/src/main/java/com/fr/widgettheme/theme/panel/ButtonStyleDefinedPane.java b/designer-base/src/main/java/com/fr/widgettheme/theme/panel/ButtonStyleDefinedPane.java
index c6ec951eb4..e65b372ac4 100644
--- a/designer-base/src/main/java/com/fr/widgettheme/theme/panel/ButtonStyleDefinedPane.java
+++ b/designer-base/src/main/java/com/fr/widgettheme/theme/panel/ButtonStyleDefinedPane.java
@@ -10,7 +10,6 @@ import com.fr.widgettheme.theme.bean.ButtonBackground;
 import com.fr.design.mainframe.widget.accessibles.AccessibleImgBackgroundEditor;
 import com.fr.general.Background;
 
-import javax.swing.BorderFactory;
 import javax.swing.JPanel;
 import java.awt.BorderLayout;
 import java.awt.Component;
@@ -48,7 +47,6 @@ public class ButtonStyleDefinedPane extends BasicPane {
                 new Component[]{new UILabel(com.fr.design.i18n.Toolkit.i18nText("Fine-Design_Form_Background_Click")), clickBackgroundPane},
         };
         JPanel panel = TableLayoutHelper.createGapTableLayoutPane(components, rowSize, columnSize, rowCount, 7, 7);
-        panel.setBorder(BorderFactory.createEmptyBorder(10, 0, 0, 0));
         this.add(panel, BorderLayout.CENTER);
 
     }
diff --git a/designer-base/src/main/java/com/fr/widgettheme/theme/panel/ControlPreviewCell.java b/designer-base/src/main/java/com/fr/widgettheme/theme/panel/ControlPreviewCell.java
index 7dca24b7c1..ec36032713 100644
--- a/designer-base/src/main/java/com/fr/widgettheme/theme/panel/ControlPreviewCell.java
+++ b/designer-base/src/main/java/com/fr/widgettheme/theme/panel/ControlPreviewCell.java
@@ -3,17 +3,19 @@ package com.fr.widgettheme.theme.panel;
 import com.fr.base.BaseUtils;
 import com.fr.base.Style;
 import com.fr.base.theme.TemplateTheme;
+import com.fr.widgettheme.ThemePreviewTerminal;
+import com.fr.widgettheme.theme.widget.style.ThemeTextStyle;
 import com.fr.widgettheme.theme.widget.style.ThemedWidgetStyle;
 import com.fr.design.layout.FRGUIPaneFactory;
 import com.fr.general.FRFont;
 import com.fr.stable.Constants;
+import com.fr.widgettheme.theme.widget.theme.WidgetThemeDisplayConstants;
 
 import javax.swing.Icon;
 import javax.swing.ImageIcon;
 import javax.swing.JPanel;
 import java.awt.Color;
 import java.awt.Dimension;
-import java.awt.Font;
 import java.awt.Graphics;
 import java.awt.Graphics2D;
 import java.awt.LayoutManager;
@@ -38,6 +40,11 @@ public class ControlPreviewCell extends JPanel {
      */
     protected String value;
     protected TemplateTheme reportTheme;
+
+    /**
+     * 主题预览类型，默认为PC端
+     */
+    protected ThemePreviewTerminal themePreviewTerminal = ThemePreviewTerminal.PC;
     /**
      * 字体的颜色
      */
@@ -69,9 +76,10 @@ public class ControlPreviewCell extends JPanel {
     /**
      * 主题样式变化后监听改变
      */
-    public void refresh(TemplateTheme reportTheme) {
+    public void refresh(TemplateTheme reportTheme, ThemePreviewTerminal type) {
         this.reportTheme = reportTheme;
-        ThemedWidgetStyle widgetStyle = (ThemedWidgetStyle) this.reportTheme.getWidgetStyle();
+        this.themePreviewTerminal = type;
+        ThemedWidgetStyle widgetStyle = this.themePreviewTerminal.getThemeWidgetStyle(reportTheme);
         //主题色设置为透明或者插件启动前已有的主题启动插件后主题色为null
         if (widgetStyle.getThemeColor() == null) {
             widgetStyle.setThemeColor(DEFAULT_THEME_COLOR);
@@ -85,24 +93,15 @@ public class ControlPreviewCell extends JPanel {
         this.paintBgColor(g, widgetStyle, DEFAULT_ALPHA);
     }
 
-    public boolean isDefaultStyle() {
-        ThemedWidgetStyle widgetStyle = (ThemedWidgetStyle) reportTheme.getWidgetStyle();
-        return widgetStyle.getStyleType() == ThemedWidgetStyle.DEFAULT_STYLE;
-    }
-
-    public Color getThemeColor() {
-
-        ThemedWidgetStyle widgetStyle = (ThemedWidgetStyle) reportTheme.getWidgetStyle();
-        return widgetStyle.getThemeColor();
-
+    public Color getIconColor() {
+        return this.themePreviewTerminal.getThemeWidgetStyle(reportTheme).getIconColor();
     }
 
     protected Icon setStyleTwoIcon(Icon icon, Icon defaultIcon) {
-        if (this.reportTheme != null && !isDefaultStyle()) {
-
+        if (this.reportTheme != null) {
             if (icon instanceof ImageIcon) {
                 ImageIcon imageIcon = (ImageIcon) icon;
-                BufferedImage bufferedImage = ImageUtils.colorImage(ImageUtils.imageIconToBufferedImage(imageIcon), getThemeColor());
+                BufferedImage bufferedImage = ImageUtils.colorImage(ImageUtils.imageIconToBufferedImage(imageIcon), getIconColor());
                 return new ImageIcon(bufferedImage);
             }
         }
@@ -113,12 +112,15 @@ public class ControlPreviewCell extends JPanel {
      * 填充圆角矩形背景色
      */
     public void paintBgColor(Graphics g, ThemedWidgetStyle widgetStyle, int alpha) {
-        Color themeColor = widgetStyle.getThemeColor();
+        ThemedWidgetStyle themeWidgetStyle = this.themePreviewTerminal.getThemeWidgetStyle(this.reportTheme);
+        Color themeColor = themeWidgetStyle.getThemeColor();
+        themeColor = themeColor == null ? WidgetThemeDisplayConstants.DEFAULT_TRANSPARENT_COLOR : themeColor;
         g.setColor(new Color(themeColor.getRed(), themeColor.getGreen(), themeColor.getBlue(), alpha));
-        g.fillRoundRect(0, 0, getSize().width - 1, getSize().height - 1, widgetStyle.getBorderStyle().getRadius(), widgetStyle.getBorderStyle().getRadius());
+        g.fillRoundRect(0, 0, getSize().width - 1, getSize().height - 1, (int) widgetStyle.getBorderStyle().getRadius(), (int) widgetStyle.getBorderStyle().getRadius());
         //需要重新绘制一遍字体,否则会被颜色填充给遮住
         Graphics2D g2d = (Graphics2D) g.create();
-        FRFont font = FRFont.getInstance(FRFont.DEFAULT_FONTNAME, Font.PLAIN, widgetStyle.getTextStyle().getFontSize(), textColor);
+        ThemeTextStyle textStyle = themeWidgetStyle.getTextStyle();
+        FRFont font = FRFont.getInstance(textStyle.getName(), textStyle.getCompositeFontStyle(), textStyle.getFontSize(), textStyle.getFontColor());
         BaseUtils.drawStringStyleInRotation(g2d, getWidth(), getHeight(), this.value,
                 Style.getInstance(font).deriveHorizontalAlignment(Constants.LEFT)
                         .deriveTextStyle(Style.TEXTSTYLE_SINGLELINE), NO_SCALE_RESOLUTION);
@@ -131,8 +133,8 @@ public class ControlPreviewCell extends JPanel {
             return;
         }
         Graphics2D g2d = (Graphics2D) g.create();
-        ThemedWidgetStyle widgetStyle = (ThemedWidgetStyle) reportTheme.getWidgetStyle();
-        FRFont font = FRFont.getInstance(FRFont.DEFAULT_FONTNAME, Font.PLAIN, widgetStyle.getTextStyle().getFontSize(), textColor);
+        ThemeTextStyle textStyle = this.themePreviewTerminal.getThemeWidgetStyle(reportTheme).getTextStyle();
+        FRFont font = FRFont.getInstance(textStyle.getName(), textStyle.getCompositeFontStyle(), textStyle.getFontSize(), textStyle.getFontColor());
         //每个预览格子通用的字体绘制
         BaseUtils.drawStringStyleInRotation(g2d, getWidth(), getHeight(), this.value,
                 Style.getInstance(font).deriveHorizontalAlignment(Constants.LEFT)
diff --git a/designer-base/src/main/java/com/fr/widgettheme/theme/panel/ControlPreviewCellWithIcon.java b/designer-base/src/main/java/com/fr/widgettheme/theme/panel/ControlPreviewCellWithIcon.java
index eb5f1eb9b9..491af469f8 100644
--- a/designer-base/src/main/java/com/fr/widgettheme/theme/panel/ControlPreviewCellWithIcon.java
+++ b/designer-base/src/main/java/com/fr/widgettheme/theme/panel/ControlPreviewCellWithIcon.java
@@ -5,7 +5,6 @@ import com.fr.base.svg.IconUtils;
 import com.fr.widgettheme.theme.widget.style.ThemedWidgetStyle;
 import com.fr.design.border.UIRoundedBorder;
 import com.fr.stable.StringUtils;
-import com.fr.widgettheme.theme.widget.theme.WidgetThemeDisplayConstants;
 
 import javax.swing.Icon;
 import javax.swing.JLabel;
@@ -64,14 +63,12 @@ public class ControlPreviewCellWithIcon extends ControlPreviewCell {
         super.paintComponent(g);
         ThemedWidgetStyle widgetStyle = (ThemedWidgetStyle) reportTheme.getWidgetStyle();
         //风格一边框不显示主题色
-        Color borderColor = isDefaultStyle() ? DEFAULT_COLOR : widgetStyle.getThemeColor();
+        Color borderColor = widgetStyle.getBorderStyle().getBorderColor();
         this.setBorder(new UIRoundedBorder(widgetStyle.getBorderStyle().getLineType()
-                , borderColor, widgetStyle.getBorderStyle().getRadius()));
+                , borderColor, (int) widgetStyle.getBorderStyle().getRadius()));
         icon = setStyleTwoIcon(icon, defaultIcon);
         this.jLabel.setIcon(icon);
         this.add(jLabel, BorderLayout.EAST);
-        if (widgetStyle.getStyleType() != ThemedWidgetStyle.DEFAULT_STYLE) {
-            paintBgColor(g, widgetStyle, CONTROL_ALPHA);
-        }
+        paintBgColor(g, widgetStyle, CONTROL_ALPHA);
     }
 }
diff --git a/designer-base/src/main/java/com/fr/widgettheme/theme/panel/ControlPreviewPane.java b/designer-base/src/main/java/com/fr/widgettheme/theme/panel/ControlPreviewPane.java
index 110e6943c4..69a34fd3bc 100644
--- a/designer-base/src/main/java/com/fr/widgettheme/theme/panel/ControlPreviewPane.java
+++ b/designer-base/src/main/java/com/fr/widgettheme/theme/panel/ControlPreviewPane.java
@@ -6,6 +6,7 @@ import com.fr.design.i18n.Toolkit;
 import com.fr.design.layout.FRGUIPaneFactory;
 import com.fr.design.mainframe.theme.preview.ThemePreviewed;
 import com.fr.general.Background;
+import com.fr.widgettheme.ThemePreviewTerminal;
 
 import javax.swing.JPanel;
 import java.awt.Color;
@@ -42,9 +43,14 @@ public class ControlPreviewPane extends JPanel implements ThemePreviewed<Templat
 
     @Override
     public void refresh(TemplateTheme style) {
+        refresh(style, ThemePreviewTerminal.PC);
+    }
+
+    @Override
+    public void refresh(TemplateTheme style, ThemePreviewTerminal type) {
         this.background = style.getParamContainerStyle().getBackground();
         for (ControlPreviewCell controlPreviewCell : list) {
-            controlPreviewCell.refresh(style);
+            controlPreviewCell.refresh(style, type);
         }
     }
 
diff --git a/designer-base/src/main/java/com/fr/widgettheme/theme/panel/NormalButtonPreviewCell.java b/designer-base/src/main/java/com/fr/widgettheme/theme/panel/NormalButtonPreviewCell.java
index 7d734b2e16..9a1adf7f3d 100644
--- a/designer-base/src/main/java/com/fr/widgettheme/theme/panel/NormalButtonPreviewCell.java
+++ b/designer-base/src/main/java/com/fr/widgettheme/theme/panel/NormalButtonPreviewCell.java
@@ -1,12 +1,15 @@
 package com.fr.widgettheme.theme.panel;
 
-
+import com.fr.widgettheme.theme.widget.style.ThemeTextStyle;
 import com.fr.widgettheme.theme.widget.style.ThemedWidgetStyle;
 import com.fr.design.gui.ilable.UILabel;
 import com.fr.design.i18n.Toolkit;
 import com.fr.general.FRFont;
 
-import java.awt.*;
+import java.awt.BorderLayout;
+import java.awt.Dimension;
+import java.awt.Graphics;
+import java.awt.LayoutManager;
 
 /**
  * 主题参数面板按钮预览格子
@@ -40,10 +43,12 @@ public class NormalButtonPreviewCell extends ControlPreviewCell {
     @Override
     public void paintComponent(Graphics g) {
         super.paintComponent(g);
-        ThemedWidgetStyle widgetStyle = (ThemedWidgetStyle) reportTheme.getWidgetStyle();
+        ThemedWidgetStyle widgetStyle = this.themePreviewTerminal.getThemeWidgetStyle(this.reportTheme);
         paintBgColor(g, widgetStyle);
-        uiLabel.setForeground(Color.WHITE);
-        FRFont font = FRFont.getInstance(FRFont.DEFAULT_FONTNAME, Font.PLAIN, widgetStyle.getTextStyle().getFontSize(), Color.WHITE);
+        uiLabel.setBackground(widgetStyle.getThemeColor());
+        ThemeTextStyle textStyle = widgetStyle.getTextStyle();
+        uiLabel.setForeground(textStyle.getFontColor());
+        FRFont font = FRFont.getInstance(textStyle.getName(), textStyle.getCompositeFontStyle(), textStyle.getFontSize(), textStyle.getFontColor());
         uiLabel.setFont(font);
         this.add(uiLabel, BorderLayout.CENTER);
     }
diff --git a/designer-base/src/main/java/com/fr/widgettheme/theme/panel/RoundControlPreviewCell.java b/designer-base/src/main/java/com/fr/widgettheme/theme/panel/RoundControlPreviewCell.java
index dc98146b35..4b527dd4f6 100644
--- a/designer-base/src/main/java/com/fr/widgettheme/theme/panel/RoundControlPreviewCell.java
+++ b/designer-base/src/main/java/com/fr/widgettheme/theme/panel/RoundControlPreviewCell.java
@@ -36,8 +36,7 @@ public class RoundControlPreviewCell extends ControlPreviewCell {
     public void paintComponent(Graphics g) {
         super.paintComponent(g);
         ThemedWidgetStyle widgetStyle = (ThemedWidgetStyle) reportTheme.getWidgetStyle();
-        //风格一边框不显示主题色
-        Color borderColor = isDefaultStyle() ? DEFAULT_COLOR : widgetStyle.getThemeColor();
+        Color borderColor = widgetStyle.getBorderStyle().getBorderColor();
         Graphics2D g2d = (Graphics2D) g.create();
         g2d.setColor(borderColor);
         g2d.drawOval(5, 9, 15, 15);
diff --git a/designer-base/src/main/java/com/fr/widgettheme/theme/panel/TextPreviewCell.java b/designer-base/src/main/java/com/fr/widgettheme/theme/panel/TextPreviewCell.java
index c79be9f69d..6549159b34 100644
--- a/designer-base/src/main/java/com/fr/widgettheme/theme/panel/TextPreviewCell.java
+++ b/designer-base/src/main/java/com/fr/widgettheme/theme/panel/TextPreviewCell.java
@@ -1,9 +1,10 @@
 package com.fr.widgettheme.theme.panel;
 
-
 import com.fr.base.theme.TemplateTheme;
+import com.fr.widgettheme.ThemePreviewTerminal;
+import com.fr.widgettheme.theme.widget.style.ThemeTextStyle;
 
-import java.awt.*;
+import java.awt.LayoutManager;
 
 /**
  * 文字预览格子
@@ -24,13 +25,9 @@ public class TextPreviewCell extends ControlPreviewCell {
     }
 
     @Override
-    public void refresh(TemplateTheme reportTheme) {
-        super.refresh(reportTheme);
-        // 文字根据是否深色主题自适应改变
-        if (reportTheme.isDark()) {
-            textColor = Color.WHITE;
-        } else {
-            textColor = Color.BLACK;
-        }
+    public void refresh(TemplateTheme reportTheme, ThemePreviewTerminal type) {
+        super.refresh(reportTheme, type);
+        ThemeTextStyle textStyle = type.getThemeWidgetStyle(reportTheme).getTextStyle();
+        textColor = textStyle.getFontColor();
     }
 }
diff --git a/designer-base/src/main/java/com/fr/widgettheme/theme/panel/WidgetDisplayFormThemePreviewPane.java b/designer-base/src/main/java/com/fr/widgettheme/theme/panel/WidgetDisplayFormThemePreviewPane.java
index 1ae886f62c..587e473a87 100644
--- a/designer-base/src/main/java/com/fr/widgettheme/theme/panel/WidgetDisplayFormThemePreviewPane.java
+++ b/designer-base/src/main/java/com/fr/widgettheme/theme/panel/WidgetDisplayFormThemePreviewPane.java
@@ -21,6 +21,7 @@ import com.fr.plugin.chart.type.RadiusType;
 import com.fr.plugin.chart.vanchart.VanChart;
 import com.fr.stable.Constants;
 import com.fr.stable.StringUtils;
+import com.fr.widgettheme.ThemePreviewTerminal;
 
 import javax.swing.JPanel;
 import java.awt.AlphaComposite;
@@ -100,12 +101,17 @@ public class WidgetDisplayFormThemePreviewPane extends TemplateThemePreviewPane<
 
     @Override
     public void refresh(FormTheme theme) {
+        refresh(theme, ThemePreviewTerminal.PC);
+    }
+
+    @Override
+    public void refresh(FormTheme theme, ThemePreviewTerminal themeStyleType) {
         background = theme.getBodyStyle().getStyle().getBackground();
         alpha = theme.getBodyStyle().getStyle().getAlpha();
         elementCasePane.refresh(theme);
         columnChartPreviewPane.refresh(theme);
         pieChartPreviewPane.refresh(theme);
-        controlPreviewPane.refresh(theme);
+        controlPreviewPane.refresh(theme, themeStyleType);
         repaint();
     }
 
diff --git a/designer-base/src/main/java/com/fr/widgettheme/theme/panel/WidgetDisplayReportThemePreviewPane.java b/designer-base/src/main/java/com/fr/widgettheme/theme/panel/WidgetDisplayReportThemePreviewPane.java
index 31da4aab81..a943cf4c4c 100644
--- a/designer-base/src/main/java/com/fr/widgettheme/theme/panel/WidgetDisplayReportThemePreviewPane.java
+++ b/designer-base/src/main/java/com/fr/widgettheme/theme/panel/WidgetDisplayReportThemePreviewPane.java
@@ -13,6 +13,7 @@ import com.fr.general.Background;
 import com.fr.log.FineLoggerFactory;
 import com.fr.plugin.chart.column.VanChartColumnPlot;
 import com.fr.plugin.chart.vanchart.VanChart;
+import com.fr.widgettheme.ThemePreviewTerminal;
 
 import java.awt.BorderLayout;
 import java.awt.Color;
@@ -59,10 +60,15 @@ public class WidgetDisplayReportThemePreviewPane extends TemplateThemePreviewPan
 
     @Override
     public void refresh(ReportTheme theme) {
+        refresh(theme, ThemePreviewTerminal.PC);
+    }
+
+    @Override
+    public void refresh(ReportTheme theme, ThemePreviewTerminal terminal) {
         background = theme.getBodyStyle().getBackground();
         reportPreviewPane.refresh(theme);
         chartPreviewPane.refresh(theme);
-        controlPreviewPane.refresh(theme);
+        controlPreviewPane.refresh(theme, terminal);
         repaint();
     }
 
diff --git a/designer-base/src/main/java/com/fr/widgettheme/util/ThemeTextStylePaneCreator.java b/designer-base/src/main/java/com/fr/widgettheme/util/ThemeTextStylePaneCreator.java
deleted file mode 100644
index 133f258646..0000000000
--- a/designer-base/src/main/java/com/fr/widgettheme/util/ThemeTextStylePaneCreator.java
+++ /dev/null
@@ -1,40 +0,0 @@
-package com.fr.widgettheme.util;
-
-import com.fr.design.gui.frpane.FontSizeComboPane;
-import com.fr.design.gui.ibutton.UIColorButton;
-import com.fr.design.layout.TableLayout;
-import com.fr.design.layout.TableLayoutHelper;
-
-import javax.swing.Box;
-import javax.swing.JPanel;
-import java.awt.Component;
-
-/**
- * 创建主题文本样式的工具类
- *
- * @author obo
- * @since 11.0
- * Created on 2023/12/21
- */
-public class ThemeTextStylePaneCreator {
-    private ThemeTextStylePaneCreator() {}
-
-    /**
-     * 创建主题文本样式配置面板
-     * 包含字体大小下拉框和字体颜色按钮
-     * 可以自适应布局
-     *
-     * @param fontSizePane 字体大小配置
-     * @param fontColorButton 字体颜色配置
-     * @return 文本样式面板
-     */
-    public static JPanel create(FontSizeComboPane fontSizePane, UIColorButton fontColorButton) {
-        Component[][] components = {{fontSizePane, Box.createHorizontalStrut(5), fontColorButton}};
-        double f = TableLayout.FILL;
-        double p = TableLayout.PREFERRED;
-        double[] rowSize = {f};
-        double[] columnSize = {f, p, p};
-        int[][] rowCount = {{1, 1, 1}};
-        return TableLayoutHelper.createGapTableLayoutPane(components, rowSize, columnSize, rowCount, 0, 0);
-    }
-}
diff --git a/designer-base/src/main/java/com/fr/widgettheme/util/WidgetStyleComponentCombiner.java b/designer-base/src/main/java/com/fr/widgettheme/util/WidgetStyleComponentCombiner.java
new file mode 100644
index 0000000000..6fd2757c9a
--- /dev/null
+++ b/designer-base/src/main/java/com/fr/widgettheme/util/WidgetStyleComponentCombiner.java
@@ -0,0 +1,131 @@
+package com.fr.widgettheme.util;
+
+import com.fr.design.designer.IntervalConstants;
+import com.fr.design.gui.frpane.FontSizeComboPane;
+import com.fr.design.gui.frpane.UIPercentDragPane;
+import com.fr.design.gui.ibutton.UIColorButton;
+import com.fr.design.gui.ibutton.UIToggleButton;
+import com.fr.design.gui.icombobox.LineComboBox;
+import com.fr.design.gui.icombobox.UIComboBox;
+import com.fr.design.i18n.Toolkit;
+import com.fr.design.layout.TableLayout;
+import com.fr.design.layout.TableLayoutHelper;
+import com.fr.design.style.color.NewColorSelectBox;
+import com.fr.design.widget.FRWidgetFactory;
+
+import javax.swing.JPanel;
+import java.awt.Component;
+
+/**
+ * 创建控件样式组合配置面板的工具类
+ *
+ * @author obo
+ * @since 11.0
+ * Created on 2023/12/21
+ */
+public class WidgetStyleComponentCombiner {
+
+    private static final double F = TableLayout.FILL;
+    private static final double P = TableLayout.PREFERRED;
+
+
+    private WidgetStyleComponentCombiner() {
+    }
+
+    /**
+     * 组合主题文本样式配置面板
+     * 包含字体大小下拉框和字体颜色按钮
+     *
+     * @param fontSizePane    字体大小配置
+     * @param fontColorButton 字体颜色配置
+     * @param bold            粗体
+     * @param italic          斜体
+     * @return 文本样式面板
+     */
+    public static JPanel combineTextStyleComponent(FontSizeComboPane fontSizePane, UIColorButton fontColorButton, UIToggleButton bold, UIToggleButton italic) {
+        Component[][] components = {{fontSizePane, fontColorButton, bold, italic}};
+        double[] rowSize = {P};
+        double[] columnSize = {F, P, P, P};
+        int[][] rowCount = {{1, 1, 1, 1}};
+        return TableLayoutHelper.createGapTableLayoutPane(components, rowSize, columnSize, rowCount, 5, 5);
+    }
+
+    /**
+     * 组合主题文本样式配置面板
+     * 包含字体大小下拉框和字体颜色按钮
+     *
+     * @param fontNameSelectBox 字体名配置
+     * @param fontSizePane      字体大小配置
+     * @param fontColorButton   字体颜色配置
+     * @param bold              粗体
+     * @param italic            斜体
+     * @return 文本样式面板
+     */
+    public static JPanel combineTextStyleComponent(UIComboBox fontNameSelectBox, FontSizeComboPane fontSizePane, UIColorButton fontColorButton, UIToggleButton bold, UIToggleButton italic) {
+        Component[][] components = {
+                {fontNameSelectBox, null, null, null},
+                {fontSizePane, fontColorButton, bold, italic}
+        };
+        double[] rowSize = {P, P};
+        double[] columnSize = {F, P, P, P};
+        int[][] rowCount = {
+                {1, 1, 1, 1},
+                {1, 1, 1, 1}
+        };
+        return TableLayoutHelper.createGapTableLayoutPane(components, rowSize, columnSize, rowCount, 5, 5);
+    }
+
+    /**
+     * 组合控件背景配置面板
+     *
+     * @param colorSelectBox 颜色下拉框
+     * @param alphaDragPane  透明度
+     * @param columnWidth    列宽
+     * @return 文本样式面板
+     */
+    public static JPanel combineWidgetBackgroundComponent(NewColorSelectBox colorSelectBox,
+                                                          UIPercentDragPane alphaDragPane,
+                                                          double columnWidth) {
+        Component[][] components = {
+                {colorSelectBox},
+                {FRWidgetFactory.createLineWrapLabel(Toolkit.i18nText("Fine-Design_Form_Widget-Style_Alpha"))},
+                {alphaDragPane}
+        };
+        double[] rowSize = {P, P, P};
+        double[] columnSize = {columnWidth};
+        int[][] rowCount = {{1}, {1}, {1}};
+        return TableLayoutHelper.createGapTableLayoutPane(components, rowSize, columnSize, rowCount, IntervalConstants.INTERVAL_L1, IntervalConstants.INTERVAL_L1);
+    }
+
+    /**
+     * 组合控件边框配置面板
+     *
+     * @param lineComboBox            字体大小配置
+     * @param lineComboColorSelectBox 字体颜色配置
+     * @return 文本样式面板
+     */
+    public static JPanel combineWidgetBorderComponent(LineComboBox lineComboBox, NewColorSelectBox lineComboColorSelectBox) {
+        return combineWidgetBorderComponent(lineComboBox, lineComboColorSelectBox, P);
+    }
+
+    /**
+     * 组合控件边框配置面板
+     *
+     * @param lineComboBox            字体大小配置
+     * @param lineComboColorSelectBox 字体颜色配置
+     * @param columnWidth             指定的列宽
+     * @return 文本样式面板
+     */
+    public static JPanel combineWidgetBorderComponent(LineComboBox lineComboBox,
+                                                      NewColorSelectBox lineComboColorSelectBox,
+                                                      double columnWidth) {
+        Component[][] components = {
+                {lineComboBox},
+                {lineComboColorSelectBox}
+        };
+        double[] rowSize = {P, P};
+        double[] columnSize = {columnWidth};
+        int[][] rowCount = {{1}, {1}};
+        return TableLayoutHelper.createGapTableLayoutPane(components, rowSize, columnSize, rowCount, IntervalConstants.INTERVAL_L1, IntervalConstants.INTERVAL_L1);
+    }
+}
diff --git a/designer-base/src/main/java/com/fr/widgettheme/util/WidgetThemeDesignerUtils.java b/designer-base/src/main/java/com/fr/widgettheme/util/WidgetThemeDesignerUtils.java
index 296b5e2e5b..452fb945b0 100644
--- a/designer-base/src/main/java/com/fr/widgettheme/util/WidgetThemeDesignerUtils.java
+++ b/designer-base/src/main/java/com/fr/widgettheme/util/WidgetThemeDesignerUtils.java
@@ -2,10 +2,17 @@ package com.fr.widgettheme.util;
 
 import com.fr.base.io.AttrMark;
 import com.fr.base.io.IOFile;
+import com.fr.base.theme.TemplateTheme;
 import com.fr.design.file.HistoryTemplateListCache;
+import com.fr.design.gui.ilable.UILabel;
 import com.fr.design.mainframe.JTemplate;
 import com.fr.stable.StringUtils;
 import com.fr.widgettheme.control.attr.WidgetDisplayEnhanceMarkAttr;
+import com.fr.widgettheme.theme.widget.theme.WidgetThemeDisplayConstants;
+import org.jetbrains.annotations.NotNull;
+
+import javax.swing.SwingConstants;
+import java.awt.Color;
 
 /**
  * 控件主题设计器部分工具类
@@ -43,4 +50,31 @@ public class WidgetThemeDesignerUtils {
         }
         return false;
     }
+    /**
+     * 返回当前编辑模版的主题深浅
+     */
+    public static boolean isCurrentTemplateThemeDark() {
+        JTemplate<?, ?> jTemplate = HistoryTemplateListCache.getInstance().getCurrentEditingTemplate();
+        if (JTemplate.isValid(jTemplate)) {
+            TemplateTheme theme = jTemplate.getTemplateTheme();
+            if (theme != null) {
+                return theme.isDark();
+            }
+            return false;
+        }
+        throw new IllegalArgumentException("The current template is not valid");
+    }
+
+    /**
+     * 创建垂直方向顶部对齐的label
+     */
+    @NotNull
+    public static UILabel createTopAlignmentLabel(String labelName) {
+        if(StringUtils.isEmpty(labelName)) {
+            return new UILabel("");
+        }
+        UILabel label = new UILabel(labelName);
+        label.setVerticalAlignment(SwingConstants.TOP);
+        return label;
+    }
 }
diff --git a/designer-base/src/main/java/com/fr/widgettheme/widget/mobile/pane/DisplayEnhanceMobileStyleDefinePane.java b/designer-base/src/main/java/com/fr/widgettheme/widget/mobile/pane/DisplayEnhanceMobileStyleDefinePane.java
index a0ed4159c7..035fb32e5b 100644
--- a/designer-base/src/main/java/com/fr/widgettheme/widget/mobile/pane/DisplayEnhanceMobileStyleDefinePane.java
+++ b/designer-base/src/main/java/com/fr/widgettheme/widget/mobile/pane/DisplayEnhanceMobileStyleDefinePane.java
@@ -1,6 +1,8 @@
 package com.fr.widgettheme.widget.mobile.pane;
 
 import com.fr.base.background.ColorBackground;
+import com.fr.design.gui.frpane.UIPercentDragPane;
+import com.fr.util.ColorUtils;
 import com.fr.widgettheme.theme.widget.style.MobileThemedWidgetStyle;
 import com.fr.widgettheme.theme.widget.mobile.style.WidgetThemeMobileCommonExtraStyle;
 import com.fr.design.beans.BasicBeanPane;
@@ -16,7 +18,6 @@ import com.fr.design.layout.FRGUIPaneFactory;
 import com.fr.design.layout.TableLayoutHelper;
 import com.fr.design.mainframe.JTemplate;
 import com.fr.design.mainframe.mobile.ui.MobileStyleCustomDefinePane;
-import com.fr.design.style.color.ColorSelectBox;
 import com.fr.design.style.color.NewColorSelectBox;
 import com.fr.design.utils.gui.GUICoreUtils;
 import com.fr.form.ui.Widget;
@@ -27,8 +28,11 @@ import com.fr.invoke.Reflect;
 import com.fr.widgettheme.theme.widget.theme.WidgetThemeDisplayConstants;
 import com.fr.stable.Constants;
 import com.fr.stable.StringUtils;
+import com.fr.widgettheme.util.WidgetStyleComponentCombiner;
+import com.fr.widgettheme.util.WidgetThemeDesignerUtils;
 
 import javax.swing.JPanel;
+import javax.swing.SwingConstants;
 import javax.swing.border.EmptyBorder;
 import javax.swing.border.TitledBorder;
 import java.awt.BorderLayout;
@@ -59,9 +63,13 @@ public class DisplayEnhanceMobileStyleDefinePane extends BasicBeanPane<MobileSty
     protected Color titleColor = new Color(47, 142, 241);
     protected JPanel commonPane;
     protected LineComboBox borderType;
+    protected NewColorSelectBox borderColorSelectBox;
     protected UISpinner borderRadius;
     protected MobileStyleFontConfigPane fontConfigPane;
-    protected ColorSelectBox widgetBackgroundSelectBox;
+    protected NewColorSelectBox widgetBackgroundSelectBox;
+    protected UIPercentDragPane widgetBgAlphaDragPane;
+    protected NewColorSelectBox iconColorSelectBox;
+
 
     protected MobileStyle mobileStyle;
 
@@ -94,7 +102,15 @@ public class DisplayEnhanceMobileStyleDefinePane extends BasicBeanPane<MobileSty
                 fontConfigPane.populateBean(style.getNewFont());
             }
             if (style.getWidgetBackground() != null) {
-                widgetBackgroundSelectBox.setSelectObject(((ColorBackground) style.getWidgetBackground()).getColor());
+                Color color = ((ColorBackground) style.getWidgetBackground()).getColor();
+                widgetBackgroundSelectBox.setSelectObject(ColorUtils.ignoreColorAlpha(color));
+                widgetBgAlphaDragPane.populateBean(ColorUtils.roundColorAlphaDouble(color));
+            }
+            if (style.getBorderColor() != null) {
+                borderColorSelectBox.setSelectObject(style.getBorderColor());
+            }
+            if (style.getIconColor() != null) {
+                iconColorSelectBox.setSelectObject(style.getIconColor());
             }
         }
         this.customBeanPane.populateBean(ob);
@@ -105,11 +121,13 @@ public class DisplayEnhanceMobileStyleDefinePane extends BasicBeanPane<MobileSty
         mobileStyle = Reflect.on(mobileStyleClazz).create().get();
         WidgetThemeMobileCommonExtraStyle extraStyle = new WidgetThemeMobileCommonExtraStyle();
         extraStyle.setCustom(customCombo.getSelectedIndex() == 1);
-        extraStyle.setThemeColor(themeColorSelectBox.getSelectObject());
-        extraStyle.setBorderType(borderType.getSelectedLineStyle());
-        extraStyle.setBorderRadius(borderRadius.getValue());
-        extraStyle.setNewFont(fontConfigPane.updateBean());
-        extraStyle.setWidgetBackground(ColorBackground.getInstance(widgetBackgroundSelectBox.getSelectObject()));
+        setThemeColor(extraStyle);
+        setIconColor(extraStyle);
+        setBorderType(extraStyle);
+        setBorderRadius(extraStyle);
+        setBorderColor(extraStyle);
+        setFontConfig(extraStyle);
+        setWidgetBackground(extraStyle);
         mobileStyle.setMobileCommonExtraStyle(extraStyle);
         this.widget.setMobileStyle(mobileStyle);
         this.customBeanPane.updateBean();
@@ -127,8 +145,9 @@ public class DisplayEnhanceMobileStyleDefinePane extends BasicBeanPane<MobileSty
         createCustomPane();
     }
 
-    protected void createFontPane(Color defaultFontColor) {
-        fontConfigPane = new MobileStyleFontConfigPane(defaultFontColor);
+    protected void createFontPane() {
+        Color fontColor = ColorUtils.hexToColor(WidgetThemeDesignerUtils.isCurrentTemplateThemeDark() ? WidgetThemeDisplayConstants.COLOR_CCFFFFFF_HEX : WidgetThemeDisplayConstants.COLOR_CC000000_HEX);
+        fontConfigPane = new MobileStyleFontConfigPane(fontColor);
         settingPane.add(createLeftRightComponentsPane(createConfigLabel(Toolkit.i18nText("Fine-Design_Mobile_Widget_Font")), fontConfigPane));
     }
 
@@ -185,19 +204,22 @@ public class DisplayEnhanceMobileStyleDefinePane extends BasicBeanPane<MobileSty
         // 圆角边框
         createBorderRadiusPane();
         // 字体
-        createFontPane(WidgetThemeDisplayConstants.DEFAULT_FONT_COLOR_BLACK);
+        createFontPane();
     }
 
 
     protected void createBackgroundPane() {
-        widgetBackgroundSelectBox = new ColorSelectBox(NORMAL_COMBO_WIDTH);
+        widgetBackgroundSelectBox = new NewColorSelectBox(NORMAL_COMBO_WIDTH);
+        widgetBgAlphaDragPane = new UIPercentDragPane();
+        JPanel widgetBackgroundComponent = WidgetStyleComponentCombiner.combineWidgetBackgroundComponent(widgetBackgroundSelectBox, widgetBgAlphaDragPane, WidgetThemeDisplayConstants.THEME_MOBILE_WIDGET_BACKGROUND_WIDTH);
         initBackgroundColor();
-        JPanel backgroundPane = createLeftRightComponentsPane(createConfigLabel(Toolkit.i18nText("Fine-Design_Mobile_Widget_Background")), widgetBackgroundSelectBox);
-        settingPane.add(backgroundPane);
+        settingPane.add(createLeftRightComponentsPane(createConfigLabel(Toolkit.i18nText("Fine-Design_Mobile_Widget_Background")), widgetBackgroundComponent));
     }
 
     protected void initBackgroundColor() {
-        widgetBackgroundSelectBox.setSelectObject(WidgetThemeDisplayConstants.DEFAULT_TRANSPARENT_COLOR);
+        Color widgetBackgroundColor = ColorUtils.hexToColor(WidgetThemeDesignerUtils.isCurrentTemplateThemeDark() ? WidgetThemeDisplayConstants.COLOR_000000_HEX : WidgetThemeDisplayConstants.COLOR_FFFFFF_HEX);
+        widgetBackgroundSelectBox.setSelectObject(widgetBackgroundColor);
+        widgetBgAlphaDragPane.populateBean(0);
     }
 
     protected void createThemePane() {
@@ -210,14 +232,17 @@ public class DisplayEnhanceMobileStyleDefinePane extends BasicBeanPane<MobileSty
 
     protected void createBorderLinePane() {
         borderType = new LineComboBox(WidgetThemeDisplayConstants.MOBILE_BORDER_LINE_STYLE_ARRAY);
-        initDefaultLineType();
+        borderColorSelectBox = new NewColorSelectBox(NORMAL_COMBO_WIDTH);
+        JPanel borderComponent = WidgetStyleComponentCombiner.combineWidgetBorderComponent(borderType, borderColorSelectBox);
+        initDefaultBorder();
         borderType.setPreferredSize(new Dimension(NORMAL_COMBO_WIDTH + 15, 20));
         // 边框线型
-        settingPane.add(createLeftRightComponentsPane(createConfigLabel(Toolkit.i18nText("Fine-Design_Mobile_Widget_BorderType")), borderType));
+        settingPane.add(createLeftRightComponentsPane(createConfigLabel(Toolkit.i18nText("Fine-Design_Mobile_Widget_BorderType")), borderComponent));
     }
 
-    protected void initDefaultLineType() {
+    protected void initDefaultBorder() {
         borderType.setSelectedLineStyle(Constants.LINE_THIN);
+        borderColorSelectBox.setSelectObject(ColorUtils.hexToColor(WidgetThemeDesignerUtils.isCurrentTemplateThemeDark() ? WidgetThemeDisplayConstants.COLOR_26FFFFFF_HEX : WidgetThemeDisplayConstants.COLOR_26000000_HEX));
     }
 
     protected void createBorderRadiusPane() {
@@ -245,6 +270,7 @@ public class DisplayEnhanceMobileStyleDefinePane extends BasicBeanPane<MobileSty
 
     protected UILabel createConfigLabel(String title) {
         UILabel label = new UILabel(title, UILabel.LEFT);
+        label.setVerticalAlignment(SwingConstants.TOP);
         label.setPreferredSize(new Dimension(75, 20));
         label.setBorder(new EmptyBorder(0, 15, 0, 0));
         return label;
@@ -270,4 +296,46 @@ public class DisplayEnhanceMobileStyleDefinePane extends BasicBeanPane<MobileSty
         }
         return themeColor;
     }
+
+    protected void createIconColorSelectBox() {
+        iconColorSelectBox = new NewColorSelectBox(NORMAL_COMBO_WIDTH);
+        iconColorSelectBox.setSelectObject(getCurrentTemplateThemeColor());
+        settingPane.add(createLeftRightComponentsPane(createConfigLabel(Toolkit.i18nText("Fine-Design_Widget_Theme_Icon_Color")), iconColorSelectBox));
+    }
+    protected void setThemeColor(WidgetThemeMobileCommonExtraStyle extraStyle) {
+        if(themeColorSelectBox != null) {
+            extraStyle.setThemeColor(themeColorSelectBox.getSelectObject());
+        }
+    }
+    protected void setIconColor(WidgetThemeMobileCommonExtraStyle extraStyle) {
+        if(iconColorSelectBox != null) {
+            extraStyle.setIconColor(iconColorSelectBox.getSelectObject());
+        }
+    }
+    protected void setBorderType(WidgetThemeMobileCommonExtraStyle extraStyle) {
+        if(borderType != null) {
+            extraStyle.setBorderType(borderType.getSelectedLineStyle());
+        }
+    }
+    protected void setBorderRadius(WidgetThemeMobileCommonExtraStyle extraStyle) {
+        if(borderRadius != null) {
+            extraStyle.setBorderRadius(borderRadius.getValue());
+        }
+    }
+    protected void setBorderColor(WidgetThemeMobileCommonExtraStyle extraStyle) {
+        if(borderColorSelectBox != null) {
+            extraStyle.setBorderColor(borderColorSelectBox.getSelectObject());
+        }
+    }
+    protected void setFontConfig(WidgetThemeMobileCommonExtraStyle extraStyle) {
+
+        if(fontConfigPane != null) {
+            extraStyle.setNewFont(fontConfigPane.updateBean());
+        }
+    }
+    protected void setWidgetBackground(WidgetThemeMobileCommonExtraStyle extraStyle) {
+        if(widgetBackgroundSelectBox != null && widgetBgAlphaDragPane != null) {
+            extraStyle.setWidgetBackground(ColorUtils.createColorBackgroundWithAlpha(widgetBackgroundSelectBox.getSelectObject(), widgetBgAlphaDragPane.updateBean()));
+        }
+    }
 }
\ No newline at end of file
diff --git a/designer-base/src/main/java/com/fr/widgettheme/widget/mobile/pane/FileEditorMobileStyleDefinePane.java b/designer-base/src/main/java/com/fr/widgettheme/widget/mobile/pane/FileEditorMobileStyleDefinePane.java
index 801585f429..58e255b051 100644
--- a/designer-base/src/main/java/com/fr/widgettheme/widget/mobile/pane/FileEditorMobileStyleDefinePane.java
+++ b/designer-base/src/main/java/com/fr/widgettheme/widget/mobile/pane/FileEditorMobileStyleDefinePane.java
@@ -1,6 +1,7 @@
 package com.fr.widgettheme.widget.mobile.pane;
 
 import com.fr.base.background.ColorBackground;
+import com.fr.util.ColorUtils;
 import com.fr.widgettheme.theme.widget.mobile.style.FileEditorStyle;
 import com.fr.design.mainframe.mobile.ui.MobileStyleCustomDefinePane;
 import com.fr.form.ui.Widget;
@@ -8,6 +9,8 @@ import com.fr.form.ui.mobile.MobileCommonExtraStyle;
 import com.fr.form.ui.mobile.MobileStyle;
 import com.fr.invoke.Reflect;
 
+import java.awt.Color;
+
 /**
  * 文件属性定义面板
  *
@@ -28,10 +31,13 @@ public class FileEditorMobileStyleDefinePane extends DisplayEnhanceMobileStyleDe
             FileEditorStyle style = (FileEditorStyle) extraStyle;
             customCombo.setSelectedIndex(style.isCustom() ? 1 : 0);
             if (style.getWidgetBackground() != null) {
-                widgetBackgroundSelectBox.setSelectObject(((ColorBackground) style.getWidgetBackground()).getColor());
+                Color widgetBackgroundColor = ((ColorBackground) style.getWidgetBackground()).getColor();
+                widgetBackgroundSelectBox.setSelectObject(ColorUtils.ignoreColorAlpha(widgetBackgroundColor));
+                widgetBgAlphaDragPane.populateBean(ColorUtils.roundColorAlphaDouble(widgetBackgroundColor));
             }
             borderType.setSelectedLineStyle(style.getBorderType());
             borderRadius.setValue(style.getBorderRadius());
+            borderColorSelectBox.setSelectObject(style.getBorderColor());
         }
         this.customBeanPane.populateBean(ob);
     }
@@ -41,9 +47,10 @@ public class FileEditorMobileStyleDefinePane extends DisplayEnhanceMobileStyleDe
         mobileStyle = Reflect.on(mobileStyleClazz).create().get();
         FileEditorStyle extraStyle = new FileEditorStyle();
         extraStyle.setCustom(customCombo.getSelectedIndex() == 1);
-        extraStyle.setWidgetBackground(ColorBackground.getInstance(widgetBackgroundSelectBox.getSelectObject()));
+        extraStyle.setWidgetBackground(ColorUtils.createColorBackgroundWithAlpha(widgetBackgroundSelectBox.getSelectObject(), widgetBgAlphaDragPane.updateBean()));
         extraStyle.setBorderType(borderType.getSelectedLineStyle());
         extraStyle.setBorderRadius(borderRadius.getValue());
+        extraStyle.setBorderColor(borderColorSelectBox.getSelectObject());
         mobileStyle.setMobileCommonExtraStyle(extraStyle);
         this.widget.setMobileStyle(mobileStyle);
         this.customBeanPane.updateBean();
diff --git a/designer-base/src/main/java/com/fr/widgettheme/widget/mobile/pane/FreeButtonMobileStyleDefinePane.java b/designer-base/src/main/java/com/fr/widgettheme/widget/mobile/pane/FreeButtonMobileStyleDefinePane.java
index 6ab19b8dcf..7c3af9b127 100644
--- a/designer-base/src/main/java/com/fr/widgettheme/widget/mobile/pane/FreeButtonMobileStyleDefinePane.java
+++ b/designer-base/src/main/java/com/fr/widgettheme/widget/mobile/pane/FreeButtonMobileStyleDefinePane.java
@@ -1,14 +1,10 @@
 package com.fr.widgettheme.widget.mobile.pane;
 
-import com.fr.base.background.ColorBackground;
-import com.fr.widgettheme.theme.widget.mobile.style.FreeButtonStyle;
 import com.fr.design.i18n.Toolkit;
 import com.fr.design.mainframe.mobile.ui.MobileStyleCustomDefinePane;
-import com.fr.design.style.color.NewColorSelectBox;
 import com.fr.form.ui.Widget;
-import com.fr.form.ui.mobile.MobileCommonExtraStyle;
 import com.fr.form.ui.mobile.MobileStyle;
-import com.fr.invoke.Reflect;
+import com.fr.util.ColorUtils;
 import com.fr.widgettheme.theme.widget.theme.WidgetThemeDisplayConstants;
 
 /**
@@ -19,75 +15,33 @@ import com.fr.widgettheme.theme.widget.theme.WidgetThemeDisplayConstants;
  * Created on 2023/5/25
  */
 public class FreeButtonMobileStyleDefinePane extends DisplayEnhanceMobileStyleDefinePane {
-    private NewColorSelectBox borderColorSelectBox;
-    private NewColorSelectBox iconColorSelectBox;
-
 
     public FreeButtonMobileStyleDefinePane(Widget widget, Class<? extends MobileStyleCustomDefinePane> customBeanPaneClass, Class<? extends MobileStyle> mobileStyleClazz) {
         super(widget, customBeanPaneClass, mobileStyleClazz);
     }
 
-    @Override
-    public void populateBean(MobileStyle ob) {
-        super.populateBean(ob);
-        MobileCommonExtraStyle extraStyle = ob.getMobileCommonExtraStyle();
-        if (extraStyle instanceof FreeButtonStyle) {
-            FreeButtonStyle style = (FreeButtonStyle) extraStyle;
-            if (style.getBorderColor() != null) {
-                borderColorSelectBox.setSelectObject(style.getBorderColor());
-            }
-            if (style.getIconColor() != null) {
-                iconColorSelectBox.setSelectObject(style.getIconColor());
-            }
-        }
-    }
-
-    @Override
-    public MobileStyle updateBean() {
-        mobileStyle = Reflect.on(mobileStyleClazz).create().get();
-        FreeButtonStyle extraStyle = new FreeButtonStyle();
-        extraStyle.setCustom(customCombo.getSelectedIndex() == 1);
-        extraStyle.setWidgetBackground(ColorBackground.getInstance(widgetBackgroundSelectBox.getSelectObject()));
-        extraStyle.setBorderType(borderType.getSelectedLineStyle());
-        extraStyle.setBorderColor(borderColorSelectBox.getSelectObject());
-        extraStyle.setBorderRadius(borderRadius.getValue());
-        extraStyle.setNewFont(fontConfigPane.updateBean());
-        extraStyle.setIconColor(iconColorSelectBox.getSelectObject());
-        mobileStyle.setMobileCommonExtraStyle(extraStyle);
-        this.widget.setMobileStyle(mobileStyle);
-        this.customBeanPane.updateBean();
-        return mobileStyle;
-    }
-
     @Override
     protected void createUniversalPane() {
         createBackgroundPane();
         createBorderLinePane();
-        initBorderColor();
         createBorderRadiusPane();
-        initIconColor();
-        createFontPane(WidgetThemeDisplayConstants.DEFAULT_WHITE_COLOR);
-    }
-
-    private void initIconColor() {
-        iconColorSelectBox = new NewColorSelectBox(NORMAL_COMBO_WIDTH);
-        iconColorSelectBox.setSelectObject(WidgetThemeDisplayConstants.DEFAULT_WHITE_COLOR);
-        settingPane.add(createLeftRightComponentsPane(createConfigLabel(Toolkit.i18nText("Fine-Design_Mobile_Widget_Icon_Color")), iconColorSelectBox));
+        createFontPane();
     }
 
     @Override
-    protected void initDefaultLineType() {
+    protected void initDefaultBorder() {
         borderType.setSelectedLineStyle(com.fr.stable.Constants.LINE_NONE);
     }
 
-    private void initBorderColor() {
-        borderColorSelectBox = new NewColorSelectBox(NORMAL_COMBO_WIDTH);
-        borderColorSelectBox.setSelectObject(WidgetThemeDisplayConstants.DEFAULT_THEME_COLOR);
-        settingPane.add(createLeftRightComponentsPane(createConfigLabel(Toolkit.i18nText("Fine-Design_Mobile_Widget_BorderColor")), borderColorSelectBox));
-    }
-
     @Override
     protected void initBackgroundColor() {
         widgetBackgroundSelectBox.setSelectObject(getCurrentTemplateThemeColor());
+        widgetBgAlphaDragPane.populateBean(1);
+    }
+
+    @Override
+    protected void createFontPane() {
+        fontConfigPane = new MobileStyleFontConfigPane(ColorUtils.hexToColor(WidgetThemeDisplayConstants.COLOR_FFFFFF_HEX));
+        settingPane.add(createLeftRightComponentsPane(createConfigLabel(Toolkit.i18nText("Fine-Design_Mobile_Widget_Font")), fontConfigPane));
     }
 }
\ No newline at end of file
diff --git a/designer-base/src/main/java/com/fr/widgettheme/widget/mobile/pane/IconColorMobileStyleDefinePane.java b/designer-base/src/main/java/com/fr/widgettheme/widget/mobile/pane/IconColorMobileStyleDefinePane.java
new file mode 100644
index 0000000000..c93532cb67
--- /dev/null
+++ b/designer-base/src/main/java/com/fr/widgettheme/widget/mobile/pane/IconColorMobileStyleDefinePane.java
@@ -0,0 +1,36 @@
+package com.fr.widgettheme.widget.mobile.pane;
+
+import com.fr.design.mainframe.mobile.ui.MobileStyleCustomDefinePane;
+import com.fr.form.ui.Widget;
+import com.fr.form.ui.mobile.MobileStyle;
+import com.fr.widgettheme.theme.widget.theme.WidgetThemeDisplayConstants;
+
+/**
+ * 带有图标颜色的移动端控件通用配置面板
+ *
+ * @author obo
+ * @since 11.0
+ * Created on 2024/1/25
+ */
+public class IconColorMobileStyleDefinePane extends DisplayEnhanceMobileStyleDefinePane{
+
+    public IconColorMobileStyleDefinePane(Widget widget, Class<? extends MobileStyleCustomDefinePane> customBeanPaneClass, Class<? extends MobileStyle> mobileStyleClazz) {
+        super(widget, customBeanPaneClass, mobileStyleClazz);
+    }
+
+    @Override
+    protected void createUniversalPane() {
+        // 主题色
+        createThemePane();
+        // 组件背景
+        createBackgroundPane();
+        // 边框线型
+        createBorderLinePane();
+        // 圆角边框
+        createBorderRadiusPane();
+        //图标颜色
+        createIconColorSelectBox();
+        // 字体
+        createFontPane();
+    }
+}
diff --git a/designer-base/src/main/java/com/fr/widgettheme/widget/mobile/pane/LabelMobileStyleDefinePane.java b/designer-base/src/main/java/com/fr/widgettheme/widget/mobile/pane/LabelMobileStyleDefinePane.java
index 17388b859d..71c69a6dca 100644
--- a/designer-base/src/main/java/com/fr/widgettheme/widget/mobile/pane/LabelMobileStyleDefinePane.java
+++ b/designer-base/src/main/java/com/fr/widgettheme/widget/mobile/pane/LabelMobileStyleDefinePane.java
@@ -1,14 +1,8 @@
 package com.fr.widgettheme.widget.mobile.pane;
 
-import com.fr.base.background.ColorBackground;
-import com.fr.widgettheme.theme.widget.mobile.style.LabelIconSettingStyle;
-import com.fr.design.i18n.Toolkit;
 import com.fr.design.mainframe.mobile.ui.MobileStyleCustomDefinePane;
-import com.fr.design.style.color.NewColorSelectBox;
 import com.fr.form.ui.Widget;
-import com.fr.form.ui.mobile.MobileCommonExtraStyle;
 import com.fr.form.ui.mobile.MobileStyle;
-import com.fr.invoke.Reflect;
 import com.fr.widgettheme.theme.widget.theme.WidgetThemeDisplayConstants;
 
 /**
@@ -19,59 +13,21 @@ import com.fr.widgettheme.theme.widget.theme.WidgetThemeDisplayConstants;
  * Created on 2023/5/15
  */
 public class LabelMobileStyleDefinePane extends DisplayEnhanceMobileStyleDefinePane {
-    private NewColorSelectBox borderColorSelectBox;
-
     public LabelMobileStyleDefinePane(Widget widget, Class<? extends MobileStyleCustomDefinePane> customBeanPaneClass,
                                       Class<? extends MobileStyle> mobileStyleClazz) {
         super(widget, customBeanPaneClass, mobileStyleClazz);
     }
 
-
-    @Override
-    public void populateBean(MobileStyle ob) {
-        super.populateBean(ob);
-        MobileCommonExtraStyle extraStyle = ob.getMobileCommonExtraStyle();
-        if (extraStyle instanceof LabelIconSettingStyle) {
-            LabelIconSettingStyle style = (LabelIconSettingStyle) extraStyle;
-            if (style.getBorderColor() != null) {
-                borderColorSelectBox.setSelectObject(style.getBorderColor());
-            }
-        }
-    }
-
-    @Override
-    public MobileStyle updateBean() {
-        mobileStyle = Reflect.on(mobileStyleClazz).create().get();
-        LabelIconSettingStyle extraStyle = new LabelIconSettingStyle();
-        extraStyle.setCustom(customCombo.getSelectedIndex() == 1);
-        extraStyle.setWidgetBackground(ColorBackground.getInstance(widgetBackgroundSelectBox.getSelectObject()));
-        extraStyle.setBorderType(borderType.getSelectedLineStyle());
-        extraStyle.setBorderColor(borderColorSelectBox.getSelectObject());
-        extraStyle.setBorderRadius(borderRadius.getValue());
-        extraStyle.setNewFont(fontConfigPane.updateBean());
-        mobileStyle.setMobileCommonExtraStyle(extraStyle);
-        this.widget.setMobileStyle(mobileStyle);
-        this.customBeanPane.updateBean();
-        return mobileStyle;
-    }
-
     @Override
     protected void createUniversalPane() {
         createBackgroundPane();
         createBorderLinePane();
-        initBorderColor();
         createBorderRadiusPane();
-        createFontPane(WidgetThemeDisplayConstants.DEFAULT_FONT_COLOR_BLACK);
-    }
-
-    private void initBorderColor() {
-        borderColorSelectBox = new NewColorSelectBox(NORMAL_COMBO_WIDTH);
-        borderColorSelectBox.setSelectObject(WidgetThemeDisplayConstants.DEFAULT_TRANSPARENT_COLOR);
-        settingPane.add(createLeftRightComponentsPane(createConfigLabel(Toolkit.i18nText("Fine-Design_Mobile_Widget_BorderColor")), borderColorSelectBox));
+        createFontPane();
     }
 
     @Override
-    protected void initDefaultLineType() {
+    protected void initDefaultBorder() {
         borderType.setSelectedLineStyle(com.fr.stable.Constants.LINE_NONE);
     }
 }
\ No newline at end of file
diff --git a/designer-base/src/main/java/com/fr/widgettheme/widget/mobile/pane/TextAreaMobileStyleDefinePane.java b/designer-base/src/main/java/com/fr/widgettheme/widget/mobile/pane/TextAreaMobileStyleDefinePane.java
new file mode 100644
index 0000000000..db96ee38b1
--- /dev/null
+++ b/designer-base/src/main/java/com/fr/widgettheme/widget/mobile/pane/TextAreaMobileStyleDefinePane.java
@@ -0,0 +1,33 @@
+package com.fr.widgettheme.widget.mobile.pane;
+
+import com.fr.design.mainframe.mobile.ui.MobileStyleCustomDefinePane;
+import com.fr.form.ui.Widget;
+import com.fr.form.ui.mobile.MobileStyle;
+import com.fr.widgettheme.theme.widget.theme.WidgetThemeDisplayConstants;
+
+/**
+ * 文本域控件移动端配置面板
+ *
+ * @author obo
+ * @since 11.0
+ * Created on 2024/1/25
+ */
+public class TextAreaMobileStyleDefinePane extends DisplayEnhanceMobileStyleDefinePane{
+    public TextAreaMobileStyleDefinePane(Widget widget, Class<? extends MobileStyleCustomDefinePane> customBeanPaneClass, Class<? extends MobileStyle> mobileStyleClazz) {
+        super(widget, customBeanPaneClass, mobileStyleClazz);
+    }
+
+    @Override
+    protected void createUniversalPane() {
+        // 主题色
+        createThemePane();
+        // 组件背景
+        createBackgroundPane();
+        // 边框线型
+        createBorderLinePane();
+        // 圆角边框
+        createBorderRadiusPane();
+        // 字体
+        createFontPane();
+    }
+}
diff --git a/designer-base/src/main/java/com/fr/widgettheme/widget/mobile/provider/DisplayEnhanceMobileStyleFactory.java b/designer-base/src/main/java/com/fr/widgettheme/widget/mobile/provider/DisplayEnhanceMobileStyleFactory.java
index 53650ca5d2..fea523c684 100644
--- a/designer-base/src/main/java/com/fr/widgettheme/widget/mobile/provider/DisplayEnhanceMobileStyleFactory.java
+++ b/designer-base/src/main/java/com/fr/widgettheme/widget/mobile/provider/DisplayEnhanceMobileStyleFactory.java
@@ -1,11 +1,11 @@
 package com.fr.widgettheme.widget.mobile.provider;
 
+import com.fr.form.ui.TextArea;
+import com.fr.widgettheme.theme.widget.mobile.style.WidgetThemeMobileCommonExtraStyle;
 import com.fr.widgettheme.widget.mobile.pane.FileEditorMobileStyleDefinePane;
 import com.fr.widgettheme.widget.mobile.pane.FreeButtonMobileStyleDefinePane;
 import com.fr.widgettheme.widget.mobile.pane.LabelMobileStyleDefinePane;
 import com.fr.widgettheme.theme.widget.mobile.style.FileEditorStyle;
-import com.fr.widgettheme.theme.widget.mobile.style.FreeButtonStyle;
-import com.fr.widgettheme.theme.widget.mobile.style.LabelIconSettingStyle;
 import com.fr.design.beans.BasicBeanPane;
 import com.fr.design.mainframe.mobile.ui.MobileStyleCustomDefinePane;
 import com.fr.form.ui.FreeButton;
@@ -14,6 +14,7 @@ import com.fr.form.ui.MultiFileEditor;
 import com.fr.form.ui.Widget;
 import com.fr.form.ui.mobile.MobileCommonExtraStyle;
 import com.fr.form.ui.mobile.MobileStyle;
+import com.fr.widgettheme.widget.mobile.pane.TextAreaMobileStyleDefinePane;
 
 /**
  * 样式创建工厂
@@ -40,6 +41,9 @@ public class DisplayEnhanceMobileStyleFactory {
         if (widget instanceof FreeButton) {
             return new FreeButtonMobileStyleDefinePane(widget, customDefinePane, mobileStyle);
         }
+        if (widget instanceof TextArea) {
+            return new TextAreaMobileStyleDefinePane(widget, customDefinePane, mobileStyle);
+        }
         return null;
     }
 
@@ -50,16 +54,10 @@ public class DisplayEnhanceMobileStyleFactory {
      * @return
      */
     public static Class<? extends MobileCommonExtraStyle> classForWidgetCommonExtraStyle(Widget widget) {
-        if (widget instanceof Label) {
-            return LabelIconSettingStyle.class;
-        }
         if (widget instanceof MultiFileEditor) {
             return FileEditorStyle.class;
         }
-        if (widget instanceof FreeButton) {
-            return FreeButtonStyle.class;
-        }
-        return null;
+        return WidgetThemeMobileCommonExtraStyle.class;
     }
 
 }
\ No newline at end of file
diff --git a/designer-base/src/main/java/com/fr/widgettheme/widget/mobile/provider/WidgetThemeMobileStyleDefinePaneCreator.java b/designer-base/src/main/java/com/fr/widgettheme/widget/mobile/provider/WidgetThemeMobileStyleDefinePaneCreator.java
index a40199327b..a8aca84dcc 100644
--- a/designer-base/src/main/java/com/fr/widgettheme/widget/mobile/provider/WidgetThemeMobileStyleDefinePaneCreator.java
+++ b/designer-base/src/main/java/com/fr/widgettheme/widget/mobile/provider/WidgetThemeMobileStyleDefinePaneCreator.java
@@ -1,11 +1,19 @@
 package com.fr.widgettheme.widget.mobile.provider;
 
-import com.fr.base.io.IOFile;
+import com.fr.form.ui.ComboBox;
+import com.fr.form.ui.ComboCheckBox;
+import com.fr.form.ui.DateEditor;
+import com.fr.form.ui.NumberEditor;
+import com.fr.form.ui.Password;
+import com.fr.form.ui.TextArea;
+import com.fr.form.ui.TextEditor;
+import com.fr.form.ui.TreeComboBoxEditor;
+import com.fr.form.ui.TreeEditor;
+import com.fr.widgettheme.util.WidgetThemeDesignerUtils;
+import com.fr.widgettheme.utils.WidgetThemeServerUtils;
 import com.fr.widgettheme.widget.mobile.pane.DisplayEnhanceMobileStyleDefinePane;
 import com.fr.widgettheme.theme.widget.mobile.style.WidgetThemeMobileCommonExtraStyle;
 import com.fr.design.beans.BasicBeanPane;
-import com.fr.design.file.HistoryTemplateListCache;
-import com.fr.design.mainframe.JTemplate;
 import com.fr.design.mainframe.mobile.ui.MobileStyleCustomDefinePane;
 import com.fr.form.ui.FreeButton;
 import com.fr.form.ui.Label;
@@ -14,9 +22,12 @@ import com.fr.form.ui.Widget;
 import com.fr.form.ui.mobile.MobileCommonExtraStyle;
 import com.fr.form.ui.mobile.MobileStyle;
 import com.fr.log.FineLoggerFactory;
-import com.fr.widgettheme.control.attr.WidgetDisplayEnhanceMarkAttr;
+import com.fr.widgettheme.widget.mobile.pane.IconColorMobileStyleDefinePane;
 import org.jetbrains.annotations.NotNull;
 
+import java.util.HashSet;
+import java.util.Set;
+
 /**
  * 控件主题移动端样式窗口创建类
  *
@@ -29,6 +40,29 @@ public class WidgetThemeMobileStyleDefinePaneCreator {
     private WidgetThemeMobileStyleDefinePaneCreator() {
     }
 
+    /**
+     * 需要特殊处理的控件集合
+     */
+    private static final Set<Class<? extends Widget>> SPECIAL_WIDGET_SET = new HashSet<>();
+    /**
+     * 带有图标颜色的控件集合
+     */
+    private static final Set<Class<? extends Widget>> ICON_WIDGET_SET = new HashSet<>();
+
+    static {
+        SPECIAL_WIDGET_SET.add(FreeButton.class);
+        SPECIAL_WIDGET_SET.add(Label.class);
+        SPECIAL_WIDGET_SET.add(MultiFileEditor.class);
+        SPECIAL_WIDGET_SET.add(TextArea.class);
+        ICON_WIDGET_SET.add(TextEditor.class);
+        ICON_WIDGET_SET.add(NumberEditor.class);
+        ICON_WIDGET_SET.add(Password.class);
+        ICON_WIDGET_SET.add(DateEditor.class);
+        ICON_WIDGET_SET.add(ComboBox.class);
+        ICON_WIDGET_SET.add(ComboCheckBox.class);
+        ICON_WIDGET_SET.add(TreeComboBoxEditor.class);
+        ICON_WIDGET_SET.add(TreeEditor.class);
+    }
     /**
      * 创建移动端控件样式属性窗口
      *
@@ -39,16 +73,13 @@ public class WidgetThemeMobileStyleDefinePaneCreator {
      */
     public static BasicBeanPane<MobileStyle> createBaseBeanPane(Widget widget, Class<? extends MobileStyleCustomDefinePane> customDefinePane, Class<? extends MobileStyle> mobileStyle) {
         try {
-            JTemplate<?, ?> jTemplate = HistoryTemplateListCache.getInstance().getCurrentEditingTemplate();
-            if (JTemplate.isValid(jTemplate)) {
-                IOFile ioFile = (IOFile) jTemplate.getTarget();
-                WidgetDisplayEnhanceMarkAttr mark = ioFile.getAttrMark(WidgetDisplayEnhanceMarkAttr.XML_TAG);
-                if (mark != null && mark.isWidgetEnhance()) {
-                    if (commonWidget(widget)) {
-                        return new DisplayEnhanceMobileStyleDefinePane(widget, customDefinePane, mobileStyle);
-                    } else {
-                        return DisplayEnhanceMobileStyleFactory.createWidgetMobileStyleDefinePane(widget, customDefinePane, mobileStyle);
-                    }
+            if (WidgetThemeDesignerUtils.enableWidgetEnhance()) {
+                if (isSpecialWidget(widget)) {
+                    return DisplayEnhanceMobileStyleFactory.createWidgetMobileStyleDefinePane(widget, customDefinePane, mobileStyle);
+                } else if (isIconWidget(widget)) {
+                    return new IconColorMobileStyleDefinePane(widget, customDefinePane, mobileStyle);
+                } else {
+                    return new DisplayEnhanceMobileStyleDefinePane(widget, customDefinePane, mobileStyle);
                 }
             }
         } catch (Exception e) {
@@ -64,10 +95,10 @@ public class WidgetThemeMobileStyleDefinePaneCreator {
      * @return class
      */
     public static @NotNull Class<? extends MobileCommonExtraStyle> classForCommonExtraStyle(Widget widget) {
-        if (commonWidget(widget)) {
-            return WidgetThemeMobileCommonExtraStyle.class;
-        } else {
+        if (isSpecialWidget(widget)) {
             return DisplayEnhanceMobileStyleFactory.classForWidgetCommonExtraStyle(widget);
+        } else {
+            return WidgetThemeMobileCommonExtraStyle.class;
         }
     }
 
@@ -78,7 +109,17 @@ public class WidgetThemeMobileStyleDefinePaneCreator {
      * @param widget 控件
      * @return 是/否
      */
-    private static boolean commonWidget(Widget widget) {
-        return !((widget instanceof FreeButton) || (widget instanceof Label) || (widget instanceof MultiFileEditor));
+    private static boolean isSpecialWidget(Widget widget) {
+        return SPECIAL_WIDGET_SET.contains(widget.getClass());
+    }
+
+    /**
+     * 是否为带图标的控件
+     *
+     * @param widget 控件
+     * @return 是/否
+     */
+    private static boolean isIconWidget(Widget widget) {
+        return ICON_WIDGET_SET.contains(widget.getClass()) || WidgetThemeServerUtils.isNewComboBoxTreeEditor(widget);
     }
 }
diff --git a/designer-base/src/main/resources/com/fr/design/images/buttonicon/icon_add.png b/designer-base/src/main/resources/com/fr/design/images/buttonicon/icon_add.png
new file mode 100644
index 0000000000..170c4027db
Binary files /dev/null and b/designer-base/src/main/resources/com/fr/design/images/buttonicon/icon_add.png differ
diff --git a/designer-base/src/main/resources/com/fr/design/images/buttonicon/icon_delete.png b/designer-base/src/main/resources/com/fr/design/images/buttonicon/icon_delete.png
new file mode 100644
index 0000000000..60f3b0343b
Binary files /dev/null and b/designer-base/src/main/resources/com/fr/design/images/buttonicon/icon_delete.png differ
diff --git a/designer-base/src/test/java/com/fr/design/jxbrowser/JxUIPaneTest.java b/designer-base/src/test/java/com/fr/design/jxbrowser/JxUIPaneTest.java
index 0b4bea61c5..c3d735de36 100644
--- a/designer-base/src/test/java/com/fr/design/jxbrowser/JxUIPaneTest.java
+++ b/designer-base/src/test/java/com/fr/design/jxbrowser/JxUIPaneTest.java
@@ -2,6 +2,7 @@ package com.fr.design.jxbrowser;
 
 import com.fr.design.DesignerEnvManager;
 import com.teamdev.jxbrowser.js.JsAccessible;
+import com.teamdev.jxbrowser.js.JsObject;
 
 import javax.swing.JButton;
 import javax.swing.JFrame;
@@ -10,6 +11,7 @@ import javax.swing.JPanel;
 import javax.swing.WindowConstants;
 import java.awt.BorderLayout;
 import java.awt.FlowLayout;
+import java.util.Optional;
 
 public class JxUIPaneTest {
 
@@ -30,16 +32,49 @@ public class JxUIPaneTest {
 
         JPanel panel = new JPanel(new FlowLayout());
         contentPane.add(panel, BorderLayout.SOUTH);
+
+        testJxUIPaneUpdate(panel, pane);
+        testExecuteJS1(panel, pane);
+        testExecuteJS2(panel, pane);
+
+        frame.setVisible(true);
+        frame.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
+    }
+
+    private static void testJxUIPaneUpdate(JPanel container, JxUIPane<Model> pane) {
         JButton button = new JButton("点击我可以看到Swing的弹框，输出填写的信息");
-        panel.add(button);
         button.addActionListener(e -> {
             Model returnValue = pane.update();
             if (returnValue != null) {
-                JOptionPane.showMessageDialog(frame, String.format("姓名为:%s,年龄为:%d", returnValue.getName(), returnValue.getAge()));
+                JOptionPane.showMessageDialog(container.getRootPane(), String.format("姓名为:%s,年龄为:%d", returnValue.getName(), returnValue.getAge()));
             }
         });
-        frame.setVisible(true);
-        frame.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
+        container.add(button);
+    }
+
+    private static void testExecuteJS1(JPanel container, JxUIPane<Model> pane) {
+        JButton button = new JButton("执行回显js对象内容");
+        button.addActionListener(e -> {
+            pane.executeJavaScript("var pagesize={\"page\":1,\"size\":10};");
+            Optional<JsObject> value = pane.executeJS("pagesize");
+            value.ifPresent(v -> JOptionPane.showMessageDialog(container.getRootPane(),
+                    String.format("page为:%s,年龄为:%s", v.property("page").get(), v.property("size").get())));
+
+        });
+        container.add(button);
+
+    }
+
+    private static void testExecuteJS2(JPanel container, JxUIPane<Model> pane) {
+        JButton button = new JButton("执行回显数字内容");
+        button.addActionListener(e -> {
+            pane.executeJavaScript("var tom = {\"age\":18};");
+            Optional<Double> value = pane.executeJS("tom.age");
+            JOptionPane.showMessageDialog(container.getRootPane(),
+                    String.format("var tom = {\"age\":18}; age:%s", value.get()));
+        });
+        container.add(button);
+
     }
 
     @JsAccessible
diff --git a/designer-chart/src/main/resources/com/fr/design/images/emptydata/emptydata.png b/designer-chart/src/main/resources/com/fr/design/images/emptydata/emptydata.png
index 46597ea7a1..ddb244479c 100644
Binary files a/designer-chart/src/main/resources/com/fr/design/images/emptydata/emptydata.png and b/designer-chart/src/main/resources/com/fr/design/images/emptydata/emptydata.png differ
diff --git a/designer-chart/src/main/resources/com/fr/design/images/emptydata/emptydata_en.png b/designer-chart/src/main/resources/com/fr/design/images/emptydata/emptydata_en.png
index 46597ea7a1..ddb244479c 100644
Binary files a/designer-chart/src/main/resources/com/fr/design/images/emptydata/emptydata_en.png and b/designer-chart/src/main/resources/com/fr/design/images/emptydata/emptydata_en.png differ
diff --git a/designer-chart/src/main/resources/com/fr/design/images/emptydata/emptydata_zh.png b/designer-chart/src/main/resources/com/fr/design/images/emptydata/emptydata_zh.png
index 5a6c3a9624..cb5dfc00b4 100644
Binary files a/designer-chart/src/main/resources/com/fr/design/images/emptydata/emptydata_zh.png and b/designer-chart/src/main/resources/com/fr/design/images/emptydata/emptydata_zh.png differ
diff --git a/designer-chart/src/main/resources/com/fr/design/images/emptydata/emptydata_zh_TW.png b/designer-chart/src/main/resources/com/fr/design/images/emptydata/emptydata_zh_TW.png
index 738fa685ad..e6b7b9733a 100644
Binary files a/designer-chart/src/main/resources/com/fr/design/images/emptydata/emptydata_zh_TW.png and b/designer-chart/src/main/resources/com/fr/design/images/emptydata/emptydata_zh_TW.png differ
diff --git a/designer-form/src/main/java/com/fr/design/widgettheme/BaseStyleSettingPane.java b/designer-form/src/main/java/com/fr/design/widgettheme/BaseStyleSettingPane.java
index b651b9373b..ef93914823 100644
--- a/designer-form/src/main/java/com/fr/design/widgettheme/BaseStyleSettingPane.java
+++ b/designer-form/src/main/java/com/fr/design/widgettheme/BaseStyleSettingPane.java
@@ -1,9 +1,17 @@
 package com.fr.design.widgettheme;
 
+import com.fr.base.background.ColorBackground;
 import com.fr.base.theme.TemplateTheme;
 import com.fr.design.gui.frpane.FontSizeComboPane;
+import com.fr.design.gui.frpane.UIPercentDragPane;
 import com.fr.design.gui.ibutton.UIColorButton;
+import com.fr.design.gui.ibutton.UIToggleButton;
+import com.fr.design.gui.icombobox.UIComboBox;
+import com.fr.design.utils.DesignUtils;
+import com.fr.general.IOUtils;
+import com.fr.util.ColorUtils;
 import com.fr.widgettheme.theme.widget.style.BorderStyle;
+import com.fr.widgettheme.theme.widget.style.ButtonBackgroundStyle;
 import com.fr.widgettheme.theme.widget.style.ThemeTextStyle;
 import com.fr.widgettheme.theme.widget.style.ThemedWidgetStyle;
 import com.fr.widgettheme.theme.bean.ButtonBackground;
@@ -11,7 +19,6 @@ import com.fr.design.beans.BasicBeanPane;
 import com.fr.design.designer.IntervalConstants;
 import com.fr.design.file.HistoryTemplateListCache;
 import com.fr.design.gui.ibutton.UIButtonGroup;
-import com.fr.design.gui.ibutton.UIRadioButton;
 import com.fr.design.gui.icombobox.LineComboBox;
 import com.fr.design.gui.ilable.UILabel;
 import com.fr.design.gui.style.FRFontPane;
@@ -26,10 +33,10 @@ import com.fr.form.ui.Widget;
 import com.fr.general.FRFont;
 import com.fr.widgettheme.theme.panel.ButtonStyleDefinedPane;
 import com.fr.widgettheme.theme.widget.theme.WidgetThemeDisplayConstants;
-import com.fr.widgettheme.util.ThemeTextStylePaneCreator;
+import com.fr.widgettheme.util.WidgetStyleComponentCombiner;
+import com.fr.widgettheme.util.WidgetThemeDesignerUtils;
 
 import javax.swing.BorderFactory;
-import javax.swing.ButtonGroup;
 import javax.swing.JPanel;
 import java.awt.BorderLayout;
 import java.awt.Color;
@@ -54,12 +61,12 @@ public abstract class BaseStyleSettingPane<T extends Widget> extends BasicBeanPa
     protected JPanel customPane;
     // 主题色
     protected NewColorSelectBox colorSelectBox;
-    // 风格1
-    protected UIRadioButton style1;
-    // 风格2
-    protected UIRadioButton style2;
     // 边框线型
     protected LineComboBox lineComboBox;
+    /**
+     * 边框颜色
+     */
+    protected NewColorSelectBox borderColorSelectBox;
     // 圆角边框
     protected UIBoundSpinner borderRadiusSpinner;
     // 字体详细设置
@@ -79,6 +86,33 @@ public abstract class BaseStyleSettingPane<T extends Widget> extends BasicBeanPa
      */
     protected UIColorButton fontColorButton;
 
+    /**
+     * 字体名选择器
+     */
+    protected UIComboBox fontNameSelectBox;
+
+    /**
+     * 字体粗体配置
+     */
+    protected UIToggleButton bold;
+    /**
+     * 字体斜体配置
+     */
+    protected UIToggleButton italic;
+
+    /**
+     * 控件背景颜色配置面板
+     */
+    protected NewColorSelectBox widgetBgColorSelectBox;
+    /**
+     * 控件背景透明度配置面板
+     */
+    protected UIPercentDragPane widgetBgAlphaDragPane;
+    /**
+     * 控件图标颜色
+     */
+    protected NewColorSelectBox iconColorSelectBox;
+
     private final Map<StyleSetting, UILabel> labelMap = new HashMap<>();
     private final Map<StyleSetting, Component> paneMap = new HashMap<>();
     public BaseStyleSettingPane(List<StyleSetting> styleSettingList) {
@@ -97,34 +131,29 @@ public abstract class BaseStyleSettingPane<T extends Widget> extends BasicBeanPa
 
 
     protected void initStyleEditor() {
-        initStyle();
-        colorSelectBox = new NewColorSelectBox(160, true);
-        lineComboBox = new LineComboBox(WidgetThemeDisplayConstants.BORDER_LINE_STYLE_ARRAY);
-        borderRadiusSpinner = new UIBoundSpinner(0, Integer.MAX_VALUE, 1);
+        colorSelectBox = new NewColorSelectBox(WidgetThemeDisplayConstants.THEME_WIDGET_COMPONENT_WIDTH, false);
+        initBorderPane();
         frFontPane = new FRFontPane();
         buttonStyleDefinedPane = new ButtonStyleDefinedPane();
-        selectBgColorBox = new NewColorSelectBox(160, true);
+        selectBgColorBox = new NewColorSelectBox(WidgetThemeDisplayConstants.THEME_WIDGET_COMPONENT_WIDTH, true);
+        iconColorSelectBox = new NewColorSelectBox(WidgetThemeDisplayConstants.THEME_WIDGET_COMPONENT_WIDTH, true);
+        fontNameSelectBox = new UIComboBox(DesignUtils.getAvailableFontFamilyNames4Report());
         fontSizePane = new FontSizeComboPane();
         fontColorButton = new UIColorButton();
-        paneMap.put(StyleSetting.STYLE_TYPE, createStyleTypePane());
+        bold = new UIToggleButton(IOUtils.readIcon("/com/fr/design/images/m_format/cellstyle/bold.png"));
+        italic = new UIToggleButton(IOUtils.readIcon("/com/fr/design/images/m_format/cellstyle/italic.png"));
+        widgetBgColorSelectBox = new NewColorSelectBox(WidgetThemeDisplayConstants.THEME_WIDGET_COMPONENT_WIDTH, true);
+        widgetBgAlphaDragPane = new UIPercentDragPane();
         paneMap.put(StyleSetting.THEME_COLOR, colorSelectBox);
         paneMap.put(StyleSetting.LINE_TYPE, lineComboBox);
-        paneMap.put(StyleSetting.TEXT_STYLE, ThemeTextStylePaneCreator.create(fontSizePane, fontColorButton));
+        paneMap.put(StyleSetting.LINE_COLOR, borderColorSelectBox);
+        paneMap.put(StyleSetting.TEXT_STYLE, WidgetStyleComponentCombiner.combineTextStyleComponent(fontNameSelectBox, fontSizePane, fontColorButton, italic, bold));
         paneMap.put(StyleSetting.BORDER_RADIUS, borderRadiusSpinner);
         paneMap.put(StyleSetting.FONT, frFontPane);
         paneMap.put(StyleSetting.BTN_BACKGROUND, buttonStyleDefinedPane);
         paneMap.put(StyleSetting.SELECT_COLOR, selectBgColorBox);
-    }
-
-    /**
-     * 初始化style1和style2
-     */
-    private void initStyle() {
-        style1 = new UIRadioButton(Toolkit.i18nText("Fine-Design_Widget_Theme_Style_1"));
-        style2 = new UIRadioButton(Toolkit.i18nText("Fine-Design_Widget_Theme_Style_2"));
-        ButtonGroup buttonGroup = new ButtonGroup();
-        buttonGroup.add(style1);
-        buttonGroup.add(style2);
+        paneMap.put(StyleSetting.WIDGET_BACKGROUND, WidgetStyleComponentCombiner.combineWidgetBackgroundComponent(widgetBgColorSelectBox, widgetBgAlphaDragPane, WidgetThemeDisplayConstants.THEME_PC_WIDGET_BACKGROUND_WIDTH));
+        paneMap.put(StyleSetting.ICON_COLOR, iconColorSelectBox);
     }
 
     protected JPanel createHeadPane() {
@@ -143,14 +172,6 @@ public abstract class BaseStyleSettingPane<T extends Widget> extends BasicBeanPa
         return headPane;
     }
 
-    protected JPanel createStyleTypePane() {
-        // 容纳风格1和风格2的panel
-        JPanel stylePane = new JPanel(FRGUIPaneFactory.createBoxFlowLayout());
-        stylePane.add(style1);
-        stylePane.add(style2);
-        return stylePane;
-    }
-
     protected JPanel createCustomPane() {
         int size = styleSettingList.size();
 
@@ -212,92 +233,104 @@ public abstract class BaseStyleSettingPane<T extends Widget> extends BasicBeanPa
     }
 
     private void setThemedStyle(ThemedWidgetStyle widgetStyle) {
-        setColorSelectBox(widgetStyle);
-        setStyle(widgetStyle);
-        setLineComboBox(widgetStyle);
-        setBorderRadiusSpinner(widgetStyle);
-        setTextStylePane(widgetStyle);
-        setFrFontPane(widgetStyle);
-        setButtonStyleDefinedPane(widgetStyle);
-        setSelectBgColor(widgetStyle);
+        setColorSelectBox(widgetStyle.getThemeColor());
+        setLineComboBox(widgetStyle.getBorderStyle().getLineType());
+        setBorderRadiusSpinner(widgetStyle.getBorderStyle().getRadius());
+        setTextStylePane(widgetStyle.getTextStyle());
+        setFrFontPane(widgetStyle.getFontStyle().getFont());
+        setButtonStyleDefinedPane(widgetStyle.getButtonBackgroundStyle());
+        setSelectBgColor(widgetStyle.getSelectBackgroundColor());
+        setWidgetBackground(widgetStyle.getWidgetBackground());
+        setBorderColor(widgetStyle.getBorderStyle().getBorderColor());
+        setIconColor(widgetStyle.getIconColor());
     }
 
-    private void setColorSelectBox(ThemedWidgetStyle widgetStyle) {
+    private void setColorSelectBox(Color themeColor) {
         if (colorSelectBox != null) {
-            colorSelectBox.setSelectObject(widgetStyle.getThemeColor());
-        }
-    }
-    private void setStyle(ThemedWidgetStyle widgetStyle) {
-        if (widgetStyle.getStyleType() == ThemedWidgetStyle.DEFAULT_STYLE) {
-            if (style1 != null) {
-                style1.setSelected(true);
-            }
-        } else {
-            if (style2 != null) {
-                style2.setSelected(true);
-            }
+            colorSelectBox.setSelectObject(themeColor);
         }
     }
 
-    private void setLineComboBox(ThemedWidgetStyle widgetStyle) {
+    private void setLineComboBox(int lineType) {
         if (lineComboBox != null) {
-            lineComboBox.setSelectedLineStyle(widgetStyle.getBorderStyle().getLineType());
+            lineComboBox.setSelectedLineStyle(lineType);
         }
     }
 
-    private void setBorderRadiusSpinner(ThemedWidgetStyle widgetStyle) {
+    private void setBorderRadiusSpinner(double radius) {
         if (borderRadiusSpinner != null) {
-            borderRadiusSpinner.setValue(widgetStyle.getBorderStyle().getRadius());
+            borderRadiusSpinner.setValue(radius);
         }
     }
 
-    private void setTextStylePane(ThemedWidgetStyle widgetStyle) {
-        ThemeTextStyle textStyle = widgetStyle.getTextStyle();
-        this.fontSizePane.setValue(textStyle.getFontSize());
-        this.fontColorButton.setColor(textStyle.getFontColor());
+    private void setTextStylePane(ThemeTextStyle textStyle) {
+        if (fontSizePane != null) {
+            this.fontSizePane.setValue(textStyle.getFontSize());
+        }
+        if (fontColorButton != null) {
+            this.fontColorButton.setColor(textStyle.getFontColor());
+        }
+        if (bold != null) {
+            this.bold.setSelected(textStyle.isBold());
+        }
+        if (italic != null) {
+            this.italic.setSelected(textStyle.isItalic());
+        }
+        if (fontNameSelectBox != null) {
+            this.fontNameSelectBox.setSelectedItem(textStyle.getName());
+        }
     }
 
-    private void setFrFontPane(ThemedWidgetStyle widgetStyle) {
+    private void setFrFontPane(FRFont font) {
         if (frFontPane != null) {
-            frFontPane.populateBean(widgetStyle.getFontStyle().getFont());
+            frFontPane.populateBean(font);
         }
     }
 
-    private void setButtonStyleDefinedPane(ThemedWidgetStyle widgetStyle) {
+    private void setButtonStyleDefinedPane(ButtonBackgroundStyle backgroundStyle) {
         if (buttonStyleDefinedPane != null) {
-            buttonStyleDefinedPane.populate(ButtonBackground.create(widgetStyle.getButtonBackgroundStyle()));
+            buttonStyleDefinedPane.populate(ButtonBackground.create(backgroundStyle));
         }
     }
+
     private void setDefaultStyle() {
-        if (colorSelectBox != null) {
-            colorSelectBox.setSelectObject(ThemedWidgetStyle.DEFAULT_COLOR);
-        }
-        if (style1 != null) {
-            style1.setSelected(true);
-        }
-        if (lineComboBox != null) {
-            lineComboBox.setSelectedLineStyle(BorderStyle.DEFAULT_LINE_TYPE);
-        }
-        if (borderRadiusSpinner != null) {
-            borderRadiusSpinner.setValue(BorderStyle.DEFAULT_BORDER_RADIUS);
-        }
-        if (fontSizePane != null) {
-            fontSizePane.setValue(ThemeTextStyle.DEFAULT_FONT_SIZE);
+        setColorSelectBox(ThemedWidgetStyle.DEFAULT_COLOR);
+        setLineComboBox(BorderStyle.DEFAULT_LINE_TYPE);
+        setBorderRadiusSpinner(BorderStyle.DEFAULT_BORDER_RADIUS);
+        setTextStylePane(ThemeTextStyle.DEFAULT_WIDGET_STYLE);
+        setFrFontPane(FRFont.getInstance());
+        setSelectBgColor(WidgetThemeDisplayConstants.DEFAULT_TRANSPARENT_COLOR);
+        setWidgetBackground(WidgetThemeDisplayConstants.DEFAULT_COLOR_BACKGROUND);
+        setBorderColor(BorderStyle.DEFAULT_WIDGET_BORDER_COLOR);
+        setIconColor(Color.BLACK);
+    }
+
+    private void setSelectBgColor(Color selectBgColor) {
+        if (selectBgColorBox != null) {
+            selectBgColorBox.setSelectObject(selectBgColor);
         }
-        if (fontColorButton != null) {
-            fontColorButton.setColor(Color.BLACK);
+    }
+
+    private void setWidgetBackground(ColorBackground background) {
+        if (widgetBgColorSelectBox != null) {
+            widgetBgColorSelectBox.setSelectObject(background.getColor());
         }
-        if (frFontPane != null) {
-            frFontPane.populateBean(FRFont.getInstance());
+        if (widgetBgAlphaDragPane != null) {
+            //0-255,需要转化为
+            double alpha = ColorUtils.roundColorAlphaDouble(background.getColor());
+            widgetBgAlphaDragPane.populateBean(alpha);
         }
-        if (selectBgColorBox != null) {
-            selectBgColorBox.setSelectObject(null);
+    }
+
+    private void setBorderColor(Color borderColor) {
+        if(borderColorSelectBox != null) {
+            borderColorSelectBox.setSelectObject(borderColor);
         }
     }
 
-    private void setSelectBgColor(ThemedWidgetStyle widgetStyle) {
-        if(selectBgColorBox != null) {
-            selectBgColorBox.setSelectObject(widgetStyle.getSelectBackgroundColor());
+    private void setIconColor(Color iconColor) {
+        if(iconColorSelectBox != null) {
+            iconColorSelectBox.setSelectObject(iconColor);
         }
     }
 
@@ -305,13 +338,15 @@ public abstract class BaseStyleSettingPane<T extends Widget> extends BasicBeanPa
      * 初始化枚举和UILabel对应的map
      */
     private void initLabelMap() {
-        labelMap.put(StyleSetting.THEME_COLOR, new UILabel(Toolkit.i18nText("Fine-Design_Widget_Theme_Color")));
-        labelMap.put(StyleSetting.TEXT_STYLE, new UILabel(Toolkit.i18nText("Fine-Design_Widget_Theme_Text_Style")));
-        labelMap.put(StyleSetting.FONT, new UILabel(Toolkit.i18nText("Fine-Design_Widget_Theme_Font")));
-        labelMap.put(StyleSetting.STYLE_TYPE, new UILabel(Toolkit.i18nText("Fine-Design_Widget_Theme_Style")));
-        labelMap.put(StyleSetting.LINE_TYPE, new UILabel(Toolkit.i18nText("Fine-Design_Widget_Theme_Border_Line")));
-        labelMap.put(StyleSetting.BORDER_RADIUS, new UILabel(Toolkit.i18nText("Fine-Design_Widget_Theme_Border_Radius")));
-        labelMap.put(StyleSetting.BTN_BACKGROUND, new UILabel(Toolkit.i18nText("Fine-Design_Theme_Widget_Background")));
-        labelMap.put(StyleSetting.SELECT_COLOR, new UILabel(Toolkit.i18nText("Fine-Design_Widget_Background_Select_Box")));
+        for (StyleSetting setting : StyleSetting.values()) {
+            labelMap.put(setting, WidgetThemeDesignerUtils.createTopAlignmentLabel(Toolkit.i18nText(setting.getLabelI18nKey())));
+        }
+    }
+
+    private void initBorderPane() {
+        lineComboBox = new LineComboBox(WidgetThemeDisplayConstants.BORDER_LINE_STYLE_ARRAY);
+        borderColorSelectBox = new NewColorSelectBox(WidgetThemeDisplayConstants.THEME_WIDGET_COMPONENT_WIDTH, true);
+        borderRadiusSpinner = new UIBoundSpinner(0, Integer.MAX_VALUE, 1);
+        lineComboBox.addItemListener(e -> borderColorSelectBox.setVisible(!Integer.valueOf(0).equals(e.getItem())));
     }
 }
diff --git a/designer-form/src/main/java/com/fr/design/widgettheme/LabelSettingPane.java b/designer-form/src/main/java/com/fr/design/widgettheme/LabelSettingPane.java
index 4146ef6842..19453a6da6 100644
--- a/designer-form/src/main/java/com/fr/design/widgettheme/LabelSettingPane.java
+++ b/designer-form/src/main/java/com/fr/design/widgettheme/LabelSettingPane.java
@@ -1,11 +1,15 @@
 package com.fr.design.widgettheme;
 
+import com.fr.util.ColorUtils;
 import com.fr.widgettheme.theme.widget.style.FontStyle;
 import com.fr.form.ui.Label;
 import com.fr.form.ui.Widget;
 import com.fr.general.FRFont;
 import com.fr.widgettheme.theme.widget.theme.LabelTheme;
+import com.fr.widgettheme.theme.widget.theme.WidgetThemeDisplayConstants;
+import com.fr.widgettheme.util.WidgetThemeDesignerUtils;
 
+import java.awt.Color;
 import java.util.Collections;
 
 /**
@@ -37,7 +41,7 @@ public class LabelSettingPane<T extends Widget> extends BaseStyleSettingPane<T>
     private LabelTheme initLabelTheme(T t) {
         LabelTheme widgetTheme = (LabelTheme) t.getWidgetTheme();
         if (widgetTheme == null) {
-            widgetTheme = new LabelTheme();
+            widgetTheme = initLabelTheme();
             Label label = (Label) t;
             if (!label.getDefaultFont().equals(label.getFont())) {
                 widgetTheme.setFollowTheme(false);
@@ -48,6 +52,15 @@ public class LabelSettingPane<T extends Widget> extends BaseStyleSettingPane<T>
         return widgetTheme;
     }
 
+    private LabelTheme initLabelTheme() {
+        LabelTheme labelTheme = new LabelTheme();
+        Color fontColor = WidgetThemeDesignerUtils.isCurrentTemplateThemeDark() ?
+                ColorUtils.hexToColor(WidgetThemeDisplayConstants.COLOR_FFFFFF_HEX) :
+                ColorUtils.hexToColor(WidgetThemeDisplayConstants.COLOR_091E40_HEX);
+        labelTheme.getFontStyle().setFont(FRFont.getInstance().applyForeground(fontColor));
+        return labelTheme;
+    }
+
     @Override
     public void updateBean(T t) {
         LabelTheme widgetTheme = initLabelTheme(t);
diff --git a/designer-form/src/main/java/com/fr/design/widgettheme/ParaButtonSettingPane.java b/designer-form/src/main/java/com/fr/design/widgettheme/ParaButtonSettingPane.java
index 084e183abe..620af9a80e 100644
--- a/designer-form/src/main/java/com/fr/design/widgettheme/ParaButtonSettingPane.java
+++ b/designer-form/src/main/java/com/fr/design/widgettheme/ParaButtonSettingPane.java
@@ -21,7 +21,7 @@ public class ParaButtonSettingPane<T extends Widget> extends ButtonSettingPane<T
     public ParaButtonSettingPane() {
         super(Arrays.asList(
                 StyleSetting.THEME_COLOR,
-                StyleSetting.STYLE_TYPE,
+                StyleSetting.WIDGET_BACKGROUND,
                 StyleSetting.TEXT_STYLE
         ));
     }
@@ -36,6 +36,8 @@ public class ParaButtonSettingPane<T extends Widget> extends ButtonSettingPane<T
         ThemeTextStyle textStyle = ((ParaButtonTheme) buttonTheme).getTextStyle();
         fontSizePane.setValue(textStyle.getFontSize());
         fontColorButton.setColor(textStyle.getFontColor());
+        bold.setSelected(textStyle.isBold());
+        italic.setSelected(textStyle.isItalic());
     }
 
     @Override
@@ -44,6 +46,8 @@ public class ParaButtonSettingPane<T extends Widget> extends ButtonSettingPane<T
         ThemeTextStyle textStyle = new ThemeTextStyle();
         textStyle.setFontSize(fontSizePane.getValue());
         textStyle.setFontColor(fontColorButton.getColor());
+        textStyle.setBold(bold.isSelected());
+        textStyle.setItalic(italic.isSelected());
         paraButtonTheme.setTextStyle(textStyle);
     }
 
diff --git a/designer-form/src/main/java/com/fr/design/widgettheme/ParaEditorSettingPane.java b/designer-form/src/main/java/com/fr/design/widgettheme/ParaEditorSettingPane.java
index 7d958e3205..5a67090bc2 100644
--- a/designer-form/src/main/java/com/fr/design/widgettheme/ParaEditorSettingPane.java
+++ b/designer-form/src/main/java/com/fr/design/widgettheme/ParaEditorSettingPane.java
@@ -9,7 +9,6 @@ import com.fr.widgettheme.theme.widget.theme.cell.EditorTheme;
 import java.util.Arrays;
 import java.util.List;
 
-
 /**
  * 设计器控件属性的“高级”设置增加主题样式设置项，包括：
  * 文本控件/数字控件/密码控件/文本域控件/下拉框控件/下拉复选框控件/下拉树控件/日期控件
@@ -23,8 +22,9 @@ public class ParaEditorSettingPane<T extends Widget> extends EditorSettingPane<T
     public ParaEditorSettingPane() {
         super(Arrays.asList(
                 StyleSetting.THEME_COLOR,
-                StyleSetting.STYLE_TYPE,
+                StyleSetting.WIDGET_BACKGROUND,
                 StyleSetting.LINE_TYPE,
+                StyleSetting.LINE_COLOR,
                 StyleSetting.BORDER_RADIUS,
                 StyleSetting.TEXT_STYLE
         ));
@@ -39,6 +39,8 @@ public class ParaEditorSettingPane<T extends Widget> extends EditorSettingPane<T
         ThemeTextStyle textStyle = ((ParaEditorTheme) widgetTheme).getTextStyle();
         fontSizePane.setValue(textStyle.getFontSize());
         fontColorButton.setColor(textStyle.getFontColor());
+        bold.setSelected(textStyle.isBold());
+        italic.setSelected(textStyle.isItalic());
     }
 
     @Override
@@ -47,6 +49,8 @@ public class ParaEditorSettingPane<T extends Widget> extends EditorSettingPane<T
         ThemeTextStyle textStyle = new ThemeTextStyle();
         textStyle.setFontSize(fontSizePane.getValue());
         textStyle.setFontColor(fontColorButton.getColor());
+        textStyle.setBold(bold.isSelected());
+        textStyle.setItalic(italic.isSelected());
         paraEditorTheme.setTextStyle(textStyle);
     }
 
diff --git a/designer-form/src/main/java/com/fr/design/widgettheme/ParaNormalButtonSettingPane.java b/designer-form/src/main/java/com/fr/design/widgettheme/ParaNormalButtonSettingPane.java
index c5b45b8f42..c50c6207ec 100644
--- a/designer-form/src/main/java/com/fr/design/widgettheme/ParaNormalButtonSettingPane.java
+++ b/designer-form/src/main/java/com/fr/design/widgettheme/ParaNormalButtonSettingPane.java
@@ -23,6 +23,7 @@ public class ParaNormalButtonSettingPane<T extends Widget> extends NormalButtonS
         super(Arrays.asList(
                 StyleSetting.BTN_BACKGROUND,
                 StyleSetting.LINE_TYPE,
+                StyleSetting.LINE_COLOR,
                 StyleSetting.BORDER_RADIUS,
                 StyleSetting.FONT
         ));
diff --git a/designer-form/src/main/java/com/fr/design/widgettheme/ParaSelectEditorSettingPane.java b/designer-form/src/main/java/com/fr/design/widgettheme/ParaSelectEditorSettingPane.java
index f7cd1eb93e..b0f90a1127 100644
--- a/designer-form/src/main/java/com/fr/design/widgettheme/ParaSelectEditorSettingPane.java
+++ b/designer-form/src/main/java/com/fr/design/widgettheme/ParaSelectEditorSettingPane.java
@@ -16,12 +16,14 @@ public class ParaSelectEditorSettingPane<T extends Widget> extends ParaEditorSet
     public ParaSelectEditorSettingPane() {
         super(Arrays.asList(
                 StyleSetting.THEME_COLOR,
-                StyleSetting.SELECT_COLOR,
-                StyleSetting.STYLE_TYPE,
+                StyleSetting.WIDGET_BACKGROUND,
                 StyleSetting.LINE_TYPE,
+                StyleSetting.LINE_COLOR,
                 StyleSetting.BORDER_RADIUS,
-                StyleSetting.TEXT_STYLE
-        ));
+                StyleSetting.ICON_COLOR,
+                StyleSetting.TEXT_STYLE,
+                StyleSetting.SELECT_COLOR
+                ));
     }
 
     @Override
diff --git a/designer-form/src/main/java/com/fr/design/widgettheme/ParaTreeEditorSettingPane.java b/designer-form/src/main/java/com/fr/design/widgettheme/ParaTreeEditorSettingPane.java
index 462bdbaf4a..fbebd58633 100644
--- a/designer-form/src/main/java/com/fr/design/widgettheme/ParaTreeEditorSettingPane.java
+++ b/designer-form/src/main/java/com/fr/design/widgettheme/ParaTreeEditorSettingPane.java
@@ -21,7 +21,7 @@ public class ParaTreeEditorSettingPane<T extends TreeEditor> extends TreeEditorS
     public ParaTreeEditorSettingPane() {
         super(Arrays.asList(
                 StyleSetting.THEME_COLOR,
-                StyleSetting.STYLE_TYPE,
+                StyleSetting.WIDGET_BACKGROUND,
                 StyleSetting.TEXT_STYLE
         ));
     }
diff --git a/designer-form/src/main/java/com/fr/design/widgettheme/StyleSetting.java b/designer-form/src/main/java/com/fr/design/widgettheme/StyleSetting.java
index bae829f031..f3b8cca75f 100644
--- a/designer-form/src/main/java/com/fr/design/widgettheme/StyleSetting.java
+++ b/designer-form/src/main/java/com/fr/design/widgettheme/StyleSetting.java
@@ -12,34 +12,56 @@ public enum StyleSetting {
     /**
      * 主题颜色
      */
-    THEME_COLOR,
+    THEME_COLOR("Fine-Design_Widget_Theme_Color"),
     /**
-     * 风格
+     * 线型
      */
-    STYLE_TYPE,
+    LINE_TYPE("Fine-Design_Widget_Theme_Border_Line"),
     /**
-     * 线型
+     * 线型颜色
      */
-    LINE_TYPE,
+    LINE_COLOR(""),
     /**
      * 边框圆角
      */
-    BORDER_RADIUS,
+    BORDER_RADIUS("Fine-Design_Widget_Theme_Border_Radius"),
     /**
      * 文本样式
      */
-    TEXT_STYLE,
+    TEXT_STYLE("Fine-Design_Widget_Theme_Text_Style"),
     /**
      * 字体
      */
-    FONT,
+    FONT("Fine-Design_Widget_Theme_Font"),
     /**
      * 按钮背景
      */
-    BTN_BACKGROUND,
+    BTN_BACKGROUND("Fine-Design_Theme_Widget_Background"),
 
     /**
      * 自定义下拉框颜色
      */
-    SELECT_COLOR
+    SELECT_COLOR("Fine-Design_Widget_Background_Select_Box"),
+
+    /**
+     * 控件背景
+     */
+    WIDGET_BACKGROUND("Fine-Design_Widget_Theme_Widget_Background"),
+
+    /**
+     * 图标颜色
+     */
+    ICON_COLOR("Fine-Design_Widget_Theme_Icon_Color");
+
+    /**
+     * label标签i18n key
+     */
+    private final String labelI18nKey;
+    StyleSetting(String labelI18nKey) {
+        this.labelI18nKey = labelI18nKey;
+    }
+
+    public String getLabelI18nKey() {
+        return labelI18nKey;
+    }
 }
diff --git a/designer-form/src/main/java/com/fr/design/widgettheme/common/ButtonSettingPane.java b/designer-form/src/main/java/com/fr/design/widgettheme/common/ButtonSettingPane.java
index 9433b9e10d..acdebeb964 100644
--- a/designer-form/src/main/java/com/fr/design/widgettheme/common/ButtonSettingPane.java
+++ b/designer-form/src/main/java/com/fr/design/widgettheme/common/ButtonSettingPane.java
@@ -3,7 +3,6 @@ package com.fr.design.widgettheme.common;
 import com.fr.design.widgettheme.StyleSetting;
 import com.fr.design.widgettheme.BaseStyleSettingPane;
 import com.fr.form.ui.Widget;
-import com.fr.widgettheme.theme.widget.theme.WidgetThemeDisplayConstants;
 import com.fr.widgettheme.theme.widget.theme.cell.ButtonTheme;
 import org.jetbrains.annotations.Nullable;
 
@@ -23,7 +22,7 @@ public class ButtonSettingPane<T extends Widget> extends BaseStyleSettingPane<T>
     public ButtonSettingPane() {
         super(Arrays.asList(
                 StyleSetting.THEME_COLOR,
-                StyleSetting.STYLE_TYPE
+                StyleSetting.WIDGET_BACKGROUND
         ));
     }
 
@@ -65,11 +64,6 @@ public class ButtonSettingPane<T extends Widget> extends BaseStyleSettingPane<T>
         } else {
             styleSettingHead.setSelectedIndex(1);
             colorSelectBox.setSelectObject(buttonTheme.getThemeColor());
-            if (buttonTheme.getStyleType() == WidgetThemeDisplayConstants.STYLE_1) {
-                style1.setSelected(true);
-            } else {
-                style2.setSelected(true);
-            }
             assignFontSizePane(buttonTheme);
         }
         switchCard();
@@ -89,7 +83,6 @@ public class ButtonSettingPane<T extends Widget> extends BaseStyleSettingPane<T>
 
     protected void updateButtonStyleBean(ButtonTheme buttonTheme) {
         buttonTheme.setThemeColor(colorSelectBox.getSelectObject());
-        buttonTheme.setStyleType(style1.isSelected() ? WidgetThemeDisplayConstants.STYLE_1 : WidgetThemeDisplayConstants.STYLE_2);
         assignFontSizeStyle(buttonTheme);
         switchCard();
     }
diff --git a/designer-form/src/main/java/com/fr/design/widgettheme/common/EditorSettingPane.java b/designer-form/src/main/java/com/fr/design/widgettheme/common/EditorSettingPane.java
index 5209a7baaa..ea547eb674 100644
--- a/designer-form/src/main/java/com/fr/design/widgettheme/common/EditorSettingPane.java
+++ b/designer-form/src/main/java/com/fr/design/widgettheme/common/EditorSettingPane.java
@@ -1,12 +1,13 @@
 package com.fr.design.widgettheme.common;
 
 
+import com.fr.util.ColorUtils;
 import com.fr.widgettheme.theme.widget.style.BorderStyle;
 import com.fr.design.widgettheme.BaseStyleSettingPane;
 import com.fr.form.ui.Widget;
 import com.fr.design.widgettheme.StyleSetting;
-import com.fr.widgettheme.theme.widget.theme.WidgetThemeDisplayConstants;
 import com.fr.widgettheme.theme.widget.theme.cell.EditorTheme;
+import com.fr.widgettheme.util.WidgetThemeDesignerUtils;
 import org.jetbrains.annotations.Nullable;
 
 import java.util.Arrays;
@@ -25,8 +26,9 @@ public class EditorSettingPane<T extends Widget> extends BaseStyleSettingPane<T>
     public EditorSettingPane() {
         super(Arrays.asList(
                 StyleSetting.THEME_COLOR,
-                StyleSetting.STYLE_TYPE,
+                StyleSetting.WIDGET_BACKGROUND,
                 StyleSetting.LINE_TYPE,
+                StyleSetting.LINE_COLOR,
                 StyleSetting.BORDER_RADIUS
         ));
     }
@@ -74,13 +76,11 @@ public class EditorSettingPane<T extends Widget> extends BaseStyleSettingPane<T>
         } else {
             styleSettingHead.setSelectedIndex(1);
             colorSelectBox.setSelectObject(editorTheme.getThemeColor());
-            if (editorTheme.getStyleType() == WidgetThemeDisplayConstants.STYLE_1) {
-                style1.setSelected(true);
-            } else {
-                style2.setSelected(true);
-            }
             lineComboBox.setSelectedLineStyle(editorTheme.getBorderStyle().getLineType());
             borderRadiusSpinner.setValue(editorTheme.getBorderStyle().getRadius());
+            widgetBgColorSelectBox.setSelectObject(ColorUtils.ignoreColorAlpha(editorTheme.getWidgetBackground().getColor()));
+            widgetBgAlphaDragPane.populateBean(ColorUtils.roundColorAlphaDouble(editorTheme.getWidgetBackground().getColor()));
+            iconColorSelectBox.setSelectObject(editorTheme.getIconColor());
             selectBgColorBox.setSelectObject(editorTheme.getSelectBoxBgColor());
             assignFontSizePane(editorTheme);
         }
@@ -108,8 +108,8 @@ public class EditorSettingPane<T extends Widget> extends BaseStyleSettingPane<T>
     protected void updateEditorStyleBean(EditorTheme editorTheme) {
         editorTheme.setThemeColor(colorSelectBox.getSelectObject());
         editorTheme.setSelectBoxBgColor(selectBgColorBox.getSelectObject());
-        editorTheme.setStyleType(style1.isSelected() ? WidgetThemeDisplayConstants.STYLE_1 : WidgetThemeDisplayConstants.STYLE_2);
-        editorTheme.setBorderStyle(new BorderStyle((int) borderRadiusSpinner.getValue(), lineComboBox.getSelectedLineStyle()));
+        editorTheme.setBorderStyle(new BorderStyle((int) borderRadiusSpinner.getValue(), lineComboBox.getSelectedLineStyle(), borderColorSelectBox.getSelectObject()));
+        editorTheme.setWidgetBackground(ColorUtils.createColorBackgroundWithAlpha(widgetBgColorSelectBox.getSelectObject(), widgetBgAlphaDragPane.updateBean()));
         assignFontSizeStyle(editorTheme);
         switchCard();
     }
diff --git a/designer-form/src/main/java/com/fr/design/widgettheme/common/NormalButtonSettingPane.java b/designer-form/src/main/java/com/fr/design/widgettheme/common/NormalButtonSettingPane.java
index 006df96617..2cfc721e5c 100644
--- a/designer-form/src/main/java/com/fr/design/widgettheme/common/NormalButtonSettingPane.java
+++ b/designer-form/src/main/java/com/fr/design/widgettheme/common/NormalButtonSettingPane.java
@@ -27,6 +27,7 @@ public class NormalButtonSettingPane<T extends Widget> extends BaseStyleSettingP
         super(Arrays.asList(
                 StyleSetting.BTN_BACKGROUND,
                 StyleSetting.LINE_TYPE,
+                StyleSetting.LINE_COLOR,
                 StyleSetting.BORDER_RADIUS
         ));
     }
@@ -118,8 +119,7 @@ public class NormalButtonSettingPane<T extends Widget> extends BaseStyleSettingP
     protected void updateNormalButtonStyleBean(NormalButtonTheme normalButtonTheme) {
         assignFontStyle(normalButtonTheme);
         normalButtonTheme.setButtonBackgroundStyle(buttonStyleDefinedPane.update());
-        normalButtonTheme.setBorderStyle(new BorderStyle((int) borderRadiusSpinner.getValue(), lineComboBox.getSelectedLineStyle()));
-
+        normalButtonTheme.setBorderStyle(new BorderStyle((int) borderRadiusSpinner.getValue(), lineComboBox.getSelectedLineStyle(), borderColorSelectBox.getSelectObject()));
         switchCard();
     }
 
diff --git a/designer-form/src/main/java/com/fr/design/widgettheme/common/SelectEditorSettingPane.java b/designer-form/src/main/java/com/fr/design/widgettheme/common/SelectEditorSettingPane.java
index c226852bad..4bc0bf1d36 100644
--- a/designer-form/src/main/java/com/fr/design/widgettheme/common/SelectEditorSettingPane.java
+++ b/designer-form/src/main/java/com/fr/design/widgettheme/common/SelectEditorSettingPane.java
@@ -18,10 +18,12 @@ public class SelectEditorSettingPane <T extends Widget> extends EditorSettingPan
     public SelectEditorSettingPane() {
         super(Arrays.asList(
                 StyleSetting.THEME_COLOR,
-                StyleSetting.SELECT_COLOR,
-                StyleSetting.STYLE_TYPE,
+                StyleSetting.WIDGET_BACKGROUND,
                 StyleSetting.LINE_TYPE,
-                StyleSetting.BORDER_RADIUS
+                StyleSetting.LINE_COLOR,
+                StyleSetting.BORDER_RADIUS,
+                StyleSetting.ICON_COLOR,
+                StyleSetting.SELECT_COLOR
         ));
     }
 
diff --git a/designer-form/src/main/java/com/fr/design/widgettheme/common/TreeEditorSettingPane.java b/designer-form/src/main/java/com/fr/design/widgettheme/common/TreeEditorSettingPane.java
index 5381909c06..6f6676071c 100644
--- a/designer-form/src/main/java/com/fr/design/widgettheme/common/TreeEditorSettingPane.java
+++ b/designer-form/src/main/java/com/fr/design/widgettheme/common/TreeEditorSettingPane.java
@@ -3,7 +3,6 @@ package com.fr.design.widgettheme.common;
 import com.fr.design.widgettheme.StyleSetting;
 import com.fr.design.widgettheme.BaseStyleSettingPane;
 import com.fr.form.ui.TreeEditor;
-import com.fr.widgettheme.theme.widget.theme.WidgetThemeDisplayConstants;
 import com.fr.widgettheme.theme.widget.theme.cell.TreeTheme;
 import org.jetbrains.annotations.Nullable;
 
@@ -23,7 +22,7 @@ public class TreeEditorSettingPane<T extends TreeEditor> extends BaseStyleSettin
     public TreeEditorSettingPane() {
         super(Arrays.asList(
                 StyleSetting.THEME_COLOR,
-                StyleSetting.STYLE_TYPE
+                StyleSetting.WIDGET_BACKGROUND
         ));
     }
 
@@ -57,11 +56,6 @@ public class TreeEditorSettingPane<T extends TreeEditor> extends BaseStyleSettin
         } else {
             styleSettingHead.setSelectedIndex(1);
             colorSelectBox.setSelectObject(treeTheme.getThemeColor());
-            if (treeTheme.getStyleType() == WidgetThemeDisplayConstants.STYLE_1) {
-                style1.setSelected(true);
-            } else {
-                style2.setSelected(true);
-            }
             assignFontSizePane(treeTheme);
         }
         switchCard();
@@ -89,7 +83,6 @@ public class TreeEditorSettingPane<T extends TreeEditor> extends BaseStyleSettin
 
     protected void updateTreeStyleBean(TreeTheme treeTheme) {
         treeTheme.setThemeColor(colorSelectBox.getSelectObject());
-        treeTheme.setStyleType(style1.isSelected() ? WidgetThemeDisplayConstants.STYLE_1 : WidgetThemeDisplayConstants.STYLE_2);
         assignFontSizeStyle(treeTheme);
         switchCard();
     }