Pull request #5370: MOBILE-32704 11.0部分插件内置

Merge in DESIGN/design from ~HEYMAN.WANG/design:release/11.0 to release/11.0 * commit 'd5cd33159687806dbab2c975eda7daf2d6b59f4b': MOBILE-32704 11.0部分插件内置 MOBILE-32704 11.0部分插件内置 MOBILE-32704 11.0部分插件内置 MOBILE-32704 11.0部分插件内置
3 years ago · b39ef3da56
36 changed files with 3860 additions and 59 deletions
--- a/designer-base/src/main/java/com/fr/design/ExtraDesignClassManager.java
+++ b/designer-base/src/main/java/com/fr/design/ExtraDesignClassManager.java
@ -18,6 +18,7 @@ import com.fr.design.fun.TableDataDefineProvider;
 import com.fr.design.fun.ToolbarItemProvider;
 import com.fr.design.gui.core.WidgetOption;
 import com.fr.design.gui.core.WidgetOptionFactory;
+import com.fr.design.mainframe.mobile.utils.MobileStyleProviderManager;
 import com.fr.design.menu.ShortCut;
 import com.fr.design.widget.Appearance;
 import com.fr.design.widget.mobile.WidgetMobilePane;
@ -269,11 +270,10 @@ public class ExtraDesignClassManager extends AbstractExtraClassManager implement

    public MobileWidgetStyleProvider[] getMobileStyleOfWidget(String xType) {
        Set<MobileWidgetStyleProvider> set = getArray(MobileWidgetStyleProvider.XML_TAG);
-        if (set.isEmpty()) {
-            return new MobileWidgetStyleProvider[0];
-        }
+        Set<MobileWidgetStyleProvider> allSet = MobileStyleProviderManager.getArray(MobileWidgetStyleProvider.XML_TAG);
+        allSet.addAll(set);
        List<MobileWidgetStyleProvider> providers = new ArrayList<>();
-        for (MobileWidgetStyleProvider provider : set) {
+        for (MobileWidgetStyleProvider provider : allSet) {
            if (ComparatorUtils.equalsIgnoreCase(provider.xTypeForWidget(), xType)) {
                providers.add(provider);
            }
--- a/designer-base/src/main/java/com/fr/design/hyperlink/popup/ContentSettingPane.java
+++ b/designer-base/src/main/java/com/fr/design/hyperlink/popup/ContentSettingPane.java
@ -0,0 +1,328 @@
+package com.fr.design.hyperlink.popup;
+
+import com.fr.base.BaseFormula;
+import com.fr.base.BaseUtils;
+import com.fr.base.Parameter;
+import com.fr.design.dialog.BasicDialog;
+import com.fr.design.dialog.DialogActionAdapter;
+import com.fr.design.formula.TinyFormulaPane;
+import com.fr.design.gui.frpane.ReportletParameterViewPane;
+import com.fr.design.gui.ibutton.UIButton;
+import com.fr.design.gui.ibutton.UIRadioButton;
+import com.fr.design.gui.icheckbox.UICheckBox;
+import com.fr.design.gui.itableeditorpane.UITableEditAction;
+import com.fr.design.gui.itextfield.UITextField;
+import com.fr.design.gui.itree.filetree.ReportletPane;
+import com.fr.design.hyperlink.AbstractHyperLinkPane;
+import com.fr.design.i18n.Toolkit;
+import com.fr.design.layout.FRGUIPaneFactory;
+import com.fr.design.module.DesignModuleFactory;
+import com.fr.design.parameter.ParameterReader;
+import com.fr.design.utils.gui.GUICoreUtils;
+import com.fr.js.MobilePopupHyperlink;
+import com.fr.stable.CommonUtils;
+import com.fr.stable.FormulaProvider;
+import com.fr.stable.ParameterProvider;
+import com.fr.stable.StringUtils;
+
+import javax.swing.*;
+import java.awt.*;
+import java.awt.event.ActionEvent;
+import java.awt.event.ActionListener;
+import java.util.List;
+
+public class ContentSettingPane extends AbstractHyperLinkPane<MobilePopupHyperlink> {
+    private JPanel popupTargetPane;
+    private UIRadioButton templatePopupButton;
+    private UIRadioButton textPopupButton;
+    private ButtonGroup popupTargetButtons;
+
+    private JPanel templateContentPane;
+    private UITextField templatePathTextField;
+    private UICheckBox extendParametersCheckBox;
+
+    private JPanel textSettingPanel;
+    private TinyFormulaPane textContentPane;
+    private CustomFontPane fontPane;
+
+    public ContentSettingPane() {
+        super();
+        this.initCompoennt();
+    }
+
+    public void addTargetRadioActionListener(ActionListener listener) {
+          templatePopupButton.addActionListener(listener);
+          textPopupButton.addActionListener(listener);
+    }
+
+    public String getTargetType() {
+        if (templatePopupButton.isSelected()) {
+            return MobilePopupConstants.Target_Template;
+        } else {
+            return MobilePopupConstants.Target_Text;
+        }
+
+    }
+
+    private void initCompoennt() {
+        this.setLayout(FRGUIPaneFactory.createM_BorderLayout());
+        this.setBorder(GUICoreUtils.createTitledBorder(Toolkit.i18nText("FR-Plugin-Designer_Mobile_Popup_Content")));
+
+        popupTargetPane = this.createPopupTargetPane();
+        this.add(popupTargetPane, BorderLayout.NORTH);
+
+        templateContentPane= this.createTemplateContentPane();
+        textSettingPanel = this.createTextSettingPane();
+    }
+
+    private JPanel createPopupTargetPane() {
+        templatePopupButton = new UIRadioButton(Toolkit.i18nText("FR-Plugin-Designer_Mobile_Popup_Template"));
+        templatePopupButton.addActionListener(radioActionListener);
+
+        textPopupButton = new UIRadioButton(Toolkit.i18nText("FR-Plugin-Designer_Mobile_Popup_Text"));
+        textPopupButton.addActionListener(radioActionListener);
+
+        popupTargetButtons = new ButtonGroup();
+        popupTargetButtons.add(templatePopupButton);
+        popupTargetButtons.add(textPopupButton);
+
+        JPanel popupButtonsPanel = new JPanel();
+        popupButtonsPanel.setLayout( new FlowLayout(FlowLayout.LEFT, 10, 0));
+        popupButtonsPanel.add(templatePopupButton);
+        popupButtonsPanel.add(textPopupButton);
+        return MobilePopupUIUtils.createLeftTileRightContentPanel(Toolkit.i18nText("FR-Plugin-Designer_Mobile_Popup_Target"), popupButtonsPanel);
+    }
+
+    private ActionListener radioActionListener = new ActionListener() {
+        @Override
+        public void actionPerformed(ActionEvent e) {
+            if(templatePopupButton.isSelected()) {
+                ContentSettingPane.this.add(templateContentPane);
+                ContentSettingPane.this.remove(textSettingPanel);
+            } else if (textPopupButton.isSelected()) {
+                ContentSettingPane.this.add(textSettingPanel);
+                ContentSettingPane.this.remove(templateContentPane);
+            }
+            ContentSettingPane.this.revalidate();
+            ContentSettingPane.this.repaint();
+        }
+    };
+
+    private JPanel createTemplateContentPane() {
+        JPanel templateContentPane = new JPanel();
+        templateContentPane.setLayout(new BorderLayout(0,8));
+
+        templateContentPane.add(this.createTemplateSelectPanel(), BorderLayout.NORTH);
+
+        parameterViewPane = this.createReportletParameterViewPane();
+        templateContentPane.add(parameterViewPane, BorderLayout.CENTER);
+
+        extendParametersCheckBox = new UICheckBox(Toolkit.i18nText("Fine-Design_Basic_Hyperlink_Extends_Report_Parameters"));
+        templateContentPane.add(GUICoreUtils.createFlowPane(extendParametersCheckBox, FlowLayout.LEFT), BorderLayout.SOUTH);
+
+        return templateContentPane;
+    }
+
+    private JPanel createTemplateSelectPanel() {
+        JPanel templatePanel = FRGUIPaneFactory.createBorderLayout_S_Pane();
+        // 路径输入框
+        templatePathTextField = new UITextField(20);
+        templatePanel.add(templatePathTextField, BorderLayout.CENTER);
+
+        // 选择路径按钮
+        UIButton templateSelectButton = new UIButton(Toolkit.i18nText("FR-Plugin-Designer_Mobile_Popup_Select"));
+        templateSelectButton.setPreferredSize(new Dimension(templateSelectButton.getPreferredSize().width, 20));
+        templatePanel.add(templateSelectButton, BorderLayout.EAST);
+        templateSelectButton.addActionListener(new ActionListener() {
+            @Override
+            public void actionPerformed(ActionEvent evt) {
+                final ReportletPane reportletPane = new ReportletPane();
+                reportletPane.setSelectedReportletPath(templatePathTextField.getText());
+                BasicDialog reportletDialog = reportletPane.showWindow(SwingUtilities.getWindowAncestor(ContentSettingPane.this));
+
+                reportletDialog.addDialogActionListener(new DialogActionAdapter() {
+                    @Override
+                    public void doOk() {
+                        templatePathTextField.setText(reportletPane.getSelectedReportletPath());
+                    }
+                });
+                reportletDialog.setVisible(true);
+            }
+        });
+        return MobilePopupUIUtils.createLeftTileRightContentPanel(Toolkit.i18nText("FR-Plugin-Designer_Mobile_Popup_Template"), templatePanel);
+    }
+
+    private ReportletParameterViewPane createReportletParameterViewPane() {
+        ReportletParameterViewPane templateParameterViewPane = new ReportletParameterViewPane(
+                new UITableEditAction[]{
+                        new HyperlinkParametersAction()
+                },
+                getChartParaType(),
+                getValueEditorPane(),
+                getValueEditorPane()
+        );
+        templateParameterViewPane.setBorder(GUICoreUtils.createTitledBorder(Toolkit.i18nText("FR-Plugin-Designer_Mobile_Popup_Parameter"), null));
+        templateParameterViewPane.setPreferredSize(new Dimension(this.getWidth(), 200));
+        return templateParameterViewPane;
+    }
+
+    private JPanel createTextSettingPane() {
+        JPanel textSettingPanel = new JPanel();
+        textSettingPanel.setLayout(new BorderLayout(0,8));
+
+        textContentPane = new TinyFormulaPane();
+        textContentPane.getUITextField().setColumns(20);
+        textSettingPanel.add(
+                MobilePopupUIUtils.createLeftTileRightContentPanel(Toolkit.i18nText("FR-Plugin-Designer_Mobile_Popup_Text"), textContentPane),
+                BorderLayout.CENTER);
+
+        fontPane = new CustomFontPane();
+        textSettingPanel.add(
+                MobilePopupUIUtils.createLeftTileRightContentPanel(Toolkit.i18nText("FR-Plugin-Designer_Mobile_Popup_Style"), fontPane),
+                BorderLayout.SOUTH);
+        return MobilePopupUIUtils.createTitleSplitLineContentPane("", textSettingPanel);
+    }
+
+    private String getReportletName() {
+        String text = this.templatePathTextField.getText();
+        return StringUtils.isBlank(text) ? StringUtils.EMPTY : text.substring(1);
+    }
+
+    @Override
+    public void populateBean(MobilePopupHyperlink link) {
+        this.populatePopupTargetBean(link.getPopupTarget());
+        this.populateTemplateContentBean(link);
+        this.populateTextContentBean(link);
+
+    }
+
+    @Override
+    public MobilePopupHyperlink updateBean() {
+        return null;
+    }
+
+    @Override
+    public void updateBean(MobilePopupHyperlink link) {
+        this.updatePopupTargetBean(link);
+        this.updateTemplateContentBean(link);
+        this.updateTextContentBean(link);
+    }
+
+    @Override
+    public String title4PopupWindow() {
+        return StringUtils.EMPTY;
+    }
+
+    /**
+     * 自动添加模板参数的按钮操作
+     */
+    private class HyperlinkParametersAction extends UITableEditAction {
+        public HyperlinkParametersAction() {
+            this.setName(Toolkit.i18nText("Fine-Design_Basic_Template_Parameter"));
+            this.setSmallIcon(BaseUtils.readIcon("/com/fr/design/images/m_report/p.gif"));
+        }
+
+        @Override
+        public void actionPerformed(ActionEvent e) {
+            String tpl = getReportletName();
+            if (StringUtils.isBlank(tpl)) {
+                JOptionPane.showMessageDialog(
+                        ContentSettingPane.this,
+                        Toolkit.i18nText("Fine-Design_Basic_Hyperlink_Please_Select_Reportlet") + ".",
+                        Toolkit.i18nText("Fine-Design_Basic_Message"),
+                        JOptionPane.WARNING_MESSAGE);
+                return;
+            }
+
+            //根据模板路径返回参数
+            //与当前模块、当前文件无关
+            Parameter[] parameters = new Parameter[0];
+
+            ParameterReader[] readers = DesignModuleFactory.getParameterReaders();
+            for (ParameterReader reader : readers) {
+                Parameter[] ps = reader.readParameterFromPath(tpl);
+                if (ps != null) {
+                    parameters = ps;
+                }
+            }
+            parameterViewPane.populate(parameters);
+        }
+
+        @Override
+        public void checkEnabled() {
+            //do nothing
+        }
+    }
+
+    private void populatePopupTargetBean(String target) {
+        if (StringUtils.equals(target, MobilePopupConstants.Target_Text)) {
+            popupTargetButtons.setSelected(textPopupButton.getModel(), true);
+            this.remove(templateContentPane);
+            this.add(textSettingPanel, BorderLayout.CENTER);
+        } else {
+            popupTargetButtons.setSelected(templatePopupButton.getModel(), true);
+            this.remove(textSettingPanel);
+            this.add(templateContentPane, BorderLayout.CENTER);
+        }
+
+    }
+
+    private void updatePopupTargetBean(MobilePopupHyperlink mobilePopupHyperlink) {
+        if (templatePopupButton.isSelected()) {
+            mobilePopupHyperlink.setPopupTarget(MobilePopupConstants.Target_Template);
+        } else if (textPopupButton.isSelected()) {
+            mobilePopupHyperlink.setPopupTarget(MobilePopupConstants.Target_Text);
+        }
+    }
+
+    private void populateTemplateContentBean(MobilePopupHyperlink link) {
+        // 模板路径
+        templatePathTextField.setText(link.getReportletPath());
+
+        // 参数面板
+        List<ParameterProvider> parameterList = this.parameterViewPane.update();
+        parameterList.clear();
+        ParameterProvider[] parameters =link.getParameters();
+        parameterViewPane.populate(parameters);
+
+        // 继承参数
+        extendParametersCheckBox.setSelected(link.isExtendParameters());
+    }
+
+    private void updateTemplateContentBean(MobilePopupHyperlink link) {
+        link.setReportletPath(templatePathTextField.getText());
+
+        List<ParameterProvider> parameterList = this.parameterViewPane.update();
+        if (!parameterList.isEmpty()) {
+            Parameter[] parameters = new Parameter[parameterList.size()];
+            parameterList.toArray(parameters);
+            link.setParameters(parameters);
+        } else {
+            link.setParameters(null);
+        }
+
+        link.setExtendParameters(extendParametersCheckBox.isSelected());
+
+    }
+
+    private void populateTextContentBean(MobilePopupHyperlink link) {
+        Object text = link.getPopupText();
+        if (text instanceof FormulaProvider) {
+            textContentPane.populateBean(((FormulaProvider) text).getContent());
+        } else {
+            textContentPane.populateBean(text == null ? StringUtils.EMPTY : text.toString());
+        }
+        fontPane.populateBean(link.getFRFont());
+    }
+    private void updateTextContentBean(MobilePopupHyperlink link) {
+        link.setPopupText(textContentPane.getUITextField().getText());
+        String text = textContentPane.updateBean();
+        if (CommonUtils.maybeFormula(text)) {
+            link.setPopupText(BaseFormula.createFormulaBuilder().build(textContentPane.updateBean()));
+        } else {
+            link.setPopupText(text);
+        }
+
+        link.setFRFont(fontPane.updateBean());
+    }
+}
--- a/designer-base/src/main/java/com/fr/design/hyperlink/popup/CustomFontPane.java
+++ b/designer-base/src/main/java/com/fr/design/hyperlink/popup/CustomFontPane.java
@ -0,0 +1,100 @@
+package com.fr.design.hyperlink.popup;
+
+import com.fr.base.BaseUtils;
+import com.fr.design.constants.LayoutConstants;
+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.i18n.Toolkit;
+import com.fr.design.utils.gui.GUICoreUtils;
+import com.fr.general.FRFont;
+import com.fr.stable.Constants;
+
+import javax.swing.*;
+import java.awt.*;
+import java.util.Vector;
+
+public class CustomFontPane extends JPanel {
+    private static final int MAX_FONT_SIZE = 100;
+    private static final Dimension BUTTON_SIZE = new Dimension(20, 18);
+
+    public static Vector<Integer> getFontSizes() {
+        Vector<Integer> FONT_SIZES = new Vector<Integer>();
+        for (int i = 1; i < MAX_FONT_SIZE; i++) {
+            FONT_SIZES.add(i);
+        }
+        return FONT_SIZES;
+    }
+
+    private UIComboBox fontSizeComboBox;
+    private UIToggleButton bold;
+    private UIToggleButton italic;
+    private UIToggleButton underline;
+    private UIColorButton colorSelectPane;
+
+    public CustomFontPane() {
+        this.initComponent();
+    }
+
+    private void initComponent() {
+
+        fontSizeComboBox = new UIComboBox(getFontSizes());
+        fontSizeComboBox.setPreferredSize(new Dimension(60, 20));
+        fontSizeComboBox.setEditable(true);
+
+        colorSelectPane = new UIColorButton();
+        bold = new UIToggleButton(BaseUtils.readIcon("/com/fr/design/images/m_format/cellstyle/bold.png"));
+        italic = new UIToggleButton(BaseUtils.readIcon("/com/fr/design/images/m_format/cellstyle/italic.png"));
+        underline = new UIToggleButton(BaseUtils.readIcon("/com/fr/design/images/m_format/cellstyle/underline.png"));
+
+        this.setButtonsTips();
+        this.setButtonsSize(BUTTON_SIZE);
+
+        Component[] components_font = new Component[]{
+                fontSizeComboBox, colorSelectPane, bold, underline, italic
+        };
+
+        JPanel buttonPane = new JPanel(new BorderLayout());
+        buttonPane.add(GUICoreUtils.createFlowPane(components_font, FlowLayout.LEFT, LayoutConstants.HGAP_SMALL));
+
+        this.setLayout(new BorderLayout(0,0));
+        this.add(buttonPane, BorderLayout.CENTER);
+    }
+
+    private void setButtonsTips() {
+        colorSelectPane.setToolTipText(Toolkit.i18nText("Fine-Design_Report_Foreground"));
+        italic.setToolTipText(Toolkit.i18nText("Fine-Design_Report_Italic"));
+        bold.setToolTipText(Toolkit.i18nText("Fine-Design_Report_Bold"));
+        underline.setToolTipText(Toolkit.i18nText("Fine-Design_Report_Underline"));
+    }
+
+    private void setButtonsSize(Dimension size) {
+        colorSelectPane.setPreferredSize(size);
+        bold.setPreferredSize(size);
+        italic.setPreferredSize(size);
+        underline.setPreferredSize(size);
+    }
+
+
+    public void populateBean(FRFont frFont) {
+        fontSizeComboBox.setSelectedItem(frFont.getSize());
+        colorSelectPane.setColor(frFont.getForeground());
+        bold.setSelected(frFont.isBold());
+        italic.setSelected(frFont.isItalic());
+        underline.setSelected(frFont.getUnderline() != Constants.LINE_NONE);
+    }
+
+    public FRFont updateBean() {
+        int style = Font.PLAIN;
+        style += this.bold.isSelected() ? Font.BOLD : Font.PLAIN;
+        style += this.italic.isSelected() ? Font.ITALIC : Font.PLAIN;
+        return FRFont.getInstance(
+                FRFont.DEFAULT_FONTNAME,
+                style,
+                Float.parseFloat(fontSizeComboBox.getSelectedItem().toString()),
+                colorSelectPane.getColor(),
+                underline.isSelected() ? Constants.LINE_THIN : Constants.LINE_NONE
+        );
+    }
+
+}
--- a/designer-base/src/main/java/com/fr/design/hyperlink/popup/MobilePopupConstants.java
+++ b/designer-base/src/main/java/com/fr/design/hyperlink/popup/MobilePopupConstants.java
@ -0,0 +1,22 @@
+package com.fr.design.hyperlink.popup;
+
+import com.fr.stable.Constants;
+
+public interface MobilePopupConstants {
+    int[] BORDER_LINE_STYLE_ARRAY = new int[]{
+            Constants.LINE_NONE,
+            Constants.LINE_THIN,
+            Constants.LINE_MEDIUM,
+            Constants.LINE_THICK,
+    };
+
+    String Target_Template= "template";
+    String Target_Text = "text";
+    String Regular_Custom = "custom";
+    String Regular_Auto_Height = "auto_height";
+
+    double Popup_Center_Default_Width = 95;
+    double Popup_Center_Default_Height = 95;
+    double Popup_Follow_Default_Width = 40;
+    double Popup_Follow_Default_Height = 10;
+}
--- a/designer-base/src/main/java/com/fr/design/hyperlink/popup/MobilePopupPane.java
+++ b/designer-base/src/main/java/com/fr/design/hyperlink/popup/MobilePopupPane.java
@ -0,0 +1,81 @@
+package com.fr.design.hyperlink.popup;
+
+import com.fr.design.beans.FurtherBasicBeanPane;
+import com.fr.design.gui.icontainer.UIScrollPane;
+import com.fr.design.i18n.Toolkit;
+import com.fr.js.MobilePopupHyperlink;
+
+import javax.swing.*;
+import java.awt.*;
+import java.awt.event.ActionEvent;
+import java.awt.event.ActionListener;
+
+public class MobilePopupPane extends FurtherBasicBeanPane<MobilePopupHyperlink> {
+    private ContentSettingPane contentSettingPane;
+    private StyleSettingPane styleSettingPane;
+
+    public MobilePopupPane() {
+        this.initComponents();
+        this.setDefaultBean();
+    }
+
+    protected void initComponents() {
+        this.setLayout(new BorderLayout());
+        this.setBorder(BorderFactory.createEmptyBorder(0, 0, 0, 0));
+
+        JPanel scrollContent = new JPanel();
+        scrollContent.setLayout(new BorderLayout(10, 10));
+        contentSettingPane = new ContentSettingPane();
+        scrollContent.add(contentSettingPane, BorderLayout.NORTH);
+        styleSettingPane = new StyleSettingPane();
+        scrollContent.add(styleSettingPane, BorderLayout.CENTER);
+
+        contentSettingPane.addTargetRadioActionListener(radioActionListener);
+
+        UIScrollPane scrollPane= new UIScrollPane(scrollContent);
+        scrollPane.setBorder(BorderFactory.createEmptyBorder());
+        
+        JComponent scrollComponent = new JLayer<UIScrollPane>(scrollPane, new WheelScrollLayerUI());
+
+        this.add(scrollComponent, BorderLayout.CENTER);
+    }
+
+    private void setDefaultBean() {
+        this.populateBean(new MobilePopupHyperlink());
+    }
+    private ActionListener radioActionListener = new ActionListener() {
+        @Override
+        public void actionPerformed(ActionEvent e) {
+            styleSettingPane.resetPane(contentSettingPane.getTargetType());
+        }
+    };
+
+    @Override
+    public void populateBean(MobilePopupHyperlink mobilePopupHyperlink) {
+        contentSettingPane.populateBean(mobilePopupHyperlink);
+        styleSettingPane.populateBean(mobilePopupHyperlink);
+    }
+
+    @Override
+    public MobilePopupHyperlink updateBean() {
+        MobilePopupHyperlink mobilePopupHyperlink = new MobilePopupHyperlink();
+        contentSettingPane.updateBean(mobilePopupHyperlink);
+        styleSettingPane.updateBean(mobilePopupHyperlink);
+        return mobilePopupHyperlink;
+    }
+
+    @Override
+    public boolean accept(Object ob) {
+        return ob instanceof MobilePopupHyperlink;
+    }
+
+    @Override
+    public String title4PopupWindow() {
+        return Toolkit.i18nText("FR-Plugin-Designer_Mobile_Popup");
+    }
+
+    @Override
+    public void reset() {
+        this.setDefaultBean();
+    }
+}
--- a/designer-base/src/main/java/com/fr/design/hyperlink/popup/MobilePopupRegularPane.java
+++ b/designer-base/src/main/java/com/fr/design/hyperlink/popup/MobilePopupRegularPane.java
@ -0,0 +1,157 @@
+package com.fr.design.hyperlink.popup;
+
+import com.fr.design.dialog.BasicPane;
+import com.fr.design.gui.ibutton.UIRadioButton;
+import com.fr.design.gui.ilable.UILabel;
+import com.fr.design.gui.ispinner.UISpinner;
+import com.fr.design.i18n.Toolkit;
+import com.fr.design.layout.VerticalFlowLayout;
+import com.fr.stable.StringUtils;
+
+import javax.swing.*;
+import java.awt.*;
+import java.awt.event.ActionEvent;
+import java.awt.event.ActionListener;
+
+public class MobilePopupRegularPane extends BasicPane {
+    private String label;
+
+    private JPanel radiosPane;
+    private UIRadioButton customRadio;
+    private UIRadioButton autoRadio;
+    private ButtonGroup radioButtons;
+
+    private JPanel spinnerGroupPane;
+    private UISpinner widthSpinner;
+    private JPanel widthSpinnerPane;
+    private UISpinner heightSpinner;
+    private JPanel heightSpinnerPane;
+
+
+    public MobilePopupRegularPane(String label) {
+        this.label = label;
+        this.initComponent();
+    }
+
+    private void initComponent() {
+        this.setLayout(new BorderLayout());
+        this.add(this.createRadioButtonGroupPane(), BorderLayout.NORTH);
+        spinnerGroupPane = this.createSpinnerPane();
+        this.add(spinnerGroupPane, BorderLayout.CENTER);
+    }
+
+    private JPanel createRadioButtonGroupPane() {
+        radiosPane = new JPanel(new FlowLayout(FlowLayout.LEFT, 5, 5));
+
+        customRadio = new UIRadioButton(Toolkit.i18nText("FR-Plugin-Designer_Mobile_Popup_Custom"));
+        customRadio.addActionListener(radioActionListener);
+        autoRadio = new UIRadioButton(Toolkit.i18nText("FR-Plugin-Designer_Mobile_Popup_Height_Adaptive"));
+        autoRadio.addActionListener(radioActionListener);
+
+        radioButtons = new ButtonGroup();
+        radioButtons.add(customRadio);
+        radioButtons.add(autoRadio);
+
+        radiosPane.add(customRadio);
+        radiosPane.add(autoRadio);
+
+        return MobilePopupUIUtils.createLeftTileRightContentPanel(this.label, radiosPane);
+    }
+
+    private ActionListener radioActionListener = new ActionListener() {
+        @Override
+        public void actionPerformed(ActionEvent e) {
+            resetSpinnerGroupPane(customRadio.isSelected());
+        }
+    };
+
+    private JPanel createSpinnerPane() {
+        JPanel spinnerPane = new JPanel(new FlowLayout(FlowLayout.LEFT, 15, 5));
+        spinnerPane.setBorder(BorderFactory.createEmptyBorder(0, MobilePopupUIUtils.Left_Title_width, 0, 0));
+        widthSpinner = new UISpinner(0, 100, 1, 95);
+        widthSpinnerPane = this.createSpinnerLabelPane(widthSpinner, Toolkit.i18nText("FR-Plugin-Designer_Mobile_Popup_Width"));
+        heightSpinner = new UISpinner(0, 100, 1, 95);
+        heightSpinnerPane = this.createSpinnerLabelPane(heightSpinner, Toolkit.i18nText("FR-Plugin-Designer_Mobile_Popup_Height"));
+
+        spinnerPane.add(widthSpinnerPane);
+        spinnerPane.add(heightSpinnerPane);
+
+        return spinnerPane;
+    }
+
+    private JPanel createSpinnerLabelPane(UISpinner spinner, String labelText) {
+        JPanel spinnerLabelPane = new JPanel(new VerticalFlowLayout(VerticalFlowLayout.TOP, 0, 5));
+
+        JPanel spinnerPane = new JPanel(new FlowLayout(FlowLayout.LEFT, 2,0));
+        Dimension dimension = new Dimension(60, 20);
+        spinner.setPreferredSize(dimension);
+        UILabel percent = new UILabel("%");
+        spinnerPane.add(spinner);
+        spinnerPane.add(percent);
+
+        UILabel label = new UILabel(labelText);
+        label.setPreferredSize(dimension);
+        label.setHorizontalAlignment(SwingConstants.CENTER);
+
+        spinnerLabelPane.add(spinnerPane);
+        spinnerLabelPane.add(label);
+
+        return spinnerLabelPane;
+    }
+
+    private void resetSpinnerGroupPane(boolean showHeightSpinnerPane) {
+        spinnerGroupPane.removeAll();
+        spinnerGroupPane.add(widthSpinnerPane);
+        if(showHeightSpinnerPane) {
+            spinnerGroupPane.add(heightSpinnerPane);
+        }
+        spinnerGroupPane.revalidate();
+        spinnerGroupPane.repaint();
+    }
+
+    @Override
+    protected String title4PopupWindow() {
+        return StringUtils.EMPTY;
+    }
+
+    public void setRegularType(String regularType) {
+        if (StringUtils.equals(regularType, MobilePopupConstants.Regular_Auto_Height)) {
+            radioButtons.setSelected(autoRadio.getModel(), true);
+        } else {
+            radioButtons.setSelected(customRadio.getModel(), true);
+        }
+        resetSpinnerGroupPane(customRadio.isSelected());
+    }
+
+    public String getRegularType() {
+        if (autoRadio.isSelected()) {
+            return MobilePopupConstants.Regular_Auto_Height;
+        } else {
+            return MobilePopupConstants.Regular_Custom;
+        }
+    }
+
+    public void setWidthSpinnerValue(double width) {
+        widthSpinner.setValue(width);
+    }
+
+    public double getWidthSpinnerValue() {
+        return widthSpinner.getValue();
+    }
+
+    public void setHeightSpinnerValue(double height) {
+        heightSpinner.setValue(height);
+    }
+
+    public double getHeightSpinnerValue() {
+        return heightSpinner.getValue();
+    }
+
+    public void resetPane(String regularType, double width, double height) {
+        this.setRegularType(regularType);
+        this.setWidthSpinnerValue(width);
+        this.setHeightSpinnerValue(height);
+        resetSpinnerGroupPane(StringUtils.equals(regularType, MobilePopupConstants.Regular_Custom));
+    }
+
+}
--- a/designer-base/src/main/java/com/fr/design/hyperlink/popup/MobilePopupUIUtils.java
+++ b/designer-base/src/main/java/com/fr/design/hyperlink/popup/MobilePopupUIUtils.java
@ -0,0 +1,36 @@
+package com.fr.design.hyperlink.popup;
+
+import com.fr.design.gui.ilable.UILabel;
+import com.fr.design.mainframe.widget.UITitleSplitLine;
+
+import javax.swing.*;
+import java.awt.*;
+
+public class MobilePopupUIUtils {
+    static public int Line_Height = 20;
+    static public int SplitLineWidth = 520;
+    static public int Left_Title_width = 80;
+
+    static public JPanel createLeftTileRightContentPanel(String title, JComponent contentPanel) {
+        JPanel jp = new JPanel();
+        jp.setBorder(BorderFactory.createEmptyBorder(0,0,0, 30));
+        jp.setLayout(new BorderLayout(10,0));
+        UILabel titleLabel = new UILabel(title + ":");
+        titleLabel.setPreferredSize(new Dimension(MobilePopupUIUtils.Left_Title_width, Line_Height));
+        titleLabel.setHorizontalAlignment(SwingConstants.RIGHT);
+        jp.add(titleLabel, BorderLayout.WEST);
+        jp.add(contentPanel, BorderLayout.CENTER);
+        return jp;
+    }
+
+    static public JPanel createTitleSplitLineContentPane(String title, JComponent contentPanel) {
+        JPanel jp = new JPanel();
+        jp.setBorder(BorderFactory.createEmptyBorder(5, 0, 5, 0));
+        jp.setLayout(new BorderLayout(0, 10));
+        UITitleSplitLine titleLine = new UITitleSplitLine(title, SplitLineWidth);
+        titleLine.setPreferredSize(new Dimension(SplitLineWidth, Line_Height));
+        jp.add(titleLine, BorderLayout.NORTH);
+        jp.add(contentPanel, BorderLayout.CENTER);
+        return jp;
+    }
+}
--- a/designer-base/src/main/java/com/fr/design/hyperlink/popup/StyleSettingPane.java
+++ b/designer-base/src/main/java/com/fr/design/hyperlink/popup/StyleSettingPane.java
@ -0,0 +1,205 @@
+package com.fr.design.hyperlink.popup;
+
+import com.fr.design.beans.BasicBeanPane;
+import com.fr.design.gui.frpane.UINumberDragPane;
+import com.fr.design.gui.icombobox.LineComboBox;
+import com.fr.design.gui.ilable.UILabel;
+import com.fr.design.gui.ispinner.UISpinner;
+import com.fr.design.i18n.Toolkit;
+import com.fr.design.layout.FRGUIPaneFactory;
+import com.fr.design.layout.VerticalFlowLayout;
+import com.fr.design.style.color.NewColorSelectBox;
+import com.fr.design.utils.gui.GUICoreUtils;
+import com.fr.js.MobilePopupHyperlink;
+import com.fr.stable.StringUtils;
+
+import javax.swing.*;
+import java.awt.*;
+
+public class StyleSettingPane extends BasicBeanPane<MobilePopupHyperlink> {
+    private double maxNumber = 100;
+    private double maxBorderRadius = 24;
+
+    JPanel typePane;
+    UILabel popupTypeLabel;
+
+    JPanel stylePane;
+    LineComboBox borderType;
+    NewColorSelectBox borderColor;
+    UISpinner borderRadiusSpinner;
+
+    NewColorSelectBox bgColor;
+    //透明度
+    UINumberDragPane numberDragPane;
+
+    MobilePopupRegularPane mobileRegularPane;
+    MobilePopupRegularPane padRegularPane;
+
+    public StyleSettingPane() {
+        this.initComponent();
+    }
+
+    private void initComponent() {
+        this.setLayout(new BorderLayout(0, 10));
+        this.setBorder(GUICoreUtils.createTitledBorder(Toolkit.i18nText("FR-Plugin-Designer_Mobile_Popup_Style")));
+
+        typePane = this.createTypePane();
+        this.add(typePane, BorderLayout.NORTH);
+        stylePane = this.createStylePane();
+        this.add(stylePane, BorderLayout.CENTER);
+    }
+
+    private JPanel createTypePane() {
+        JPanel typePane = FRGUIPaneFactory.createBorderLayout_S_Pane();
+        popupTypeLabel = new UILabel("");
+        typePane.add(popupTypeLabel, BorderLayout.CENTER);
+        return MobilePopupUIUtils.createLeftTileRightContentPanel(Toolkit.i18nText("FR-Plugin-Designer_Mobile_Popup_Type"), typePane);
+    }
+
+    private  JPanel createStylePane() {
+        JPanel stylePane = FRGUIPaneFactory.createBorderLayout_S_Pane();
+        stylePane.add(this.createBorderSettingPane(), BorderLayout.NORTH);
+        stylePane.add(this.createBackgroundSettingPane(), BorderLayout.CENTER);
+        stylePane.add(this.createPopupSizePane(), BorderLayout.SOUTH);
+        return stylePane;
+    }
+
+    private JPanel createBorderSettingPane() {
+        JPanel borderPane = new JPanel();
+        VerticalFlowLayout layout = new VerticalFlowLayout(VerticalFlowLayout.TOP, 0, 10);
+        layout.setAlignLeft(true);
+        borderPane.setLayout(layout);
+
+        borderType = new LineComboBox(MobilePopupConstants.BORDER_LINE_STYLE_ARRAY);
+        borderType.setPreferredSize(new Dimension(115, 20));
+        borderPane.add(MobilePopupUIUtils.createLeftTileRightContentPanel(Toolkit.i18nText("FR-Plugin-Designer_Mobile_Popup_Line"), borderType));
+        borderColor = new NewColorSelectBox(100);
+        borderPane.add(MobilePopupUIUtils.createLeftTileRightContentPanel(Toolkit.i18nText("FR-Plugin-Designer_Mobile_Popup_Colors"), borderColor));
+        borderRadiusSpinner = new UISpinner(0, maxBorderRadius, 1, 20);
+        borderRadiusSpinner.setPreferredSize(new Dimension(120, 20));
+        borderPane.add(MobilePopupUIUtils.createLeftTileRightContentPanel(Toolkit.i18nText("FR-Plugin-Designer_Mobile_Popup_Radius"), borderRadiusSpinner));
+        return MobilePopupUIUtils.createTitleSplitLineContentPane(Toolkit.i18nText("FR-Plugin-Designer_Mobile_Popup_Border"), borderPane);
+    }
+
+    private JPanel createBackgroundSettingPane() {
+        JPanel bgPane = new JPanel();
+        VerticalFlowLayout layout = new VerticalFlowLayout(VerticalFlowLayout.TOP, 0, 10);
+        layout.setAlignLeft(true);
+        bgPane.setLayout(layout);
+
+        JPanel colorPane = new JPanel(new FlowLayout(FlowLayout.LEFT, 0,0));
+        bgColor = new NewColorSelectBox(100);
+        colorPane.add(MobilePopupUIUtils.createLeftTileRightContentPanel(Toolkit.i18nText("FR-Plugin-Designer_Mobile_Popup_Colors"), bgColor));
+        bgPane.add(colorPane);
+
+        JPanel transparencyPane = FRGUIPaneFactory.createBorderLayout_S_Pane();
+        this.numberDragPane = new UINumberDragPane(0,100);
+        this.numberDragPane.setPreferredSize(new Dimension(140, 20));
+        transparencyPane.add(numberDragPane, BorderLayout.CENTER);
+        transparencyPane.add(new UILabel(" %"), BorderLayout.EAST);
+        bgPane.add(MobilePopupUIUtils.createLeftTileRightContentPanel(Toolkit.i18nText("FR-Plugin-Designer_Mobile_Popup_Opacity"), transparencyPane));
+        return MobilePopupUIUtils.createTitleSplitLineContentPane(Toolkit.i18nText("FR-Plugin-Designer_Mobile_Popup_Background"), bgPane);
+    }
+
+    private JPanel createPopupSizePane() {
+        JPanel sizePane = new JPanel(new BorderLayout());
+
+        mobileRegularPane = new MobilePopupRegularPane(Toolkit.i18nText("FR-Plugin-Designer_Mobile_Popup_Mobile_Rules"));
+        padRegularPane = new MobilePopupRegularPane(Toolkit.i18nText("FR-Plugin-Designer_Mobile_Popup_Pad_Rules"));
+
+        sizePane.add(mobileRegularPane, BorderLayout.NORTH);
+        sizePane.add(padRegularPane, BorderLayout.CENTER);
+
+        return MobilePopupUIUtils.createTitleSplitLineContentPane(Toolkit.i18nText("FR-Plugin-Designer_Mobile_Popup_Size"), sizePane);
+    }
+
+    @Override
+    protected String title4PopupWindow() {
+        return StringUtils.EMPTY;
+    }
+
+    public void resetPane(String popupTargetType) {
+        if (StringUtils.equals(popupTargetType, MobilePopupConstants.Target_Template)) {
+            popupTypeLabel.setText(Toolkit.i18nText("FR-Plugin-Designer_Mobile_Popup_Center"));
+            mobileRegularPane.resetPane(MobilePopupConstants.Regular_Custom, MobilePopupConstants.Popup_Center_Default_Width, MobilePopupConstants.Popup_Center_Default_Height);
+            padRegularPane.resetPane(MobilePopupConstants.Regular_Custom, MobilePopupConstants.Popup_Center_Default_Width, MobilePopupConstants.Popup_Center_Default_Height);
+        } else {
+            popupTypeLabel.setText(Toolkit.i18nText("FR-Plugin-Designer_Mobile_Popup_Follow"));
+            mobileRegularPane.resetPane(MobilePopupConstants.Regular_Custom, MobilePopupConstants.Popup_Follow_Default_Width, MobilePopupConstants.Popup_Follow_Default_Height);
+            padRegularPane.resetPane(MobilePopupConstants.Regular_Custom, MobilePopupConstants.Popup_Follow_Default_Width, MobilePopupConstants.Popup_Follow_Default_Height);
+        }
+
+    }
+
+    @Override
+    public void populateBean(MobilePopupHyperlink link) {
+        this.populateTypeBean(link);
+        this.populateBorderSettingBean(link);
+        this.populateBackgroundSettingBean(link);
+        this.populatePopupSizeBean(link);
+    }
+
+    @Override
+    public MobilePopupHyperlink updateBean() {
+        return null;
+    }
+
+    @Override
+    public void updateBean(MobilePopupHyperlink link) {
+        this.updateBorderSettingBean(link);
+        this.updateBackgroundSettingBean(link);
+        this.updatePopupSizeBean(link);
+
+    }
+
+    private void populateTypeBean(MobilePopupHyperlink link) {
+        if (StringUtils.equals(link.getPopupTarget(), MobilePopupConstants.Target_Text)) {
+            popupTypeLabel.setText(Toolkit.i18nText("FR-Plugin-Designer_Mobile_Popup_Follow"));
+        } else {
+            popupTypeLabel.setText(Toolkit.i18nText("FR-Plugin-Designer_Mobile_Popup_Center"));
+        }
+    }
+
+    private void populateBorderSettingBean(MobilePopupHyperlink link) {
+        borderType.setSelectedLineStyle(link.getBorderType());
+        borderColor.setSelectObject(link.getBorderColor());
+        borderRadiusSpinner.setValue(link.getBorderRadius());
+
+    }
+
+    private void updateBorderSettingBean(MobilePopupHyperlink link) {
+        link.setBorderType(borderType.getSelectedLineStyle());
+        link.setBorderColor(borderColor.getSelectObject());
+        link.setBorderRadius(borderRadiusSpinner.getValue());
+
+    }
+
+    private void populateBackgroundSettingBean(MobilePopupHyperlink link) {
+        bgColor.setSelectObject(link.getBgColor());
+        numberDragPane.populateBean(link.getBgOpacity() * maxNumber);
+    }
+
+    private void updateBackgroundSettingBean(MobilePopupHyperlink link) {
+        link.setBgColor(bgColor.getSelectObject());
+        link.setBgOpacity((float)(numberDragPane.updateBean() / maxNumber));
+    }
+
+    private void populatePopupSizeBean(MobilePopupHyperlink link) {
+        mobileRegularPane.setRegularType(link.getMobileRegularType());
+        mobileRegularPane.setWidthSpinnerValue(link.getMobileWidth());
+        mobileRegularPane.setHeightSpinnerValue(link.getMobileHeight());
+        padRegularPane.setRegularType(link.getPadRegularType());
+        padRegularPane.setWidthSpinnerValue(link.getPadWidth());
+        padRegularPane.setHeightSpinnerValue(link.getPadHeight());
+
+    }
+
+    private void updatePopupSizeBean(MobilePopupHyperlink link) {
+        link.setMobileRegularType(mobileRegularPane.getRegularType());
+        link.setMobileWidth(mobileRegularPane.getWidthSpinnerValue());
+        link.setMobileHeight(mobileRegularPane.getHeightSpinnerValue());
+        link.setPadRegularType(padRegularPane.getRegularType());
+        link.setPadWidth(padRegularPane.getWidthSpinnerValue());
+        link.setPadHeight(padRegularPane.getHeightSpinnerValue());
+    }
+}
--- a/designer-base/src/main/java/com/fr/design/hyperlink/popup/WheelScrollLayerUI.java
+++ b/designer-base/src/main/java/com/fr/design/hyperlink/popup/WheelScrollLayerUI.java
@ -0,0 +1,42 @@
+package com.fr.design.hyperlink.popup;
+
+import com.fr.design.gui.icontainer.UIScrollPane;
+
+import javax.swing.*;
+import javax.swing.plaf.LayerUI;
+import java.awt.*;
+import java.awt.event.MouseWheelEvent;
+
+class WheelScrollLayerUI extends LayerUI<UIScrollPane> {
+    @Override
+    public void installUI(JComponent c) {
+        super.installUI(c);
+        if (c instanceof JLayer) {
+            ((JLayer) c).setLayerEventMask(AWTEvent.MOUSE_WHEEL_EVENT_MASK);
+        }
+    }
+    @Override
+    public void uninstallUI(JComponent c) {
+        if (c instanceof JLayer) {
+            ((JLayer) c).setLayerEventMask(0);
+        }
+        super.uninstallUI(c);
+    }
+    @Override
+    protected void processMouseWheelEvent(MouseWheelEvent e, JLayer<? extends UIScrollPane> l) {
+        Component c = e.getComponent();
+        int dir = e.getWheelRotation();
+        JScrollPane main = l.getView();
+        if (c instanceof JScrollPane && !c.equals(main)) {
+            JScrollPane child = (JScrollPane) c;
+            BoundedRangeModel m = child.getVerticalScrollBar().getModel();
+            int extent  = m.getExtent();
+            int minimum = m.getMinimum();
+            int maximum = m.getMaximum();
+            int value   = m.getValue();
+            if (value + extent >= maximum && dir > 0 || value <= minimum && dir < 0) {
+                main.dispatchEvent(SwingUtilities.convertMouseEvent(c, e, main));
+            }
+        }
+    }
+}
--- a/designer-base/src/main/java/com/fr/design/javascript/JavaScriptActionPane.java
+++ b/designer-base/src/main/java/com/fr/design/javascript/JavaScriptActionPane.java
@ -7,6 +7,7 @@ import com.fr.design.dialog.DialogActionAdapter;
 import com.fr.design.fun.JavaScriptActionProvider;
 import com.fr.design.gui.frpane.UIComboBoxPane;
 import com.fr.design.gui.ibutton.UIButton;
+import com.fr.design.hyperlink.popup.MobilePopupPane;
 import com.fr.design.mainframe.DesignerContext;
 import com.fr.design.mainframe.JTemplate;
 import com.fr.design.write.submit.DBManipulationPane;
@ -44,6 +45,7 @@ public abstract class JavaScriptActionPane extends UIComboBoxPane<JavaScript> {
        contentDBManiPane.add(createDBManipulationPane());
        paneList.add(new Commit2DBJavaScriptPane(this, contentDBManiPane));
        paneList.add(initEmaiPane());
+        paneList.add(new MobilePopupPane());
        Set<JavaScriptActionProvider> javaScriptActionProviders = ExtraDesignClassManager.getInstance().getArray(JavaScriptActionProvider.XML_TAG);
        if (javaScriptActionProviders != null) {
            for (JavaScriptActionProvider jsp : javaScriptActionProviders) {
--- a/designer-base/src/main/java/com/fr/design/mainframe/mobile/provider/combo/SimpleComboCheckBoxStyleProvider.java
+++ b/designer-base/src/main/java/com/fr/design/mainframe/mobile/provider/combo/SimpleComboCheckBoxStyleProvider.java
@ -0,0 +1,35 @@
+package com.fr.design.mainframe.mobile.provider.combo;
+
+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.combo.SimpleComboPane;
+import com.fr.form.ui.mobile.MobileStyle;
+import com.fr.form.ui.mobile.combo.SimpleComboStyle;
+
+public class SimpleComboCheckBoxStyleProvider extends AbstractMobileWidgetStyleProvider {
+    @Override
+    public Class<? extends MobileStyle> classForMobileStyle() {
+        return SimpleComboStyle.class;
+    }
+
+    @Override
+    public Class<? extends MobileStyleCustomDefinePane> classForWidgetAppearance() {
+        return SimpleComboPane.class;
+    }
+
+    @Override
+    public String xTypeForWidget() {
+        return "tagcombocheckbox";
+    }
+
+    @Override
+    public String displayName() {
+        return Toolkit.i18nText("Fine-Plugin-SimpleCombo_SimpleComboStyle");
+    }
+
+    @Override
+    public int currentAPILevel() {
+        return CURRENT_LEVEL;
+    }
+}
--- a/designer-base/src/main/java/com/fr/design/mainframe/mobile/provider/combo/SimpleComboStyleProvider.java
+++ b/designer-base/src/main/java/com/fr/design/mainframe/mobile/provider/combo/SimpleComboStyleProvider.java
@ -0,0 +1,35 @@
+package com.fr.design.mainframe.mobile.provider.combo;
+
+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.combo.SimpleComboPane;
+import com.fr.form.ui.mobile.MobileStyle;
+import com.fr.form.ui.mobile.combo.SimpleComboStyle;
+
+public class SimpleComboStyleProvider extends AbstractMobileWidgetStyleProvider{
+    @Override
+    public Class<? extends MobileStyle> classForMobileStyle() {
+        return SimpleComboStyle.class;
+    }
+
+    @Override
+    public Class<? extends MobileStyleCustomDefinePane> classForWidgetAppearance() {
+        return SimpleComboPane.class;
+    }
+
+    @Override
+    public String xTypeForWidget() {
+        return "combo";
+    }
+
+    @Override
+    public String displayName() {
+        return Toolkit.i18nText("Fine-Plugin-SimpleCombo_SimpleComboStyle");
+    }
+
+    @Override
+    public int currentAPILevel() {
+        return CURRENT_LEVEL;
+    }
+}
--- a/designer-base/src/main/java/com/fr/design/mainframe/mobile/provider/date/NavigationStyleProvider.java
+++ b/designer-base/src/main/java/com/fr/design/mainframe/mobile/provider/date/NavigationStyleProvider.java
@ -0,0 +1,35 @@
+package com.fr.design.mainframe.mobile.provider.date;
+
+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.date.NavigationCustomDefinePane;
+import com.fr.form.ui.mobile.MobileStyle;
+import com.fr.form.ui.mobile.date.NavigationMobileStyle;
+
+public class NavigationStyleProvider extends AbstractMobileWidgetStyleProvider {
+    @Override
+    public Class<? extends MobileStyle> classForMobileStyle() {
+        return NavigationMobileStyle.class;
+    }
+
+    @Override
+    public Class<? extends MobileStyleCustomDefinePane> classForWidgetAppearance() {
+        return NavigationCustomDefinePane.class;
+    }
+
+    @Override
+    public String xTypeForWidget() {
+        return "datetime";
+    }
+
+    @Override
+    public String displayName() {
+        return Toolkit.i18nText("Fine-Plugin-Date_Navigation_Calendar");
+    }
+
+    @Override
+    public int currentAPILevel() {
+        return CURRENT_LEVEL;
+    }
+}
--- a/designer-base/src/main/java/com/fr/design/mainframe/mobile/provider/date/SimpleDateStyleProvider.java
+++ b/designer-base/src/main/java/com/fr/design/mainframe/mobile/provider/date/SimpleDateStyleProvider.java
@ -0,0 +1,35 @@
+package com.fr.design.mainframe.mobile.provider.date;
+
+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.date.SimpleDateCustomDefinePane;
+import com.fr.form.ui.mobile.MobileStyle;
+import com.fr.form.ui.mobile.date.SimpleDateMobileStyle;
+
+public class SimpleDateStyleProvider extends AbstractMobileWidgetStyleProvider {
+    @Override
+    public Class<? extends MobileStyle> classForMobileStyle() {
+        return SimpleDateMobileStyle.class;
+    }
+
+    @Override
+    public Class<? extends MobileStyleCustomDefinePane> classForWidgetAppearance() {
+        return SimpleDateCustomDefinePane.class;
+    }
+
+    @Override
+    public String xTypeForWidget() {
+        return "datetime";
+    }
+
+    @Override
+    public String displayName() {
+        return Toolkit.i18nText("Fine-Plugin-SimpleDate_Style");
+    }
+
+    @Override
+    public int currentAPILevel() {
+        return CURRENT_LEVEL;
+    }
+}
--- a/designer-base/src/main/java/com/fr/design/mainframe/mobile/provider/date/SimpleStyleProvider.java
+++ b/designer-base/src/main/java/com/fr/design/mainframe/mobile/provider/date/SimpleStyleProvider.java
@ -0,0 +1,35 @@
+package com.fr.design.mainframe.mobile.provider.date;
+
+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.date.SimpleCustomDefinePane;
+import com.fr.form.ui.mobile.MobileStyle;
+import com.fr.form.ui.mobile.date.SimpleMobileStyle;
+
+public class SimpleStyleProvider extends AbstractMobileWidgetStyleProvider {
+    @Override
+    public Class<? extends MobileStyle> classForMobileStyle() {
+        return SimpleMobileStyle.class;
+    }
+
+    @Override
+    public Class<? extends MobileStyleCustomDefinePane> classForWidgetAppearance() {
+        return SimpleCustomDefinePane.class;
+    }
+
+    @Override
+    public String xTypeForWidget() {
+        return "datetime";
+    }
+
+    @Override
+    public String displayName() {
+        return Toolkit.i18nText("Fine-Plugin-Date_Simple_Calendar");
+    }
+
+    @Override
+    public int currentAPILevel() {
+        return CURRENT_LEVEL;
+    }
+}
--- a/designer-base/src/main/java/com/fr/design/mainframe/mobile/provider/radiogroup/CapsuleRadioGroupStyleProvider.java
+++ b/designer-base/src/main/java/com/fr/design/mainframe/mobile/provider/radiogroup/CapsuleRadioGroupStyleProvider.java
@ -0,0 +1,35 @@
+package com.fr.design.mainframe.mobile.provider.radiogroup;
+
+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;
+
+public class CapsuleRadioGroupStyleProvider 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 "radiogroup";
+    }
+
+    @Override
+    public String displayName() {
+        return Toolkit.i18nText("Fine-Plugin-RadioGroup_Capsule_Button");
+    }
+
+    @Override
+    public int currentAPILevel() {
+        return CURRENT_LEVEL;
+    }
+}
--- a/designer-base/src/main/java/com/fr/design/mainframe/mobile/provider/radiogroup/ImageRadioGroupStyleProvider.java
+++ b/designer-base/src/main/java/com/fr/design/mainframe/mobile/provider/radiogroup/ImageRadioGroupStyleProvider.java
@ -0,0 +1,35 @@
+package com.fr.design.mainframe.mobile.provider.radiogroup;
+
+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;
+
+public class ImageRadioGroupStyleProvider 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 "radiogroup";
+    }
+
+    @Override
+    public String displayName() {
+        return Toolkit.i18nText("Fine-Plugin-RadioGroup_Graphic_Button");
+    }
+
+    @Override
+    public int currentAPILevel() {
+        return CURRENT_LEVEL;
+    }
+}
--- a/designer-base/src/main/java/com/fr/design/mainframe/mobile/provider/radiogroup/UnitedRadioGroupStyleProvider.java
+++ b/designer-base/src/main/java/com/fr/design/mainframe/mobile/provider/radiogroup/UnitedRadioGroupStyleProvider.java
@ -0,0 +1,35 @@
+package com.fr.design.mainframe.mobile.provider.radiogroup;
+
+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;
+
+public class UnitedRadioGroupStyleProvider 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 "radiogroup";
+    }
+
+    @Override
+    public String displayName() {
+        return Toolkit.i18nText("Fine-Plugin-RadioGroup_Linkage_Button");
+    }
+
+    @Override
+    public int currentAPILevel() {
+        return CURRENT_LEVEL;
+    }
+}
--- a/designer-base/src/main/java/com/fr/design/mainframe/mobile/provider/topparam/MobileTopParamStyleProvider.java
+++ b/designer-base/src/main/java/com/fr/design/mainframe/mobile/provider/topparam/MobileTopParamStyleProvider.java
@ -0,0 +1,25 @@
+package com.fr.design.mainframe.mobile.provider.topparam;
+
+import com.fr.design.beans.BasicBeanPane;
+import com.fr.design.fun.impl.AbstractMobileParamUIProvider;
+import com.fr.design.i18n.Toolkit;
+import com.fr.design.mainframe.mobile.ui.topparam.MobileTopParamPane;
+import com.fr.form.ui.mobile.MobileParamStyle;
+import com.fr.form.ui.mobile.impl.MobileTopParamStyle;
+
+public class MobileTopParamStyleProvider extends AbstractMobileParamUIProvider {
+    @Override
+    public Class<? extends MobileParamStyle> classForMobileParamStyle() {
+        return MobileTopParamStyle.class;
+    }
+
+    @Override
+    public Class<? extends BasicBeanPane<? extends MobileParamStyle>> classForMobileParamAppearance() {
+        return MobileTopParamPane.class;
+    }
+
+    @Override
+    public String displayName() {
+        return Toolkit.i18nText("Fine-Plugin-TopParam_Name");
+    }
+}
--- a/designer-base/src/main/java/com/fr/design/mainframe/mobile/ui/MobileParamSettingPane.java
+++ b/designer-base/src/main/java/com/fr/design/mainframe/mobile/ui/MobileParamSettingPane.java
@ -7,7 +7,7 @@ import com.fr.design.fun.MobileParamUIProvider;
 import com.fr.design.layout.FRGUIPaneFactory;
 import com.fr.design.mainframe.mobile.provider.DefaultMobileParamUIProvider;
 import com.fr.design.mainframe.mobile.provider.EmptyMobileParamUIProvider;
