@lingxiteam/theme-utils 0.2.0 → 0.2.1

package/README.md

@@ -87,12 +87,16 @@ insertLink('12312', 'http://xxx.css', true);
 ```ts
   {
     type: '类型',
+    // 所有的 css 有一个父级类名，理论上每一个都需要这个配置，是为了兼容第一版本的数据，因为组件太多，要全部重写一遍需要工作量，所以只修改了异常的组件
+    hasPrefixClass: true,
+    // 隐藏自定义类名按钮，当前只有pc端容器
+    hiddenCustomCss: true,
     variable: {
       // 允许配置项
-      fontSize: { 
+      fontSize: {
         // 对应编辑器的类型，px color select marginInput 四种
-        type: 'px', 
-        label: '尺寸', 
+        type: 'px',
+        label: '尺寸',
         groupsName: '文字' ,
         desc: '说明文字'，
         // 继承其他组件属性时要标记不可编辑
@@ -112,6 +116,8 @@ insertLink('12312', 'http://xxx.css', true);
     ],
     // 根据上面的配置项和下面的模版解析得到最终挂在的 css
     tpl: '.hh { font-size: fontSize}',
+    // 如果它被别人继承，并且自己需要自定义样式，如父级自定义样式为 .aa.list{ .item { } } 子级的自定义样式为 .aa.item { }
+    itemCustomTpl: '',
     // 预览用数据，编辑器中推拽出来的 dsl ，可直接复制，View 下的 components，维护时如预览页面有变更，可直接替换这个数据，无需详细比对
     components: [],
   };
@@ -124,5 +130,5 @@ insertLink('12312', 'http://xxx.css', true);
 如： theme-utils/src/lx-mobile.ts#L63 和 theme-utils/src/lx.ts#L62
 
 ```ts
-const extend: any = { }
-```
+const extend: any = {};
+```

package/dist/config/Button.js

@@ -52,7 +52,7 @@ export var Button = {
     fontSize: '14px',
     backgroundColor: '#47e',
     borderColor: '#D8E0EC',
-    borderRadius: '8px',
+    borderRadius: '2px',
     paddingValue: '4px 24px 4px 24px',
     marginValue: '0px'
   }],

package/dist/config/Card.js

@@ -104,7 +104,7 @@ export var Card = {
     bodyColor: '#fff',
     lineColor: '#f0f0f0'
   }],
