@lingxiteam/theme-utils 0.5.9 → 0.5.10

package/README.md

@@ -1,142 +1,142 @@
-# @lingxiteam/theme-utils
-
-antd@4 theme class utils, css utils
-
-```js
-pnpm i @lingxiteam/theme-utils
-
-import {} from '@lingxiteam/theme-utils';
-```
-
-新建场景描述：
-
-1、通过编辑页面 form 得到，theme 的对象 如 { backgroundColor:'red',fontSize:'12px'} 2、根据模版 '.cc{ background-color: backgroundColor; font-size: fontSize;}' 解析 css 3、得到最终 css '.cc{ background-color:red; font-size:12px;bor:123}' 4、将最终 css 提交到服务端
-
-编辑场景描述：
-
-1、从服务端取得 css 2、根据模版将 css 中的对象取出 { backgroundColor:'red',fontSize:'12px'} 3、将对象赋值到编辑页面 form 4、重复新建场景
-
-预览场景描述：
-
-1、每次编辑都会实时的生成 css 2、通过 normalizeCSS(css,'#previewId') 将 css 作用到指定 id dom 下 ' #previewId { .cc{ background-color:red; font-size:12px; }}' 3、通过 insertRules('12312', css, document.getElementById('previewId')); 将 style 挂载到预览 dom 上 4、挂载的样式仅会对预览生效
-
-使用场景描述：
-
-1、通过 insertLink('12312', 'http://xxx.css',true); 在页面上加载所有的生成的 css，将会对所有的场景生效。
-
-## stringifyCss
-
-根据指定模版，将对象的值解析道模版中，生成最终的 css 字符串
-
-```js
-const tpl = '.cc{ background-color: backgroundColor; font-size: fontSize;}';
-const a = { backgroundColor: 'red', fontSize: '12px' };
-const c = stringifyCss(tpl, a);
-console.log(c); // .cc{ background-color:red; font-size:12px;}
-```
-
-## parseCss
-
-根据指定模版，将值从 css 字符串中解析成对象
-
-```js
-const tpl = '.cc{ background-color: backgroundColor; font-size: fontSize;}';
-const a = '.cc{ background-color:red; font-size:12px;}';
-const c = parseCss(tpl, a);
-console.log(c); // { backgroundColor:'red',fontSize:'12px'}
-```
-
-## normalizeCSS
-
-编译 css 且支持给 css 提供指定的选择器，如
-
-```js
-const a = '.a{ .b{ font-size:12px; } }';
-
-const css = normalizeCSS(a);
-
-console.log(css);
-
-// output: '.a .b{font-size:12px;}'
-
-const css1 = normalizeCSS(a, '.cc');
-console.log(css1);
-// output: '.cc .a .b{font-size:12px;}'
-```
-
-## insertRules
-
-将 css 挂载到页面上 `insertRules(id: string, rules: string,selector = document.head,);` 指定 id，会覆盖生产的 style 标签
-
-```js
-insertRules('12312', css);
-```
-
-## insertLink
-
-挂载指定的 css link `insertLink(id: string, href: string, insertBefore = false)`
-
-可选择指定挂在在 body.firstElementChild 还是 head 中
-
-```js
-insertLink('12312', 'http://xxx.css', true);
-```
-
-## 关于配置
-
-```ts
-  {
-    type: '类型',
-    // 所有的 css 有一个父级类名，理论上每一个都需要这个配置，是为了兼容第一版本的数据，因为组件太多，要全部重写一遍需要工作量，所以只修改了异常的组件
-    hasPrefixClass: true,
-    // 隐藏自定义类名按钮，当前只有pc端容器
-    hiddenCustomCss: true,
-    variable: {
-      // 允许配置项
-      fontSize: {
-        // 对应编辑器的类型，px color select marginInput 四种
-        type: 'px',
-        label: '尺寸',
-        groupsName: '文字' ,
-        desc: '说明文字'，
-        // 继承其他组件属性时要标记不可编辑
-        canEdit: false,
-        // 编辑从什么地方支撑这个属性
-        extendsKey: 'Form',
-        // 表示这个字段跟随全局主题变量
-        followTheme: '@font-size-base',
-        // 是否隐藏,用于取全局变量，但是不允许用户修改的情况，如表单边框激活颜色
-        hidden: false,
-      },
-    },
-    groupsName: '分组名称',
-    icon: '图标名称要和组件库对应上',
-    title: '标题',
-    defaultValue: [
-      {
-        // 上面定义的配置项的默认值
-        fontSize: '14px',
-      },
-    ],
-    // 是否跟随主题的开关，存在表示当前为跟随
-    followThemes: {
-      '@font-size-base': ['fontSize'],
-    },
-    // 根据上面的配置项和下面的模版解析得到最终挂在的 css
-    tpl: '.hh { font-size: fontSize}',
-    // 如果它被别人继承，并且自己需要自定义样式，如父级自定义样式为 .aa.list{ .item { } } 子级的自定义样式为 .aa.item { }
-    itemCustomTpl: '',
-    // 预览用数据，编辑器中推拽出来的 dsl ，可直接复制，View 下的 components，维护时如预览页面有变更，可直接替换这个数据，无需详细比对
-    components: [],
-  };
-```
-
-### 关于继承
-
-因为继承在预览和自定义样式时需要先加载父级的样式，所以需要在工具中写明哪些组件需要先获取。
-
-如： theme-utils/src/lx-mobile.ts#L63 和 theme-utils/src/lx.ts#L62
-
-```ts
-const extend: any = {};
-```
+# @lingxiteam/theme-utils
+
+antd@4 theme class utils, css utils
+
+```js
+pnpm i @lingxiteam/theme-utils
+
+import {} from '@lingxiteam/theme-utils';
+```
+
+新建场景描述：
+
+1、通过编辑页面 form 得到，theme 的对象 如 { backgroundColor:'red',fontSize:'12px'} 2、根据模版 '.cc{ background-color: backgroundColor; font-size: fontSize;}' 解析 css 3、得到最终 css '.cc{ background-color:red; font-size:12px;bor:123}' 4、将最终 css 提交到服务端
+
+编辑场景描述：
+
+1、从服务端取得 css 2、根据模版将 css 中的对象取出 { backgroundColor:'red',fontSize:'12px'} 3、将对象赋值到编辑页面 form 4、重复新建场景
+
+预览场景描述：
+
+1、每次编辑都会实时的生成 css 2、通过 normalizeCSS(css,'#previewId') 将 css 作用到指定 id dom 下 ' #previewId { .cc{ background-color:red; font-size:12px; }}' 3、通过 insertRules('12312', css, document.getElementById('previewId')); 将 style 挂载到预览 dom 上 4、挂载的样式仅会对预览生效
+
+使用场景描述：
+
+1、通过 insertLink('12312', 'http://xxx.css',true); 在页面上加载所有的生成的 css，将会对所有的场景生效。
+
+## stringifyCss
+
+根据指定模版，将对象的值解析道模版中，生成最终的 css 字符串
+
+```js
+const tpl = '.cc{ background-color: backgroundColor; font-size: fontSize;}';
+const a = { backgroundColor: 'red', fontSize: '12px' };
+const c = stringifyCss(tpl, a);
+console.log(c); // .cc{ background-color:red; font-size:12px;}
+```
+
+## parseCss
+
+根据指定模版，将值从 css 字符串中解析成对象
+
+```js
+const tpl = '.cc{ background-color: backgroundColor; font-size: fontSize;}';
+const a = '.cc{ background-color:red; font-size:12px;}';
+const c = parseCss(tpl, a);
+console.log(c); // { backgroundColor:'red',fontSize:'12px'}
+```
+
+## normalizeCSS
+
+编译 css 且支持给 css 提供指定的选择器，如
+
+```js
+const a = '.a{ .b{ font-size:12px; } }';
+
+const css = normalizeCSS(a);
+
+console.log(css);
+
+// output: '.a .b{font-size:12px;}'
+
+const css1 = normalizeCSS(a, '.cc');
+console.log(css1);
+// output: '.cc .a .b{font-size:12px;}'
+```
+
+## insertRules
+
+将 css 挂载到页面上 `insertRules(id: string, rules: string,selector = document.head,);` 指定 id，会覆盖生产的 style 标签
+
+```js
+insertRules('12312', css);
+```
+
+## insertLink
+
+挂载指定的 css link `insertLink(id: string, href: string, insertBefore = false)`
+
+可选择指定挂在在 body.firstElementChild 还是 head 中
+
+```js
+insertLink('12312', 'http://xxx.css', true);
+```
+
+## 关于配置
+
+```ts
+  {
+    type: '类型',
+    // 所有的 css 有一个父级类名，理论上每一个都需要这个配置，是为了兼容第一版本的数据，因为组件太多，要全部重写一遍需要工作量，所以只修改了异常的组件
+    hasPrefixClass: true,
+    // 隐藏自定义类名按钮，当前只有pc端容器
+    hiddenCustomCss: true,
+    variable: {
+      // 允许配置项
+      fontSize: {
+        // 对应编辑器的类型，px color select marginInput 四种
+        type: 'px',
+        label: '尺寸',
+        groupsName: '文字' ,
+        desc: '说明文字'，
+        // 继承其他组件属性时要标记不可编辑
+        canEdit: false,
+        // 编辑从什么地方支撑这个属性
+        extendsKey: 'Form',
+        // 表示这个字段跟随全局主题变量
+        followTheme: '@font-size-base',
+        // 是否隐藏,用于取全局变量，但是不允许用户修改的情况，如表单边框激活颜色
+        hidden: false,
+      },
+    },
+    groupsName: '分组名称',
+    icon: '图标名称要和组件库对应上',
+    title: '标题',
+    defaultValue: [
+      {
+        // 上面定义的配置项的默认值
+        fontSize: '14px',
+      },
+    ],
+    // 是否跟随主题的开关，存在表示当前为跟随
+    followThemes: {
+      '@font-size-base': ['fontSize'],
+    },
+    // 根据上面的配置项和下面的模版解析得到最终挂在的 css
+    tpl: '.hh { font-size: fontSize}',
+    // 如果它被别人继承，并且自己需要自定义样式，如父级自定义样式为 .aa.list{ .item { } } 子级的自定义样式为 .aa.item { }
+    itemCustomTpl: '',
+    // 预览用数据，编辑器中推拽出来的 dsl ，可直接复制，View 下的 components，维护时如预览页面有变更，可直接替换这个数据，无需详细比对
+    components: [],
+  };
+```
+
+### 关于继承
+
+因为继承在预览和自定义样式时需要先加载父级的样式，所以需要在工具中写明哪些组件需要先获取。
+
+如： theme-utils/src/lx-mobile.ts#L63 和 theme-utils/src/lx.ts#L62
+
+```ts
+const extend: any = {};
+```