-import com.fr.form.ui.container.WParameterLayout;
+import com.fr.design.mainframe.mobile.utils.MobileStyleProviderManager;
 import com.fr.form.ui.mobile.MobileParamStyle;
 import com.fr.general.ComparatorUtils;
 import com.fr.report.ExtraReportClassManager;
@ -101,7 +101,7 @@ public class MobileParamSettingPane extends BasicPane {
            MobileParamUIProvider[] mobileParamUIProviders = getMobileParamUIProviders();
            for (int i = 0; i < mobileParamUIProviders.length; i++) {
                MobileParamUIProvider provider = mobileParamUIProviders[i];
-                if (ComparatorUtils.equals(mobileParamStyle.disPlayName(), provider.displayName())) {
+                if (ComparatorUtils.equals(mobileParamStyle.displayName(), provider.displayName())) {
                    String displayName = provider.displayName();
                    paramStyleList.setSelectedIndex(i);
                    // 如果是兼容空类型 无须填充面板
@ -136,9 +136,11 @@ public class MobileParamSettingPane extends BasicPane {

    private MobileParamUIProvider[] getMobileParamUIProviders() {
        Set<MobileParamUIProvider>  paramUIProviders = ExtraDesignClassManager.getInstance().getArray(MobileParamUIProvider.XML_TAG);
+        Set<MobileParamUIProvider> otherParamUIProviders = MobileStyleProviderManager.getArray(MobileParamUIProvider.XML_TAG);
        List<MobileParamUIProvider> result = new ArrayList<>();
        result.add(new DefaultMobileParamUIProvider());
        result.addAll(paramUIProviders);
+        result.addAll(otherParamUIProviders);
        Set<String> nameSets = paramUIProviders.stream().map(MobileParamUIProvider::displayName).collect(Collectors.toSet());
        // 兼容老接口
        Set<MobileParamStyleProvider> paramStyleProviders = ExtraReportClassManager.getInstance().getArray(MobileParamStyleProvider.MARK_STRING);
--- a/designer-base/src/main/java/com/fr/design/mainframe/mobile/ui/combo/SimpleComboPane.java
+++ b/designer-base/src/main/java/com/fr/design/mainframe/mobile/ui/combo/SimpleComboPane.java
@ -0,0 +1,304 @@
+package com.fr.design.mainframe.mobile.ui.combo;
+
+import com.fr.design.dialog.AttrScrollPane;
+import com.fr.design.dialog.BasicScrollPane;
+import com.fr.design.gui.ibutton.UIRadioButton;
+import com.fr.design.gui.icombobox.LineComboBox;
+import com.fr.design.gui.icombobox.UIComboBox;
+import com.fr.design.gui.ilable.UILabel;
+import com.fr.design.gui.ispinner.UISpinner;
+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.design.mainframe.mobile.ui.MobileStyleCustomDefinePane;
+import com.fr.design.mainframe.mobile.utils.DesignerUtils;
+import com.fr.design.mainframe.mobile.utils.FontConfigPane;
+import com.fr.design.mainframe.mobile.utils.IconConfigPane;
+import com.fr.design.style.color.NewColorSelectBox;
+import com.fr.form.ui.Widget;
+import com.fr.form.ui.mobile.MobileStyle;
+import com.fr.form.ui.mobile.combo.SimpleComboStyle;
+import com.fr.stable.Constants;
+
+import javax.swing.*;
+import javax.swing.event.ChangeEvent;
+import javax.swing.event.ChangeListener;
+import java.awt.*;
+import java.awt.event.ActionEvent;
+import java.awt.event.ActionListener;
+import java.awt.event.ItemEvent;
+import java.awt.event.ItemListener;
+
+public class SimpleComboPane extends MobileStyleCustomDefinePane {
+
+    private JPanel scrollPanel;
+    private UIComboBox custom;
+    private JPanel centerPane;
+    private FontConfigPane labelFontPane;
+    private FontConfigPane valueFontPane;
+    private IconConfigPane expandIconPane;
+    private IconConfigPane unexpandIconPane;
+    private NewColorSelectBox background;
+    private LineComboBox borderType;
+    private NewColorSelectBox borderColor;
+    private UISpinner borderRadius;
+    private UIRadioButton fillButton;
+    private UIRadioButton customButton;
+    private UISpinner widthSpinner;
+
+    private UIRadioButton floatFillButton;
+    private UIRadioButton floatSameWidthButton;
+
+    public SimpleComboPane(Widget widget) {
+        super(widget);
+    }
+
+    @Override
+    protected JPanel createPreviewPane() {
+        return null;
+    }
+
+    @Override
+    protected void init() {
+        this.setLayout(FRGUIPaneFactory.createBorderLayout());
+        this.addScrollPane();
+        this.addStyleSelectPane();
+        this.addConfigPane();
+    }
+
+    private void addScrollPane() {
+        scrollPanel = FRGUIPaneFactory.createBorderLayout_S_Pane();
+        BasicScrollPane basicScrollPane = new AttrScrollPane() {
+            @Override
+            protected JPanel createContentPane() {
+                return scrollPanel;
+            }
+        };
+        this.add(basicScrollPane);
+    }
+
+    private void addStyleSelectPane() {
+        UILabel buttonStyleLabel = DesignerUtils.createConfigLabel(Toolkit.i18nText("Fine-Plugin-SimpleCombo_Control_Style"));
+        custom = new UIComboBox(new String[]{Toolkit.i18nText("Fine-Plugin-SimpleCombo_Style_Default"), Toolkit.i18nText("Fine-Plugin-SimpleCombo_Style_Custom")});
+        custom.setPreferredSize(new Dimension(DesignerUtils.NORMAL_COMBO_WIDTH, 20));
+        custom.addItemListener(new ItemListener() {
+            @Override
+            public void itemStateChanged(ItemEvent e) {
+                boolean isCustom = custom.getSelectedIndex() == 1;
+                centerPane.setVisible(isCustom);
+
+            }
+        });
+        JPanel panel = new JPanel();
+        panel.setLayout(new FlowLayout(FlowLayout.LEFT, 0, 0));
+        JPanel stylePanel = DesignerUtils.createLeftRightComponentsPane(buttonStyleLabel, custom);
+        panel.add(stylePanel);
+        scrollPanel.add(panel, BorderLayout.NORTH);
+    }
+
+    private void addConfigPane() {
+        centerPane = createCenterPane();
+        centerPane.setVisible(false);
+        addLabelNamePane();
+        addValuePane();
+        addIconPane();
+        addWidgetSettingPane();
+        scrollPanel.add(centerPane, BorderLayout.CENTER);
+    }
+
+    private JPanel createCenterPane() {
+        return FRGUIPaneFactory.createVerticalFlowLayout_Pane(true, FlowLayout.LEADING, 0, 10);
+    }
+
+    private void addLabelNamePane() {
+        centerPane.add(DesignerUtils.createTitleSplitLine(Toolkit.i18nText("Fine-Plugin-SimpleCombo_Label_Name")));
+        labelFontPane = new FontConfigPane();
+        JPanel fontPanel = createFontPane(labelFontPane);
+        centerPane.add(fontPanel);
+    }
+
+    private void addValuePane() {
+        centerPane.add(DesignerUtils.createTitleSplitLine(Toolkit.i18nText("Fine-Plugin-SimpleCombo_Control_Value")));
+        valueFontPane = new FontConfigPane();
+        JPanel fontPanel = createFontPane(valueFontPane);
+        valueFontPane.setFontColor(new Color(153, 153, 153));
+        centerPane.add(fontPanel);
+    }
+
+    private JPanel createFontPane(FontConfigPane fontConfigPane) {
+        UILabel fontLabel = DesignerUtils.createConfigLabel(Toolkit.i18nText("Fine-Plugin-SimpleCombo_Character"));
+        JPanel fontPanel = DesignerUtils.createLeftRightComponentsPane(fontLabel, fontConfigPane);
+        return fontPanel;
+    }
+
+    private void addIconPane() {
+        centerPane.add(DesignerUtils.createTitleSplitLine(Toolkit.i18nText("Fine-Plugin-SimpleCombo_Arrow")));
+        UILabel tipLabel = new UILabel();
+        tipLabel.setFont(new Font(tipLabel.getName(), Font.PLAIN, 10));
+        tipLabel.setSize(470, 40);
+        tipLabel.setText(Toolkit.i18nText("Fine-Plugin-SimpleCombo_Tips"));
+        tipLabel.setForeground(Color.decode("#9B9B9B"));
+        centerPane.add(tipLabel);
+
+
+        UILabel expandLabel = DesignerUtils.createConfigLabel(Toolkit.i18nText("Fine-Plugin-SimpleCombo_Expand_Icon"));
+        UILabel unexpandLabel = DesignerUtils.createConfigLabel(Toolkit.i18nText("Fine-Plugin-SimpleCombo_Collapse_Icon"));
+
+        expandIconPane = new IconConfigPane();
+        unexpandIconPane = new IconConfigPane();
+
+        JPanel expandPane = DesignerUtils.createLeftRightComponentsPane(expandLabel, expandIconPane);
+        centerPane.add(expandPane);
+
+        JPanel unexpandPane = DesignerUtils.createLeftRightComponentsPane(unexpandLabel, unexpandIconPane);
+        centerPane.add(unexpandPane);
+    }
+
+    private void addWidgetSettingPane() {
+        centerPane.add(DesignerUtils.createTitleSplitLine(Toolkit.i18nText("Fine-Plugin-SimpleCombo_Control_Region")));
+        background = DesignerUtils.createNormalColorSelectBox(new ChangeListener() {
+            @Override
+            public void stateChanged(ChangeEvent e) {
+            }
+        });
+        borderType = new LineComboBox(DesignerUtils.BORDER_LINE_STYLE_ARRAY);
+        borderType.setSelectedLineStyle(Constants.LINE_THIN);
+        borderType.setPreferredSize(new Dimension(DesignerUtils.NORMAL_COMBO_WIDTH, 20));
+        borderColor = DesignerUtils.createNormalColorSelectBox(new ChangeListener() {
+            @Override
+            public void stateChanged(ChangeEvent e) {
+            }
+        });
+        borderRadius = new UISpinner(0, Integer.MAX_VALUE, 1, 2);
+        borderRadius.setPreferredSize(new Dimension(DesignerUtils.NORMAL_COMBO_WIDTH, 20));
+
+        JComponent[] controlComponents = new JComponent[]{background, borderType, borderColor, borderRadius};
+        String[] comboBoxNames = new String[]{
+                Toolkit.i18nText("Fine-Plugin-SimpleCombo_Control_Background"),
+                Toolkit.i18nText("Fine-Plugin-SimpleCombo_Control_Border"),
+                Toolkit.i18nText("Fine-Plugin-SimpleCombo_Border_Color"),
+                Toolkit.i18nText("Fine-Plugin-SimpleCombo_Radius"),
+        };
+
+        Component[][] components = new Component[4][];
+
+        for (int i = 0; i < 4; i++) {
+            UILabel label = DesignerUtils.createConfigLabel(comboBoxNames[i]);
+            components[i] = new Component[]{label, controlComponents[i]};
+        }
+
+        double p = TableLayout.PREFERRED;
+        double[] rowSize = {p, p, p, p, };
+        double[] columnSize = {p, p};
+        JPanel controlPanel = TableLayoutHelper.createCommonTableLayoutPane(components, rowSize, columnSize, 10);
+        centerPane.add(controlPanel);
+
+        fillButton = new UIRadioButton(Toolkit.i18nText("Fine-Plugin-SimpleCombo_Horizontal_Fill"));
+        fillButton.setSelected(true);
+        customButton = new UIRadioButton(Toolkit.i18nText("Fine-Plugin-SimpleCombo_Custom_Width"));
+        ActionListener listener = new ActionListener() {
+            @Override
+            public void actionPerformed(ActionEvent e) {
+                widthSpinner.setVisible(customButton.isSelected());
+            }
+        };
+        fillButton.addActionListener(listener);
+        customButton.addActionListener(listener);
+        ButtonGroup buttonGroup = new ButtonGroup();
+        buttonGroup.add(fillButton);
+        buttonGroup.add(customButton);
+        widthSpinner = new UISpinner(1, Integer.MAX_VALUE, 1, 200);
+        widthSpinner.setPreferredSize(new Dimension(78, 20));
+        widthSpinner.setVisible(false);
+        UILabel widthLabel = DesignerUtils.createConfigLabel(Toolkit.i18nText("Fine-Plugin-SimpleCombo_Width"));
+        JPanel buttonsPane = createButtonPane();
+        buttonsPane.add(fillButton);
+        buttonsPane.add(customButton);
+        JPanel widthSetting = DesignerUtils.createLeftRightComponentsPane(widthLabel, buttonsPane, widthSpinner);
+        centerPane.add(widthSetting);
+
+        centerPane.add(DesignerUtils.createTitleSplitLine(Toolkit.i18nText("Fine-Plugin-SimpleCombo_Floating_Layer")));
+        UILabel floatLabel = DesignerUtils.createConfigLabel(Toolkit.i18nText("Fine-Plugin-SimpleCombo_Width"));
+        floatFillButton = new UIRadioButton(Toolkit.i18nText("Fine-Plugin-SimpleCombo_Horizontal_Fill"));
+        floatFillButton.setSelected(true);
+        floatSameWidthButton = new UIRadioButton(Toolkit.i18nText("Fine-Plugin-SimpleCombo_Follow_Control"));
+        ButtonGroup floatButtonGroup = new ButtonGroup();
+        floatButtonGroup.add(floatFillButton);
+        floatButtonGroup.add(floatSameWidthButton);
+        JPanel floatButtonPane = createButtonPane();
+        floatButtonPane.add(floatFillButton);
+        floatButtonPane.add(floatSameWidthButton);
+        JPanel floatSetting = DesignerUtils.createLeftRightComponentsPane(floatLabel, floatFillButton, floatSameWidthButton);
+        centerPane.add(floatSetting);
+    }
+
+    private JPanel createButtonPane() {
+        JPanel buttonPane = new JPanel();
+        buttonPane.setLayout(new GridLayout(0, 2, 14, 0));
+        buttonPane.setPreferredSize(new Dimension(220, 20));
+        return buttonPane;
+    }
+
+    @Override
+    public void populateBean(MobileStyle ob) {
+        SimpleComboStyle mobileStyle = (SimpleComboStyle) ob;
+        custom.setSelectedIndex(mobileStyle.isCustom() ? 1 : 0);
+        expandIconPane.populate(mobileStyle.getExpandIcon());
+        unexpandIconPane.populate(mobileStyle.getUnexpandIcon());
+        if (mobileStyle.getLabelFont() != null) {
+            labelFontPane.populate(mobileStyle.getLabelFont());
+        }
+        if (mobileStyle.getValueFont() != null) {
+            valueFontPane.populate(mobileStyle.getValueFont());
+        }
+        if (mobileStyle.getBackgroundColor() != null) {
+            background.setSelectObject(mobileStyle.getBackgroundColor());
+        }
+        if (mobileStyle.getBorderColor() != null) {
+            borderColor.setSelectObject(mobileStyle.getBorderColor());
+        }
+        borderType.setSelectedLineStyle(mobileStyle.getBorderType());
+        borderRadius.setValue(mobileStyle.getBorderRadius());
+        if (mobileStyle.isCustomWidth()) {
+            fillButton.setSelected(false);
+            customButton.setSelected(true);
+            widthSpinner.setVisible(true);
+            widthSpinner.setValue(mobileStyle.getWidth());
+        } else {
+            fillButton.setSelected(true);
+            customButton.setSelected(false);
+            widthSpinner.setVisible(false);
+        }
+        if (mobileStyle.isFloatWidthFollow()) {
+            floatFillButton.setSelected(false);
+            floatSameWidthButton.setSelected(true);
+        } else {
+            floatFillButton.setSelected(true);
+            floatSameWidthButton.setSelected(false);
+        }
+    }
+
+    @Override
+    public MobileStyle updateBean() {
+        SimpleComboStyle mobileStyle = (SimpleComboStyle) this.widget.getMobileStyle();
+        mobileStyle.setCustom(custom.getSelectedIndex() == 1);
+        mobileStyle.setExpandIcon(expandIconPane.update());
+        mobileStyle.setUnexpandIcon(unexpandIconPane.update());
+        mobileStyle.setLabelFont(labelFontPane.update());
+        mobileStyle.setValueFont(valueFontPane.update());
+        mobileStyle.setBackgroundColor(background.getSelectObject());
+        mobileStyle.setBorderColor(borderColor.getSelectObject());
+        mobileStyle.setBorderType(borderType.getSelectedLineStyle());
+        mobileStyle.setBorderRadius(borderRadius.getValue());
+        mobileStyle.setCustomWidth(customButton.isSelected());
+        mobileStyle.setWidth(widthSpinner.getValue());
+        mobileStyle.setFloatWidthFollow(floatSameWidthButton.isSelected());
+        return mobileStyle;
+    }
+
+    @Override
+    protected String title4PopupWindow() {
+        return null;
+    }
+}
--- a/designer-base/src/main/java/com/fr/design/mainframe/mobile/ui/date/NavigationCustomDefinePane.java
+++ b/designer-base/src/main/java/com/fr/design/mainframe/mobile/ui/date/NavigationCustomDefinePane.java
@ -0,0 +1,272 @@
+package com.fr.design.mainframe.mobile.ui.date;
+
+import com.fr.design.dialog.AttrScrollPane;
+import com.fr.design.dialog.BasicScrollPane;
+import com.fr.design.event.UIObserverListener;
+import com.fr.design.gui.ibutton.UIColorButton;
+import com.fr.design.gui.icheckbox.UICheckBox;
+import com.fr.design.gui.icombobox.UIComboBox;
+import com.fr.design.gui.ilable.UILabel;
+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.design.mainframe.mobile.ui.MobileStyleCustomDefinePane;
+import com.fr.design.mainframe.mobile.utils.DesignerUtils;
+import com.fr.design.style.color.NewColorSelectBox;
+import com.fr.form.ui.Widget;
+import com.fr.form.ui.mobile.MobileStyle;
+import com.fr.form.ui.mobile.date.NavigationMobileStyle;
+
+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;
+
+public class NavigationCustomDefinePane extends MobileStyleCustomDefinePane {
+
+    private JPanel scrollPanel;
+    private UIComboBox custom;
+    private JPanel centerPane;
+
+    private UIComboBox expand;
+    private UIComboBox dateFontSize;
+    private NewColorSelectBox buttonColorSelectBox;
+    private NewColorSelectBox titleSplitLineColorSelectBox;
+    private UICheckBox showTitleEditor;
+    private NewColorSelectBox arrowColorSelectBox;
+    private UIColorButton mainFontColor;
+    private UIColorButton specialFontColor;
+
+    private Color titleSplitLineDisableColor = new Color(234, 234, 234);
+    private Color titleSplitLineColor;
+
+    public NavigationCustomDefinePane(Widget widget) {
+        super(widget);
+    }
+
+    @Override
+    protected JPanel createPreviewPane() {
+        return null;
+    }
+
+    @Override
+    protected void init() {
+        this.setLayout(FRGUIPaneFactory.createBorderLayout());
+        this.addScrollPane();
+        this.addStyleSelectPane();
+        this.addConfigPane();
+    }
+
+    private void addScrollPane() {
+        scrollPanel = FRGUIPaneFactory.createBorderLayout_S_Pane();
+        BasicScrollPane basicScrollPane = new AttrScrollPane() {
+            @Override
+            protected JPanel createContentPane() {
+                return scrollPanel;
+            }
+        };
+        this.add(basicScrollPane);
+    }
+
+    private void addStyleSelectPane() {
+        JPanel stylePanel = new JPanel();
+        stylePanel.setLayout(new FlowLayout(FlowLayout.LEFT, 5, 0));
+        UILabel buttonStyleLabel = DesignerUtils.createConfigLabel(Toolkit.i18nText("Fine-Plugin-Date_Style"));
+        custom = new UIComboBox(new String[]{Toolkit.i18nText("Fine-Plugin-Date_Style_Default"), Toolkit.i18nText("Fine-Plugin-Date_Style_Custom")});
+        custom.setPreferredSize(new Dimension(DesignerUtils.NORMAL_COMBO_WIDTH, 20));
+        custom.addItemListener(new ItemListener() {
+            @Override
+            public void itemStateChanged(ItemEvent e) {
+                boolean isCustom = custom.getSelectedIndex() == 1;
+                centerPane.setVisible(isCustom);
+
+            }
+        });
+        stylePanel.add(buttonStyleLabel);
+        stylePanel.add(custom);
+        scrollPanel.add(stylePanel, BorderLayout.NORTH);
+    }
+
+    private void addConfigPane() {
+        centerPane = createCenterPane();
+        centerPane.setVisible(false);
+        addExpandPane();
+        addHeaderLinePane();
+        addButtonColorPane();
+        addFontColorPane();
+        addArrowPane();
+        scrollPanel.add(centerPane, BorderLayout.CENTER);
+        custom.setSelectedIndex(1);
+    }
+
+    private void addExpandPane() {
+        UILabel label = DesignerUtils.createConfigLabel(Toolkit.i18nText("Fine-Plugin-Date_Status"));
+        expand = new UIComboBox(new String[]{Toolkit.i18nText("Fine-Plugin-Date_Status_Collapse"), Toolkit.i18nText("Fine-Plugin-Date_Status_Expand")});
+        expand.setPreferredSize(new Dimension(DesignerUtils.NORMAL_COMBO_WIDTH, 20));
+        JPanel panel = new JPanel();
+        panel.setLayout(new FlowLayout(FlowLayout.LEFT, 5, 0));
+        panel.add(label);
+        panel.add(expand);
+        centerPane.add(panel);
+    }
+
+    private void addButtonColorPane() {
+        centerPane.add(DesignerUtils.createTitleSplitLine(Toolkit.i18nText("Fine-Plugin-Date_Button")));
+        UILabel label = DesignerUtils.createConfigLabel(Toolkit.i18nText("Fine-Plugin-Date_Button_Color"));
+        buttonColorSelectBox = DesignerUtils.createNormalColorSelectBox(new ChangeListener() {
+            @Override
+            public void stateChanged(ChangeEvent e) {
+            }
+        });
+        buttonColorSelectBox.setSelectObject(new Color(31, 173, 229));
+        JPanel panel = new JPanel();
+        panel.setLayout(new FlowLayout(FlowLayout.LEFT, 5, 0));
+        panel.add(label);
+        panel.add(buttonColorSelectBox);
+        centerPane.add(panel);
+    }
+
+    private void addHeaderLinePane() {
+        centerPane.add(DesignerUtils.createTitleSplitLine(Toolkit.i18nText("Fine-Plugin-Date_Title_Line")));
+
+        UILabel titleLabel = DesignerUtils.createConfigLabel(Toolkit.i18nText("Fine-Plugin-Date_SubTitle_Line"));
+        showTitleEditor = DesignerUtils.createCheckBox(Toolkit.i18nText("Fine-Plugin-Date_Show_Title_Line"), true);
+        JPanel headerPanel = new JPanel();
+        headerPanel.setLayout(new FlowLayout(FlowLayout.LEFT, 5, 0));
+        headerPanel.add(titleLabel);
+        headerPanel.add(showTitleEditor);
+        centerPane.add(headerPanel);
+
+        final UILabel splitLabel  = DesignerUtils.createConfigLabel(Toolkit.i18nText("Fine-Plugin-Date_Title_Split_Line_Color"));
+        titleSplitLineColorSelectBox = DesignerUtils.createNormalColorSelectBox(new ChangeListener() {
+            @Override
+            public void stateChanged(ChangeEvent e) {
+                if(showTitleEditor.isSelected()) {
+                    titleSplitLineColor = titleSplitLineColorSelectBox.getSelectObject();
+                }
+            }
+        });
+        titleSplitLineColorSelectBox.setSelectObject(new Color(234, 234, 234));
+        final JPanel splitLineColorPanel = new JPanel();
+        splitLineColorPanel.setLayout(new FlowLayout(FlowLayout.LEFT, 5, 0));
+        splitLineColorPanel.add(splitLabel);
+        splitLineColorPanel.add(titleSplitLineColorSelectBox);
+
+
+        showTitleEditor.registerChangeListener(new UIObserverListener() {
+            @Override
+            public void doChange() {
+                if(showTitleEditor.isSelected()) {
+                    titleSplitLineColorSelectBox.setSelectObject(titleSplitLineColor);
+                } else {
+                    titleSplitLineColorSelectBox.setSelectObject(titleSplitLineDisableColor);
+                }
+
+                titleSplitLineColorSelectBox.setEnabled(showTitleEditor.isSelected());
+                splitLabel.setEnabled(showTitleEditor.isSelected());
+            }
+        });
+        centerPane.add(splitLineColorPanel);
+    }
+
+    private void addFontColorPane() {
+        centerPane.add(DesignerUtils.createTitleSplitLine(Toolkit.i18nText("Fine-Plugin-Date_Font")));
+        UILabel mainLabel = DesignerUtils.createConfigLabel(Toolkit.i18nText("Fine-Plugin-Date_Font_Main"));
+        mainFontColor = new UIColorButton();
+        mainFontColor.setColor(new Color(51, 51, 51));
+        mainFontColor.setPreferredSize(new Dimension(20, 20));
+
+        UILabel specialLabel = DesignerUtils.createConfigLabel(Toolkit.i18nText("Fine-Plugin-Date_Font_Special"));
+        specialFontColor = new UIColorButton();
+        specialFontColor.setColor(new Color(255, 148, 84));
+        specialFontColor.setPreferredSize(new Dimension(20, 20));
+
+        double p = TableLayout.PREFERRED;
+        double[] rowSize = {p, p};
+        double[] columnSize = {p, p};
+        JPanel panel = TableLayoutHelper.createCommonTableLayoutPane(new Component[][] {
+                {mainLabel, mainFontColor},
+                {specialLabel, specialFontColor}
+        }, rowSize, columnSize, 10);
+
+        centerPane.add(panel);
+
+
+        UILabel fontSizeLabel = DesignerUtils.createConfigLabel(Toolkit.i18nText("Fine-Plugin-Date_Font_Size"));
+        dateFontSize = new UIComboBox(new Integer[]{12, 13, 14, 15, 16, 17, 18});
+        dateFontSize.setPreferredSize(new Dimension(DesignerUtils.NORMAL_COMBO_WIDTH, 20));
+        dateFontSize.setSelectedItem(14);
+        JPanel fontPanel = new JPanel();
+        fontPanel.setLayout(new FlowLayout(FlowLayout.LEFT, 5, 0));
+        fontPanel.add(fontSizeLabel);
+        fontPanel.add(dateFontSize);
+        centerPane.add(fontPanel);
+    }
+
+    private void addArrowPane() {
+        centerPane.add(DesignerUtils.createTitleSplitLine(Toolkit.i18nText("Fine-Plugin-Date_Arrow")));
+        UILabel label = DesignerUtils.createConfigLabel(Toolkit.i18nText("Fine-Plugin-Date_Arrow_Color"));
+        arrowColorSelectBox = DesignerUtils.createNormalColorSelectBox(new ChangeListener() {
+            @Override
+            public void stateChanged(ChangeEvent e) {
+            }
+        });
+        arrowColorSelectBox.setSelectObject(new Color(234, 234, 234));
+        JPanel panel = new JPanel();
+        panel.setLayout(new FlowLayout(FlowLayout.LEFT, 5, 0));
+        panel.add(label);
+        panel.add(arrowColorSelectBox );
+        centerPane.add(panel);
+    }
+
+    private JPanel createCenterPane() {
+        return FRGUIPaneFactory.createVerticalFlowLayout_Pane(true, FlowLayout.LEADING, 0, 10);
+    }
+
+    @Override
+    public void populateBean(MobileStyle ob) {
+        NavigationMobileStyle mobileStyle = (NavigationMobileStyle) ob;
+        custom.setSelectedIndex(mobileStyle.isCustom() ? 1 : 0);
+        expand.setSelectedIndex(mobileStyle.isExpand() ? 1 : 0);
+        buttonColorSelectBox.setSelectObject(mobileStyle.getButtonBackgroundColor());
+        mainFontColor.setColor(mobileStyle.getMainFontColor());
+        specialFontColor.setColor(mobileStyle.getSpecialFontColor());
+        showTitleEditor.setSelected(mobileStyle.isShowTitleLine());
+        if(mobileStyle.isShowTitleLine()) {
+            titleSplitLineColorSelectBox.setSelectObject(mobileStyle.getTitleSplitLineColor());
+        } else {
+            titleSplitLineColorSelectBox.setSelectObject(titleSplitLineDisableColor);
+            titleSplitLineColor = mobileStyle.getTitleSplitLineColor();
+        }
+        dateFontSize.setSelectedItem(mobileStyle.getDateFontSize());
+        arrowColorSelectBox.setSelectObject(mobileStyle.getArrowColor());
+    }
+
+    @Override
+    public MobileStyle updateBean() {
+        NavigationMobileStyle mobileStyle = (NavigationMobileStyle)this.widget.getMobileStyle();
+
+        mobileStyle.setCustom(custom.getSelectedIndex() == 1);
+        mobileStyle.setExpand(expand.getSelectedIndex() == 1);
+        mobileStyle.setButtonBackgroundColor(buttonColorSelectBox.getSelectObject());
+        mobileStyle.setMainFontColor(mainFontColor.getColor());
+        mobileStyle.setSpecialFontColor(specialFontColor.getColor());
+        mobileStyle.setShowTitleLine(showTitleEditor.isSelected());
+        if(showTitleEditor.isSelected()) {
+            mobileStyle.setTitleSplitLineColor(titleSplitLineColorSelectBox.getSelectObject());
+        } else {
+            mobileStyle.setTitleSplitLineColor(titleSplitLineColor);
+        }
+        mobileStyle.setDateFontSize(Integer.parseInt(dateFontSize.getSelectedItem().toString()));
+        mobileStyle.setArrowColor(arrowColorSelectBox.getSelectObject());
+        return mobileStyle;
+    }
+
+    @Override
+    protected String title4PopupWindow() {
+        return null;
+    }
+}
--- a/designer-base/src/main/java/com/fr/design/mainframe/mobile/ui/date/SimpleCustomDefinePane.java
+++ b/designer-base/src/main/java/com/fr/design/mainframe/mobile/ui/date/SimpleCustomDefinePane.java
@ -0,0 +1,230 @@
+package com.fr.design.mainframe.mobile.ui.date;
+
+import com.fr.design.dialog.AttrScrollPane;
+import com.fr.design.dialog.BasicScrollPane;
+import com.fr.design.gui.ibutton.UIColorButton;
+import com.fr.design.gui.icombobox.UIComboBox;
+import com.fr.design.gui.ilable.UILabel;
+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.design.mainframe.mobile.ui.MobileStyleCustomDefinePane;
+import com.fr.design.mainframe.mobile.utils.DesignerUtils;
+import com.fr.design.style.color.NewColorSelectBox;
+import com.fr.form.ui.Widget;
+import com.fr.form.ui.mobile.MobileStyle;
+import com.fr.form.ui.mobile.date.SimpleMobileStyle;
+
+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;
+
+public class SimpleCustomDefinePane extends MobileStyleCustomDefinePane {
+
+    private JPanel scrollPanel;
+    private UIComboBox custom;
+    private JPanel centerPane;
+
+    private UIComboBox expand;
+    private UIComboBox dateFontSize;
+    private NewColorSelectBox buttonColorSelectBox;
+    private NewColorSelectBox titleSplitLineColorSelectBox;
+    private NewColorSelectBox arrowColorSelectBox;
+    private UIColorButton mainFontColor;
+    private UIColorButton specialFontColor;
+
+    public SimpleCustomDefinePane(Widget widget) {
+        super(widget);
+    }
+
+    @Override
+    protected JPanel createPreviewPane() {
+        return null;
+    }
+
+    @Override
+    protected void init() {
+
+        this.setLayout(FRGUIPaneFactory.createBorderLayout());
+        this.addScrollPane();
+        this.addStyleSelectPane();
+        this.addConfigPane();
+
+    }
+
+    private void addScrollPane() {
+        scrollPanel = FRGUIPaneFactory.createBorderLayout_S_Pane();
+        BasicScrollPane basicScrollPane = new AttrScrollPane() {
+            @Override
+            protected JPanel createContentPane() {
+                return scrollPanel;
+            }
+        };
+        this.add(basicScrollPane);
+    }
+
+    private void addStyleSelectPane() {
+        JPanel stylePanel = new JPanel();
+        stylePanel.setLayout(new FlowLayout(FlowLayout.LEFT, 5, 0));
+        UILabel buttonStyleLabel = DesignerUtils.createConfigLabel(Toolkit.i18nText("Fine-Plugin-Date_Style"));
+        custom = new UIComboBox(new String[]{Toolkit.i18nText("Fine-Plugin-Date_Style_Default"),
+                Toolkit.i18nText("Fine-Plugin-Date_Style_Custom")});
+        custom.setPreferredSize(new Dimension(DesignerUtils.NORMAL_COMBO_WIDTH, 20));
+        custom.addItemListener(new ItemListener() {
+            @Override
+            public void itemStateChanged(ItemEvent e) {
+                boolean isCustom = custom.getSelectedIndex() == 1;
+                centerPane.setVisible(isCustom);
+
+            }
+        });
+        stylePanel.add(buttonStyleLabel);
+        stylePanel.add(custom);
+        scrollPanel.add(stylePanel, BorderLayout.NORTH);
+    }
+
+    private void addConfigPane() {
+        centerPane = createCenterPane();
+        centerPane.setVisible(false);
+        addExpandPane();
+        addHeaderLinePane();
+        addButtonColorPane();
+        addFontColorPane();
+        addArrowPane();
+        scrollPanel.add(centerPane, BorderLayout.CENTER);
+        custom.setSelectedIndex(1);
+    }
+
+    private void addExpandPane() {
+        UILabel label = DesignerUtils.createConfigLabel(Toolkit.i18nText("Fine-Plugin-Date_Status"));
+        expand = new UIComboBox(new String[]{Toolkit.i18nText("Fine-Plugin-Date_Status_Collapse"), Toolkit.i18nText("Fine-Plugin-Date_Status_Expand")});
+        expand.setPreferredSize(new Dimension(DesignerUtils.NORMAL_COMBO_WIDTH, 20));
+        JPanel panel = new JPanel();
+        panel.setLayout(new FlowLayout(FlowLayout.LEFT, 5, 0));
+        panel.add(label);
+        panel.add(expand);
+        centerPane.add(panel);
+    }
+
+    private void addHeaderLinePane() {
+        centerPane.add(DesignerUtils.createTitleSplitLine(Toolkit.i18nText("Fine-Plugin-Date_Title_Line")));
+        UILabel label = DesignerUtils.createConfigLabel(Toolkit.i18nText("Fine-Plugin-Date_Title_Split_Line_Color"));
+        titleSplitLineColorSelectBox = DesignerUtils.createNormalColorSelectBox(new ChangeListener() {
+            @Override
+            public void stateChanged(ChangeEvent e) {
+            }
+        });
+        titleSplitLineColorSelectBox.setSelectObject(new Color(234, 234, 234));
+        JPanel panel = new JPanel();
+        panel.setLayout(new FlowLayout(FlowLayout.LEFT, 5, 0));
+        panel.add(label);
+        panel.add(titleSplitLineColorSelectBox);
+        centerPane.add(panel);
+    }
+
+    private void addButtonColorPane() {
+        centerPane.add(DesignerUtils.createTitleSplitLine(Toolkit.i18nText("Fine-Plugin-Date_Button")));
+        UILabel label = DesignerUtils.createConfigLabel(Toolkit.i18nText("Fine-Plugin-Date_Button_Color"));
+        buttonColorSelectBox = DesignerUtils.createNormalColorSelectBox(new ChangeListener() {
+            @Override
+            public void stateChanged(ChangeEvent e) {
+            }
+        });
+        buttonColorSelectBox.setSelectObject(new Color(31, 173, 229));
+        JPanel panel = new JPanel();
+        panel.setLayout(new FlowLayout(FlowLayout.LEFT, 5, 0));
+        panel.add(label);
+        panel.add(buttonColorSelectBox);
+        centerPane.add(panel);
+    }
+
+    private void addFontColorPane() {
+        centerPane.add(DesignerUtils.createTitleSplitLine(Toolkit.i18nText("Fine-Plugin-Date_Font")));
+        UILabel mainLabel = DesignerUtils.createConfigLabel(Toolkit.i18nText("Fine-Plugin-Date_Font_Main"));
+        mainFontColor = new UIColorButton();
+        mainFontColor.setColor(new Color(51, 51, 51));
+        mainFontColor.setPreferredSize(new Dimension(20, 20));
+
+        UILabel specialLabel = DesignerUtils.createConfigLabel(Toolkit.i18nText("Fine-Plugin-Date_Font_Special"));
+        specialFontColor = new UIColorButton();
+        specialFontColor.setColor(new Color(255, 148, 84));
+        specialFontColor.setPreferredSize(new Dimension(20, 20));
+
+        double p = TableLayout.PREFERRED;
+        double[] rowSize = {p, p};
+        double[] columnSize = {p, p};
+        JPanel panel = TableLayoutHelper.createCommonTableLayoutPane(new Component[][] {
+                {mainLabel, mainFontColor},
+                {specialLabel, specialFontColor}
+        }, rowSize, columnSize, 10);
+
+        centerPane.add(panel);
+
+        UILabel fontSizeLabel = DesignerUtils.createConfigLabel(Toolkit.i18nText("Fine-Plugin-Date_Font_Size"));
+        dateFontSize = new UIComboBox(new Integer[]{12, 13, 14, 15, 16, 17, 18});
+        dateFontSize.setPreferredSize(new Dimension(DesignerUtils.NORMAL_COMBO_WIDTH, 20));
+        dateFontSize.setSelectedItem(14);
+        JPanel fontPanel = new JPanel();
+        fontPanel.setLayout(new FlowLayout(FlowLayout.LEFT, 5, 0));
+        fontPanel.add(fontSizeLabel);
+        fontPanel.add(dateFontSize);
+        centerPane.add(fontPanel);
+    }
+
+    private void addArrowPane() {
+        centerPane.add(DesignerUtils.createTitleSplitLine(Toolkit.i18nText("Fine-Plugin-Date_Arrow")));
+        UILabel label = DesignerUtils.createConfigLabel(Toolkit.i18nText("Fine-Plugin-Date_Arrow_Color"));
+        arrowColorSelectBox = DesignerUtils.createNormalColorSelectBox(new ChangeListener() {
+            @Override
+            public void stateChanged(ChangeEvent e) {
+            }
+        });
+        arrowColorSelectBox.setSelectObject(new Color(234, 234, 234));
+        JPanel panel = new JPanel();
+        panel.setLayout(new FlowLayout(FlowLayout.LEFT, 5, 0));
+        panel.add(label);
+        panel.add(arrowColorSelectBox );
+        centerPane.add(panel);
+    }
+
+    private JPanel createCenterPane() {
+        return FRGUIPaneFactory.createVerticalFlowLayout_Pane(true, FlowLayout.LEADING, 0, 10);
+    }
+
+    @Override
+    public void populateBean(MobileStyle ob) {
+        SimpleMobileStyle mobileStyle = (SimpleMobileStyle) ob;
+        custom.setSelectedIndex(mobileStyle.isCustom() ? 1 : 0);
+        expand.setSelectedIndex(mobileStyle.isExpand() ? 1 : 0);
+        buttonColorSelectBox.setSelectObject(mobileStyle.getButtonBackgroundColor());
+        mainFontColor.setColor(mobileStyle.getMainFontColor());
+        specialFontColor.setColor(mobileStyle.getSpecialFontColor());
+        titleSplitLineColorSelectBox.setSelectObject(mobileStyle.getTitleSplitLineColor());
+        dateFontSize.setSelectedItem(mobileStyle.getDateFontSize());
+        arrowColorSelectBox.setSelectObject(mobileStyle.getArrowColor());
+    }
+
+    @Override
+    public MobileStyle updateBean() {
+        SimpleMobileStyle mobileStyle = (SimpleMobileStyle)this.widget.getMobileStyle();
+
+        mobileStyle.setCustom(custom.getSelectedIndex() == 1);
+        mobileStyle.setExpand(expand.getSelectedIndex() == 1);
+        mobileStyle.setButtonBackgroundColor(buttonColorSelectBox.getSelectObject());
+        mobileStyle.setMainFontColor(mainFontColor.getColor());
+        mobileStyle.setSpecialFontColor(specialFontColor.getColor());
+        mobileStyle.setTitleSplitLineColor(titleSplitLineColorSelectBox.getSelectObject());
+        mobileStyle.setDateFontSize(Integer.parseInt(dateFontSize.getSelectedItem().toString()));
+        mobileStyle.setArrowColor(arrowColorSelectBox.getSelectObject());
+        return mobileStyle;
+    }
+
+    @Override
+    protected String title4PopupWindow() {
+        return null;
+    }
+}
--- a/designer-base/src/main/java/com/fr/design/mainframe/mobile/ui/date/SimpleDateCustomDefinePane.java
+++ b/designer-base/src/main/java/com/fr/design/mainframe/mobile/ui/date/SimpleDateCustomDefinePane.java
@ -0,0 +1,267 @@
+package com.fr.design.mainframe.mobile.ui.date;
+
+import com.fr.design.dialog.AttrScrollPane;
+import com.fr.design.gui.ibutton.UIRadioButton;
+import com.fr.design.gui.icombobox.LineComboBox;
+import com.fr.design.gui.icombobox.UIComboBox;
+import com.fr.design.gui.ilable.UILabel;
+import com.fr.design.gui.ispinner.UISpinner;
+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.design.mainframe.mobile.ui.MobileStyleCustomDefinePane;
+import com.fr.design.mainframe.mobile.utils.DesignerUtils;
+import com.fr.design.mainframe.mobile.utils.FontConfigPane;
+import com.fr.design.mainframe.mobile.utils.IconConfigPane;
+import com.fr.design.style.color.NewColorSelectBox;
+import com.fr.form.ui.Widget;
+import com.fr.form.ui.mobile.MobileStyle;
+import com.fr.form.ui.mobile.date.ControlStyle;
+import com.fr.form.ui.mobile.date.SimpleDateMobileStyle;
+import com.fr.stable.Constants;
+
+import javax.swing.*;
+import javax.swing.event.ChangeEvent;
+import javax.swing.event.ChangeListener;
+import java.awt.*;
+import java.awt.event.ActionEvent;
+import java.awt.event.ActionListener;
+import java.awt.event.ItemEvent;
+import java.awt.event.ItemListener;
+
+public class SimpleDateCustomDefinePane extends MobileStyleCustomDefinePane {
+
+    private JPanel scrollPanel;
+    private UIComboBox custom;
+    private JPanel centerPane;
+    private FontConfigPane labelFontConfigPane;
+    private FontConfigPane controlValueConfigPane;
+    private NewColorSelectBox controlBackground;
+    private LineComboBox controlBorder;
+    private NewColorSelectBox controlBorderColor;
+    private UISpinner controlWidgetRadius;
+    private UISpinner widthSpinner;
+    private UIRadioButton fillButton;
+    private UIRadioButton customButton;
+    private IconConfigPane iconConfigPane;
+
+    public SimpleDateCustomDefinePane(Widget widget) {
+        super(widget);
+    }
+
+    @Override
+    protected JPanel createPreviewPane() {
+        return null;
+    }
+
+    @Override
+    protected void init() {
+        this.setLayout(FRGUIPaneFactory.createBorderLayout());
+        this.addScrollPane();
+        this.addStyleSelectPane();
+        this.addConfigPane();
+    }
+
+    private void addScrollPane() {
+        scrollPanel = FRGUIPaneFactory.createBorderLayout_S_Pane();
+        this.add(new AttrScrollPane() {
+            @Override
+            protected JPanel createContentPane() {
+                return scrollPanel;
+            }
+        });
+    }
+
+    private void addStyleSelectPane() {
+        JPanel stylePanel = new JPanel();
+        stylePanel.setLayout(new FlowLayout(FlowLayout.LEFT, 5, 0));
+        UILabel buttonStyleLabel = DesignerUtils.createConfigLabel(Toolkit.i18nText("Fine-Plugin-SimpleDate_Control_Style"));
+        custom = new UIComboBox(new String[]{Toolkit.i18nText("Fine-Plugin-SimpleDate_Style_Default"),
+                Toolkit.i18nText("Fine-Plugin-SimpleDate_Style_Custom")});
+        custom.setPreferredSize(new Dimension(DesignerUtils.NORMAL_COMBO_WIDTH, 20));
+        custom.addItemListener(new ItemListener() {
+            @Override
+            public void itemStateChanged(ItemEvent e) {
+                boolean isCustom = custom.getSelectedIndex() == 1;
+                centerPane.setVisible(isCustom);
+
+            }
+        });
+        stylePanel.add(buttonStyleLabel);
+        stylePanel.add(custom);
+        scrollPanel.add(stylePanel, BorderLayout.NORTH);
+    }
+
+    private void addConfigPane() {
+        centerPane = FRGUIPaneFactory.createVerticalFlowLayout_Pane(true, FlowLayout.LEADING, 0, 10);
+        centerPane.setVisible(false);
+
+        addFontConfigPane();
+        addIconConfigPane();
+        addControlConfigPane();
+
+        scrollPanel.add(centerPane, BorderLayout.CENTER);
+    }
+
+    private void addControlConfigPane() {
+
+        centerPane.add(DesignerUtils.createTitleSplitLine(Toolkit.i18nText("Fine-Plugin-SimpleDate_Control_Region")));
+        controlBackground = DesignerUtils.createNormalColorSelectBox(new ChangeListener() {
+            @Override
+            public void stateChanged(ChangeEvent e) {
+            }
+        });
+        controlBorder = new LineComboBox(DesignerUtils.BORDER_LINE_STYLE_ARRAY);
+        controlBorder.setSelectedLineStyle(Constants.LINE_THIN);
+        controlBorder.setPreferredSize(new Dimension(DesignerUtils.NORMAL_COMBO_WIDTH, 20));
+        controlBorderColor = DesignerUtils.createNormalColorSelectBox(new ChangeListener() {
+            @Override
+            public void stateChanged(ChangeEvent e) {
+            }
+        });
+        controlWidgetRadius = new UISpinner(0, Integer.MAX_VALUE, 1, 2);
+        controlWidgetRadius.setPreferredSize(new Dimension(DesignerUtils.NORMAL_COMBO_WIDTH, 20));
+
+        JComponent[] controlComponents = new JComponent[]{controlBackground, controlBorder, controlBorderColor, controlWidgetRadius};
+        String[] comboBoxNames = new String[]{
+                Toolkit.i18nText("Fine-Plugin-SimpleDate_Control_Background"),
+                Toolkit.i18nText("Fine-Plugin-SimpleDate_Control_Border"),
+                Toolkit.i18nText("Fine-Plugin-SimpleDate_Border_Color"),
+                Toolkit.i18nText("Fine-Plugin-SimpleDate_Radius")
+        };
+
+        Component[][] components = new Component[4][];
+
+        for (int i = 0; i < 4; i++) {
+            UILabel label = DesignerUtils.createConfigLabel(comboBoxNames[i]);
+            components[i] = new Component[]{label, controlComponents[i]};
+        }
+
+        double p = TableLayout.PREFERRED;
+        double[] rowSize = {p, p, p, p};
+        double[] columnSize = {p, p};
+        JPanel controlPanel = TableLayoutHelper.createCommonTableLayoutPane(components, rowSize, columnSize, 10);
+        centerPane.add(controlPanel);
+
+        this.fillButton = new UIRadioButton(Toolkit.i18nText("Fine-Plugin-SimpleDate_Horizontal_Fill"));
+        this.customButton = new UIRadioButton(Toolkit.i18nText("Fine-Plugin-SimpleDate_Width_Custom"));
+
+        ButtonGroup buttonGroup = new ButtonGroup();
+        buttonGroup.add(fillButton);
+        buttonGroup.add(customButton);
+
+        JPanel panel = new JPanel();
+        panel.add(fillButton);
+        panel.add(customButton);
+        panel.setLayout(new GridLayout(0, 2, 14, 0));
+        panel.setPreferredSize(new Dimension(174, 20));
+        fillButton.setSelected(true);
+
+        ActionListener listener = new ActionListener() {
+            @Override
+            public void actionPerformed(ActionEvent e) {
+                widthSpinner.setVisible(customButton.isSelected());
+            }
+        };
+
+        fillButton.addActionListener(listener);
+        customButton.addActionListener(listener);
+
+        UILabel label = DesignerUtils.createConfigLabel(Toolkit.i18nText("Fine-Plugin-SimpleDate_Width"));
+        widthSpinner = new UISpinner(1, Integer.MAX_VALUE, 1, 200);
+        widthSpinner.setPreferredSize(new Dimension(78, 20));
+        widthSpinner.setVisible(false);
+        centerPane.add(DesignerUtils.createLeftRightComponentsPane(label, panel, widthSpinner));
+
+    }
+
+    private void addFontConfigPane() {
+
+        String[] titleSplitLineNames = new String[]{
+                Toolkit.i18nText("Fine-Plugin-SimpleDate_Label_Name"),
+                Toolkit.i18nText("Fine-Plugin-SimpleDate_Control_Value")
+        };
+        labelFontConfigPane = new FontConfigPane();
+        controlValueConfigPane = new FontConfigPane();
+        FontConfigPane[] fontConfigPanes = new FontConfigPane[]{labelFontConfigPane, controlValueConfigPane};
+        for (int i = 0; i < 2; i++) {
+            centerPane.add(DesignerUtils.createTitleSplitLine(titleSplitLineNames[i]));
+            UILabel fontLabel = DesignerUtils.createConfigLabel(Toolkit.i18nText("Fine-Plugin-SimpleDate_Character"));
+            JPanel fontPanel = DesignerUtils.createLeftRightComponentsPane(fontLabel, fontConfigPanes[i]);
+            centerPane.add(fontPanel);
+        }
+    }
+
+    private void addIconConfigPane() {
+
+        centerPane.add(DesignerUtils.createTitleSplitLine(Toolkit.i18nText("Fine-Plugin-SimpleDate_Icon")));
+        UILabel tipLabel = new UILabel();
+        tipLabel.setFont(new Font(tipLabel.getName(), Font.PLAIN, 10));
+        tipLabel.setSize(470, 40);
+        tipLabel.setText(Toolkit.i18nText("Fine-Plugin-SimpleDate_Tip"));
+        tipLabel.setForeground(Color.decode("#9B9B9B"));
+        centerPane.add(tipLabel);
+
+        JPanel panel = FRGUIPaneFactory.createLeftFlowZeroGapBorderPane();
+        panel.setBorder(BorderFactory.createEmptyBorder(5, 0, 5, 0));
+        panel.setLayout(new FlowLayout(FlowLayout.LEFT, 5, 0));
+
+
+        iconConfigPane = new IconConfigPane();
+        centerPane.add(iconConfigPane);
+
+    }
+
+    @Override
+    public void populateBean(MobileStyle mobileStyle) {
+        SimpleDateMobileStyle simpleDateMobileStyle = (SimpleDateMobileStyle) mobileStyle;
+        custom.setSelectedIndex(simpleDateMobileStyle.isCustom() ? 1 : 0);
+        iconConfigPane.populate(simpleDateMobileStyle.getIconValue());
+        labelFontConfigPane.populate(simpleDateMobileStyle.getLabelFontStyle());
+        controlValueConfigPane.populate(simpleDateMobileStyle.getValueFontStyle());
+
+        ControlStyle controlStyle = simpleDateMobileStyle.getControlStyle();
+
+        if (controlStyle != null) {
+            controlBackground.setSelectObject(controlStyle.getBackground());
+            controlBorderColor.setSelectObject(controlStyle.getBorderColor());
+            controlBorder.setSelectedLineStyle(controlStyle.getBorderType());
+            controlWidgetRadius.setValue(controlStyle.getBorderRadius());
+            if (controlStyle.isCustomWidth()) {
+                widthSpinner.setVisible(true);
+                widthSpinner.setValue(controlStyle.getWidth());
+                customButton.setSelected(true);
+                fillButton.setSelected(false);
+            } else {
+                widthSpinner.setVisible(false);
+                customButton.setSelected(false);
+                fillButton.setSelected(true);
+            }
+        }
+
+    }
+
+    @Override
+    public MobileStyle updateBean() {
+        SimpleDateMobileStyle simpleDateMobileStyle = (SimpleDateMobileStyle) this.widget.getMobileStyle();
+        simpleDateMobileStyle.setCustom(custom.getSelectedIndex() == 1);
+        simpleDateMobileStyle.setIconValue(iconConfigPane.update());
+        simpleDateMobileStyle.setLabelFontStyle(labelFontConfigPane.update());
+        simpleDateMobileStyle.setValueFontStyle(controlValueConfigPane.update());
+        ControlStyle controlStyle = new ControlStyle();
+        controlStyle.setBackground(controlBackground.getSelectObject());
+        controlStyle.setBorderColor(controlBorderColor.getSelectObject());
+        controlStyle.setBorderType(controlBorder.getSelectedLineStyle());
+        controlStyle.setBorderRadius(controlWidgetRadius.getValue());
+        controlStyle.setCustomWidth(customButton.isSelected());
+        controlStyle.setWidth(widthSpinner.getValue());
+        simpleDateMobileStyle.setControlStyle(controlStyle);
+        return simpleDateMobileStyle;
+    }
+
+    @Override
+    protected String title4PopupWindow() {
+        return null;
+    }
+}
--- 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
@ -0,0 +1,310 @@
+package com.fr.design.mainframe.mobile.ui.radiogroup;
+
+import com.fr.design.constants.LayoutConstants;
+import com.fr.design.designer.IntervalConstants;
+import com.fr.design.dialog.AttrScrollPane;
+import com.fr.design.dialog.BasicScrollPane;
+import com.fr.design.gui.ibutton.UIColorButton;
+import com.fr.design.gui.icombobox.LineComboBox;
+import com.fr.design.gui.icombobox.UIComboBox;
+import com.fr.design.gui.ilable.UILabel;
+import com.fr.design.gui.ispinner.UISpinner;
+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.design.mainframe.mobile.ui.MobileStyleCustomDefinePane;
+import com.fr.design.mainframe.mobile.utils.DesignerUtils;
+import com.fr.design.mainframe.mobile.utils.FontConfigPane;
+import com.fr.design.style.color.NewColorSelectBox;
+import com.fr.form.ui.Widget;
+import com.fr.form.ui.mobile.MobileStyle;
+import com.fr.form.ui.mobile.radiogroup.CapsuleMobileStyle;
+import com.fr.general.FRFont;
+import com.fr.stable.Constants;
+
+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;
+
+public class CapsuleCustomDefinePane extends MobileStyleCustomDefinePane {
+
+    private JPanel scrollPanel;
+    private UIComboBox custom;
+    private JPanel centerPane;
+
+    private UISpinner leftSpinner;
+    private UISpinner rightSpinner;
+    private UISpinner topSpinner;
+    private UISpinner bottomSpinner;
+
+    private JRadioButton leftAlignRadioButton;
+    private JRadioButton centerAlignRadioButton;
+
+    private NewColorSelectBox initialColorSelectBox;
+    private NewColorSelectBox selectedColorSelectBox;
+
+    private LineComboBox borderLineCombo;
+    private NewColorSelectBox initialBorderColor;
+    private NewColorSelectBox selectedBorderColor;
+    private UISpinner borderRadiusSpinner;
+
+    private FontConfigPane initialFontConfPane;
+    private UIColorButton selectedFontColor;
+
+
+    public CapsuleCustomDefinePane(Widget widget) {
+        super(widget);
+    }
+
+    @Override
+    protected JPanel createPreviewPane() {
+        return null;
+    }
+
+    @Override
+    protected void init() {
+        this.setLayout(FRGUIPaneFactory.createBorderLayout());
+        this.addScrollPane();
+        this.addStyleSelectPane();
+        this.addConfigPane();
+    }
+
+    private void addScrollPane() {
+        scrollPanel = FRGUIPaneFactory.createBorderLayout_S_Pane();
+        BasicScrollPane basicScrollPane = new AttrScrollPane() {
+            @Override
+            protected JPanel createContentPane() {
+                return scrollPanel;
+            }
+        };
+        this.add(basicScrollPane);
+    }
+
+    private void addStyleSelectPane() {
+        JPanel stylePanel = new JPanel();
+        stylePanel.setLayout(new FlowLayout(FlowLayout.LEFT, 5, 0));
+        UILabel buttonStyleLabel = DesignerUtils.createConfigLabel(Toolkit.i18nText("Fine-Plugin-RadioGroup_Style"));
+        custom = new UIComboBox(new String[]{Toolkit.i18nText("Fine-Plugin-RadioGroup_Style_Default"),
+                Toolkit.i18nText("Fine-Plugin-RadioGroup_Style_Custom")});
+        custom.setPreferredSize(new Dimension(DesignerUtils.NORMAL_COMBO_WIDTH, 20));
+        custom.addItemListener(new ItemListener() {
+            @Override
+            public void itemStateChanged(ItemEvent e) {
+                boolean isCustom = custom.getSelectedIndex() == 1;
+                centerPane.setVisible(isCustom);
+
+            }
+        });
+        stylePanel.add(buttonStyleLabel);
+        stylePanel.add(custom);
+        scrollPanel.add(stylePanel, BorderLayout.NORTH);
+    }
+
+    private void addConfigPane() {
+        centerPane = createCenterPane();
+        centerPane.setVisible(false);
+
+        addPaddingPane();
+        addBackgroundPane();
+        addBorderPane();
+        addFontPane();
+
+        scrollPanel.add(centerPane, BorderLayout.CENTER);
+        custom.setSelectedIndex(1);
+    }
+
+    private JPanel createCenterPane() {
+        return FRGUIPaneFactory.createVerticalFlowLayout_Pane(true, FlowLayout.LEADING, 0, 10);
+    }
+
+    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 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);
+
+        UILabel rightLabel = new UILabel(Toolkit.i18nText("Fine-Plugin-RadioGroup_Padding_Right"));
+        rightSpinner = new UISpinner(0, Integer.MAX_VALUE, 1, DesignerUtils.kDefaultHorizontalPadding);
+
+        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);
+
+        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);
+
+        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},
+        }, rowSize, columnSize, 10);
+        centerPane.add(paddingPanel);
+    }
+
+    private void addBackgroundPane() {
+        centerPane.add(DesignerUtils.createTitleSplitLine(Toolkit.i18nText("Fine-Plugin-RadioGroup_Background")));
+
+        UILabel initialColorLabel = DesignerUtils.createConfigLabel(Toolkit.i18nText("Fine-Plugin-RadioGroup_Background_Init"));
+        initialColorSelectBox = DesignerUtils.createNormalColorSelectBox(new ChangeListener() {
+            @Override
+            public void stateChanged(ChangeEvent e) {
+            }
+        });
+        initialColorSelectBox.setSelectObject(new Color(244, 244, 244));
+        JPanel initialColorSelectPane = TableLayoutHelper.createGapTableLayoutPane(new Component[][]{new Component[]{initialColorLabel, initialColorSelectBox}}, TableLayoutHelper.FILL_LASTCOLUMN, IntervalConstants.INTERVAL_L1, LayoutConstants.VGAP_MEDIUM);
+        centerPane.add(initialColorSelectPane);
+
+        UILabel selectedColorLabel = DesignerUtils.createConfigLabel(Toolkit.i18nText("Fine-Plugin-RadioGroup_Background_Select"));
+        selectedColorSelectBox = DesignerUtils.createNormalColorSelectBox(new ChangeListener() {
+            @Override
+            public void stateChanged(ChangeEvent e) {
+
+            }
+        });
+        selectedColorSelectBox.setSelectObject(new Color(31, 173, 229));
+        JPanel selectedColorSelectPane = TableLayoutHelper.createGapTableLayoutPane(new Component[][]{new Component[]{selectedColorLabel, selectedColorSelectBox}}, TableLayoutHelper.FILL_LASTCOLUMN, IntervalConstants.INTERVAL_L1, LayoutConstants.VGAP_MEDIUM);
+        centerPane.add(selectedColorSelectPane);
+    }
+
+    private void addBorderPane() {
+        centerPane.add(DesignerUtils.createTitleSplitLine(Toolkit.i18nText("Fine-Plugin-RadioGroup_Border")));
+
+        UILabel borderTypeLabel = DesignerUtils.createConfigLabel(Toolkit.i18nText("Fine-Plugin-RadioGroup_Border_Line"));
+        borderLineCombo = new LineComboBox(DesignerUtils.BORDER_LINE_STYLE_ARRAY);
+        borderLineCombo.setSelectedLineStyle(Constants.LINE_THIN);
+
+        UILabel initialColorLabel = DesignerUtils.createConfigLabel(Toolkit.i18nText("Fine-Plugin-RadioGroup_Border_Init_Color"));
+        initialBorderColor = DesignerUtils.createNormalColorSelectBox(new ChangeListener() {
+            @Override
+            public void stateChanged(ChangeEvent e) {
+            }
+        });
+        initialBorderColor.setSelectObject(new Color(244, 244, 244));
+
+        UILabel selectedColorLabel = DesignerUtils.createConfigLabel(Toolkit.i18nText("Fine-Plugin-RadioGroup_Border_Select_Color"));
+        selectedBorderColor = DesignerUtils.createNormalColorSelectBox(new ChangeListener() {
+            @Override
+            public void stateChanged(ChangeEvent e) {
+            }
+        });
+        selectedBorderColor.setSelectObject(new Color(31, 173, 229));
+
+        UILabel radiusLabel = DesignerUtils.createConfigLabel(Toolkit.i18nText("Fine-Plugin-RadioGroup_Border_Radius"));
+        borderRadiusSpinner = new UISpinner(0, Integer.MAX_VALUE, 1, 20);
+        borderRadiusSpinner.setPreferredSize(new Dimension(DesignerUtils.NORMAL_COMBO_WIDTH, 20));
+
+        double p = TableLayout.PREFERRED;
+        double[] rowSize = {p, p, p, p};
+        double[] columnSize = {p, p};
+        JPanel borderPanel = TableLayoutHelper.createCommonTableLayoutPane(new Component[][]{
+                {borderTypeLabel, borderLineCombo},
+                {initialColorLabel, initialBorderColor},
+                {selectedColorLabel, selectedBorderColor},
+                {radiusLabel, borderRadiusSpinner}
+        }, rowSize, columnSize, 10);
+
+        centerPane.add(borderPanel);
+
+    }
+
+    private void addFontPane() {
+        centerPane.add(DesignerUtils.createTitleSplitLine(Toolkit.i18nText("Fine-Plugin-RadioGroup_Font")));
+
+        UILabel initialFontLabel = DesignerUtils.createConfigLabel(Toolkit.i18nText("Fine-Plugin-RadioGroup_Font_init"));
+        initialFontConfPane = new FontConfigPane();
+        initialFontConfPane.setFontColor(new Color(204, 204, 204));
+        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"));
+        selectedFontColor = new UIColorButton();
+        selectedFontColor.setColor(Color.WHITE);
+        selectedFontColor.setPreferredSize(new Dimension(20, 20));
+        JPanel selectFontColorPanel = TableLayoutHelper.createGapTableLayoutPane(new Component[][]{new Component[]{selectedFontLabel, selectedFontColor}}, TableLayoutHelper.FILL_LASTCOLUMN, IntervalConstants.INTERVAL_L1, LayoutConstants.VGAP_MEDIUM);
+        centerPane.add(selectFontColorPanel);
+
+    }
+
+    @Override
+    public void populateBean(MobileStyle ob) {
+        CapsuleMobileStyle mobileStyle = (CapsuleMobileStyle) ob;
+        custom.setSelectedIndex(mobileStyle.isCustom() ? 1 : 0);
+        leftSpinner.setValue(mobileStyle.getLeftPadding());
+        rightSpinner.setValue(mobileStyle.getRightPadding());
+        topSpinner.setValue(mobileStyle.getTopPadding());
+        bottomSpinner.setValue(mobileStyle.getBottomPadding());
+        leftAlignRadioButton.setSelected(mobileStyle.getButtonAlign() == DesignerUtils.kAlignLeft);
+        centerAlignRadioButton.setSelected(mobileStyle.getButtonAlign() == DesignerUtils.kAlignCenter);
+        initialColorSelectBox.setSelectObject(mobileStyle.getInitialBackgroundColor());
+        selectedColorSelectBox.setSelectObject(mobileStyle.getSelectedBackgroundColor());
+        borderLineCombo.setSelectedLineStyle(mobileStyle.getBorderType());
+        initialBorderColor.setSelectObject(mobileStyle.getInitialBorderColor());
+        selectedBorderColor.setSelectObject(mobileStyle.getSelectedBorderColor());
+        borderRadiusSpinner.setValue(mobileStyle.getBorderRadius());
+        if (mobileStyle.getInitialFont() != null) {
+            initialFontConfPane.populate(mobileStyle.getInitialFont());
+        }
+        if (mobileStyle.getSelectedFont() != null) {
+            selectedFontColor.setColor(mobileStyle.getSelectedFont().getForeground());
+        }
+    }
+
+    @Override
+    public MobileStyle updateBean() {
+        CapsuleMobileStyle mobileStyle = (CapsuleMobileStyle) this.widget.getMobileStyle();
+
+        mobileStyle.setCustom(custom.getSelectedIndex() == 1);
+        mobileStyle.setLeftPadding(leftSpinner.getValue());
+        mobileStyle.setRightPadding(rightSpinner.getValue());
+        mobileStyle.setTopPadding(topSpinner.getValue());
+        mobileStyle.setBottomPadding(bottomSpinner.getValue());
+        mobileStyle.setButtonAlign(leftAlignRadioButton.isSelected() ? DesignerUtils.kAlignLeft : DesignerUtils.kAlignCenter);
+        mobileStyle.setInitialBackgroundColor(initialColorSelectBox.getSelectObject());
+        mobileStyle.setSelectedBackgroundColor(selectedColorSelectBox.getSelectObject());
+        mobileStyle.setBorderType(borderLineCombo.getSelectedLineStyle());
+        mobileStyle.setInitialBorderColor(initialBorderColor.getSelectObject());
+        mobileStyle.setSelectedBorderColor(selectedBorderColor.getSelectObject());
+        mobileStyle.setBorderRadius(borderRadiusSpinner.getValue());
+
+        FRFont initialFont = initialFontConfPane.updateFont(null, null, null);
+        FRFont selectedFont = initialFontConfPane.updateFont(selectedFontColor.getColor(), null, null);
+
+        mobileStyle.setInitialFont(initialFont);
+        mobileStyle.setSelectedFont(selectedFont);
+
+        return mobileStyle;
+    }
+
+    @Override
+    protected String title4PopupWindow() {
+        return null;
+    }
+
+}
--- 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
@ -0,0 +1,195 @@
+package com.fr.design.mainframe.mobile.ui.radiogroup;
+
+import com.fr.base.IconManager;
+import com.fr.design.dialog.BasicDialog;
+import com.fr.design.dialog.DialogActionAdapter;
+import com.fr.design.gui.ibutton.UIButton;
+import com.fr.design.i18n.Toolkit;
+import com.fr.design.layout.FRGUIPaneFactory;
+import com.fr.design.mainframe.DesignerContext;
+import com.fr.design.utils.DrawRoutines;
+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.StringUtils;
+
+import javax.swing.*;
+import javax.swing.event.ChangeEvent;
+import javax.swing.event.ChangeListener;
+import javax.swing.plaf.basic.BasicButtonUI;
+import java.awt.*;
+import java.awt.event.ActionEvent;
+import java.awt.event.ActionListener;
+import java.util.ArrayList;
+
+public class IconConfigPane extends JPanel {
+    private UIButton editIconButton;
+    private UIButton deleteIconButton;
+    private String curIconName;
+    private IconButton selectIconButton;
+    private ArrayList<IconButton> iconButtons = new ArrayList<IconButton>();
+
+    public IconConfigPane(int count) {
+        initComp(count);
+    }
+
+    public void initComp(int count) {
+        this.setLayout(FRGUIPaneFactory.createBorderLayout());
+        JPanel panel = FRGUIPaneFactory.createNormalFlowInnerContainer_M_Pane();
+        panel.setBorder(BorderFactory.createEmptyBorder(5, 0, 5, 0));
+        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(){
+                    protected String createDescriptionText(){
+                        return Toolkit.i18nText("Fine-Design_Mobile_Custom_Icon_Message");
+                    }
+                };
+                BasicDialog editDialog = cip.showWindow(DesignerContext.getDesignerFrame());
+                editDialog.addDialogActionListener(new DialogActionAdapter() {
+                    @Override
+                    public void doOk() {
+                        curIconName = cip.update();
+                        setShowIconImage();
+                        IconConfigPane.this.repaint();
+                    }
+                });
+                editDialog.setVisible(true);
+            }
+        });
+        editIconButton.setEnabled(false);
+
+        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) {
+                selectIconButton.setIconName(StringUtils.EMPTY);
+                IconConfigPane.this.repaint();
+            }
+        });
+        deleteIconButton.setEnabled(false);
+
+
+        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);
+        }
+        this.add(northPane, BorderLayout.NORTH);
+    }
+
+    public void setShowIconImage() {
+        selectIconButton.setIconName(curIconName);
+    }
+
+    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++) {
+            iconNames.add(iconButtons.get(i).getIconName());
+        }
+        return iconNames;
+    }
+
+
+    private class IconButton extends JToggleButton implements ActionListener {
+        private String iconName;
+        private Image iconImage = null;
+        private static final int ICON_BUTTON_SIZE = 20;
+        private static final int ICON_X = 2;
+        private static final int ICON_Y = 2;
+
+        public IconButton(String name) {
+            this.iconName = name;
+            this.addActionListener(this);
+            this.setBackground(Color.WHITE);
+            this.setCursor(new Cursor(Cursor.HAND_CURSOR));
+            this.iconImage = WidgetInfoConfig.getInstance().getIconManager().getIconImage(name);
+        }
+
+        @Override
+        public void updateUI() {
+            setUI(new BasicButtonUI() {
+                public void paint(Graphics g, JComponent c) {
+                    super.paint(g, c);
+                }
+            });
+        }
+
+        protected void paintBorder(Graphics g) {
+            super.paintBorder(g);
+            if (ComparatorUtils.equals(this, selectIconButton)) {
+                DrawRoutines.drawRoundedBorder(
+                        g, Color.decode("#419BF9"), 0, 0, 20, 20);
+            } else {
+                DrawRoutines.drawRoundedBorder(
+                        g, Color.decode("#D9DADD"), 0, 0, 20, 20);
+            }
+
+        }
+
+        public String getIconName() {
+            return iconName;
+        }
+
+        public void setIconName(String iconName) {
+            this.iconName = iconName;
+            this.iconImage = WidgetInfoConfig.getInstance().getIconManager().getIconImage(iconName);
+        }
+
+        @Override
+        public void paintComponent(Graphics g) {
+            super.paintComponent(g);
+            Graphics2D g2d = (Graphics2D) g;
+            // carl:这里缩放显示 16 × 16
+            if (iconImage != null) {
+                g2d.drawImage(iconImage, ICON_X, ICON_Y, IconManager.DEFAULT_ICONWIDTH, IconManager.DEFAULT_ICONHEIGHT, null);
+            }
+        }
+
+        @Override
+        public Dimension getPreferredSize() {
+            return new Dimension(ICON_BUTTON_SIZE, ICON_BUTTON_SIZE);
+        }
+
+        public void actionPerformed(ActionEvent evt) {
+            selectIconButton = this;
+            editIconButton.setEnabled(true);
+            if(StringUtils.isNotEmpty(this.iconName)) {
+                deleteIconButton.setEnabled(true);
+            } else {
+                deleteIconButton.setEnabled(false);
+            }
+            IconConfigPane.this.repaint();// repaint
+        }
+
+        @Override
+        public void addChangeListener(ChangeListener changeListener) {
+            this.changeListener = changeListener;
+        }
+
+        private void fireChagneListener() {
+            if (this.changeListener != null) {
+                ChangeEvent evt = new ChangeEvent(this);
+                this.changeListener.stateChanged(evt);
+            }
+        }
+
+    }
+}
--- 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
@ -0,0 +1,242 @@
+package com.fr.design.mainframe.mobile.ui.radiogroup;
+
+import com.fr.base.BaseUtils;
+import com.fr.design.constants.LayoutConstants;
+import com.fr.design.designer.IntervalConstants;
+import com.fr.design.dialog.AttrScrollPane;
+import com.fr.design.dialog.BasicScrollPane;
+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.ispinner.UISpinner;
+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.design.mainframe.mobile.ui.MobileStyleCustomDefinePane;
+import com.fr.design.mainframe.mobile.utils.DesignerUtils;
+import com.fr.design.mainframe.mobile.utils.FontConfigPane;
+import com.fr.form.ui.Widget;
+import com.fr.form.ui.mobile.MobileStyle;
+import com.fr.form.ui.mobile.radiogroup.ImageMobileStyle;
+import com.fr.general.FRFont;
+
+import javax.swing.*;
+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 {
+
+    private static final Icon[] BOLD_ICONS = {BaseUtils.readIcon("/com/fr/design/images/m_format/cellstyle/bold.png"), BaseUtils.readIcon("/com/fr/design/images/m_format/cellstyle/bold_white.png")};
+
+    private JPanel scrollPanel;
+    private UIComboBox custom;
+    private JPanel centerPane;
+
+    private UISpinner leftSpinner;
+    private UISpinner rightSpinner;
+    private UISpinner topSpinner;
+    private UISpinner bottomSpinner;
+
+    private IconConfigPane initialIconConfigPane;
+    private IconConfigPane selectedIconConfigPane;
+
+    private FontConfigPane initialFontConfPane;
+    private UIColorButton selectedFontColor;
+    private UIToggleButton selectedFontBold;
+
+    public ImageCustomDefinePane(Widget widget) {
+        super(widget);
+    }
+
+    @Override
+    protected JPanel createPreviewPane() {
+        return null;
+    }
+
+    @Override
+    protected void init() {
+        this.setLayout(FRGUIPaneFactory.createBorderLayout());
+        this.addScrollPane();
+        this.addStyleSelectPane();
+        this.addConfigPane();
+    }
+
+    private void addScrollPane() {
+        scrollPanel = FRGUIPaneFactory.createBorderLayout_S_Pane();
+        BasicScrollPane basicScrollPane = new AttrScrollPane() {
+            @Override
+            protected JPanel createContentPane() {
+                return scrollPanel;
+            }
+        };
+        this.add(basicScrollPane);
+    }
+
+    private void addStyleSelectPane() {
+        JPanel stylePanel = new JPanel();
+        stylePanel.setLayout(new FlowLayout(FlowLayout.LEFT, 5, 0));
+        UILabel buttonStyleLabel = DesignerUtils.createConfigLabel(Toolkit.i18nText("Fine-Plugin-RadioGroup_Style"));
+        custom = new UIComboBox(new String[]{Toolkit.i18nText("Fine-Plugin-RadioGroup_Style_Default"),
+                Toolkit.i18nText("Fine-Plugin-RadioGroup_Style_Custom")});
+        custom.setPreferredSize(new Dimension(DesignerUtils.NORMAL_COMBO_WIDTH, 20));
+        custom.addItemListener(new ItemListener() {
+            @Override
+            public void itemStateChanged(ItemEvent e) {
+                boolean isCustom = custom.getSelectedIndex() == 1;
+                centerPane.setVisible(isCustom);
+
+            }
+        });
+        stylePanel.add(buttonStyleLabel);
+        stylePanel.add(custom);
+        scrollPanel.add(stylePanel, BorderLayout.NORTH);
+    }
+
+    private void addConfigPane() {
+        centerPane = createCenterPane();
+        centerPane.setVisible(false);
+
+        addPaddingPane();
+
+        addIconPane();
+
+        addFontPane();
+
+        scrollPanel.add(centerPane, BorderLayout.CENTER);
+        custom.setSelectedIndex(1);
+    }
+
+    private JPanel createCenterPane() {
+        return FRGUIPaneFactory.createVerticalFlowLayout_Pane(true, FlowLayout.LEADING, 0, 10);
+    }
+
+    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 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);
+
+        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 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);
+
+        double p = TableLayout.PREFERRED;
+        double[] rowSize = {p, p};
+        double[] columnSize = {p, p};
+        JPanel paddingPanel = TableLayoutHelper.createCommonTableLayoutPane(new Component[][]{
+                {paddingHintLabel, vPaddingSpinnerPanel},
+                {emptyHintLabel, hPaddingSpinnerPanel},
+        }, rowSize, columnSize, 10);
+
+        centerPane.add(paddingPanel);
+    }
+
+    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);
+
+        JPanel container = FRGUIPaneFactory.createVerticalFlowLayout_Pane(true, FlowLayout.LEADING, 0, 5);
+
+        JPanel initialPane = FRGUIPaneFactory.createNormalFlowInnerContainer_S_Pane();
+        initialPane.add(initialLabel);
+        initialPane.add(initialIconConfigPane);
+        container.add(initialPane);
+
+        JPanel selectedPane = FRGUIPaneFactory.createNormalFlowInnerContainer_S_Pane();
+        selectedPane.add(selectedLabel);
+        selectedPane.add(selectedIconConfigPane);
+        container.add(selectedPane);
+
+        centerPane.add(container);
+
+    }
+
+    private void addFontPane() {
+        centerPane.add(DesignerUtils.createTitleSplitLine(Toolkit.i18nText("Fine-Plugin-RadioGroup_Font")));
+
+        UILabel initialFontLabel = DesignerUtils.createConfigLabel(Toolkit.i18nText("Fine-Plugin-RadioGroup_Font_init"));
+        initialFontConfPane = new FontConfigPane();
+        initialFontConfPane.setFontColor(new Color(204, 204, 204));
+        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"));
+        selectedFontColor = new UIColorButton();
+        selectedFontColor.setColor(new Color(31, 173, 229));
+        selectedFontColor.setPreferredSize(new Dimension(20, 20));
+        selectedFontBold = new UIToggleButton(BOLD_ICONS, true);
+        selectedFontBold.setPreferredSize(new Dimension(20, 20));
+        JPanel selectFontColorPanel = TableLayoutHelper.createGapTableLayoutPane(new Component[][]{new Component[]{selectedFontLabel, selectedFontColor, selectedFontBold}}, TableLayoutHelper.FILL_LASTCOLUMN, IntervalConstants.INTERVAL_L1, LayoutConstants.VGAP_MEDIUM);
+        centerPane.add(selectFontColorPanel);
+
+    }
+
+    @Override
+    public void populateBean(MobileStyle ob) {
+        ImageMobileStyle mobileStyle = (ImageMobileStyle) ob;
+        custom.setSelectedIndex(mobileStyle.isCustom() ? 1 : 0);
+        leftSpinner.setValue(mobileStyle.getLeftPadding());
+        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())));
+        if(mobileStyle.getInitialFont() != null) {
+            initialFontConfPane.populate(mobileStyle.getInitialFont());
+        }
+        if(mobileStyle.getSelectedFont() != null) {
+            selectedFontColor.setColor(mobileStyle.getSelectedFont().getForeground());
+            selectedFontBold.setSelected(mobileStyle.getSelectedFont().isBold());
+        }
+    }
+
+    @Override
+    public MobileStyle updateBean() {
+        ImageMobileStyle mobileStyle = (ImageMobileStyle)this.widget.getMobileStyle();
+        mobileStyle.setCustom(custom.getSelectedIndex() == 1);
+        mobileStyle.setLeftPadding(leftSpinner.getValue());
+        mobileStyle.setRightPadding(rightSpinner.getValue());
+        mobileStyle.setTopPadding(topSpinner.getValue());
+        mobileStyle.setBottomPadding(bottomSpinner.getValue());
+        ArrayList<String> initialIconNamesList = initialIconConfigPane.update();
+        ArrayList<String> selectedIconNamesList = selectedIconConfigPane.update();
+        mobileStyle.setInitialIconNames(initialIconNamesList.toArray(new String[initialIconNamesList.size()]));
+        mobileStyle.setSelectedIconNames(selectedIconNamesList.toArray(new String[selectedIconNamesList.size()]));
+        FRFont initialFont = initialFontConfPane.updateFont(null, null, null);
+        FRFont selectedFont = initialFontConfPane.updateFont(selectedFontColor.getColor(), selectedFontBold.isSelected(), null);
+        mobileStyle.setInitialFont(initialFont);
+        mobileStyle.setSelectedFont(selectedFont);
+        return mobileStyle;
+    }
+
+    @Override
+    protected String title4PopupWindow() {
+        return null;
+    }
+}
--- 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
@ -0,0 +1,279 @@
+package com.fr.design.mainframe.mobile.ui.radiogroup;
+
+import com.fr.design.constants.LayoutConstants;
+import com.fr.design.designer.IntervalConstants;
+import com.fr.design.dialog.AttrScrollPane;
+import com.fr.design.dialog.BasicScrollPane;
+import com.fr.design.gui.ibutton.UIColorButton;
+import com.fr.design.gui.icombobox.LineComboBox;
+import com.fr.design.gui.icombobox.UIComboBox;
+import com.fr.design.gui.ilable.UILabel;
+import com.fr.design.gui.ispinner.UISpinner;
+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.design.mainframe.mobile.ui.MobileStyleCustomDefinePane;
+import com.fr.design.mainframe.mobile.utils.DesignerUtils;
+import com.fr.design.mainframe.mobile.utils.FontConfigPane;
+import com.fr.design.style.color.NewColorSelectBox;
+import com.fr.form.ui.Widget;
+import com.fr.form.ui.mobile.MobileStyle;
+import com.fr.form.ui.mobile.radiogroup.UnitedMobileStyle;
+import com.fr.general.FRFont;
+import com.fr.stable.Constants;
+
+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;
+
+public class UnitedCustomDefinePane extends MobileStyleCustomDefinePane {
+
+    private JPanel scrollPanel;
+    private UIComboBox custom;
+    private JPanel centerPane;
+
+    private UISpinner leftSpinner;
+    private UISpinner rightSpinner;
+    private UISpinner topSpinner;
+    private UISpinner bottomSpinner;
+
+    private NewColorSelectBox initialColorSelectBox;
+    private NewColorSelectBox selectedColorSelectBox;
+
+    private LineComboBox borderLineCombo;
+    private NewColorSelectBox borderColor;
+    private UISpinner borderRadiusSpinner;
+
+    private FontConfigPane initialFontConfPane;
+    private UIColorButton selectedFontColor;
+
+    public UnitedCustomDefinePane(Widget widget) {
+        super(widget);
+    }
+
+    @Override
+    protected JPanel createPreviewPane() {
+        return null;
+    }
+
+    @Override
+    protected void init() {
+        this.setLayout(FRGUIPaneFactory.createBorderLayout());
+        this.addScrollPane();
+        this.addStyleSelectPane();
+        this.addConfigPane();
+    }
+
+    private void addScrollPane() {
+        scrollPanel = FRGUIPaneFactory.createBorderLayout_S_Pane();
+        BasicScrollPane basicScrollPane = new AttrScrollPane() {
+            @Override
+            protected JPanel createContentPane() {
+                return scrollPanel;
+            }
+        };
+        this.add(basicScrollPane);
+    }
+
+    private void addStyleSelectPane() {
+        JPanel stylePanel = new JPanel();
+        stylePanel.setLayout(new FlowLayout(FlowLayout.LEFT, 5, 0));
+        UILabel buttonStyleLabel = DesignerUtils.createConfigLabel(Toolkit.i18nText("Fine-Plugin-RadioGroup_Style"));
+        custom = new UIComboBox(new String[]{Toolkit.i18nText("Fine-Plugin-RadioGroup_Style_Default"),
+                Toolkit.i18nText("Fine-Plugin-RadioGroup_Style_Custom")});
+        custom.setPreferredSize(new Dimension(DesignerUtils.NORMAL_COMBO_WIDTH, 20));
+        custom.addItemListener(new ItemListener() {
+            @Override
+            public void itemStateChanged(ItemEvent e) {
+                boolean isCustom = custom.getSelectedIndex() == 1;
+                centerPane.setVisible(isCustom);
+            }
+        });
+        stylePanel.add(buttonStyleLabel);
+        stylePanel.add(custom);
+        scrollPanel.add(stylePanel, BorderLayout.NORTH);
+    }
+
+    private void addConfigPane() {
+        centerPane = createCenterPane();
+        centerPane.setVisible(false);
+
+        addPaddingPane();
+        addBackgroundPane();
+        addBorderPane();
+        addFontPane();
+
+        scrollPanel.add(centerPane, BorderLayout.CENTER);
+        custom.setSelectedIndex(1);
+    }
+
+    private JPanel createCenterPane() {
+        return FRGUIPaneFactory.createVerticalFlowLayout_Pane(true, FlowLayout.LEADING, 0, 10);
+    }
+
+    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 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);
+
+        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 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);
+
+        double p = TableLayout.PREFERRED;
+        double[] rowSize = {p, p};
+        double[] columnSize = {p, p};
+        JPanel paddingPanel = TableLayoutHelper.createCommonTableLayoutPane(new Component[][]{
+                {paddingHintLabel, vPaddingSpinnerPanel},
+                {emptyHintLabel, hPaddingSpinnerPanel},
+        }, rowSize, columnSize, 10);
+
+        centerPane.add(paddingPanel);
+    }
+
+    private void addBackgroundPane() {
+        centerPane.add(DesignerUtils.createTitleSplitLine(Toolkit.i18nText("Fine-Plugin-RadioGroup_Background")));
+
+        UILabel initialColorLabel = DesignerUtils.createConfigLabel(Toolkit.i18nText("Fine-Plugin-RadioGroup_Background_Init"));
+        initialColorSelectBox = DesignerUtils.createNormalColorSelectBox(new ChangeListener() {
+            @Override
+            public void stateChanged(ChangeEvent e) {
+            }
+        });
+        initialColorSelectBox.setSelectObject(Color.WHITE);
+        JPanel initialColorSelectPane = TableLayoutHelper.createGapTableLayoutPane(new Component[][]{new Component[]{initialColorLabel, initialColorSelectBox}}, TableLayoutHelper.FILL_LASTCOLUMN, IntervalConstants.INTERVAL_L1, LayoutConstants.VGAP_MEDIUM);
+        centerPane.add(initialColorSelectPane);
+
+        UILabel selectedColorLabel = DesignerUtils.createConfigLabel(Toolkit.i18nText("Fine-Plugin-RadioGroup_Background_Select"));
+        selectedColorSelectBox = DesignerUtils.createNormalColorSelectBox(new ChangeListener() {
+            @Override
+            public void stateChanged(ChangeEvent e) {
+
+            }
+        });
+        selectedColorSelectBox.setSelectObject(new Color(31, 173, 229));
+        JPanel selectedColorSelectPane = TableLayoutHelper.createGapTableLayoutPane(new Component[][]{new Component[]{selectedColorLabel, selectedColorSelectBox}}, TableLayoutHelper.FILL_LASTCOLUMN, IntervalConstants.INTERVAL_L1, LayoutConstants.VGAP_MEDIUM);
+        centerPane.add(selectedColorSelectPane);
+    }
+
+    private void addBorderPane() {
+        centerPane.add(DesignerUtils.createTitleSplitLine(Toolkit.i18nText("Fine-Plugin-RadioGroup_Border")));
+
+        UILabel borderTypeLabel = DesignerUtils.createConfigLabel(Toolkit.i18nText("Fine-Plugin-RadioGroup_Border_Line"));
+        borderLineCombo = new LineComboBox(DesignerUtils.BORDER_LINE_STYLE_ARRAY);
+        borderLineCombo.setSelectedLineStyle(Constants.LINE_THIN);
+
+        UILabel colorLabel = DesignerUtils.createConfigLabel(Toolkit.i18nText("Fine-Plugin-RadioGroup_Border_Color"));
+        borderColor = DesignerUtils.createNormalColorSelectBox(new ChangeListener() {
+            @Override
+            public void stateChanged(ChangeEvent e) {
+            }
+        });
+        borderColor.setSelectObject(new Color(31, 173, 229) );
+
+        UILabel radiusLabel = DesignerUtils.createConfigLabel(Toolkit.i18nText("Fine-Plugin-RadioGroup_Border_Radius"));
+        borderRadiusSpinner = new UISpinner(0, Integer.MAX_VALUE, 1, 2);
+        borderRadiusSpinner.setPreferredSize(new Dimension(DesignerUtils.NORMAL_COMBO_WIDTH, 20));
+
+        double p = TableLayout.PREFERRED;
+        double[] rowSize = {p, p, p};
+        double[] columnSize = {p, p};
+        JPanel borderPanel = TableLayoutHelper.createCommonTableLayoutPane(new Component[][] {
+                {borderTypeLabel, borderLineCombo},
+                {colorLabel, borderColor},
+                {radiusLabel, borderRadiusSpinner}
+        }, rowSize, columnSize, 10);
+
+        centerPane.add(borderPanel);
+
+    }
+
+    private void addFontPane() {
+        centerPane.add(DesignerUtils.createTitleSplitLine(Toolkit.i18nText("Fine-Plugin-RadioGroup_Font")));
+
+        UILabel initialFontLabel = DesignerUtils.createConfigLabel(Toolkit.i18nText("Fine-Plugin-RadioGroup_Font_init"));
+        initialFontConfPane = new FontConfigPane();
+        initialFontConfPane.setFontColor(new Color(31, 173, 229));
+        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"));
+        selectedFontColor = new UIColorButton();
+        selectedFontColor.setPreferredSize(new Dimension(20, 20));
+        selectedFontColor.setColor(Color.WHITE);
+        JPanel selectFontColorPanel = TableLayoutHelper.createGapTableLayoutPane(new Component[][]{new Component[]{selectedFontLabel, selectedFontColor}}, TableLayoutHelper.FILL_LASTCOLUMN, IntervalConstants.INTERVAL_L1, LayoutConstants.VGAP_MEDIUM);
+        centerPane.add(selectFontColorPanel);
+
+    }
+
+    @Override
+    public void populateBean(MobileStyle ob) {
+        UnitedMobileStyle mobileStyle = (UnitedMobileStyle) ob;
+        custom.setSelectedIndex(mobileStyle.isCustom() ? 1 : 0);
+        leftSpinner.setValue(mobileStyle.getLeftPadding());
+        rightSpinner.setValue(mobileStyle.getRightPadding());
+        topSpinner.setValue(mobileStyle.getTopPadding());
+        bottomSpinner.setValue(mobileStyle.getBottomPadding());
+        initialColorSelectBox.setSelectObject(mobileStyle.getInitialBackgroundColor());
+        selectedColorSelectBox.setSelectObject(mobileStyle.getSelectedBackgroundColor());
+        borderLineCombo.setSelectedLineStyle(mobileStyle.getBorderType());
+        borderColor.setSelectObject(mobileStyle.getBorderColor());
+        borderRadiusSpinner.setValue(mobileStyle.getBorderRadius());
+        if(mobileStyle.getInitialFont() != null) {
+            initialFontConfPane.populate(mobileStyle.getInitialFont());
+        }
+        if(mobileStyle.getSelectedFont() != null) {
+            selectedFontColor.setColor(mobileStyle.getSelectedFont().getForeground());
+        }
+    }
+
+    @Override
+    public MobileStyle updateBean() {
+        UnitedMobileStyle mobileStyle = (UnitedMobileStyle)this.widget.getMobileStyle();
+
+        mobileStyle.setCustom(custom.getSelectedIndex() == 1);
+        mobileStyle.setLeftPadding(leftSpinner.getValue());
+        mobileStyle.setRightPadding(rightSpinner.getValue());
+        mobileStyle.setTopPadding(topSpinner.getValue());
+        mobileStyle.setBottomPadding(bottomSpinner.getValue());
+        mobileStyle.setInitialBackgroundColor(initialColorSelectBox.getSelectObject());
+        mobileStyle.setSelectedBackgroundColor(selectedColorSelectBox.getSelectObject());
+        mobileStyle.setBorderType(borderLineCombo.getSelectedLineStyle());
+        mobileStyle.setBorderColor(borderColor.getSelectObject());
+        mobileStyle.setBorderRadius(borderRadiusSpinner.getValue());
+
+        FRFont initialFont = initialFontConfPane.updateFont(null, null, null);
+        FRFont selectedFont = initialFontConfPane.updateFont(selectedFontColor.getColor(), null, null);
+        selectedFont.setForeground(selectedFontColor.getColor());
+
+        mobileStyle.setInitialFont(initialFont);
+        mobileStyle.setSelectedFont(selectedFont);
+
+        return mobileStyle;
+    }
+
+    @Override
+    protected String title4PopupWindow() {
+        return null;
+    }
+}
--- a/designer-base/src/main/java/com/fr/design/mainframe/mobile/ui/topparam/MobileTopParamPane.java
+++ b/designer-base/src/main/java/com/fr/design/mainframe/mobile/ui/topparam/MobileTopParamPane.java
@ -0,0 +1,44 @@
+package com.fr.design.mainframe.mobile.ui.topparam;
+
+import com.fr.design.beans.BasicBeanPane;
+import com.fr.design.gui.icheckbox.UICheckBox;
+import com.fr.design.i18n.Toolkit;
+import com.fr.design.layout.FRGUIPaneFactory;
+import com.fr.form.ui.mobile.impl.MobileTopParamStyle;
+
+import javax.swing.*;
+import java.awt.*;
+
+public class MobileTopParamPane extends BasicBeanPane<MobileTopParamStyle> {
+    private UICheckBox autoCommitCheckBox;
+
+    public MobileTopParamPane() {
+        this.init();
+    }
+
+    private void init() {
+        this.setLayout(FRGUIPaneFactory.createBorderLayout());
+        JPanel panel = FRGUIPaneFactory.createTitledBorderPane(Toolkit.i18nText("Fine-Plugin-TopParam_Setting"));
+        panel.setLayout(new FlowLayout(FlowLayout.LEFT, 0, 0));
+        autoCommitCheckBox = new UICheckBox(Toolkit.i18nText("Fine-Plugin-TopParam_AutoCommit"), true);
+        panel.add(autoCommitCheckBox);
+        this.add(panel, BorderLayout.CENTER);
+    }
+
+    @Override
+    public void populateBean(MobileTopParamStyle topParamStyle) {
+        autoCommitCheckBox.setSelected(topParamStyle.isAutoCommit());
+    }
+
+    @Override
+    public MobileTopParamStyle updateBean() {
+        MobileTopParamStyle topParamStyle = new MobileTopParamStyle();
+        topParamStyle.setAutoCommit(autoCommitCheckBox.isSelected());
+        return topParamStyle;
+    }
+
+    @Override
+    protected String title4PopupWindow() {
+        return null;
+    }
+}
--- 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
@ -0,0 +1,57 @@
+package com.fr.design.mainframe.mobile.utils;
+
+import com.fr.design.constants.LayoutConstants;
+import com.fr.design.designer.IntervalConstants;
+import com.fr.design.gui.icheckbox.UICheckBox;
+import com.fr.design.gui.ilable.UILabel;
+import com.fr.design.layout.TableLayoutHelper;
+import com.fr.design.mainframe.widget.UITitleSplitLine;
+import com.fr.design.style.color.NewColorSelectBox;
+import com.fr.stable.Constants;
+
+import javax.swing.*;
+import javax.swing.event.ChangeListener;
+import java.awt.*;
+
+public class DesignerUtils {
+
+    public static final int NORMAL_COMBO_WIDTH = 152;
+    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[] BORDER_LINE_STYLE_ARRAY = new int[]{
+            Constants.LINE_NONE,
+            Constants.LINE_THIN,
+            Constants.LINE_MEDIUM,
+            Constants.LINE_THICK,
+    };
+
+    public static UITitleSplitLine createTitleSplitLine(String title) {
+        UITitleSplitLine splitLine = new UITitleSplitLine(title, 520);
+        splitLine.setPreferredSize(new Dimension(520, 20));
+        return splitLine;
+    }
+
+    public static UILabel createConfigLabel(String title) {
+        UILabel label = new UILabel(title, UILabel.RIGHT);
+        label.setPreferredSize(new Dimension(100, 20));
+        return label;
+    }
+
+    public static NewColorSelectBox createNormalColorSelectBox(ChangeListener changeListener) {
+        NewColorSelectBox colorSelectBox = new NewColorSelectBox(NORMAL_COMBO_WIDTH);
+        colorSelectBox.addSelectChangeListener(changeListener);
+        return colorSelectBox;
+    }
+
+    public static UICheckBox createCheckBox(String text, boolean selected) {
+        UICheckBox uiCheckBox = new UICheckBox(text, selected);
+        return uiCheckBox;
+    }
+
+    public static JPanel createLeftRightComponentsPane(Component... components) {
+        return TableLayoutHelper.createGapTableLayoutPane(new Component[][]{components}, TableLayoutHelper.FILL_LASTCOLUMN, IntervalConstants.INTERVAL_L1, LayoutConstants.VGAP_MEDIUM);
+    }
+
+}
--- a/designer-base/src/main/java/com/fr/design/mainframe/mobile/utils/FontConfigPane.java
+++ b/designer-base/src/main/java/com/fr/design/mainframe/mobile/utils/FontConfigPane.java
@ -0,0 +1,137 @@
+package com.fr.design.mainframe.mobile.utils;
+
+import com.fr.base.BaseUtils;
+import com.fr.base.Utils;
+import com.fr.design.gui.ibutton.UIColorButton;
+import com.fr.design.gui.ibutton.UIToggleButton;
+import com.fr.design.gui.icombobox.UIComboBox;
+import com.fr.general.FRFont;
+
+import javax.swing.*;
+import javax.swing.event.ChangeEvent;
+import javax.swing.event.ChangeListener;
+import javax.swing.event.EventListenerList;
+import java.awt.*;
+import java.awt.event.ItemEvent;
+import java.awt.event.ItemListener;
+import java.util.Vector;
+
+public class FontConfigPane extends JPanel {
+    private static final Icon[] ITALIC_ICONS = {BaseUtils.readIcon("/com/fr/design/images/m_format/cellstyle/italic.png"), BaseUtils.readIcon("/com/fr/design/images/m_format/cellstyle/italic_white.png")};
+    private static final Icon[] BOLD_ICONS = {BaseUtils.readIcon("/com/fr/design/images/m_format/cellstyle/bold.png"), BaseUtils.readIcon("/com/fr/design/images/m_format/cellstyle/bold_white.png")};
+
+    private EventListenerList fontChangeListener = new EventListenerList();
+    private UIComboBox fontFamily;
+    private UIComboBox fontSize;
+    private UIToggleButton bold;
+    private UIColorButton color;
+    private UIToggleButton italic;
+
+
+    public FontConfigPane() {
+        super();
+        init();
+    }
+
+    private void init() {
+        this.setLayout(new FlowLayout(FlowLayout.LEFT, 5, 0));
+        fontFamily = new UIComboBox(Utils.getAvailableFontFamilyNames4Report());
+        Vector<Integer> integerList = new Vector<>();
+        for (int i = 1; i < 100; i++) {
+            integerList.add(i);
+        }
+        fontFamily.setPreferredSize(new Dimension(152, 20));
+        fontSize = new UIComboBox(integerList);
+        fontSize.setSelectedIndex(14);
+        color = new UIColorButton();
+        bold = new UIToggleButton(BOLD_ICONS, true);
+        italic = new UIToggleButton(ITALIC_ICONS, true);
+        fontFamily.addItemListener(new ItemListener() {
+            @Override
+            public void itemStateChanged(ItemEvent e) {
+                fireFontStateChanged();
+            }
+        });
+        fontSize.addItemListener(new ItemListener() {
+            @Override
+            public void itemStateChanged(ItemEvent e) {
+                fireFontStateChanged();
+            }
+        });
+        bold.addChangeListener(new ChangeListener() {
+            @Override
+            public void stateChanged(ChangeEvent e) {
+                fireFontStateChanged();
+            }
+        });
+        italic.addChangeListener(new ChangeListener() {
+            @Override
+            public void stateChanged(ChangeEvent e) {
+                fireFontStateChanged();
+            }
+        });
+        color.addColorChangeListener(new ChangeListener() {
+            @Override
+            public void stateChanged(ChangeEvent e) {
+                fireFontStateChanged();
+            }
+        });
+        this.add(fontFamily);
+        this.add(fontSize);
+        this.add(color);
+        this.add(bold);
+        this.add(italic);
+
+    }
+
+    public void setFontColor(Color fontColor) {
+        color.setColor(fontColor);
+    }
+
+    public FRFont updateFont(Color fontColor, Boolean isBold, Boolean isItalic) {
+        String family = (String) fontFamily.getSelectedItem();
+        int size = (int) fontSize.getSelectedItem();
+        int style = Font.PLAIN;
+        boolean bold = (isBold == null) ? this.bold.isSelected() : isBold;
+        boolean italic = (isItalic == null) ? this.italic.isSelected() : isItalic;
+        style += bold ? Font.BOLD : Font.PLAIN;
+        style += italic ? Font.ITALIC : Font.PLAIN;
+        FRFont frFont = FRFont.getInstance(family, style, size, fontColor == null ? color.getColor() : fontColor);
+        return frFont;
+    }
+
+    public FRFont update() {
+        String family = (String) fontFamily.getSelectedItem();
+        int size = (int) fontSize.getSelectedItem();
+        int style = Font.PLAIN;
+        style += this.bold.isSelected() ? Font.BOLD : Font.PLAIN;
+        style += this.italic.isSelected() ? Font.ITALIC : Font.PLAIN;
+        return FRFont.getInstance(family, style, size, color.getColor());
+    }
+
+    public void populate(FRFont frFont) {
+        fontFamily.setSelectedItem(frFont.getFamily());
+        fontSize.setSelectedItem(frFont.getSize());
+        color.setColor(frFont.getForeground());
+        bold.setSelected(frFont.isBold());
+        italic.setSelected(frFont.isItalic());
+
+    }
+
+    /**
+     * 颜色状态改变
+     */
+    public void fireFontStateChanged() {
+        Object[] listeners = fontChangeListener.getListenerList();
+        ChangeEvent e = null;
+
+        for (int i = listeners.length - 2; i >= 0; i -= 2) {
+            if (listeners[i] == ChangeListener.class) {
+                if (e == null) {
+                    e = new ChangeEvent(this);
+                }
+                ((ChangeListener) listeners[i + 1]).stateChanged(e);
+            }
+        }
+    }
+}
--- a/designer-base/src/main/java/com/fr/design/mainframe/mobile/utils/IconConfigPane.java
+++ b/designer-base/src/main/java/com/fr/design/mainframe/mobile/utils/IconConfigPane.java
@ -0,0 +1,185 @@
+package com.fr.design.mainframe.mobile.utils;
+
+import com.fr.base.IconManager;
+import com.fr.design.dialog.BasicDialog;
+import com.fr.design.dialog.DialogActionAdapter;
+import com.fr.design.gui.ibutton.UIButton;
+import com.fr.design.i18n.Toolkit;
+import com.fr.design.layout.FRGUIPaneFactory;
+import com.fr.design.utils.DrawRoutines;
+import com.fr.design.web.CustomIconPane;
+import com.fr.form.ui.WidgetInfoConfig;
+import com.fr.general.FRFont;
+import com.fr.stable.StringUtils;
+
+import javax.swing.*;
+import javax.swing.event.ChangeEvent;
+import javax.swing.event.ChangeListener;
+import javax.swing.plaf.basic.BasicButtonUI;
+import java.awt.BorderLayout;
+import java.awt.Color;
+import java.awt.Cursor;
+import java.awt.Dimension;
+import java.awt.FlowLayout;
+import java.awt.Font;
+import java.awt.Graphics;
+import java.awt.Graphics2D;
+import java.awt.Image;
+import java.awt.event.ActionEvent;
+import java.awt.event.ActionListener;
+
+public class IconConfigPane extends JPanel {
+    private UIButton editIconButton;
+    private UIButton deleteIconButton;
+    private IconButton iconButton;
+
+    public IconConfigPane() {
+        initComp();
+    }
+
+    public void initComp() {
+        this.setLayout(FRGUIPaneFactory.createBorderLayout());
+        JPanel panel = FRGUIPaneFactory.createLeftFlowZeroGapBorderPane();
+        panel.setBorder(BorderFactory.createEmptyBorder(5, 0, 5, 0));
+        panel.setLayout(new FlowLayout(FlowLayout.LEFT, 5, 0));
+        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(){
+                    protected String createDescriptionText(){
+                        return Toolkit.i18nText("Fine-Design_Mobile_Custom_Icon_Message");
+                    }
+                };
+                BasicDialog editDialog = cip.showWindow(new JFrame());
+                editDialog.addDialogActionListener(new DialogActionAdapter() {
+                    @Override
+                    public void doOk() {
+                        IconConfigPane.this.iconButton.setIconName(cip.update());
+                        IconConfigPane.this.deleteIconButton.setEnabled(true);
+                        IconConfigPane.this.repaint();
+                    }
+                });
+                editDialog.setVisible(true);
+            }
+        });
+        editIconButton.setEnabled(true);
+
+        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) {
+                IconConfigPane.this.iconButton.setIconName(StringUtils.EMPTY);
+                IconConfigPane.this.deleteIconButton.setEnabled(false);
+                IconConfigPane.this.repaint();
+            }
+        });
+        deleteIconButton.setEnabled(false);
+
+
+        this.add(panel, BorderLayout.CENTER);
+
+        JPanel westPane = new JPanel();
+        iconButton = new IconButton("");
+        westPane.add(iconButton);
+        this.add(westPane, BorderLayout.WEST);
+    }
+
+    public void populate(String iconName) {
+        if(StringUtils.isNotEmpty(iconName)) {
+            deleteIconButton.setEnabled(true);
+        } else {
+            deleteIconButton.setEnabled(false);
+        }
+        iconButton.setIconName(iconName);
+    }
+
+    public String update() {
+        return iconButton.getIconName();
+    }
+
+
+    private class IconButton extends JToggleButton implements ActionListener {
+        private String iconName;
+        private Image iconImage = null;
+        private static final int ICON_BUTTON_SIZE = 20;
+        private static final int ICON_X = 2;
+        private static final int ICON_Y = 2;
+
+        public IconButton(String name) {
+            this.iconName = name;
+            this.addActionListener(this);
+            this.setBackground(Color.WHITE);
+            this.setCursor(new Cursor(Cursor.HAND_CURSOR));
+            this.iconImage = WidgetInfoConfig.getInstance().getIconManager().getIconImage(name);
+        }
+
+        @Override
+        public void updateUI() {
+            setUI(new BasicButtonUI() {
+                public void paint(Graphics g, JComponent c) {
+                    super.paint(g, c);
+                }
+            });
+        }
+
+        protected void paintBorder(Graphics g) {
+            super.paintBorder(g);
+            if (StringUtils.isNotEmpty(iconButton.getIconName())) {
+                DrawRoutines.drawRoundedBorder(
+                        g, Color.decode("#419BF9"), 0, 0, 20, 20);
+            } else {
+                DrawRoutines.drawRoundedBorder(
+                        g, Color.decode("#D9DADD"), 0, 0, 20, 20);
+            }
+
+        }
+
+        public String getIconName() {
+            return iconName;
+        }
+
+        public void setIconName(String iconName) {
+            this.iconName = iconName;
+            this.iconImage = WidgetInfoConfig.getInstance().getIconManager().getIconImage(iconName);
+            this.repaint();
+        }
+
+        @Override
+        public void paintComponent(Graphics g) {
+            super.paintComponent(g);
+            Graphics2D g2d = (Graphics2D) g;
+            // carl:这里缩放显示 16 × 16
+            if (iconImage != null) {
+                g2d.drawImage(iconImage, ICON_X, ICON_Y, IconManager.DEFAULT_ICONWIDTH, IconManager.DEFAULT_ICONHEIGHT, null);
+            }
+        }
+
+        @Override
+        public Dimension getPreferredSize() {
+            return new Dimension(ICON_BUTTON_SIZE, ICON_BUTTON_SIZE);
+        }
+
+        public void actionPerformed(ActionEvent evt) {
+            IconConfigPane.this.repaint();// repaint
+        }
+
+        @Override
+        public void addChangeListener(ChangeListener changeListener) {
+            this.changeListener = changeListener;
+        }
+
+        private void fireChagneListener() {
+            if (this.changeListener != null) {
+                ChangeEvent evt = new ChangeEvent(this);
+                this.changeListener.stateChanged(evt);
+            }
+        }
+
+    }
+}
--- 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
@ -0,0 +1,41 @@
+package com.fr.design.mainframe.mobile.utils;
+
+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;
+import com.fr.design.mainframe.mobile.provider.date.SimpleDateStyleProvider;
+import com.fr.design.mainframe.mobile.provider.date.SimpleStyleProvider;
+import com.fr.design.mainframe.mobile.provider.radiogroup.CapsuleRadioGroupStyleProvider;
+import com.fr.design.mainframe.mobile.provider.radiogroup.ImageRadioGroupStyleProvider;
+import com.fr.design.mainframe.mobile.provider.radiogroup.UnitedRadioGroupStyleProvider;
+import com.fr.design.mainframe.mobile.provider.topparam.MobileTopParamStyleProvider;
+import com.fr.stable.fun.mark.Mutable;
+
+import java.util.HashMap;
+import java.util.HashSet;
+import java.util.Map;
+import java.util.Set;
+
+public class MobileStyleProviderManager {
+    private static Set<Mutable> mobileWidgetStyleProviderSet = new HashSet<Mutable>() {{
+        add(new SimpleStyleProvider());
+        add(new NavigationStyleProvider());
+        add(new SimpleDateStyleProvider());
+        add(new SimpleComboStyleProvider());
+        add(new SimpleComboCheckBoxStyleProvider());
+        add(new CapsuleRadioGroupStyleProvider());
+        add(new UnitedRadioGroupStyleProvider());
+        add(new ImageRadioGroupStyleProvider());
+    }};
+    private static Set<Mutable> mobileParamUIProviderSet = new HashSet<Mutable>() {{
+        add(new MobileTopParamStyleProvider());
+    }};
+    private static Map<String, Set<Mutable>> map = new HashMap<String, Set<Mutable>>() {{
+        put("MobileWidgetStyleProvider", mobileWidgetStyleProviderSet);
+        put("MobileParamUIProvider", mobileParamUIProviderSet);
+    }};
+
+    public static <T extends Mutable> Set<T> getArray(String mark) {
+        return (Set<T>) map.get(mark);
+    }
+}
--- a/designer-form/src/main/java/com/fr/design/widget/ui/designer/mobile/ParaMobileDefinePane.java
+++ b/designer-form/src/main/java/com/fr/design/widget/ui/designer/mobile/ParaMobileDefinePane.java
@ -20,19 +20,12 @@ import com.fr.design.mainframe.widget.accessibles.AccessibleMobileParamEditor;
 import com.fr.form.ui.container.WParameterLayout;
 import com.fr.form.ui.container.WSortLayout;
 import com.fr.form.ui.mobile.MobileParamStyle;