-  tpl: "\n  .pcfactory-card{\n    border-radius: borderRadius;\n  }\n  .ued-card.pcfactory-card-bordered .pcfactory-card-head {\n    background-color: backgroundColor;\n    border-color: lineColor;\n    border-top-left-radius: borderRadius;\n    border-top-right-radius: borderRadius;\n  }\n  .ued-card.pcfactory-card-bordered {\n    border-color: borderColor;\n  }\n  .ued-card.pcfactory-card-bordered {\n    border-color: borderColor;\n  }\n  .ued-card .ued-card-title-icon-auto>i {\n    color: titleColor;\n    margin-right: tagMargin;\n  }\n  .ued-card .ued-card-title-icon-auto span{\n    color: titleColor;\n    margin-right: tagMargin;\n  }\n  .ued-card .ued-card-title::before {\n    color: titleColor;\n    margin-right: tagMargin;\n  }\n    .ued-card .ued-card-title-icon-auto>i svg{\n      width: tagSize;\n      height: tagSize;\n  }\n   .ued-card .ued-card-title-icon-auto span svg{\n      width: tagSize;\n      height: tagSize;\n  }\n  .ued-card .pcfactory-card-body{\n    background-color: bodyColor;\n    border-bottom-right-radius: borderRadius;\n    border-bottom-left-radius: borderRadius;\n  }",
+  tpl: "\n  .pcfactory-card{\n    border-radius: borderRadius;\n  }\n  .ued-card.pcfactory-card-bordered .pcfactory-card-head {\n    background-color: backgroundColor;\n    border-color: lineColor;\n    border-top-left-radius: borderRadius;\n    border-top-right-radius: borderRadius;\n  }\n  .ued-card.pcfactory-card-bordered {\n    border-color: borderColor;\n  }\n  .ued-card.pcfactory-card-bordered {\n    border-color: borderColor;\n  }\n  .ued-card .ued-card-title-icon-auto>i {\n    color: titleColor;\n    margin-right: tagMargin;\n  }\n  .ued-card .ued-card-title-icon-auto span{\n    color: titleColor;\n    margin-right: tagMargin;\n  }\n  .ued-card .ued-card-title::before {\n    color: titleColor;\n    background: titleColor;\n    margin-right: tagMargin;\n  }\n    .ued-card .ued-card-title-icon-auto>i svg{\n      width: tagSize;\n      height: tagSize;\n  }\n   .ued-card .ued-card-title-icon-auto span svg{\n      width: tagSize;\n      height: tagSize;\n  }\n  .ued-card .pcfactory-card-body{\n    background-color: bodyColor;\n    border-bottom-right-radius: borderRadius;\n    border-bottom-left-radius: borderRadius;\n  }",
   components: [{
     id: 'Card_813627',
     label: '卡片',

package/dist/config/Cascader.d.ts

@@ -1,5 +1,6 @@
 export declare const Cascader: {
     type: string;
+    hasPrefixClass: boolean;
     variable: {
         labelTextColor: {
             type: string;

package/dist/config/Cascader.js

@@ -1,5 +1,6 @@
 export var Cascader = {
   type: 'Cascader',
+  hasPrefixClass: true,
   variable: {
     labelTextColor: {
       type: 'color',
@@ -82,7 +83,7 @@ export var Cascader = {
     iconTop: '16px',
     iconColor: 'rgba(28,36,46,.25)'
   }],
-  tpl: ".ued-cascader-wrap .pcfactory-select-arrow{\n      color: iconColor;\n      width: iconFontSize;\n      height: iconFontSize;\n      top: iconTop;\n      .anticon>svg{\n        width: iconFontSize;\n        height: iconFontSize;\n      }\n    }\n    .ued-cascader-wrap .pcfactory-select-clear{\n      color: iconColor;\n      width: iconFontSize;\n      height: iconFontSize;\n      top: iconTop;\n      .anticon>svg{\n        width: iconFontSize;\n        height: iconFontSize;\n      }\n    }",
+  tpl: ".ued-cascader-wrap {\n    .pcfactory-select-arrow{\n      color: iconColor;\n      width: iconFontSize;\n      height: iconFontSize;\n      top: iconTop;\n      .anticon>svg{\n        width: iconFontSize;\n        height: iconFontSize;\n      }\n    }\n    .pcfactory-select-clear{\n      color: iconColor;\n      width: iconFontSize;\n      height: iconFontSize;\n      top: iconTop;\n      .anticon>svg{\n        width: iconFontSize;\n        height: iconFontSize;\n      }\n    }\n\n  }",
   components: [{
     id: 'Form_180373',
     label: '表单',

package/dist/config/Checkbox.d.ts

@@ -1,5 +1,6 @@
 export declare const Checkbox: {
     type: string;
+    hasPrefixClass: boolean;
     variable: {
         labelTextColor: {
             type: string;

package/dist/config/Checkbox.js

@@ -1,5 +1,6 @@
 export var Checkbox = {
   type: 'Checkbox',
+  hasPrefixClass: true,
   variable: {
     labelTextColor: {
       type: 'color',
@@ -77,7 +78,7 @@ export var Checkbox = {
     radioSeBorderColor: '#47e',
     radioSeBgColor: '#47e'
   }],
-  tpl: ".pcfactory-checkbox-inner{\n      width: radioSize;\n      height: radioSize;\n      border-color: radioBorderColor;\n      background: radioBgColor;\n    }\n    .pcfactory-checkbox-checked .pcfactory-checkbox-inner{\n      border-color: radioSeBorderColor;\n      background: radioSeBgColor;\n    }\n    .pcfactory-checkbox-input:focus+.pcfactory-checkbox-inner{\n      border-color: radioSeBorderColor;\n  }\n   .pcfactory-checkbox-wrapper:hover .pcfactory-checkbox{\n    border-color: radioSeBorderColor;\n}\n.pcfactory-checkbox:hover .pcfactory-checkbox-inner {\n      border-color: radioSeBorderColor;\n  }\n  .pcfactory-form-item input[type=checkbox], .pcfactory-form-item input[type=radio]{\n    width: radioSize;\n    height: radioSize;\n  }\n  .pcfactory-checkbox-indeterminate .pcfactory-checkbox-inner:after{\n    background: radioSeBgColor;\n    width: calc(0.47* radioSize);\n    height: calc(0.47* radioSize);\n  }\n  .pcfactory-checkbox-checked .pcfactory-checkbox-inner:after{\n    width: calc(0.35* radioSize);\n    height: calc(0.57* radioSize);\n  }",
+  tpl: ".ued-checkbox-wrap{\n    .pcfactory-checkbox-inner{\n      width: radioSize;\n      height: radioSize;\n      border-color: radioBorderColor;\n      background: radioBgColor;\n    }\n    .pcfactory-checkbox-checked .pcfactory-checkbox-inner{\n      border-color: radioSeBorderColor;\n      background: radioSeBgColor;\n    }\n    .pcfactory-checkbox-input:focus+.pcfactory-checkbox-inner{\n      border-color: radioSeBorderColor;\n  }\n   .pcfactory-checkbox-wrapper:hover .pcfactory-checkbox{\n    border-color: radioSeBorderColor;\n}\n.pcfactory-checkbox:hover .pcfactory-checkbox-inner {\n      border-color: radioSeBorderColor;\n  }\n  .pcfactory-form-item input[type=checkbox], .pcfactory-form-item input[type=radio]{\n    width: radioSize;\n    height: radioSize;\n  }\n  .pcfactory-checkbox-indeterminate .pcfactory-checkbox-inner:after{\n    background: radioSeBgColor;\n    width: calc(0.47* radioSize);\n    height: calc(0.47* radioSize);\n  }\n  .pcfactory-checkbox-checked .pcfactory-checkbox-inner:after{\n    width: calc(0.35* radioSize);\n    height: calc(0.57* radioSize);\n  }\n  }",
   components: [{
     id: 'Form_180373',
     label: '表单',

package/dist/config/CheckboxGroup.d.ts

@@ -1,5 +1,6 @@
 export declare const CheckboxGroup: {
     type: string;
+    hasPrefixClass: boolean;
     variable: {
         labelTextColor: {
             type: string;

package/dist/config/CheckboxGroup.js

@@ -1,5 +1,6 @@
 export var CheckboxGroup = {
   type: 'CheckboxGroup',
+  hasPrefixClass: true,
   variable: {
     labelTextColor: {
       type: 'color',
@@ -77,7 +78,7 @@ export var CheckboxGroup = {
     radioSeBorderColor: '#47e',
     radioSeBgColor: '#47e'
   }],
-  tpl: ".pcfactory-checkbox-inner{\n      width: radioSize;\n      height: radioSize;\n      border-color: radioBorderColor;\n      background: radioBgColor;\n    }\n    .pcfactory-checkbox-checked .pcfactory-checkbox-inner{\n      border-color: radioSeBorderColor;\n      background: radioSeBgColor;\n    }\n    .pcfactory-checkbox-input:focus+.pcfactory-checkbox-inner{\n      border-color: radioSeBorderColor;\n  }\n  .pcfactory-checkbox-wrapper:hover .pcfactory-checkbox{\n    border-color: radioSeBorderColor;\n}\n .pcfactory-checkbox:hover .pcfactory-checkbox-inner {\n      border-color: radioSeBorderColor;\n  }\n  .pcfactory-form-item input[type=checkbox]{\n    width: radioSize;\n    height: radioSize;\n  }\n   .pcfactory-form-item input[type=radio]{\n    width: radioSize;\n    height: radioSize;\n  }\n  .pcfactory-checkbox-indeterminate .pcfactory-checkbox-inner:after{\n    background: radioSeBgColor;\n    width: calc(0.47* radioSize);\n    height: calc(0.47* radioSize);\n  }\n  .pcfactory-checkbox-checked .pcfactory-checkbox-inner:after{\n    width: calc(0.35* radioSize);\n    height: calc(0.57* radioSize);\n  }",
+  tpl: ".ued-checkboxgroup-wrap {\n    .pcfactory-checkbox-inner{\n      width: radioSize;\n      height: radioSize;\n      border-color: radioBorderColor;\n      background: radioBgColor;\n    }\n    .pcfactory-checkbox-checked .pcfactory-checkbox-inner{\n      border-color: radioSeBorderColor;\n      background: radioSeBgColor;\n    }\n    .pcfactory-checkbox-input:focus+.pcfactory-checkbox-inner{\n      border-color: radioSeBorderColor;\n  }\n  .pcfactory-checkbox-wrapper:hover .pcfactory-checkbox{\n    border-color: radioSeBorderColor;\n}\n .pcfactory-checkbox:hover .pcfactory-checkbox-inner {\n      border-color: radioSeBorderColor;\n  }\n  .pcfactory-form-item input[type=checkbox]{\n    width: radioSize;\n    height: radioSize;\n  }\n   .pcfactory-form-item input[type=radio]{\n    width: radioSize;\n    height: radioSize;\n  }\n  .pcfactory-checkbox-indeterminate .pcfactory-checkbox-inner:after{\n    background: radioSeBgColor;\n    width: calc(0.47* radioSize);\n    height: calc(0.47* radioSize);\n  }\n  .pcfactory-checkbox-checked .pcfactory-checkbox-inner:after{\n    width: calc(0.35* radioSize);\n    height: calc(0.57* radioSize);\n  }\n  }",
   components: [{
     id: 'Form_180373',
     label: '表单',

package/dist/config/Container.d.ts

@@ -1,5 +1,6 @@
 export declare const Container: {
     type: string;
+    hiddenCustomCss: boolean;
     variable: {
         textColor: {
             type: string;

package/dist/config/Container.js

@@ -1,5 +1,6 @@
 export var Container = {
   type: 'Container',
+  hiddenCustomCss: true,
   variable: {
     textColor: {
       type: 'color',

package/dist/config/DatePicker.d.ts

@@ -1,5 +1,6 @@
 export declare const DatePicker: {
     type: string;
+    hasPrefixClass: boolean;
     variable: {
         labelTextColor: {
             type: string;

package/dist/config/DatePicker.js

@@ -1,5 +1,6 @@
 export var DatePicker = {
   type: 'DatePicker',
+  hasPrefixClass: true,
   variable: {
     labelTextColor: {
       type: 'color',
@@ -75,7 +76,7 @@ export var DatePicker = {
     iconFontSize: '14px',
     iconColor: '#0085D0'
   }],
-  tpl: ".ued-datePicker-wrap .pcfactory-picker-suffix{\n    color: iconColor;\n    width: iconFontSize;\n    height: iconFontSize;\n    .anticon>svg{\n      width: iconFontSize;\n      height: iconFontSize;\n    }\n  }\n  .ued-datePicker-wrap .pcfactory-picker-clear{\n    color: iconColor;\n    width: iconFontSize;\n    height: iconFontSize;\n    .anticon>svg{\n      width: iconFontSize;\n      height: iconFontSize;\n    }\n  }",
+  tpl: ".ued-datePicker-wrap {\n    .pcfactory-picker-suffix{\n      color: iconColor;\n      width: iconFontSize;\n      height: iconFontSize;\n      .anticon>svg{\n        width: iconFontSize;\n        height: iconFontSize;\n      }\n    }\n   .pcfactory-picker-clear{\n      color: iconColor;\n      width: iconFontSize;\n      height: iconFontSize;\n      .anticon>svg{\n        width: iconFontSize;\n        height: iconFontSize;\n      }\n    }\n  }",
   components: [{
     id: 'Form_180373',
     label: '表单',

package/dist/config/Description.d.ts

@@ -1,5 +1,6 @@
 export declare const Description: {
     type: string;
+    hasPrefixClass: boolean;
     variable: {
         borderColor: {
             type: string;

package/dist/config/Description.js

@@ -1,5 +1,6 @@
 export var Description = {
   type: 'Description',
+  hasPrefixClass: true,
   variable: {
     borderColor: {
       type: 'color',

package/dist/config/Form.d.ts

@@ -1,5 +1,6 @@
 export declare const Form: {
     type: string;
+    hasPrefixClass: boolean;
     variable: {
         backgroundColor: {
             type: string;

package/dist/config/Form.js

@@ -1,5 +1,6 @@
 export var Form = {
   type: 'Form',
+  hasPrefixClass: true,
   variable: {
     backgroundColor: {
       type: 'color',
@@ -86,7 +87,7 @@ export var Form = {
   // 下拉单选与下拉复选样式一致
   // 滑动输入条没有边框样式
   // TODO: 树选择器，联级选择器效果待确认
-  tpl: "\n    .ued-legacy-form-wrap{\n      background-color: backgroundColor;\n    }\n    .ued-legacy-form-wrap.pcfactory-form-vertical .pcfactory-form-item-label>label{\n      color: labelTextColor;\n      line-height: labelLineHeight;\n      font-size: labelFontSize;\n    }\n    .pcfactory-input-affix-wrapper {\n      border-color: itemBorderColor;\n      border-radius: itemBorderRadius;\n    }\n    .pcfactory-input{\n      border-color: itemBorderColor;\n      border-radius: itemBorderRadius;\n      color: textColor;\n      font-size: fontSize;\n    }\n    .ued-inputNumber-wrap.pcfactory-input-number{\n      border-color: itemBorderColor;\n      border-radius: itemBorderRadius;\n      color: textColor;\n      font-size: fontSize;\n    }\n    .verificationCodePC-inputContent{\n      border-color: itemBorderColor;\n      border-radius: itemBorderRadius;\n      height: auto;\n      min-height: 32px;\n    }\n    .pcfactory-radio-wrapper{\n      color: textColor;\n      font-size: fontSize;\n    }\n    .pcfactory-checkbox-wrapper{\n      color: textColor;\n      font-size: fontSize;\n    }\n    .ued-select-wrap .pcfactory-select{\n      color: textColor;\n      font-size: fontSize;\n    }\n    .pcfactory-select-multiple .ued-select-checked-tag{\n      color: textColor;\n      font-size: fontSize;\n      min-height: 24px;\n      height: auto;\n      padding: 4px 8px 4px 8px;\n    }\n    .pcfactory-select-single:not(.pcfactory-select-customize-input) .pcfactory-select-selector::after{\n      line-height: fontSize;\n    }\n    span.pcfactory-radio+*{\n      color: textColor;\n      font-size: fontSize;\n    }\n    .pcfactory-select-selector{\n      height: auto;\n      border-color: itemBorderColor;\n      border-radius: itemBorderRadius;\n    }\n    .ued-select-wrap .pcfactory-select-selection-item{\n      color: textColor;\n      font-size: fontSize;\n    }\n    .pcfactory-checkbox+span{\n      color: textColor;\n      font-size: fontSize;\n    }\n    .ued-stdupload-wrap .pcfactory-upload.pcfactory-upload-select.pcfactory-upload-select-text button{\n      height: auto;\n    }\n    .ued-cascader-wrap .pcfactory-select-selection-item{\n      color: textColor;\n      font-size: fontSize;\n    }\n    .ued-treeSelect-wrap .pcfactory-select-selection-item{\n      color: textColor;\n      font-size: fontSize;\n    }\n    .pcfactory-picker-input > input{\n      color: textColor;\n      font-size: fontSize;\n    }\n    .pcfactory-picker{\n      border-color: itemBorderColor;\n      border-radius: itemBorderRadius;\n    }\n    .ued-stdupload-wrap .pcfactory-upload.pcfactory-upload-select.pcfactory-upload-select-text button>span{\n      color: textColor;\n      font-size: fontSize;\n    }\n    .ued-stdupload-wrap .pcfactory-upload.pcfactory-upload-select.pcfactory-upload-select-text button{\n      border-color: itemBorderColor;\n      border-radius: itemBorderRadius;\n    }\n    .pcfactory-select:not(.pcfactory-select-customize-input) .pcfactory-select-selector{\n      border-color: itemBorderColor;\n      border-radius: itemBorderRadius;\n      height: auto;\n      min-height: 32px;\n    }\n    .pcfactory-select-single .pcfactory-select-selector .pcfactory-select-selection-item, .pcfactory-select-single .pcfactory-select-selector .pcfactory-select-selection-placeholder{\n      line-height: 2;\n      font-size: fontSize;\n    }\n    .pcfactory-select-multiple .pcfactory-select-selection-placeholder{\n      font-size: fontSize;\n    }\n    .ued-rateContainer .pcfactory-rate{\n      font-size: fontSize;\n    }\n    .ued-rateContainer-rateText{\n      color: textColor;\n      font-size: fontSize;\n    }\n    ",
+  tpl: ".ued-legacy-form-wrap{\n      background-color: backgroundColor;\n      &.pcfactory-form-vertical .pcfactory-form-item-label>label{\n        color: labelTextColor;\n        line-height: labelLineHeight;\n        font-size: labelFontSize;\n      }\n      .pcfactory-input-affix-wrapper {\n        border-color: itemBorderColor;\n        border-radius: itemBorderRadius;\n      }\n      .pcfactory-input{\n        border-color: itemBorderColor;\n        border-radius: itemBorderRadius;\n        color: textColor;\n        font-size: fontSize;\n      }\n      .ued-inputNumber-wrap.pcfactory-input-number{\n        border-color: itemBorderColor;\n        border-radius: itemBorderRadius;\n        color: textColor;\n        font-size: fontSize;\n      }\n      .verificationCodePC-inputContent{\n        border-color: itemBorderColor;\n        border-radius: itemBorderRadius;\n        height: auto;\n        min-height: 32px;\n      }\n      .pcfactory-radio-wrapper{\n        color: textColor;\n        font-size: fontSize;\n      }\n      .pcfactory-checkbox-wrapper{\n        color: textColor;\n        font-size: fontSize;\n      }\n      .ued-select-wrap .pcfactory-select{\n        color: textColor;\n        font-size: fontSize;\n      }\n      .pcfactory-select-multiple .ued-select-checked-tag{\n        color: textColor;\n        font-size: fontSize;\n        min-height: 24px;\n        height: auto;\n        padding: 4px 8px 4px 8px;\n      }\n      .pcfactory-select-single:not(.pcfactory-select-customize-input) .pcfactory-select-selector::after{\n        line-height: fontSize;\n      }\n      span.pcfactory-radio+*{\n        color: textColor;\n        font-size: fontSize;\n      }\n      .pcfactory-select-selector{\n        height: auto;\n        border-color: itemBorderColor;\n        border-radius: itemBorderRadius;\n      }\n      .ued-select-wrap .pcfactory-select-selection-item{\n        color: textColor;\n        font-size: fontSize;\n      }\n      .pcfactory-checkbox+span{\n        color: textColor;\n        font-size: fontSize;\n      }\n      .ued-stdupload-wrap .pcfactory-upload.pcfactory-upload-select.pcfactory-upload-select-text button{\n        height: auto;\n      }\n      .ued-cascader-wrap .pcfactory-select-selection-item{\n        color: textColor;\n        font-size: fontSize;\n      }\n      .ued-treeSelect-wrap .pcfactory-select-selection-item{\n        color: textColor;\n        font-size: fontSize;\n      }\n      .pcfactory-picker-input > input{\n        color: textColor;\n        font-size: fontSize;\n      }\n      .pcfactory-picker{\n        border-color: itemBorderColor;\n        border-radius: itemBorderRadius;\n      }\n      .ued-stdupload-wrap .pcfactory-upload.pcfactory-upload-select.pcfactory-upload-select-text button>span{\n        color: textColor;\n        font-size: fontSize;\n      }\n      .ued-stdupload-wrap .pcfactory-upload.pcfactory-upload-select.pcfactory-upload-select-text button{\n        border-color: itemBorderColor;\n        border-radius: itemBorderRadius;\n      }\n      .pcfactory-select:not(.pcfactory-select-customize-input) .pcfactory-select-selector{\n        border-color: itemBorderColor;\n        border-radius: itemBorderRadius;\n        height: auto;\n        min-height: 32px;\n      }\n      .pcfactory-select-single .pcfactory-select-selector .pcfactory-select-selection-item, .pcfactory-select-single .pcfactory-select-selector .pcfactory-select-selection-placeholder{\n        line-height: 2;\n        font-size: fontSize;\n      }\n      .pcfactory-select-multiple .pcfactory-select-selection-placeholder{\n        font-size: fontSize;\n      }\n      .ued-rateContainer .pcfactory-rate{\n        font-size: fontSize;\n      }\n      .ued-rateContainer-rateText{\n        color: textColor;\n        font-size: fontSize;\n      }\n    }\n    \n    ",
   components: [{
     id: 'Form_180373',
     label: '表单',

package/dist/config/Radio.d.ts

@@ -1,5 +1,6 @@
 export declare const Radio: {
     type: string;
+    hasPrefixClass: boolean;
     variable: {
         labelTextColor: {
             type: string;

package/dist/config/Radio.js

@@ -1,5 +1,6 @@
 export var Radio = {
   type: 'Radio',
+  hasPrefixClass: true,
   variable: {
     labelTextColor: {
       type: 'color',
@@ -77,7 +78,7 @@ export var Radio = {
     radioSeBorderColor: '#47e',
     radioSeBgColor: '#fff'
   }],
-  tpl: ".pcfactory-radio-inner{\n      width: radioSize;\n      height: radioSize;\n      border-color: radioBorderColor;\n      background: radioBgColor;\n    }\n    .pcfactory-radio-checked .pcfactory-radio-inner{\n      border-color: radioSeBorderColor;\n      background: radioSeBgColor;\n    }\n    .pcfactory-radio-input:focus+.pcfactory-radio-inner{\n      border-color: radioSeBorderColor;\n  }\n   .pcfactory-radio-wrapper:hover .pcfactory-radio{\n    border-color: radioSeBorderColor;\n}\n .pcfactory-radio:hover .pcfactory-radio-inner {\n      border-color: radioSeBorderColor;\n  }\n  .pcfactory-form-item input[type=checkbox]{\n    width: radioSize;\n    height: radioSize;\n  }\n   .pcfactory-form-item input[type=radio]{\n    width: radioSize;\n    height: radioSize;\n  }\n  .pcfactory-radio-checked .pcfactory-radio-inner:after{\n    background: radioSeBorderColor;\n    margin-left:0px;\n    margin-top:0px;\n    top:-1%;\n    left:-3%;\n    border-radius: radioSize;\n    width: radioSize;\n    height: radioSize;\n  }",
+  tpl: ".ued-radio-wrap {\n  .pcfactory-radio-inner{\n      width: radioSize;\n      height: radioSize;\n      border-color: radioBorderColor;\n      background: radioBgColor;\n    }\n    .pcfactory-radio-checked .pcfactory-radio-inner{\n      border-color: radioSeBorderColor;\n      background: radioSeBgColor;\n    }\n    .pcfactory-radio-input:focus+.pcfactory-radio-inner{\n      border-color: radioSeBorderColor;\n  }\n   .pcfactory-radio-wrapper:hover .pcfactory-radio{\n    border-color: radioSeBorderColor;\n}\n .pcfactory-radio:hover .pcfactory-radio-inner {\n      border-color: radioSeBorderColor;\n  }\n  .pcfactory-form-item input[type=checkbox]{\n    width: radioSize;\n    height: radioSize;\n  }\n   .pcfactory-form-item input[type=radio]{\n    width: radioSize;\n    height: radioSize;\n  }\n  .pcfactory-radio-checked .pcfactory-radio-inner:after{\n    background: radioSeBorderColor;\n    margin-left:0px;\n    margin-top:0px;\n    top:-1%;\n    left:-3%;\n    border-radius: radioSize;\n    width: radioSize;\n    height: radioSize;\n  }\n}",
   components: [{
     id: 'Form_180373',
     label: '表单',

package/dist/config/RangePicker.d.ts

@@ -1,5 +1,6 @@
 export declare const RangePicker: {
     type: string;
+    hasPrefixClass: boolean;
     variable: {
         labelTextColor: {
             type: string;

package/dist/config/RangePicker.js

@@ -1,5 +1,6 @@
 export var RangePicker = {
   type: 'RangePicker',
+  hasPrefixClass: true,
   variable: {
     labelTextColor: {
       type: 'color',
@@ -81,7 +82,7 @@ export var RangePicker = {
     iconColor: '#0085D0',
     lineColor: '#1c242e'
   }],
-  tpl: ".ued-datePicker-wrap .pcfactory-picker-suffix{\n      color: iconColor;\n      width: iconFontSize;\n      height: iconFontSize;\n      .anticon>svg{\n        width: iconFontSize;\n        height: iconFontSize;\n      }\n    }\n    .ued-datePicker-wrap .pcfactory-picker-clear{\n      color: iconColor;\n      width: iconFontSize;\n      height: iconFontSize;\n      .anticon>svg{\n        width: iconFontSize;\n        height: iconFontSize;\n      }\n    }\n    .ued-datePicker-wrap .pcfactory-picker-range-separator{\n      color: lineColor;\n    }",
+  tpl: ".ued-datePicker-wrap {\n    .pcfactory-picker-suffix{\n      color: iconColor;\n      width: iconFontSize;\n      height: iconFontSize;\n      .anticon>svg{\n        width: iconFontSize;\n        height: iconFontSize;\n      }\n    }\n    .pcfactory-picker-clear{\n      color: iconColor;\n      width: iconFontSize;\n      height: iconFontSize;\n      .anticon>svg{\n        width: iconFontSize;\n        height: iconFontSize;\n      }\n    }\n    .pcfactory-picker-range-separator{\n      color: lineColor;\n    }\n  }",
   components: [{
     id: 'Form_180373',
     label: '表单',

package/dist/config/Select.d.ts

@@ -1,5 +1,6 @@
 export declare const Select: {
     type: string;
+    hasPrefixClass: boolean;
     variable: {
         labelTextColor: {
             type: string;

package/dist/config/Select.js

@@ -1,5 +1,6 @@
 export var Select = {
   type: 'Select',
+  hasPrefixClass: true,
   variable: {
     labelTextColor: {
       type: 'color',
@@ -82,7 +83,7 @@ export var Select = {
     iconTop: '16px',
     iconColor: 'rgba(28,36,46,.25)'
   }],
-  tpl: ".ued-select-wrap .pcfactory-select-arrow{\n    color: iconColor;\n    width: iconFontSize;\n    height: iconFontSize;\n    top: iconTop;\n    .anticon>svg{\n      width: iconFontSize;\n      height: iconFontSize;\n    }\n  }\n  .ued-select-wrap .pcfactory-select-clear{\n    color: iconColor;\n    width: iconFontSize;\n    height: iconFontSize;\n    top: iconTop;\n    .anticon>svg{\n      width: iconFontSize;\n      height: iconFontSize;\n    }\n  }",
+  tpl: ".ued-select-wrap {\n    .pcfactory-select-arrow{\n      color: iconColor;\n      width: iconFontSize;\n      height: iconFontSize;\n      top: iconTop;\n      .anticon>svg{\n        width: iconFontSize;\n        height: iconFontSize;\n      }\n    }\n    .pcfactory-select-clear{\n      color: iconColor;\n      width: iconFontSize;\n      height: iconFontSize;\n      top: iconTop;\n      .anticon>svg{\n        width: iconFontSize;\n        height: iconFontSize;\n      }\n    }\n  }",
   components: [{
     id: 'Form_180373',
     label: '表单',

package/dist/config/StdUpload.d.ts

@@ -1,5 +1,6 @@
 export declare const StdUpload: {
     type: string;
+    hasPrefixClass: boolean;
     variable: {
         labelTextColor: {
             type: string;

package/dist/config/StdUpload.js

@@ -1,5 +1,6 @@
 export var StdUpload = {
   type: 'StdUpload',
+  hasPrefixClass: true,
   variable: {
     labelTextColor: {
       type: 'color',
@@ -87,7 +88,7 @@ export var StdUpload = {
     listIconColor: 'rgba(0,0,0,.45)',
     lisIconSize: '14px'
   }],
-  tpl: "\n    .ued-stdupload-wrap .pcfactory-upload-list-item-info .anticon-loading .anticon{\n      color: listIconColor;\n      > svg{\n        width: lisIconSize;\n        height: lisIconSize;\n      }\n    }\n     .pcfactory-upload-list-item-info .pcfactory-upload-text-icon .anticon{\n      color: listIconColor;\n      > svg{\n        width: lisIconSize;\n        height: lisIconSize;\n      }\n    }\n    .ued-stdupload-wrap .pcfactory-upload-list-item-error{\n      color: #ff7474;\n   }\n   .pcfactory-upload-list-item-error .pcfactory-upload-list-item-name{\n    color: #ff7474;\n }\n .pcfactory-upload-list-item-error .pcfactory-upload-text-icon>.anticon{\n       color: #ff7474;\n    }\n    .ued-stdupload-wrap .pcfactory-upload-list-item-info a{\n      color: listTextColor;\n      font-size: listFontSize;\n    }\n    .ued-stdupload-wrap .pcfactory-upload-list-item-info:hover a{\n      color: listTextColor;\n      font-size: listFontSize;\n    }\n    .ued-stdupload-wrap .pcfactory-upload-list-item-card-actions .anticon{\n      color: listIconColor;\n      > svg{\n        width: lisIconSize;\n        height: lisIconSize;\n      }\n    }",
+  tpl: ".ued-stdupload-wrap {\n    \n   .ued-stdUpload-item-info a {\n      color: listTextColor;\n      font-size: listFontSize;\n    }\n    .ued-stdUpload-item-info:hover a{\n      color: listTextColor;\n      font-size: listFontSize;\n    }\n    .ued-stdUpload-item-icon .anticon-loading .anticon{\n      color: listIconColor;\n      > svg{\n        width: lisIconSize;\n        height: lisIconSize;\n      }\n    }\n    .ued-stdUpload-item-icon .anticon{\n      color: listIconColor;\n      > svg{\n        width: lisIconSize;\n        height: lisIconSize;\n      }\n    }\n   .ued-stdUpload-item-error .ued-stdUpload-item-icon  .anticon-loading .anticon{\n    color: #ff7474;\n   }\n   .ued-stdUpload-item-error .ued-stdUpload-item-icon .anticon{\n    color: #ff7474;\n   }\n  }\n    ",
   components: [{
     id: 'Form_180373',
     label: '表单',

package/dist/config/Tabs.js

@@ -128,7 +128,7 @@ export var Tabs = {
     fontWeight: '300',
     activeFontWeight: '300'
   }],
-  tpl: ".ued-tabs-wrap .pcfactory-tabs > .pcfactory-tabs-nav .pcfactory-tabs-nav-wrap{\n    background-color: headBgColor;\n  }\n  .ued-tabs-wrap .pcfactory-tabs-nav .pcfactory-tabs-tab-active{\n    background-color: activeBgColor;\n    border-top-left-radius: activeRadius;\n    border-top-right-radius: activeRadius;\n\n  }\n  .ued-tabs-wrap .pcfactory-tabs-ink-bar{\n    background-color: activeFColor;\n  }\n  .ued-tabs-wrap .pcfactory-tabs{\n    background-color: bodyColor;\n    border-radius: borderRadius;\n  }\n  .ued-tabs-wrap .pcfactory-tabs-nav .pcfactory-tabs-tab{\n    padding: paddingValue;\n    margin: marginValue;\n  }\n  .ued-tabs-wrap .pcfactory-tabs-nav .pcfactory-tabs-tab .pcfactory-tabs-tab-btn{\n    color: textColor;\n    line-height: lineHeight;\n    font-size: fontSize;\n    font-weight: fontWeight;\n  }\n  .ued-tabs-wrap .pcfactory-tabs-nav .pcfactory-tabs-tab-active .pcfactory-tabs-tab-btn{\n    color: activeTextColor;\n    font-weight: activeFontWeight;\n  }",
+  tpl: ".pcfactory-tabs .pcfactory-tabs > .pcfactory-tabs-nav .pcfactory-tabs-nav-wrap{\n    background-color: headBgColor;\n  }\n  .pcfactory-tabs .pcfactory-tabs-nav .pcfactory-tabs-tab-active{\n    background-color: activeBgColor;\n    border-top-left-radius: activeRadius;\n    border-top-right-radius: activeRadius;\n  }\n  .pcfactory-tabs .pcfactory-tabs-ink-bar{\n    background-color: activeFColor;\n  }\n  .pcfactory-tabs{\n    background-color: bodyColor;\n    border-radius: borderRadius;\n  }\n  .pcfactory-tabs .pcfactory-tabs-nav .pcfactory-tabs-tab{\n    padding: paddingValue;\n    margin: marginValue;\n  }\n  .pcfactory-tabs .pcfactory-tabs-nav .pcfactory-tabs-tab .pcfactory-tabs-tab-btn{\n    color: textColor;\n    line-height: lineHeight;\n    font-size: fontSize;\n    font-weight: fontWeight;\n  }\n  .pcfactory-tabs .pcfactory-tabs-nav .pcfactory-tabs-tab-active .pcfactory-tabs-tab-btn{\n    color: activeTextColor;\n    font-weight: activeFontWeight;\n  }",
   components: [{
     id: 'Tabs_9165146',
     label: '标签页',

package/dist/config/Tag.js

@@ -46,7 +46,7 @@ export var Tag = {
     closeColor: 'rgba(0,0,0,.45)',
     closeSize: '10px'
   }],
-  tpl: ".ued-tag-wrap .pcfactory-tag{\n    background: backgroundColor;\n    padding: paddingValue;\n    border-radius: borderRadius;\n    font-size: fontSize;\n  }\n  .ued-tag-wrap .pcfactory-tag .pcfactory-tag-close-icon { \n    color: closeColor;\n    > svg{\n      width: closeSize;\n      height: closeSize;\n    }\n  }",
+  tpl: ".pcfactory-tag{\n    background: backgroundColor;\n    padding: paddingValue;\n    border-radius: borderRadius;\n    font-size: fontSize;\n  }\n  .pcfactory-tag .pcfactory-tag-close-icon { \n    color: closeColor;\n    > svg{\n      width: closeSize;\n      height: closeSize;\n    }\n  }",
   components: [{
     id: 'Tag_6939955',
     label: '标签',

package/dist/config/TimePicker.d.ts

@@ -1,5 +1,6 @@
 export declare const TimePicker: {
     type: string;
+    hasPrefixClass: boolean;
     variable: {
         labelTextColor: {
             type: string;

package/dist/config/TimePicker.js

@@ -1,5 +1,6 @@
 export var TimePicker = {
   type: 'TimePicker',
+  hasPrefixClass: true,
   variable: {
     labelTextColor: {
       type: 'color',
@@ -75,7 +76,7 @@ export var TimePicker = {
     iconFontSize: '14px',
     iconColor: '#0085D0'
   }],
-  tpl: ".ued-datePicker-wrap .pcfactory-picker-suffix{\n      color: iconColor;\n      width: iconFontSize;\n      height: iconFontSize;\n      .anticon>svg{\n        width: iconFontSize;\n        height: iconFontSize;\n      }\n    }\n    .ued-datePicker-wrap .pcfactory-picker-clear{\n      color: iconColor;\n      width: iconFontSize;\n      height: iconFontSize;\n      .anticon>svg{\n        width: iconFontSize;\n        height: iconFontSize;\n      }\n    }",
+  tpl: ".ued-datePicker-wrap {\n    .pcfactory-picker-suffix{\n      color: iconColor;\n      width: iconFontSize;\n      height: iconFontSize;\n      .anticon>svg{\n        width: iconFontSize;\n        height: iconFontSize;\n      }\n    }\n   .pcfactory-picker-clear{\n      color: iconColor;\n      width: iconFontSize;\n      height: iconFontSize;\n      .anticon>svg{\n        width: iconFontSize;\n        height: iconFontSize;\n      }\n    }\n  }",
   components: [{
     id: 'Form_180373',
     label: '表单',

package/dist/config/TreeSelect.d.ts

@@ -1,5 +1,6 @@
 export declare const TreeSelect: {
     type: string;
+    hasPrefixClass: boolean;
     variable: {
         labelTextColor: {
             type: string;

package/dist/config/TreeSelect.js

@@ -1,5 +1,6 @@
 export var TreeSelect = {
   type: 'TreeSelect',
+  hasPrefixClass: true,
   variable: {
     labelTextColor: {
       type: 'color',
@@ -82,7 +83,7 @@ export var TreeSelect = {
     iconColor: 'rgba(28,36,46,.25)',
     iconTop: '16px'
   }],
-  tpl: ".ued-treeSelect-wrap .pcfactory-select-arrow{\n      color: iconColor;\n      width: iconFontSize;\n      height: iconFontSize;\n      top: iconTop;\n      .anticon>svg{\n        width: iconFontSize;\n        height: iconFontSize;\n      }\n    }\n    .ued-treeSelect-wrap .pcfactory-select-clear{\n      color: iconColor;\n      width: iconFontSize;\n      height: iconFontSize;\n      top: iconTop;\n      .anticon>svg{\n        width: iconFontSize;\n        height: iconFontSize;\n      }\n    }",
+  tpl: ".ued-treeSelect-wrap {\n    .pcfactory-select-arrow{\n      color: iconColor;\n      width: iconFontSize;\n      height: iconFontSize;\n      top: iconTop;\n      .anticon>svg{\n        width: iconFontSize;\n        height: iconFontSize;\n      }\n    }\n    .pcfactory-select-clear {\n      color: iconColor;\n      width: iconFontSize;\n      height: iconFontSize;\n      top: iconTop;\n      .anticon>svg{\n        width: iconFontSize;\n        height: iconFontSize;\n      }\n    }\n  }",
   components: [{
     id: 'Form_180373',
     label: '表单',

package/dist/css.d.ts

@@ -1,6 +1,6 @@
 export declare function stringifyCss(tpl: string, values: any): string;
 export declare function parseCss(tpl: string, a: string): any;
 export declare function normalizeCSS(css: string, selector?: string): string;
-export declare function prefixCSS(css: string, prefix?: string): string;
+export declare function prefixAnyCSS(css: string, prefix?: string, hasPrefix?: boolean): string;
 export declare function insertRules(id: string, rules: string, selector?: HTMLHeadElement): void;
 export declare function insertLink(id: string, href: string, insertBefore?: boolean): void;

package/dist/css.js

@@ -84,10 +84,11 @@ export function normalizeCSS(css, selector) {
 }
 
 // 这个解法不是特别好，但是组件有些是有嵌套的 div 有些是没有嵌套，所以给可用的 class 添加一个 &. 的样式前缀
-export function prefixCSS(css, prefix) {
+export function prefixAnyCSS(css, prefix, hasPrefix) {
   if (prefix) {
     var hasD = prefix.startsWith('.') || prefix.startsWith('#');
     var prefixCss = "".concat(hasD ? '' : '.').concat(prefix);
+    if (hasPrefix) return "".concat(prefixCss).concat(css);
     return css.split('\n').map(function (i) {
       if (i.trimStart().startsWith('.')) {
         return "".concat(prefixCss).concat(i.trimStart());

package/dist/h5config/Accordion.d.ts

@@ -76,6 +76,7 @@ export declare const Accordion: {
             groupsName: string;
         };
     };
+    hasPrefixClass: boolean;
     groupsName: string;
     icon: string;
     title: string;

package/dist/h5config/Accordion.js

@@ -88,6 +88,7 @@ export var Accordion = {
       groupsName: '边框'
     }
   },
+  hasPrefixClass: true,
   groupsName: '容器',
   icon: 'icon-ico-comp-app-Accordion',
   title: '折叠面板',
@@ -107,7 +108,7 @@ export var Accordion = {
     borderColor: '#DDD',
     borderRadius: '4px'
   }],
-  tpl: "\n  .lcdp-accordion .lcdp-accordion-header{\n    color: textColor;\n    font-weight: fontWeight;\n    font-size: fontSize;\n    line-height: lineHeight;\n    background: backgroundColor;\n  }\n  .lcdp-accordion .lcdp-accordion-header-default-icon{\n    height: tagSize;\n    background: titleColor;\n    margin-right: tagMargin;\n  }\n  .adm-list-item-content{\n    border-color: lineColor;\n  }\n\n  .lcdp-accordion .adm-collapse-arrow  svg{\n    color: arrowColor;\n    width:  arrowSize;\n    height: arrowSize;\n  }\n  .lcdp-accordion .adm-list-item-content-main{\n    background: bodyBgColor;\n  }\n  .lcdp-accordion{\n    .adm-collapse{\n      border-radius: borderRadius;\n      border-color: borderColor !important;\n    }\n  }",
+  tpl: ".lcdp-accordion {\n     .lcdp-accordion-header{\n      color: textColor;\n      font-weight: fontWeight;\n      font-size: fontSize;\n      line-height: lineHeight;\n      background: backgroundColor;\n    }\n     .lcdp-accordion-header-default-icon{\n      height: tagSize;\n      background: titleColor;\n      margin-right: tagMargin;\n    }\n    .adm-list-item-content{\n      border-color: lineColor;\n    }\n  \n    .adm-collapse-arrow  svg{\n      color: arrowColor;\n      width:  arrowSize;\n      height: arrowSize;\n    }\n    .adm-list-item-content-main{\n      background: bodyBgColor;\n    }\n    .adm-collapse{\n      border-radius: borderRadius;\n      border-color: borderColor !important;\n    }\n  }\n ",
   components: [{
     id: 'Accordion_960849',
     label: '折叠面板',

package/dist/h5config/Card.d.ts

@@ -1,5 +1,6 @@
 export declare const Card: {
     type: string;
+    hasPrefixClass: boolean;
     variable: {
         textColor: {
             type: string;

package/dist/h5config/Card.js

@@ -1,5 +1,6 @@
 export var Card = {
   type: 'Card',
+  hasPrefixClass: true,
   variable: {
     textColor: {
       type: 'color',
@@ -119,7 +120,7 @@ export var Card = {
     borderColor: 'rgba(0,0,0,0)',
     borderRadius: '4px'
   }],
-  tpl: ".lcdp-h5-card-title{\n      color: textColor;\n      font-weight: fontWeight;\n      font-size: fontSize;\n      line-height: lineHeight;\n    }\n    .lcdp-h5-card-hStyle{\n      background: titleColor;\n      margin-right: tagMargin;\n      position: static;\n      width: tagSize;\n    }\n    .lcdp-h5-card-vStyle{\n      height: tagSize;\n      background: titleColor;\n      margin-right: tagMargin;\n    }\n    .lcdp-h5-card-icon{\n      width:  tagSize;\n      height: tagSize;\n    }\n    .lcdp-h5-card-icon svg{\n      color:  titleColor;\n      width:  tagSize;\n      height: tagSize;\n    }\n    .lcdp-h5-card-icon{\n      margin-right: tagMargin;\n    }\n    .lcdp-h5-card-extra-icon{\n      width:  arrowSize;\n      height: arrowSize;\n    }\n    .lcdp-h5-card-extra-icon svg{\n      color:  arrowColor;\n      width:  arrowSize;\n      height: arrowSize;\n    }\n    .lcdp-h5-card .adm-card-header:not(:last-child){\n      border-color: lineColor !important;\n    }\n    .lcdp-h5-card .adm-card-header{\n      border-color: lineColor !important;\n      background: backgroundColor !important;\n    }\n    .lcdp-h5-card .adm-card-body{\n      background: bodyBgColor;\n    }\n    .lcdp-card-footer-draw-box-border{\n      border-color: bodyLineColor;\n      background: footBgColor;\n    }\n    .lcdp-h5-card {\n      border-radius: borderRadius;\n      border: 1PX solid borderColor;\n    }\n   ",
+  tpl: ".lcdp-h5-card {\n    border-radius: borderRadius;\n    border: 1PX solid borderColor;\n\n    .adm-card-header:not(:last-child){\n      border-color: lineColor !important;\n    }\n    .adm-card-header{\n      border-color: lineColor !important;\n      background: backgroundColor !important;\n    }\n    .adm-card-body{\n      background: bodyBgColor;\n    }\n\n    .adm-card-header-title .lcdp-h5-card-title{\n      color: textColor;\n      font-weight: fontWeight;\n      font-size: fontSize;\n      line-height: lineHeight;\n    }\n\n    .lcdp-h5-card-hStyle{\n      background: titleColor;\n      margin-right: tagMargin;\n      position: static;\n      width: tagSize;\n    }\n    .lcdp-h5-card-vStyle{\n      height: tagSize;\n      background: titleColor;\n      margin-right: tagMargin;\n    }\n    .lcdp-h5-card-icon{\n      width:  tagSize;\n      height: tagSize;\n    }\n    .lcdp-h5-card-icon svg{\n      color:  titleColor;\n      width:  tagSize;\n      height: tagSize;\n    }\n    .lcdp-h5-card-icon{\n      margin-right: tagMargin;\n    }\n    .lcdp-h5-card-extra-icon{\n      width:  arrowSize;\n      height: arrowSize;\n    }\n    .lcdp-h5-card-extra-icon svg{\n      color:  arrowColor;\n      width:  arrowSize;\n      height: arrowSize;\n    }\n    .lcdp-card-footer-draw-box-border{\n      border-color: bodyLineColor;\n      background: footBgColor;\n    }\n  }\n  \n   ",
   components: [{
     id: 'Card_4143673',
     label: '卡片',

package/dist/h5config/DForm.d.ts

@@ -1,5 +1,6 @@
 export declare const DForm: {
     type: string;
+    hasPrefixClass: boolean;
     variable: {
         backgroundColor: {
             type: string;
@@ -110,6 +111,7 @@ export declare const DForm: {
         iconSize: string;
     }[];
     tpl: string;
+    itemCustomTpl: string;
     components: {
         id: string;
         label: string;

package/dist/h5config/DForm.js

@@ -1,5 +1,6 @@
 export var DForm = {
   type: 'DForm',
+  hasPrefixClass: true,
   variable: {
     backgroundColor: {
       type: 'color',
@@ -151,7 +152,8 @@ export var DForm = {
     iconColor: 'rgba(0, 0, 0, 0.45)',
     iconSize: '16px'
   }],
-  tpl: "\n  .dynamic-form-wrapper{\n    background-color: backgroundColor;\n    --color: textColor;\n    --font-size: fontSize;\n  }\n  .adm-text-area{\n    --color: textColor;\n    --font-size: fontSize;\n  }\n  .lingxiteam-dform-title {\n    color: labelTextColor;\n    font-size: labelFontSize !important;\n    line-height: labelLineHeight;\n    font-weight: labelFontWeight;\n    text-align: headTextAlign;\n}\n.lingxiteam-dform-input-item-value input{\n  color: textColor;\n  line-height: lineHeight;\n  font-weight: fontWeight;\n    padding: paddingValue;\n    text-align: headTextAlign;\n    font-size: fontSize;\n}\n\n.lingxiteam-dform-radio-label{\n  color: textColor;\n  line-height: lineHeight;\n  font-weight: fontWeight;\n    padding: paddingValue;\n    text-align: headTextAlign;\n    font-size: fontSize;\n\n}\n.lingxiteam-dform-check-box .lingxiteam-dform-box-content .lingxiteam-dform-box-wrapper .lingxiteam-dform-box-label{\n  color: textColor;\n  line-height: lineHeight;\n  font-weight: fontWeight;\n    text-align: headTextAlign;\n    font-size: fontSize;\n\n}\n.lingxiteam-dform-text-item-content .lingxiteam-dform-text-item-text{\n  color: textColor;\n  line-height: lineHeight;\n  font-size: fontSize;\n    text-align: headTextAlign;\n    padding: paddingValue;\n    font-weight: fontWeight;\n}\n.lingxiteam-dform-text-item-content .lingxiteam-dform-text-item-date-text{\n  color: textColor;\n  line-height: lineHeight;\n  font-size: fontSize;\n    text-align: headTextAlign;\n    padding: paddingValue;\n    font-weight: fontWeight;\n}\n.lingxiteam-dform-rangdate-h-value{\n  color: textColor;\n  line-height: lineHeight;\n    text-align: headTextAlign;\n    font-size: fontSize;\n    padding: paddingValue;\n    font-weight: fontWeight;\n}\n.lingxiteam-dform-area-group-value-area textarea{\n  line-height: lineHeight;\n    padding: paddingValue;\n    font-weight: fontWeight;\n    font-size: fontSize;\n    color: textColor;\n    text-align: headTextAlign;\n\n}\n.cust-icon{\n  width: iconSize;\n  height: iconSize;\n}\n.cust-icon svg{\n  color: iconColor;\n  fill: iconColor;\n  width: iconSize;\n  height: iconSize;\n}\n.lingxiteam-dform-right-content{\n  width: iconSize;\n  height: iconSize;\n  overflow: hidden;\n}\n.lingxiteam-dform-arrow-horizontal{\n  background-image: none;\n  width: iconSize;\n  height: iconSize;\n  position: relative;\n}\n.lingxiteam-dform-arrow-horizontal::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: iconSize;\n  height: iconSize;\nbackground-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2216%22%20height%3D%2226%22%20viewBox%3D%220%200%2016%2026%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Cg%20id%3D%22UI-KIT_%E5%9F%BA%E7%A1%80%E5%85%83%E4%BB%B6%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cg%20id%3D%229.9%E5%9F%BA%E7%A1%80%E5%85%83%E4%BB%B6%22%20transform%3D%22translate%28-5809.000000%2C%20-8482.000000%29%22%20fill%3D%22%23C7C7CC%22%3E%3Cpolygon%20id%3D%22Disclosure-Indicator%22%20points%3D%225811%208482%205809%208484%205820.5%208495%205809%208506%205811%208508%205825%208495%22%3E%3C%2Fpolygon%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E\");\nbackground-repeat: round;\ntransform: translateX(-100%);\nbackground-size: 100%;\n  filter: drop-shadow(iconSize 0 iconColor);\n}",
+  tpl: ".dynamic-form-wrapper {\n    background-color: backgroundColor;\n    .lcdp-form-item {\n      --color: textColor;\n      --font-size: fontSize;\n      .adm-text-area{\n        --color: textColor;\n        --font-size: fontSize;\n      }\n      .lingxiteam-dform-title {\n        color: labelTextColor;\n        font-size: labelFontSize !important;\n        line-height: labelLineHeight;\n        font-weight: labelFontWeight;\n        text-align: headTextAlign;\n    }\n    .lingxiteam-dform-input-item-value input{\n      color: textColor;\n      line-height: lineHeight;\n      font-weight: fontWeight;\n        padding: paddingValue;\n        text-align: headTextAlign;\n        font-size: fontSize;\n    }\n    \n    .lingxiteam-dform-radio-label{\n      color: textColor;\n      line-height: lineHeight;\n      font-weight: fontWeight;\n        padding: paddingValue;\n        text-align: headTextAlign;\n        font-size: fontSize;\n    \n    }\n    .lingxiteam-dform-check-box .lingxiteam-dform-box-content .lingxiteam-dform-box-wrapper .lingxiteam-dform-box-label{\n      color: textColor;\n      line-height: lineHeight;\n      font-weight: fontWeight;\n        text-align: headTextAlign;\n        font-size: fontSize;\n    \n    }\n    .lingxiteam-dform-text-item-content .lingxiteam-dform-text-item-text{\n      color: textColor;\n      line-height: lineHeight;\n      font-size: fontSize;\n        text-align: headTextAlign;\n        padding: paddingValue;\n        font-weight: fontWeight;\n    }\n    .lingxiteam-dform-text-item-content .lingxiteam-dform-text-item-date-text{\n      color: textColor;\n      line-height: lineHeight;\n      font-size: fontSize;\n        text-align: headTextAlign;\n        padding: paddingValue;\n        font-weight: fontWeight;\n    }\n    .lingxiteam-dform-rangdate-h-value{\n      color: textColor;\n      line-height: lineHeight;\n        text-align: headTextAlign;\n        font-size: fontSize;\n        padding: paddingValue;\n        font-weight: fontWeight;\n    }\n    .lingxiteam-dform-area-group-value-area textarea{\n      line-height: lineHeight;\n        padding: paddingValue;\n        font-weight: fontWeight;\n        font-size: fontSize;\n        color: textColor;\n        text-align: headTextAlign;\n    \n    }\n    .cust-icon{\n      width: iconSize;\n      height: iconSize;\n    }\n    .cust-icon svg{\n      color: iconColor;\n      fill: iconColor;\n      width: iconSize;\n      height: iconSize;\n    }\n    .lingxiteam-dform-right-content{\n      width: iconSize;\n      height: iconSize;\n      overflow: hidden;\n    }\n    .lingxiteam-dform-arrow-horizontal{\n      background-image: none;\n      width: iconSize;\n      height: iconSize;\n      position: relative;\n    }\n    .lingxiteam-dform-arrow-horizontal::before {\n      content: \"\";\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: iconSize;\n      height: iconSize;\n    background-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2216%22%20height%3D%2226%22%20viewBox%3D%220%200%2016%2026%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Cg%20id%3D%22UI-KIT_%E5%9F%BA%E7%A1%80%E5%85%83%E4%BB%B6%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cg%20id%3D%229.9%E5%9F%BA%E7%A1%80%E5%85%83%E4%BB%B6%22%20transform%3D%22translate%28-5809.000000%2C%20-8482.000000%29%22%20fill%3D%22%23C7C7CC%22%3E%3Cpolygon%20id%3D%22Disclosure-Indicator%22%20points%3D%225811%208482%205809%208484%205820.5%208495%205809%208506%205811%208508%205825%208495%22%3E%3C%2Fpolygon%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E\");\n    background-repeat: round;\n    transform: translateX(-100%);\n    background-size: 100%;\n      filter: drop-shadow(iconSize 0 iconColor);\n    }\n    }\n  }\n  ",
+  itemCustomTpl: ".lcdp-form-item {\n    --color: textColor;\n    --font-size: fontSize;\n    .adm-text-area{\n      --color: textColor;\n      --font-size: fontSize;\n    }\n    .lingxiteam-dform-title {\n      color: labelTextColor;\n      font-size: labelFontSize !important;\n      line-height: labelLineHeight;\n      font-weight: labelFontWeight;\n      text-align: headTextAlign;\n  }\n  .lingxiteam-dform-input-item-value input{\n    color: textColor;\n    line-height: lineHeight;\n    font-weight: fontWeight;\n      padding: paddingValue;\n      text-align: headTextAlign;\n      font-size: fontSize;\n  }\n  \n  .lingxiteam-dform-radio-label{\n    color: textColor;\n    line-height: lineHeight;\n    font-weight: fontWeight;\n      padding: paddingValue;\n      text-align: headTextAlign;\n      font-size: fontSize;\n  \n  }\n  .lingxiteam-dform-check-box .lingxiteam-dform-box-content .lingxiteam-dform-box-wrapper .lingxiteam-dform-box-label{\n    color: textColor;\n    line-height: lineHeight;\n    font-weight: fontWeight;\n      text-align: headTextAlign;\n      font-size: fontSize;\n  \n  }\n  .lingxiteam-dform-text-item-content .lingxiteam-dform-text-item-text{\n    color: textColor;\n    line-height: lineHeight;\n    font-size: fontSize;\n      text-align: headTextAlign;\n      padding: paddingValue;\n      font-weight: fontWeight;\n  }\n  .lingxiteam-dform-text-item-content .lingxiteam-dform-text-item-date-text{\n    color: textColor;\n    line-height: lineHeight;\n    font-size: fontSize;\n      text-align: headTextAlign;\n      padding: paddingValue;\n      font-weight: fontWeight;\n  }\n  .lingxiteam-dform-rangdate-h-value{\n    color: textColor;\n    line-height: lineHeight;\n      text-align: headTextAlign;\n      font-size: fontSize;\n      padding: paddingValue;\n      font-weight: fontWeight;\n  }\n  .lingxiteam-dform-area-group-value-area textarea{\n    line-height: lineHeight;\n      padding: paddingValue;\n      font-weight: fontWeight;\n      font-size: fontSize;\n      color: textColor;\n      text-align: headTextAlign;\n  \n  }\n  .cust-icon{\n    width: iconSize;\n    height: iconSize;\n  }\n  .cust-icon svg{\n    color: iconColor;\n    fill: iconColor;\n    width: iconSize;\n    height: iconSize;\n  }\n  .lingxiteam-dform-right-content{\n    width: iconSize;\n    height: iconSize;\n    overflow: hidden;\n  }\n  .lingxiteam-dform-arrow-horizontal{\n    background-image: none;\n    width: iconSize;\n    height: iconSize;\n    position: relative;\n  }\n  .lingxiteam-dform-arrow-horizontal::before {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: iconSize;\n    height: iconSize;\n  background-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2216%22%20height%3D%2226%22%20viewBox%3D%220%200%2016%2026%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Cg%20id%3D%22UI-KIT_%E5%9F%BA%E7%A1%80%E5%85%83%E4%BB%B6%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cg%20id%3D%229.9%E5%9F%BA%E7%A1%80%E5%85%83%E4%BB%B6%22%20transform%3D%22translate%28-5809.000000%2C%20-8482.000000%29%22%20fill%3D%22%23C7C7CC%22%3E%3Cpolygon%20id%3D%22Disclosure-Indicator%22%20points%3D%225811%208482%205809%208484%205820.5%208495%205809%208506%205811%208508%205825%208495%22%3E%3C%2Fpolygon%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E\");\n  background-repeat: round;\n  transform: translateX(-100%);\n  background-size: 100%;\n    filter: drop-shadow(iconSize 0 iconColor);\n  }\n  }",
   components: [{
     id: 'DForm_458695',
     label: '表单',

package/dist/h5config/DformFile.d.ts

@@ -1,5 +1,6 @@
 export declare const DformFile: {
     type: string;
+    hasPrefixClass: boolean;
     variable: {
         btnBgColor: {
             type: string;

package/dist/h5config/DformFile.js

@@ -1,5 +1,6 @@
 export var DformFile = {
   type: 'DformFile',
+  hasPrefixClass: true,
   variable: {
     btnBgColor: {
       type: 'color',
@@ -73,7 +74,7 @@ export var DformFile = {
     btnIconColor: '#108ee9',
     btnBorderRadius: '100px'
   }],
-  tpl: ".lingxiteam-dform-file-extra-btn{\n      border-radius: btnBorderRadius;\n      background: btnBgColor;\n      > span {\n        color: btnIconColor;\n      }\n    }",
+  tpl: ".lcdp-form-item {\n    .lingxiteam-dform-file-extra-btn{\n      border-radius: btnBorderRadius;\n      background: btnBgColor;\n      > span {\n        color: btnIconColor;\n      }\n    }\n  }",
   components: [{
     id: 'DForm_333712',
     label: '表单',

package/dist/h5config/DformSwitch.d.ts

@@ -1,5 +1,6 @@
 export declare const DformSwitch: {
     type: string;
+    hasPrefixClass: boolean;
     variable: {
         openColor: {
             type: string;

package/dist/h5config/DformSwitch.js

@@ -1,5 +1,6 @@
 export var DformSwitch = {
   type: 'DformSwitch',
+  hasPrefixClass: true,
   variable: {
     openColor: {
       type: 'color',
@@ -75,7 +76,7 @@ export var DformSwitch = {
     openColor: '#108ee9',
     closeColor: '#ddd'
   }],
-  tpl: "\n    .adm-switch.adm-switch-checked .adm-switch-checkbox{\n      background: openColor;\n    }\n    .lingxiteam-dform-switch .adm-switch-checkbox{\n      background: closeColor;\n    }\n    .lingxiteam-dform-switch .adm-switch-checkbox::before{\n      background: closeColor;\n    }",
+  tpl: ".lcdp-form-item {\n      .adm-switch.adm-switch-checked .adm-switch-checkbox{\n        background: openColor;\n      }\n      .lingxiteam-dform-switch .adm-switch-checkbox{\n        background: closeColor;\n      }\n      .lingxiteam-dform-switch .adm-switch-checkbox::before{\n        background: closeColor;\n      }\n    }\n    ",
   components: [{
     id: 'DForm_333712',
     label: '表单',

package/dist/h5config/FilterItems.d.ts

@@ -1,5 +1,6 @@
 export declare const FilterItems: {
     type: string;
+    hasPrefixClass: boolean;
     variable: {
         backgroundColor: {
             type: string;

package/dist/h5config/FilterItems.js

@@ -1,5 +1,6 @@
 export var FilterItems = {
   type: 'FilterItems',
+  hasPrefixClass: true,
   variable: {
     backgroundColor: {
       type: 'color',
@@ -83,7 +84,7 @@ export var FilterItems = {
     iconSize: '16px',
     iconCloseColor: 'rgba(0,0,0,0.3)'
   }],
-  tpl: "\n    .alita-filter-item-content{\n      background: backgroundColor;\n      font-size: fontSize;\n      border-radius: borderRadius;\n      border: 1px solid borderColor;\n    }\n    .alita-filter-item-active-text{\n      color: textColor;\n      line-height: lineHeight;\n      font-weight: fontWeight;\n    }\n    .alita-filter-item-noraml-icon{\n      width: iconSize;\n      height: iconSize;\n      overflow: hidden;\n    }\n    .alita-filter-item-icon-up{\n      background-image: none;\n      width: iconSize;\n      height: iconSize;\n      position: relative;\n    }\n    .alita-filter-item-icon-up::before {\n      content: \"\";\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: iconSize;\n      height: iconSize;\n    background-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2016%2016%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Ctitle%3E%E7%BC%96%E7%BB%84%206%3C%2Ftitle%3E%3Cg%20id%3D%22%E9%A1%B5%E9%9D%A2-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cg%20id%3D%22%E5%85%B6%E4%BD%99%E7%BB%84%E4%BB%B6%22%20transform%3D%22translate%28-171.000000%2C%20-3340.000000%29%22%3E%3Cg%20id%3D%22%E5%AF%BC%E8%88%AA%E6%A0%8F%EF%BC%9ANavigationBa%E5%A4%87%E4%BB%BD-2%22%20transform%3D%22translate%2836.000000%2C%201199.000000%29%22%3E%3Cg%20id%3D%22%E7%BC%96%E7%BB%84-5%22%20transform%3D%22translate%2851.000000%2C%202131.000000%29%22%3E%3Cg%20id%3D%22%E7%BC%96%E7%BB%84-6%22%20transform%3D%22translate%2884.000000%2C%2010.000000%29%22%3E%3Crect%20id%3D%22%E7%9F%A9%E5%BD%A2%22%20fill%3D%22%23D8D8D8%22%20opacity%3D%220%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2216%22%20height%3D%2216%22%3E%3C%2Frect%3E%3Cpath%20d%3D%22M13.4723603%2C5.99735754%20L8.67496913%2C11.2434071%20C8.53163306%2C11.4065089%208.32501122%2C11.5%208.10787665%2C11.5%20C7.89072486%2C11.5%207.68408225%2C11.4065218%207.54073483%2C11.2434071%20L2.74334363%2C5.99735754%20C2.50915215%2C5.75000397%202.43677915%2C5.38947121%202.55781612%2C5.07103987%20C2.67885308%2C4.75260854%202.97097257%2C4.53024691%203.31046078%2C4.5%20L12.9013205%2C4.5%20C13.2421162%2C4.52895167%2013.5355186%2C4.74998106%2013.6565803%2C5.06974464%20C13.7789495%2C5.38948354%2013.7065888%2C5.74867172%2013.4723603%2C5.99735754%20Z%22%20id%3D%22%E8%B7%AF%E5%BE%84%22%20fill%3D%22%23BFBFBF%22%20fill-rule%3D%22nonzero%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fg%3E%20%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E\");\n    background-repeat: round;\n    transform: translateX(-100%);\n    background-size: 100%;\n      filter: drop-shadow(iconSize 0 iconCloseColor);\n  }\n  .alita-filter-item-icon-down{\n    background-image: none;\n    width: iconSize;\n    height: iconSize;\n    position: relative;\n  }\n  .alita-filter-item-icon-down::before {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: iconSize;\n    height: iconSize;\n    background-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2016%2016%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Ctitle%3E%E7%BC%96%E7%BB%84%206%3C%2Ftitle%3E%3Cg%20id%3D%22%E9%A1%B5%E9%9D%A2-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cg%20id%3D%22%E5%85%B6%E4%BD%99%E7%BB%84%E4%BB%B6%22%20transform%3D%22translate%28-295.000000%2C%20-3340.000000%29%22%3E%3Cg%20id%3D%22%E5%AF%BC%E8%88%AA%E6%A0%8F%EF%BC%9ANavigationBa%E5%A4%87%E4%BB%BD-2%22%20transform%3D%22translate%2836.000000%2C%201199.000000%29%22%3E%3Cg%20id%3D%22%E7%BC%96%E7%BB%84-5%22%20transform%3D%22translate%28175.000000%2C%202131.000000%29%22%3E%3Cg%20id%3D%22%E7%BC%96%E7%BB%84-6%22%20transform%3D%22translate%2892.000000%2C%2018.000000%29%20scale%281%2C%20-1%29%20translate%28-92.000000%2C%20-18.000000%29%20translate%2884.000000%2C%2010.000000%29%22%3E%3Crect%20id%3D%22%E7%9F%A9%E5%BD%A2%22%20fill%3D%22%231677ff%22%20opacity%3D%220%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2216%22%20height%3D%2216%22%3E%3C%2Frect%3E%3Cpath%20d%3D%22M13.4723603%2C5.99735754%20L8.67496913%2C11.2434071%20C8.53163306%2C11.4065089%208.32501122%2C11.5%208.10787665%2C11.5%20C7.89072486%2C11.5%207.68408225%2C11.4065218%207.54073483%2C11.2434071%20L2.74334363%2C5.99735754%20C2.50915215%2C5.75000397%202.43677915%2C5.38947121%202.55781612%2C5.07103987%20C2.67885308%2C4.75260854%202.97097257%2C4.53024691%203.31046078%2C4.5%20L12.9013205%2C4.5%20C13.2421162%2C4.52895167%2013.5355186%2C4.74998106%2013.6565803%2C5.06974464%20C13.7789495%2C5.38948354%2013.7065888%2C5.74867172%2013.4723603%2C5.99735754%20Z%22%20id%3D%22%E8%B7%AF%E5%BE%84%22%20fill%3D%22%231677ff%22%20fill-rule%3D%22nonzero%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E\");\n    background-repeat: round;\n    background-size: 100%;\n    transform: translateX(-100%);\n    filter: drop-shadow(iconSize 0 iconColor);\n}\n",
+  tpl: ".use-app-filteritems{\n    .alita-filter-item-content{\n      background: backgroundColor;\n      font-size: fontSize;\n      border-radius: borderRadius;\n      border: 1px solid borderColor;\n    }\n    .alita-filter-item-active-text{\n      color: textColor;\n      line-height: lineHeight;\n      font-weight: fontWeight;\n    }\n    .alita-filter-item-noraml-icon{\n      width: iconSize;\n      height: iconSize;\n      overflow: hidden;\n    }\n    .alita-filter-item-icon-up{\n      background-image: none;\n      width: iconSize;\n      height: iconSize;\n      position: relative;\n    }\n    .alita-filter-item-icon-up::before {\n      content: \"\";\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: iconSize;\n      height: iconSize;\n    background-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2016%2016%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Ctitle%3E%E7%BC%96%E7%BB%84%206%3C%2Ftitle%3E%3Cg%20id%3D%22%E9%A1%B5%E9%9D%A2-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cg%20id%3D%22%E5%85%B6%E4%BD%99%E7%BB%84%E4%BB%B6%22%20transform%3D%22translate%28-171.000000%2C%20-3340.000000%29%22%3E%3Cg%20id%3D%22%E5%AF%BC%E8%88%AA%E6%A0%8F%EF%BC%9ANavigationBa%E5%A4%87%E4%BB%BD-2%22%20transform%3D%22translate%2836.000000%2C%201199.000000%29%22%3E%3Cg%20id%3D%22%E7%BC%96%E7%BB%84-5%22%20transform%3D%22translate%2851.000000%2C%202131.000000%29%22%3E%3Cg%20id%3D%22%E7%BC%96%E7%BB%84-6%22%20transform%3D%22translate%2884.000000%2C%2010.000000%29%22%3E%3Crect%20id%3D%22%E7%9F%A9%E5%BD%A2%22%20fill%3D%22%23D8D8D8%22%20opacity%3D%220%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2216%22%20height%3D%2216%22%3E%3C%2Frect%3E%3Cpath%20d%3D%22M13.4723603%2C5.99735754%20L8.67496913%2C11.2434071%20C8.53163306%2C11.4065089%208.32501122%2C11.5%208.10787665%2C11.5%20C7.89072486%2C11.5%207.68408225%2C11.4065218%207.54073483%2C11.2434071%20L2.74334363%2C5.99735754%20C2.50915215%2C5.75000397%202.43677915%2C5.38947121%202.55781612%2C5.07103987%20C2.67885308%2C4.75260854%202.97097257%2C4.53024691%203.31046078%2C4.5%20L12.9013205%2C4.5%20C13.2421162%2C4.52895167%2013.5355186%2C4.74998106%2013.6565803%2C5.06974464%20C13.7789495%2C5.38948354%2013.7065888%2C5.74867172%2013.4723603%2C5.99735754%20Z%22%20id%3D%22%E8%B7%AF%E5%BE%84%22%20fill%3D%22%23BFBFBF%22%20fill-rule%3D%22nonzero%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fg%3E%20%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E\");\n    background-repeat: round;\n    transform: translateX(-100%);\n    background-size: 100%;\n      filter: drop-shadow(iconSize 0 iconCloseColor);\n  }\n  .alita-filter-item-icon-down{\n    background-image: none;\n    width: iconSize;\n    height: iconSize;\n    position: relative;\n  }\n  .alita-filter-item-icon-down::before {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: iconSize;\n    height: iconSize;\n    background-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2016%2016%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Ctitle%3E%E7%BC%96%E7%BB%84%206%3C%2Ftitle%3E%3Cg%20id%3D%22%E9%A1%B5%E9%9D%A2-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cg%20id%3D%22%E5%85%B6%E4%BD%99%E7%BB%84%E4%BB%B6%22%20transform%3D%22translate%28-295.000000%2C%20-3340.000000%29%22%3E%3Cg%20id%3D%22%E5%AF%BC%E8%88%AA%E6%A0%8F%EF%BC%9ANavigationBa%E5%A4%87%E4%BB%BD-2%22%20transform%3D%22translate%2836.000000%2C%201199.000000%29%22%3E%3Cg%20id%3D%22%E7%BC%96%E7%BB%84-5%22%20transform%3D%22translate%28175.000000%2C%202131.000000%29%22%3E%3Cg%20id%3D%22%E7%BC%96%E7%BB%84-6%22%20transform%3D%22translate%2892.000000%2C%2018.000000%29%20scale%281%2C%20-1%29%20translate%28-92.000000%2C%20-18.000000%29%20translate%2884.000000%2C%2010.000000%29%22%3E%3Crect%20id%3D%22%E7%9F%A9%E5%BD%A2%22%20fill%3D%22%231677ff%22%20opacity%3D%220%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2216%22%20height%3D%2216%22%3E%3C%2Frect%3E%3Cpath%20d%3D%22M13.4723603%2C5.99735754%20L8.67496913%2C11.2434071%20C8.53163306%2C11.4065089%208.32501122%2C11.5%208.10787665%2C11.5%20C7.89072486%2C11.5%207.68408225%2C11.4065218%207.54073483%2C11.2434071%20L2.74334363%2C5.99735754%20C2.50915215%2C5.75000397%202.43677915%2C5.38947121%202.55781612%2C5.07103987%20C2.67885308%2C4.75260854%202.97097257%2C4.53024691%203.31046078%2C4.5%20L12.9013205%2C4.5%20C13.2421162%2C4.52895167%2013.5355186%2C4.74998106%2013.6565803%2C5.06974464%20C13.7789495%2C5.38948354%2013.7065888%2C5.74867172%2013.4723603%2C5.99735754%20Z%22%20id%3D%22%E8%B7%AF%E5%BE%84%22%20fill%3D%22%231677ff%22%20fill-rule%3D%22nonzero%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E\");\n    background-repeat: round;\n    background-size: 100%;\n    transform: translateX(-100%);\n    filter: drop-shadow(iconSize 0 iconColor);\n}\n  }\n    \n",
   components: [{
     id: 'FilterItems_7957386',
     label: '筛选项',

package/dist/h5config/Grid.js

@@ -77,7 +77,7 @@ export var Grid = {
     fontSize: '12px',
     fontWeight: '400'
   }],
-  tpl: "\n    .use-app-grid{\n      background-color: backgroundColor;\n      border-radius: borderRadius;\n    }\n    .am-grid {\n      background-color: backgroundColor;\n      border-radius: borderRadius;\n      --adm-font-size-4: fontSize;\n      --adm-color-text: textColor\n    }\n    .am-grid.am-grid-line:not(.am-grid-carousel){\n      border:1PX solid borderColor;\n      border-bottom:none;\n    }\n    .am-grid.am-grid-line .am-grid-flex:last-child{\n      border-color: borderColor;\n      border-bottom-right-radius: borderRadius;\n      border-bottom-left-radius: borderRadius;\n    }\n    .am-grid.am-grid-line .am-grid-flex:first-child{\n      border-top-left-radius: borderRadius;\n    }\n    .am-grid.am-grid-line .am-grid-flex .am-grid-flex-item:first-child{\n      border: none;\n    }\n    .am-grid.am-grid-line .am-grid-flex{\n      border-color: lineColor;\n    }\n    .am-grid.am-grid-square .am-grid-item .am-grid-item-inner-content .am-grid-icon{\n      width: iconSize;\n    }\n    .am-grid .am-grid-flex .am-grid-flex-item .am-grid-item-content .am-grid-item-inner-content .am-grid-text{\n      line-height: lineHeight;\n      font-weight: fontWeight;\n    }",
+  tpl: ".use-app-grid{\n    background-color: backgroundColor;\n    border-radius: borderRadius;\n    .am-grid {\n      border-radius: borderRadius;\n      --adm-font-size-4: fontSize;\n      --adm-color-text: textColor\n    }\n    .am-grid.am-grid-line:not(.am-grid-carousel){\n      border:1PX solid borderColor;\n      border-bottom:none;\n    }\n    .am-grid.am-grid-line .am-grid-flex:last-child{\n      border-color: borderColor;\n      border-bottom-right-radius: borderRadius;\n      border-bottom-left-radius: borderRadius;\n    }\n    .am-grid.am-grid-line .am-grid-flex:first-child{\n      border-top-left-radius: borderRadius;\n    }\n    .am-grid.am-grid-line .am-grid-flex .am-grid-flex-item:first-child{\n      border: none;\n    }\n    .am-grid.am-grid-line .am-grid-flex{\n      border-color: lineColor;\n    }\n    .am-grid.am-grid-square .am-grid-item .am-grid-item-inner-content .am-grid-icon{\n      width: iconSize;\n    }\n    .am-grid .am-grid-flex .am-grid-flex-item .am-grid-item-content .am-grid-item-inner-content .am-grid-text{\n      line-height: lineHeight;\n      font-weight: fontWeight;\n    }\n  }\n",
   components: [{
     id: 'Grid_842271',
     label: '宫格',

package/dist/h5config/NoticeBarPlus.js

@@ -73,7 +73,7 @@ export var NoticeBarPlus = {
     iconSize: '20px',
     fontWeight: '400'
   }],
-  tpl: "\n  .alita-notice-bar{\n    --adm-color-background: backgroundColor;\n    border-color: borderColor;\n    border-radius: borderRadius;\n    font-size: fontSize;\n    // line-height: lineHeight;\n    font-weight:fontWeight;\n    color: textColor;\n    > div {\n\n      > svg {\n    color: iconColor;\n\nwidth: iconSize;\nheight: iconSize;\n      }\n    }\n  }",
+  tpl: ".use-app-noticebarplus{\n    .alita-notice-bar{\n      --adm-color-background: backgroundColor;\n      border-color: borderColor;\n      border: 1px solid borderColor;\n      border-radius: borderRadius;\n      font-size: fontSize;\n      // line-height: lineHeight;\n      font-weight:fontWeight;\n      color: textColor;\n      > div {\n        > svg {\n      color: iconColor;\n      width: iconSize;\n      height: iconSize;\n        }\n      }\n    }\n  }\n  ",
   components: [{
     id: 'NoticeBarPlus_0162497',
     label: '公告栏',

package/dist/h5config/SearchView.js

@@ -97,7 +97,7 @@ export var SearchView = {
     sBorderColor: 'rgba(0,0,0,0)',
     sBorderRadius: '18px'
   }],
-  tpl: "\n    .alita-search-view-wrap{\n      --adm-color-background: backgroundColor;\n      padding: paddingValue;\n      border: 1PX solid borderColor;\n      border-radius: borderRadius;\n    }\n    .alita-search-view-wrap .alita-search-bar-input{\n      background-color: sBackgroundColor;\ncolor: textColor;\nfont-size: fontSize;\nfont-weight: fontWeight;\npadding: sPaddingValue;\nborder-radius: sBorderRadius;\nborder: 1PX solid sBorderColor;\n    }\n    .alita-search-view-wrap .alita-search-bar-search{\n      width: iconSize;\n    height: iconSize;\n    }",
+  tpl: "\n    .alita-search-view-wrap{\n      --adm-color-background: backgroundColor;\n      padding: paddingValue;\n      border: 1PX solid borderColor;\n      border-radius: borderRadius;\n    }\n    .alita-search-bar-input{\n      background-color: sBackgroundColor;\ncolor: textColor;\nfont-size: fontSize;\nfont-weight: fontWeight;\npadding: sPaddingValue;\nborder-radius: sBorderRadius;\nborder: 1PX solid sBorderColor;\n    }\n    .alita-search-bar-search{\n      width: iconSize;\n    height: iconSize;\n    }",
   components: [{
     id: 'SearchView_197467',
     label: '搜索',

package/dist/h5config/StaticTabs.d.ts

@@ -1,5 +1,6 @@
 export declare const StaticTabs: {
     type: string;
+    hasPrefixClass: boolean;
     variable: {
         selectBgColor: {
             type: string;
@@ -35,11 +36,6 @@ export declare const StaticTabs: {
             label: string;
             groupsName: string;
         };
-        lineHeight: {
-            type: string;
-            label: string;
-            groupsName: string;
-        };
         fontSize: {
             type: string;
             label: string;
@@ -54,16 +50,6 @@ export declare const StaticTabs: {
                 value: string;
             }[];
         };
-        borderColor: {
-            type: string;
-            label: string;
-            groupsName: string;
-        };
-        lineColor: {
-            type: string;
-            label: string;
-            groupsName: string;
-        };
         bodyBgColor: {
             type: string;
             label: string;
@@ -81,11 +67,8 @@ export declare const StaticTabs: {
         selectFontWeight: string;
         fontWeight: string;
         fontSize: string;
-        lineHeight: string;
         selectBorderRadius: string;
         bodyBgColor: string;
-        borderColor: string;
-        lineColor: string;
     }[];
     tpl: string;
     components: {

package/dist/h5config/StaticTabs.js

@@ -1,5 +1,6 @@
 export var StaticTabs = {
   type: 'StaticTabs',
+  hasPrefixClass: true,
   variable: {
     // TODO: 代码中写死
     // headBgColor: {
@@ -58,11 +59,6 @@ export var StaticTabs = {
       label: '选项文本颜色',
       groupsName: '选项'
     },
-    lineHeight: {
-      type: 'px',
-      label: '选项文本行高',
-      groupsName: '选项'
-    },
     fontSize: {
       type: 'px',
       label: '选项文本尺寸',
@@ -89,16 +85,11 @@ export var StaticTabs = {
         value: '500'
       }]
     },
-    borderColor: {
-      type: 'color',
-      label: '边框颜色',
-      groupsName: '选项'
-    },
-    lineColor: {
-      type: 'color',
-      label: '头部下分割线颜色',
-      groupsName: '边框'
-    },
+    // lineColor: {
+    //   type: 'color',
+    //   label: '头部下分割线颜色',
+    //   groupsName: '边框',
+    // },
     bodyBgColor: {
       type: 'color',
       label: '内容区域背景颜色',
@@ -110,20 +101,18 @@ export var StaticTabs = {
   title: '静态标签页',
   defaultValue: [{
     selectTextColor: '#108ee9',
-    textColor: '#108ee9',
+    textColor: '#FFF',
     selectBgColor: '#FFF',
-    backgroundColor: '#FFF',
+    backgroundColor: '#108ee9',
     selectFontWeight: '400',
     fontWeight: '400',
     fontSize: '15px',
-    lineHeight: '100%',
     selectBorderRadius: '12px',
-    // paddingValue:'8px 0 8px 0',
-    bodyBgColor: 'rgba(0,0,0,0)',
-    borderColor: 'rgba(0,0,0,0)',
-    lineColor: '#108ee9'
+    bodyBgColor: 'rgba(0,0,0,0)'
+    // lineColor: '#108ee9',
   }],
-  tpl: "\n  .am-tabs-default-bar-top .am-tabs-default-bar-tab{\nfont-weight: fontWeight;\nborder-top-left-radius: selectBorderRadius;\n  border-top-right-radius: selectBorderRadius;\n    color: textColor;\nfont-size: fontSize;\nborder: 1px solid borderColor;\nbackground-color: backgroundColor;\n  }\n  .am-tabs-default-bar-content .am-tabs-default-bar-tab-active::before, .am-tabs-default-bar-content .am-tabs-default-bar-tab-active::after{\n    background: selectBgColor;\n  }\n  .am-tabs-default-bar-content .am-tabs-default-bar-tab-active::before{\n    left: 0;\n  }\n  .am-tabs-bottom, .am-tabs-top{\n    border-radius:  selectBorderRadius;\n  }\n  .am-tabs-default-bar-content .am-tabs-default-bar-tab-active {\n    background-color: selectBgColor;\n   color: selectTextColor;\nfont-weight: selectFontWeight;\n  }\n  .am-tabs-pane-wrap{\n    background-color: bodyBgColor;\n  }\n  .am-tabs-default-bar-animated .am-tabs-default-bar-underline{\n    border-color: lineColor;\n  }",
+
+  tpl: ".use-app-statictabs {\n    .am-tabs-default-bar-content .am-tabs-default-bar-tab-active{\n      background: selectBgColor;\n    color: selectTextColor;\n    position: relative;\n    border-top-left-radius: selectBorderRadius;\n    border-top-right-radius: selectBorderRadius;\n    transform: perspective(200px) rotateX(25deg);\n    transform-origin: top center;\n    font-weight: selectFontWeight;\n    }\n    .am-tabs-default-bar-bottom .am-tabs-default-bar-content, .am-tabs-default-bar-top .am-tabs-default-bar-content{\n      background: backgroundColor;\n    }\n    .am-tabs-bottom, .am-tabs-top{\n      border-radius: selectBorderRadius;\n    }\n    .am-tabs-default-bar-content .am-tabs-default-bar-tab-active::before, .am-tabs-default-bar-content .am-tabs-default-bar-tab-active::after{\n      background: radial-gradient(0.24rem at 0.3rem 0, transparent 0.3rem, selectBgColor 0.23rem);\n    }\n    .am-tabs-default-bar-tab{\n      color: textColor;\n      font-weight: fontWeight;\n      font-size: fontSize;\n    }\n    .am-tabs-pane-wrap {\n      background-color: bodyBgColor;\n    }\n  }\n",
   components: [{
     id: 'StaticTabs_828878',
     label: '静态标签页',

package/dist/h5config/Table.d.ts

@@ -1,5 +1,6 @@
-export declare const DynamicTable: {
+export declare const Table: {
     type: string;
+    hasPrefixClass: boolean;
     variable: {
         textColor: {
             type: string;

package/dist/h5config/Table.js

@@ -1,5 +1,6 @@
-export var DynamicTable = {
-  type: 'DynamicTable',
+export var Table = {
+  type: 'Table',
+  hasPrefixClass: true,
   variable: {
     textColor: {
       type: 'color',
@@ -117,7 +118,7 @@ export var DynamicTable = {
     // fHeadBgColor: '#FAFAFA',
   }],
 
-  tpl: "\n  .appDynamicTable {\n    .table-header{\n      font-weight: fontWeight;\n      font-size: fontSize;\n      color: textColor;\n    }\n    .ag-header-row{\n      font-size: headFontSize;\n    }\n    .table-body{\n      --dynamic-table-header-bg-color: headBgColor;\n      --ag-odd-row-background-color: bodyBgColor;\n      --dynamic-table-header-color: headTextColor;\n    }\n    .ag-root-wrapper{\n      border-radius: borderRadius;\n    }\n    .ag-theme-segmentation {\n      --ag-background-color: bodyBgColor;\n      --ag-borders-critical: borderColor;\n      --ag-row-border-color: borderColor;\n      --ag-header-border-color: borderColor;\n  }\n  .ag-theme-zebra {\n    --ag-background-color: bodyBgColor;\n    --ag-odd-row-background-color: zebraBgColor;\n    --ag-borders: none;\n    --ag-row-border-color: none;\n}\n  .ag-theme-border {\n    --ag-background-color: bodyBgColor;\n    --ag-border-color: borderColor;\n    --ag-cell-horizontal-border: solid borderColor;\n}\n  }\n",
+  tpl: ".appDynamicTable {\n    .table-header{\n      font-weight: fontWeight;\n      font-size: fontSize;\n      color: textColor;\n    }\n    .ag-header-row{\n      font-size: headFontSize;\n    }\n    .table-body{\n      --dynamic-table-header-bg-color: headBgColor;\n      --ag-odd-row-background-color: bodyBgColor;\n      --dynamic-table-header-color: headTextColor;\n    }\n    .ag-root-wrapper{\n      border-radius: borderRadius;\n    }\n    .ag-theme-segmentation {\n      --ag-background-color: bodyBgColor;\n      --ag-borders-critical: borderColor;\n      --ag-row-border-color: borderColor;\n      --ag-header-border-color: borderColor;\n  }\n  .ag-theme-zebra {\n    --ag-background-color: bodyBgColor;\n    --ag-odd-row-background-color: zebraBgColor;\n    --ag-borders: none;\n    --ag-row-border-color: none;\n}\n  .ag-theme-border {\n    --ag-background-color: bodyBgColor;\n    --ag-border-color: borderColor;\n    --ag-cell-horizontal-border: solid borderColor;\n}\n  }\n",
   //   tpl: `
   //   .appDynamicTable {
   //     .table-body{

package/dist/lx-mobile.d.ts

@@ -1,4 +1,5 @@
 export declare const MOBILE_ASSETS_CSS_TPL: any;
+export declare const mobileExtend: any;
 export declare const MOBILE_ASSETS_COMPONENT_LIST: unknown[];
 export declare function getMobileItemByType(type: string): any;
 export declare function px2rem(obj: any): any;
@@ -7,3 +8,4 @@ export declare function parseValueRem(values: any): any;
 export declare function stringifyMobileCssByTypePreview(type: string, values: any): string;
 export declare function stringifyMobileCssByType(type: string, values: any): string;
 export declare function parseMobileCssByType(type: string, css: string): any;
+export declare function prefixMobileCSS(type: string, values: any, prefix: string): string;

package/dist/lx-mobile.js

@@ -4,10 +4,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-import { stringifyCss, parseCss } from "./css";
+import { stringifyCss, parseCss, prefixAnyCSS } from "./css";
 import { objToListByGroupsName } from "./utils";
 import { Button } from "./h5config/Button";
-import { DynamicTable } from "./h5config/Table";
+import { Table } from "./h5config/Table";
 import { FilterItems } from "./h5config/FilterItems";
 import { NoticeBarPlus } from "./h5config/NoticeBarPlus";
 import { StaticTabs } from "./h5config/StaticTabs";
@@ -39,7 +39,7 @@ export var MOBILE_ASSETS_CSS_TPL = {
   // TODO: 分割线 style 写死，最后修改方案
   // Divider,
   Card: Card,
-  DynamicTable: DynamicTable,
+  Table: Table,
   FilterItems: FilterItems,
   NoticeBarPlus: NoticeBarPlus,
   StaticTabs: StaticTabs,
@@ -64,7 +64,7 @@ export var MOBILE_ASSETS_CSS_TPL = {
   DformFile: DformFile,
   Accordion: Accordion
 };
-var extend = {
+export var mobileExtend = {
   DformInput: 'DForm',
   DformTextArea: 'DForm',
   DformInputNumber: 'DForm',
@@ -131,8 +131,8 @@ export function parseValueRem(values) {
 
 // 临时解决方案，将只对它有影响的值，生成继承的样式
 export function stringifyMobileCssByTypePreview(type, values) {
-  if (extend[type]) {
-    var cfg = getMobileItemByType(extend[type]);
+  if (mobileExtend[type]) {
+    var cfg = getMobileItemByType(mobileExtend[type]);
     var _item = getMobileItemByType(type);
     return stringifyCss(cfg.tpl, px2rem(_objectSpread(_objectSpread({}, cfg.defaultValue[0]), values))) + stringifyCss(_item.tpl, px2rem(values));
   }
@@ -146,4 +146,14 @@ export function stringifyMobileCssByType(type, values) {
 export function parseMobileCssByType(type, css) {
   var item = getMobileItemByType(type);
   return parseValueRem(parseCss(item.tpl, css));
+}
+export function prefixMobileCSS(type, values, prefix) {
+  if (mobileExtend[type]) {
+    var _cfg$itemCustomTpl;
+    var cfg = getMobileItemByType(mobileExtend[type]);
+    var _item2 = getMobileItemByType(type);
+    return prefixAnyCSS(stringifyCss((_cfg$itemCustomTpl = cfg === null || cfg === void 0 ? void 0 : cfg.itemCustomTpl) !== null && _cfg$itemCustomTpl !== void 0 ? _cfg$itemCustomTpl : cfg === null || cfg === void 0 ? void 0 : cfg.tpl, px2rem(_objectSpread(_objectSpread({}, cfg.defaultValue[0]), values))), prefix, cfg === null || cfg === void 0 ? void 0 : cfg.hasPrefixClass) + prefixAnyCSS(stringifyCss(_item2.tpl, px2rem(values)), prefix, _item2 === null || _item2 === void 0 ? void 0 : _item2.hasPrefixClass);
+  }
+  var item = getMobileItemByType(type);
+  return prefixAnyCSS(stringifyCss(item.tpl, px2rem(values)), prefix, item === null || item === void 0 ? void 0 : item.hasPrefixClass);
 }

package/dist/lx.d.ts

@@ -1,6 +1,8 @@
 export declare const ASSETS_CSS_TPL: any;
+export declare const pcExtend: any;
 export declare const ASSETS_COMPONENT_LIST: unknown[];
 export declare function getItemByType(type: string): any;
 export declare function stringifyCssByType(type: string, values: any): string;
 export declare function stringifyCssByTypePreview(type: string, values: any): string;
 export declare function parseCssByType(type: string, css: string): any;
+export declare function prefixCSS(type: string, values: any, prefix: string): string;

package/dist/lx.js

@@ -4,7 +4,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-import { stringifyCss, parseCss } from "./css";
+import { stringifyCss, parseCss, prefixAnyCSS } from "./css";
 import { objToListByGroupsName } from "./utils";
 import { Button } from "./config/Button";
 // 文本放在不同的组件下，会有不同的效果，暂不支持配置
@@ -64,7 +64,7 @@ export var ASSETS_CSS_TPL = {
   Tree: Tree,
   Description: Description
 };
-var extend = {
+export var pcExtend = {
   Input: 'Form',
   TextArea: 'Form',
   InputNumber: 'Form',
@@ -97,8 +97,8 @@ export function stringifyCssByType(type, values) {
 
 // 临时解决方案，将只对它有影响的值，生成继承的样式
 export function stringifyCssByTypePreview(type, values) {
-  if (extend[type]) {
-    var cfg = getItemByType(extend[type]);
+  if (pcExtend[type]) {
+    var cfg = getItemByType(pcExtend[type]);
     var _item = getItemByType(type);
     return stringifyCss(cfg.tpl, _objectSpread(_objectSpread({}, cfg.defaultValue[0]), values)) + stringifyCss(_item.tpl, values);
   }
@@ -108,4 +108,14 @@ export function stringifyCssByTypePreview(type, values) {
 export function parseCssByType(type, css) {
   var item = getItemByType(type);
   return parseCss(item.tpl, css);
+}
+export function prefixCSS(type, values, prefix) {
+  if (pcExtend[type]) {
+    var _cfg$itemCustomTpl;
+    var cfg = getItemByType(pcExtend[type]);
+    var _item2 = getItemByType(type);
+    return prefixAnyCSS(stringifyCss((_cfg$itemCustomTpl = cfg === null || cfg === void 0 ? void 0 : cfg.itemCustomTpl) !== null && _cfg$itemCustomTpl !== void 0 ? _cfg$itemCustomTpl : cfg === null || cfg === void 0 ? void 0 : cfg.tpl, _objectSpread(_objectSpread({}, cfg.defaultValue[0]), values)), prefix, cfg === null || cfg === void 0 ? void 0 : cfg.hasPrefixClass) + prefixAnyCSS(stringifyCss(_item2.tpl, values), prefix, _item2 === null || _item2 === void 0 ? void 0 : _item2.hasPrefixClass);
+  }
+  var item = getItemByType(type);
+  return prefixAnyCSS(stringifyCss(item.tpl, values), prefix, item === null || item === void 0 ? void 0 : item.hasPrefixClass);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lingxiteam/theme-utils",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "",
   "keywords": [],
   "license": "MIT",