package/dist/config/Container.d.ts

@@ -93,6 +93,7 @@ export declare const Container: {
             cardIconType: string;
             extendNum: number;
             title: string;
+            subTitle: string;
             bordered: boolean;
             size: string;
             hasHeader: boolean;
@@ -160,6 +161,7 @@ export declare const Container: {
             collapseType: string;
             extendNum?: undefined;
             title?: undefined;
+            subTitle?: undefined;
             hasHeader?: undefined;
             headerColor?: undefined;
             isFlexColumn?: undefined;
@@ -210,6 +212,7 @@ export declare const Container: {
                 name: string;
                 basicStatus: number;
                 header: string;
+                subTitle: string;
                 key: string;
             };
             style: {
@@ -277,6 +280,7 @@ export declare const Container: {
             rowKey: string;
             cardIconType?: undefined;
             title?: undefined;
+            subTitle?: undefined;
             hasHeader?: undefined;
             hasIcon?: undefined;
             headerColor?: undefined;

package/dist/config/Container.js

@@ -146,6 +146,7 @@ export var Container = {
       cardIconType: 'middle',
       extendNum: 3,
       title: '标题',
+      subTitle: '副标题',
       bordered: true,
       size: 'default',
       hasHeader: true,
@@ -214,6 +215,7 @@ export var Container = {
         name: '折叠子面板',
         basicStatus: 1,
         header: '标题1',
+        subTitle: '副标题1',
         key: '1'
       },
       style: {
@@ -243,6 +245,7 @@ export var Container = {
         name: '折叠子面板',
         basicStatus: 1,
         header: '标题2',
+        subTitle: '副标题2',
         key: '2'
       },
       style: {

package/dist/config/Steps.d.ts

@@ -0,0 +1,265 @@
+export declare const Steps: {
+    type: string;
+    groupsName: string;
+    variable: {
+        backgroundColor: {
+            type: string;
+            label: string;
+            groupsName: string;
+        };
+        titleColor: {
+            type: string;
+            label: string;
+            groupsName: string;
+            followTheme: string;
+        };
+        fontSize: {
+            type: string;
+            label: string;
+            groupsName: string;
+        };
+        lineHeight: {
+            type: string;
+            label: string;
+            groupsName: string;
+        };
+        fontWeight: {
+            type: string;
+            label: string;
+            groupsName: string;
+            options: {
+                title: string;
+                value: string;
+            }[];
+        };
+        subTextColor: {
+            type: string;
+            label: string;
+            groupsName: string;
+            followTheme: string;
+        };
+        subFontSize: {
+            type: string;
+            label: string;
+            groupsName: string;
+        };
+        subLineHeight: {
+            type: string;
+            label: string;
+            groupsName: string;
+        };
+        subFontWeight: {
+            type: string;
+            label: string;
+            groupsName: string;
+            options: {
+                title: string;
+                value: string;
+            }[];
+        };
+        descriptionTextColor: {
+            type: string;
+            label: string;
+            groupsName: string;
+            followTheme: string;
+        };
+        descriptionFontSize: {
+            type: string;
+            label: string;
+            groupsName: string;
+        };
+        descriptionLineHeight: {
+            type: string;
+            label: string;
+            groupsName: string;
+        };
+        descriptionFontWeight: {
+            type: string;
+            label: string;
+            groupsName: string;
+            options: {
+                title: string;
+                value: string;
+            }[];
+        };
+        processIconColor: {
+            type: string;
+            label: string;
+            groupsName: string;
+            followTheme: string;
+        };
+        finishIconColor: {
+            type: string;
+            label: string;
+            groupsName: string;
+            followTheme: string;
+        };
+        waitIconColor: {
+            type: string;
+            label: string;
+            groupsName: string;
+            followTheme: string;
+        };
+        errorIconColor: {
+            type: string;
+            label: string;
+            groupsName: string;
+            followTheme: string;
+        };
+        lineColor: {
+            type: string;
+            label: string;
+            groupsName: string;
+            followTheme: string;
+        };
+    };
+    icon: string;
+    title: string;
+    defaultValue: {
+        backgroundColor: string;
+        fontSize: string;
+        lineHeight: string;
+        fontWeight: string;
+        subFontSize: string;
+        subLineHeight: string;
+        subFontWeight: string;
+        descriptionFontSize: string;
+        descriptionLineHeight: string;
+        descriptionFontWeight: string;
+    }[];
+    followThemes: {
+        '@primary-color': string[];
+        '@text-color-secondary': string[];
+        '@border-color-base': string[];
+        '@error-color': string[];
+        '@heading-color': string[];
+    };
+    tpl: string;
+    components: ({
+        id: string;
+        label: string;
+        compName: string;
+        type: string;
+        compType: number;
+        props: {
+            name: string;
+            basicStatus: number;
+            labelPlacement: string;
+            stepStyle: string;
+            type: string;
+            direction: string;
+            size: string;
+            iconSetting: {
+                label: string;
+                value: string;
+            }[];
+            stepsOptions: {
+                id: number;
+                title: string;
+                status: string;
+                subTitle: string;
+                description: string;
+            }[];
+            alias: {
+                id: string;
+                description: string;
+                disabled: string;
+                status: string;
+                subTitle: string;
+                title: string;
+                icon: string;
+            };
+        };
+        style: {
+            margin?: undefined;
+        };
+        platform: string;
+        setEvents: never[];
+        components: never[];
+        path: string[];
+    } | {
+        id: string;
+        label: string;
+        compName: string;
+        type: string;
+        compType: number;
+        props: {
+            name: string;
+            basicStatus: number;
+            labelPlacement: string;
+            stepStyle: string;
+            type: string;
+            direction: string;
+            size: string;
+            iconSetting: {
+                label: string;
+                value: string;
+            }[];
+            stepsOptions: {
+                id: number;
+                title: string;
+                status: string;
+                subTitle: string;
+                description: string;
+            }[];
+            alias: {
+                id: string;
+                description: string;
+                disabled: string;
+                status: string;
+                subTitle: string;
+                title: string;
+                icon: string;
+            };
+        };
+        style: {
+            margin: string;
+        };
+        platform: string;
+        setEvents: never[];
+        components: never[];
+        path: string[];
+    } | {
+        id: string;
+        label: string;
+        compName: string;
+        type: string;
+        compType: number;
+        props: {
+            name: string;
+            basicStatus: number;
+            labelPlacement: string;
+            stepStyle: string;
+            type: string;
+            direction: string;
+            size: string;
+            iconSetting: {
+                label: string;
+                value: string;
+            }[];
+            stepsOptions: {
+                id: number;
+                title: string;
+                status: string;
+                subTitle: string;
+                description: string;
+            }[];
+            alias: {
+                id: string;
+                description: string;
+                disabled: string;
+                status: string;
+                subTitle: string;
+                title: string;
+                icon: string;
+            };
+        };
+        style: {
+            margin: string;
+        };
+        platform: string;
+        setEvents: never[];
+        components: never[];
+        path?: undefined;
+    })[];
+};

package/dist/config/Steps.js

@@ -0,0 +1,535 @@
+export var Steps = {
+  type: 'Steps',
+  groupsName: '导航',
+  variable: {
+    backgroundColor: {
+      type: 'color',
+      label: '背景颜色',
+      groupsName: '背景'
+    },
+    titleColor: {
+      type: 'color',
+      label: '标题颜色',
+      groupsName: '标题',
+      followTheme: '@heading-color'
+    },
+    fontSize: {
+      type: 'px',
+      label: '标题尺寸',
+      groupsName: '标题'
+    },
+    lineHeight: {
+      type: 'px',
+      label: '标题行高',
+      groupsName: '标题'
+    },
+    fontWeight: {
+      type: 'select',
+      label: '标题字重',
+      groupsName: '标题',
+      options: [{
+        title: '100',
+        value: '100'
+      }, {
+        title: '200',
+        value: '200'
+      }, {
+        title: '300',
+        value: '300'
+      }, {
+        title: '400',
+        value: '400'
+      }, {
+        title: '500',
+        value: '500'
+      }, {
+        title: '600',
+        value: '600'
+      }, {
+        title: '700',
+        value: '700'
+      }]
+    },
+    subTextColor: {
+      type: 'color',
+      label: '副标题颜色',
+      groupsName: '副标题',
+      followTheme: '@text-color-secondary'
+    },
+    subFontSize: {
+      type: 'px',
+      label: '副标题尺寸',
+      groupsName: '副标题'
+    },
+    subLineHeight: {
+      type: 'px',
+      label: '副标题行高',
+      groupsName: '副标题'
+    },
+    subFontWeight: {
+      type: 'select',
+      label: '副标题字重',
+      groupsName: '副标题',
+      options: [{
+        title: '100',
+        value: '100'
+      }, {
+        title: '200',
+        value: '200'
+      }, {
+        title: '300',
+        value: '300'
+      }, {
+        title: '400',
+        value: '400'
+      }, {
+        title: '500',
+        value: '500'
+      }, {
+        title: '600',
+        value: '600'
+      }, {
+        title: '700',
+        value: '700'
+      }]
+    },
+    descriptionTextColor: {
+      type: 'color',
+      label: '内容颜色',
+      groupsName: '描述',
+      followTheme: '@text-color-secondary'
+    },
+    descriptionFontSize: {
+      type: 'px',
+      label: '内容尺寸',
+      groupsName: '描述'
+    },
+    descriptionLineHeight: {
+      type: 'px',
+      label: '内容行高',
+      groupsName: '描述'
+    },
+    descriptionFontWeight: {
+      type: 'select',
+      label: '内容字重',
+      groupsName: '描述',
+      options: [{
+        title: '100',
+        value: '100'
+      }, {
+        title: '200',
+        value: '200'
+      }, {
+        title: '300',
+        value: '300'
+      }, {
+        title: '400',
+        value: '400'
+      }, {
+        title: '500',
+        value: '500'
+      }, {
+        title: '600',
+        value: '600'
+      }, {
+        title: '700',
+        value: '700'
+      }]
+    },
+    processIconColor: {
+      type: 'color',
+      label: '进行中',
+      groupsName: '步骤符号',
+      followTheme: '@primary-color'
+    },
+    finishIconColor: {
+      type: 'color',
+      label: '完成',
+      groupsName: '步骤符号',
+      followTheme: '@primary-color'
+    },
+    waitIconColor: {
+      type: 'color',
+      label: '等待',
+      groupsName: '步骤符号',
+      followTheme: '@text-color-secondary'
+    },
+    errorIconColor: {
+      type: 'color',
+      label: '错误',
+      groupsName: '步骤符号',
+      followTheme: '@error-color'
+    },
+    lineColor: {
+      type: 'color',
+      label: '连接线颜色',
+      groupsName: '其他',
+      followTheme: '@border-color-base'
+    }
+  },
+  icon: 'icon-ico-comp-steps',
+  title: '步骤条',
+  defaultValue: [{
+    backgroundColor: '#ffffff',
+    fontSize: '16px',
+    lineHeight: '24px',
+    fontWeight: '600',
+    subFontSize: '14px',
+    subLineHeight: '22px',
+    subFontWeight: '400',
+    descriptionFontSize: '12px',
+    descriptionLineHeight: '16px',
+    descriptionFontWeight: '400'
+  }],
+  followThemes: {
+    '@primary-color': ['processIconColor', 'finishIconColor'],
+    '@text-color-secondary': ['subTextColor', 'descriptionTextColor', 'waitIconColor'],
+    '@border-color-base': ['lineColor'],
+    '@error-color': ['errorIconColor'],
+    '@heading-color': ['titleColor']
+  },
+  tpl: "\n  .pcfactory-steps {\n    background-color: backgroundColor;\n  }\n\n    .pcfactory-steps-item-title {\n      color: titleColor;\n      line-height: lineHeight;\n      font-size: fontSize;\n      font-weight: fontWeight;\n    }\n    \n    .pcfactory-steps-item-finish > .pcfactory-steps-item-container > .pcfactory-steps-item-content > .pcfactory-steps-item-title,\n    .pcfactory-steps-item-process > .pcfactory-steps-item-container > .pcfactory-steps-item-content > .pcfactory-steps-item-title,\n    .pcfactory-steps-item-wait > .pcfactory-steps-item-container > .pcfactory-steps-item-content > .pcfactory-steps-item-title {\n       color: titleColor;\n    }\n    \n    .pcfactory-steps-item-subtitle {\n       color: subTextColor;\n       line-height: subLineHeight;\n       font-size: subFontSize;\n       font-weight: subFontWeight;\n    }\n\n    .pcfactory-steps-item-description {\n       color: descriptionTextColor;\n       line-height: descriptionLineHeight;\n       font-size: descriptionFontSize;\n       font-weight: descriptionFontWeight;\n    }\n    .pcfactory-steps-item-finish > .pcfactory-steps-item-container > .pcfactory-steps-item-content > .pcfactory-steps-item-description,\n    .pcfactory-steps-item-process > .pcfactory-steps-item-container > .pcfactory-steps-item-content > .pcfactory-steps-item-description,\n    .pcfactory-steps-item-wait > .pcfactory-steps-item-container > .pcfactory-steps-item-content > .pcfactory-steps-item-description {\n       color: descriptionTextColor;\n    }\n\n\n    .ued-step-wrap-finish {\n      color: finishIconColor;\n      border-color: finishIconColor;\n    }\n    .ued-step-wrap-dot-finish {\n       background-color: finishIconColor;\n    }\n    .pcfactory-steps-item-finish .pcfactory-steps-item-icon > .pcfactory-steps-icon {\n       color: finishIconColor;\n    }\n    .pcfactory-steps-item-finish > .pcfactory-steps-item-container > .pcfactory-steps-item-content > .pcfactory-steps-item-title::after {\n       background-color: finishIconColor;\n    }\n    .pcfactory-steps-item-finish > .pcfactory-steps-item-container > .pcfactory-steps-item-tail::after {\n       background-color: finishIconColor;\n    }\n    \n    .ued-step-wrap-process {\n      border-color: processIconColor;\n      background: processIconColor;\n    }\n    .ued-step-wrap-dot-process {\n       background-color: processIconColor;\n    }\n    .pcfactory-steps-item-custom.pcfactory-steps-item-process .pcfactory-steps-item-icon > .pcfactory-steps-icon {\n       color: processIconColor;\n    }\n    .pcfactory-steps-navigation .pcfactory-steps-item::before {\n      background-color: processIconColor;\n    }\n\n    .ued-step-wrap-wait {\n      color: waitIconColor;\n      border-color: waitIconColor;\n    }\n    .ued-step-wrap-dot-wait {\n       background-color: waitIconColor;\n    }\n    .pcfactory-steps-item-wait .pcfactory-steps-item-icon > .pcfactory-steps-icon {\n       color: waitIconColor;\n    }\n\n    .ued-step-wrap-error {\n       color: errorIconColor;\n       border-color: errorIconColor;\n    }\n    .ued-step-wrap-dot-error {\n       background-color: errorIconColor;\n    }\n    .pcfactory-steps-item-error .pcfactory-steps-item-icon > .pcfactory-steps-icon {\n       color: errorIconColor;\n    }\n    .pcfactory-steps-item-error > .pcfactory-steps-item-container > .pcfactory-steps-item-content > .pcfactory-steps-item-title {\n       color: errorIconColor;\n    }\n    .pcfactory-steps-item-error > .pcfactory-steps-item-container > .pcfactory-steps-item-content > .pcfactory-steps-item-description {\n       color: errorIconColor;\n    } \n\n    .pcfactory-steps-item-process > .pcfactory-steps-item-container > .pcfactory-steps-item-content > .pcfactory-steps-item-title::after,\n    .pcfactory-steps-item-wait > .pcfactory-steps-item-container > .pcfactory-steps-item-content > .pcfactory-steps-item-title::after {\n       background-color: lineColor;\n    }\n    .pcfactory-steps-item-process > .pcfactory-steps-item-container > .pcfactory-steps-item-tail::after,\n    .pcfactory-steps-item-wait > .pcfactory-steps-item-container > .pcfactory-steps-item-tail::after {\n       background-color: lineColor;\n    }\n    .pcfactory-steps-navigation .pcfactory-steps-item::after {\n       border-color: lineColor;\n    }\n     \n  ",
+  components: [{
+    id: 'Steps_2037204',
+    label: '步骤条',
+    compName: 'Steps',
+    type: 'Steps',
+    compType: 5,
+    props: {
+      name: '步骤条',
+      basicStatus: 1,
+      labelPlacement: 'horizontal',
+      stepStyle: 'number',
+      type: 'default',
+      direction: 'horizontal',
+      size: 'default',
+      iconSetting: [{
+        label: '等待状态',
+        value: 'wait'
+      }, {
+        label: '处理中状态',
+        value: 'process'
+      }, {
+        label: '完成状态',
+        value: 'finish'
+      }, {
+        label: '错误状态',
+        value: 'error'
+      }],
+      stepsOptions: [{
+        id: 1,
+        title: '1',
+        status: 'finish',
+        subTitle: 'first',
+        description: '第一步'
+      }, {
+        id: 2,
+        title: '2',
+        status: 'process',
+        subTitle: 'second',
+        description: '第二步'
+      }, {
+        id: 3,
+        title: '3',
+        status: 'wait',
+        subTitle: 'third',
+        description: '第三步'
+      }, {
+        id: 4,
+        title: '4',
+        status: 'error',
+        subTitle: 'fourth',
+        description: '第四步'
+      }],
+      alias: {
+        id: 'id',
+        description: 'description',
+        disabled: 'disabled',
+        status: 'status',
+        subTitle: 'subTitle',
+        title: 'title',
+        icon: 'icon'
+      }
+    },
+    style: {},
+    platform: 'pc',
+    setEvents: [],
+    components: [],
+    path: ['998509', 'View_998509_1']
+  }, {
+    id: 'Steps_2097604',
+    label: '步骤条',
+    compName: 'Steps',
+    type: 'Steps',
+    compType: 5,
+    props: {
+      name: '步骤条',
+      basicStatus: 1,
+      labelPlacement: 'horizontal',
+      stepStyle: 'icon',
+      type: 'default',
+      direction: 'horizontal',
+      size: 'default',
+      iconSetting: [{
+        label: '等待状态',
+        value: 'wait'
+      }, {
+        label: '处理中状态',
+        value: 'process'
+      }, {
+        label: '完成状态',
+        value: 'finish'
+      }, {
+        label: '错误状态',
+        value: 'error'
+      }],
+      stepsOptions: [{
+        id: 1,
+        title: '1',
+        status: 'finish',
+        subTitle: 'first',
+        description: '第一步'
+      }, {
+        id: 2,
+        title: '2',
+        status: 'process',
+        subTitle: 'second',
+        description: '第二步'
+      }, {
+        id: 3,
+        title: '3',
+        status: 'wait',
+        subTitle: 'third',
+        description: '第三步'
+      }, {
+        id: 4,
+        title: '4',
+        status: 'error',
+        subTitle: 'fourth',
+        description: '第四步'
+      }],
+      alias: {
+        id: 'id',
+        description: 'description',
+        disabled: 'disabled',
+        status: 'status',
+        subTitle: 'subTitle',
+        title: 'title',
+        icon: 'icon'
+      }
+    },
+    style: {
+      margin: '20px 0 0 0'
+    },
+    platform: 'pc',
+    setEvents: [],
+    components: [],
+    path: ['998509', 'View_998509_1']
+  }, {
+    id: 'Steps_3098604',
+    label: '步骤条',
+    compName: 'Steps',
+    type: 'Steps',
+    compType: 5,
+    props: {
+      name: '步骤条',
+      basicStatus: 1,
+      labelPlacement: 'horizontal',
+      stepStyle: 'dot',
+      type: 'default',
+      direction: 'horizontal',
+      size: 'default',
+      iconSetting: [{
+        label: '等待状态',
+        value: 'wait'
+      }, {
+        label: '处理中状态',
+        value: 'process'
+      }, {
+        label: '完成状态',
+        value: 'finish'
+      }, {
+        label: '错误状态',
+        value: 'error'
+      }],
+      stepsOptions: [{
+        id: 1,
+        title: '1',
+        status: 'finish',
+        subTitle: 'first',
+        description: '第一步'
+      }, {
+        id: 2,
+        title: '2',
+        status: 'process',
+        subTitle: 'second',
+        description: '第二步'
+      }, {
+        id: 3,
+        title: '3',
+        status: 'wait',
+        subTitle: 'third',
+        description: '第三步'
+      }, {
+        id: 4,
+        title: '4',
+        status: 'error',
+        subTitle: 'fourth',
+        description: '第四步'
+      }],
+      alias: {
+        id: 'id',
+        description: 'description',
+        disabled: 'disabled',
+        status: 'status',
+        subTitle: 'subTitle',
+        title: 'title',
+        icon: 'icon'
+      }
+    },
+    style: {
+      margin: '20px 0 0 0'
+    },
+    platform: 'pc',
+    setEvents: [],
+    components: [],
+    path: ['998509', 'View_998509_1']
+  }, {
+    id: 'Steps_862902',
+    label: '步骤条',
+    compName: 'Steps',
+    type: 'Steps',
+    compType: 5,
+    props: {
+      name: '步骤条',
+      basicStatus: 1,
+      labelPlacement: 'horizontal',
+      stepStyle: 'number',
+      type: 'navigation',
+      direction: 'horizontal',
+      size: 'default',
+      iconSetting: [{
+        label: '等待状态',
+        value: 'wait'
+      }, {
+        label: '处理中状态',
+        value: 'process'
+      }, {
+        label: '完成状态',
+        value: 'finish'
+      }, {
+        label: '错误状态',
+        value: 'error'
+      }],
+      stepsOptions: [{
+        id: 1,
+        title: '1',
+        status: 'finish',
+        subTitle: 'first',
+        description: '第一步'
+      }, {
+        id: 2,
+        title: '2',
+        status: 'process',
+        subTitle: 'second',
+        description: '第二步'
+      }, {
+        id: 3,
+        title: '3',
+        status: 'wait',
+        subTitle: 'third',
+        description: '第三步'
+      }, {
+        id: 4,
+        title: '4',
+        status: 'error',
+        subTitle: 'fourth',
+        description: '第四步'
+      }],
+      alias: {
+        id: 'id',
+        description: 'description',
+        disabled: 'disabled',
+        status: 'status',
+        subTitle: 'subTitle',
+        title: 'title',
+        icon: 'icon'
+      }
+    },
+    style: {
+      margin: '20px 0 0 0'
+    },
+    platform: 'pc',
+    setEvents: [],
+    components: []
+  }, {
+    id: 'Steps_1137204',
+    label: '步骤条',
+    compName: 'Steps',
+    type: 'Steps',
+    compType: 5,
+    props: {
+      name: '步骤条',
+      basicStatus: 1,
+      labelPlacement: 'horizontal',
+      stepStyle: 'number',
+      type: 'default',
+      direction: 'vertical',
+      size: 'default',
+      iconSetting: [{
+        label: '等待状态',
+        value: 'wait'
+      }, {
+        label: '处理中状态',
+        value: 'process'
+      }, {
+        label: '完成状态',
+        value: 'finish'
+      }, {
+        label: '错误状态',
+        value: 'error'
+      }],
+      stepsOptions: [{
+        id: 1,
+        title: '1',
+        status: 'finish',
+        subTitle: 'first',
+        description: '第一步'
+      }, {
+        id: 2,
+        title: '2',
+        status: 'process',
+        subTitle: 'second',
+        description: '第二步'
+      }, {
+        id: 3,
+        title: '3',
+        status: 'wait',
+        subTitle: 'third',
+        description: '第三步'
+      }, {
+        id: 4,
+        title: '4',
+        status: 'error',
+        subTitle: 'fourth',
+        description: '第四步'
+      }],
+      alias: {
+        id: 'id',
+        description: 'description',
+        disabled: 'disabled',
+        status: 'status',
+        subTitle: 'subTitle',
+        title: 'title',
+        icon: 'icon'
+      }
+    },
+    style: {
+      margin: '20px 0 0 0'
+    },
+    platform: 'pc',
+    setEvents: [],
+    components: [],
+    path: ['998509', 'View_998509_1']
+  }]
+};

package/dist/lx.js

@@ -35,6 +35,7 @@ import { Table } from "./config/Table";
 import { Tag } from "./config/Tag";
 import { Tree } from "./config/Tree";
 import { Description } from "./config/Description";
+import { Steps } from "./config/Steps";
 export var THEME_KEYS_TITLE = {
   '@primary-color': '主题色',
   '@font-size-base': '主字号',
@@ -78,7 +79,8 @@ export var ASSETS_CSS_TPL = {
   Table: Table,
   Tag: Tag,
   Tree: Tree,
-  Description: Description
+  Description: Description,
+  Steps: Steps
 };
 export var pcExtend = {
   Input: 'Form',

package/dist/utils.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); }
-/**
- *  根据 groupsName 将对象分成数组
- * @param obj
- * @returns
+/**
+ *  根据 groupsName 将对象分成数组
+ * @param obj
+ * @returns
  */
 export function objToListByGroupsName(obj) {
   var groups = {};
@@ -34,10 +34,10 @@ export function objToListByGroupsName(obj) {
   return result;
 }
 
-/**
- *  (内部方法) 根据 groupsName 将对象分成数组
- * @param obj
- * @returns
+/**
+ *  (内部方法) 根据 groupsName 将对象分成数组
+ * @param obj
+ * @returns
  */
 export function __objToListByGroupsName(obj) {
   var groups = {};

package/package.json

@@ -1,38 +1,38 @@
-{
-  "name": "@lingxiteam/theme-utils",
-  "version": "0.5.9",
-  "description": "",
-  "keywords": [],
-  "license": "MIT",
-  "author": "",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "files": [
-    "dist"
-  ],
-  "scripts": {
-    "build": "father build",
-    "dev": "father dev",
-    "format": "prettier --write .",
-    "g": "esno scripts/generateConfig",
-    "gp": "esno scripts/generatePage",
-    "test": "esno a.ts"
-  },
-  "dependencies": {
-    "stylis": "^4.3.0"
-  },
-  "devDependencies": {
-    "@types/stylis": "^4.2.0",
-    "esno": "^0.17.0",
-    "father": "^4.3.0",
-    "prettier": "^2.6.2",
-    "prettier-plugin-organize-imports": "^2.3.4",
-    "prettier-plugin-packagejson": "^2.2.18"
-  },
-  "peerDependencies": {
-    "antd": "4.18.8"
-  },
-  "publishConfig": {
-    "access": "public"
-  }
-}
+{
+  "name": "@lingxiteam/theme-utils",
+  "version": "0.5.10",
+  "description": "",
+  "keywords": [],
+  "license": "MIT",
+  "author": "",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "father build",
+    "dev": "father dev",
+    "format": "prettier --write .",
+    "g": "esno scripts/generateConfig",
+    "gp": "esno scripts/generatePage",
+    "test": "esno a.ts"
+  },
+  "dependencies": {
+    "stylis": "^4.3.0"
+  },
+  "devDependencies": {
+    "@types/stylis": "^4.2.0",
+    "esno": "^0.17.0",
+    "father": "^4.3.0",
+    "prettier": "^2.6.2",
+    "prettier-plugin-organize-imports": "^2.3.4",
+    "prettier-plugin-packagejson": "^2.2.18"
+  },
+  "peerDependencies": {
+    "antd": "4.18.8"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}