-import com.fr.general.CloudCenter;
-import com.fr.log.FineLoggerFactory;

 import com.fr.report.mobile.EmptyMobileParamStyle;
 import javax.swing.BorderFactory;
 import javax.swing.JPanel;
 import java.awt.BorderLayout;
 import java.awt.Component;
-import java.awt.Cursor;
-import java.awt.Desktop;
-import java.awt.event.MouseAdapter;
-import java.awt.event.MouseEvent;
-import java.net.URI;
 import java.util.Set;

 /**
@ -75,7 +68,6 @@ public class ParaMobileDefinePane extends MobileWidgetDefinePane {
    // 手机属性
    private UIExpandablePane getMobilePropertyPane() {
        mobileParamEditor = new AccessibleMobileParamEditor(new MobileParamSettingPane());
-        UILabel tipLabel = getTipLabel();
        double f = TableLayout.FILL;
        double p = TableLayout.PREFERRED;
        double[] rowSize = {p, p};
@ -83,7 +75,6 @@ public class ParaMobileDefinePane extends MobileWidgetDefinePane {
        int[][] rowCount = {{1, 1}, {1, 1}};
        Component[][] components = new Component[][]{
                new Component[]{new UILabel(com.fr.design.i18n.Toolkit.i18nText("Fine-Design_Mobile_Param_Style")), mobileParamEditor},
-                new Component[]{tipLabel, null},
        };
        JPanel panel = TableLayoutHelper.createGapTableLayoutPane(components, rowSize, columnSize, rowCount, IntervalConstants.INTERVAL_W0, IntervalConstants.INTERVAL_L1);
        JPanel jPanel = FRGUIPaneFactory.createBorderLayout_S_Pane();
@ -92,48 +83,6 @@ public class ParaMobileDefinePane extends MobileWidgetDefinePane {
        return new UIExpandablePane(com.fr.design.i18n.Toolkit.i18nText("Fine-Design_Report_Properties_Mobile"), 280, 20, jPanel);
    }

-    private UILabel getTipLabel() {
-        UILabel tipLabel = new UILabel();
-        StringBuilder text = new StringBuilder();
-        text.append("<html><font color=gray>").append(com.fr.design.i18n.Toolkit.i18nText("Fine-Design_Report_Properties_Mobile_Tip"))
-        .append("</font><font color=blue><u>").append(com.fr.design.i18n.Toolkit.i18nText("Fine-Design_Report_Properties_Mobile_Install_Parameter_Pane_Plugin"))
-        .append("</u></font><font color=gray>").append(com.fr.design.i18n.Toolkit.i18nText("Fine-Design_Report_Properties_Mobile_To_Get_More_Style"))
-        .append("</font></html>");
-        tipLabel.setText(text.toString());
-        tipLabel.addMouseListener(new MouseAdapter() {
-            @Override
-            public void mouseClicked(MouseEvent e) {
-                try {
-                    Desktop.getDesktop().browse(new URI(CloudCenter.getInstance().acquireUrlByKind("plugin.mobile.style")));
-                } catch (Exception exp) {
-                    FineLoggerFactory.getLogger().error(exp.getMessage(), exp);
-                }
-            }
-            @Override
-            public void mouseEntered(MouseEvent e) {
-                Object source = e.getSource();
-                if (source instanceof UILabel) {
-                    ((UILabel) source).setCursor(new Cursor(Cursor.HAND_CURSOR));
-                }
-            }
-            @Override
-            public void mouseExited(MouseEvent e) {
-                Object source = e.getSource();
-                if (source instanceof UILabel) {
-                    ((UILabel) source).setCursor(new Cursor(Cursor.DEFAULT_CURSOR));
-                }
-            }
-            @Override
-            public void mouseMoved(MouseEvent e) {
-                Object source = e.getSource();
-                if (source instanceof UILabel) {
-                    ((UILabel) source).setCursor(new Cursor(Cursor.HAND_CURSOR));
-                }
-            }
-        });
-        return tipLabel;
-    }
-
    // 控件顺序
    private UIExpandablePane getMobileWidgetListPane() {
        mobileWidgetListPane = new MobileWidgetListPane(designer, (WSortLayout) paraCreator.toData());
--- a/designer-realize/src/main/java/com/fr/design/javascript/ListenerEditPane.java
+++ b/designer-realize/src/main/java/com/fr/design/javascript/ListenerEditPane.java
@ -7,6 +7,7 @@ import com.fr.design.fun.JavaScriptActionProvider;
 import com.fr.design.gui.icombobox.UIComboBox;
 import com.fr.design.gui.ilable.UILabel;
 import com.fr.design.gui.itextfield.UITextField;
+import com.fr.design.hyperlink.popup.MobilePopupPane;
 import com.fr.design.i18n.Toolkit;
 import com.fr.design.layout.FRGUIPaneFactory;
 import com.fr.design.mainframe.DesignerContext;
@ -39,6 +40,7 @@ public class ListenerEditPane extends BasicBeanPane<Listener> {
    private static final String DBCOMMIT = Toolkit.i18nText("Fine-Design_Basic_JavaScript_Commit_To_Database");
    private static final String CUSTOMACTION = Toolkit.i18nText("Fine-Design_Report_Submit_Type_Custom");
    private static final String EMAIL = Toolkit.i18nText("Fine-Design_Report_Email_Sent_Email");
+    private static final String MOBILEPOPUP = Toolkit.i18nText("FR-Plugin-Designer_Mobile_Popup");

    private Listener listener;

@ -62,7 +64,7 @@ public class ListenerEditPane extends BasicBeanPane<Listener> {
        nameText = new UITextField(8);
        nameText.setEditable(false);
        namePane.add(nameText, BorderLayout.WEST);
-        final String[] style = {JS, DBCOMMIT, CUSTOMACTION, EMAIL};
+        final String[] style = {JS, DBCOMMIT, CUSTOMACTION, EMAIL, MOBILEPOPUP};
        styleBox = new UIComboBox(style);
        namePane.add(styleBox);
        namePane = GUICoreUtils.createFlowPane(new Component[]{
@ -90,10 +92,14 @@ public class ListenerEditPane extends BasicBeanPane<Listener> {
        // 发送邮件
        EmailPane emailPane = new EmailPane();
        hyperlinkPane.add(EMAIL, emailPane);
+        // 移动端弹窗
+        MobilePopupPane mobilePopupPane = new MobilePopupPane();
+        hyperlinkPane.add(MOBILEPOPUP, mobilePopupPane);
        cards.add(javaScriptPane);
        cards.add(commit2DBJavaScriptPane);
        cards.add(customActionPane);
        cards.add(emailPane);
+        cards.add(mobilePopupPane);
        //其他事件
        addOtherEvent();
        hyperlinkPane.setBorder(BorderFactory.createTitledBorder(Toolkit.i18nText("Fine-Design_Report_JavaScript_Set")));
--- a/designer-realize/src/main/java/com/fr/start/module/DesignerActivator.java
+++ b/designer-realize/src/main/java/com/fr/start/module/DesignerActivator.java
@ -36,6 +36,7 @@ import com.fr.design.gui.controlpane.NameObjectCreator;
 import com.fr.design.gui.controlpane.NameableCreator;
 import com.fr.design.hyperlink.ReportletHyperlinkPane;
 import com.fr.design.hyperlink.WebHyperlinkPane;
+import com.fr.design.hyperlink.popup.MobilePopupPane;
 import com.fr.design.i18n.DesignI18nImpl;
 import com.fr.design.javascript.EmailPane;
 import com.fr.design.javascript.JavaScriptImplPane;
@ -79,6 +80,7 @@ import com.fr.general.GeneralContext;
 import com.fr.general.xml.GeneralXMLTools;
 import com.fr.js.EmailJavaScript;
 import com.fr.js.JavaScriptImpl;
+import com.fr.js.MobilePopupHyperlink;
 import com.fr.js.ParameterJavaScript;
 import com.fr.js.ReportletHyperlink;
 import com.fr.js.WebHyperlink;
@ -277,7 +279,8 @@ public class DesignerActivator extends Activator implements Prepare {
                new NameObjectCreator(com.fr.design.i18n.Toolkit.i18nText("Fine-Design_Basic_Email"), EmailJavaScript.class, EmailPane.class),
                new NameObjectCreator(com.fr.design.i18n.Toolkit.i18nText("Fine-Design_Basic_Hyperlink_Web_Link"), WebHyperlink.class, WebHyperlinkPane.ChartNoRename.class),
                new NameObjectCreator(com.fr.design.i18n.Toolkit.i18nText("Fine-Design_Basic_JavaScript_Dynamic_Parameters"), ParameterJavaScript.class, ParameterJavaScriptPane.ChartNoRename.class),
-                new NameObjectCreator(com.fr.design.i18n.Toolkit.i18nText("Fine-Design_Report_JavaScript"), JavaScriptImpl.class, JavaScriptImplPane.ChartNoRename.class)
+                new NameObjectCreator(com.fr.design.i18n.Toolkit.i18nText("Fine-Design_Report_JavaScript"), JavaScriptImpl.class, JavaScriptImplPane.ChartNoRename.class),
+                new NameObjectCreator(com.fr.design.i18n.Toolkit.i18nText("FR-Plugin-Designer_Mobile_Popup"), MobilePopupHyperlink.class, MobilePopupPane.class),
        };
    }