fix: steps 组件优化

src/packages/steps/demo.vue

@@ -2,23 +2,47 @@
   <div>
     <h4>基础样式</h4>
     <nut-steps>
-      <nut-step title="已签收" content="您的订单已由本人签收。如有疑问您可以联系配送员，感谢您在京东购物。" time="2020-03-03 11：09：96">
+      <nut-step title="已签收" content="您的订单已由本人签收。如有疑问您可以联系配送员，感谢您在京东购物。" time="2020-03-03 11:09:96">
         <template v-slot:status-icon>
           <nut-icon type="self" :url="require('../../assets/svg/finish.svg')"></nut-icon>
         </template>
       </nut-step>
-      <nut-step title="运输中" content="您的订单已达到京东【北京旧宫营业部】" time="2020-03-03 11：09：96"></nut-step>
-      <nut-step content="您的订单已达到京东【北京旧宫营业部】" time="2020-03-03 11：09：96"></nut-step>
-      <nut-step content="您的订单由京东【北京顺义分拣中心】送往【北京旧宫营业部】" time="2020-03-03 11：09：96"></nut-step>
-      <nut-step title="已下单" content="您提交了订单，请等待系统确认" time="2020-03-03 11：09：96"></nut-step>
+      <nut-step title="运输中" content="您的订单已达到京东【北京旧宫营业部】" time="2020-03-03 11:09:06">
+        <template v-slot:status-icon>
+          <nut-icon type="self" :url="require('../../assets/svg/processed.svg')"></nut-icon>
+        </template>
+      </nut-step>
+      <nut-step content="您的订单已达到京东【北京旧宫营业部】" time="2020-03-03 11:09:06"></nut-step>
+      <nut-step content="您的订单由京东【北京顺义分拣中心】送往【北京旧宫营业部】" time="2020-03-03 11:09:06"></nut-step>
+      <nut-step title="已下单" content="您提交了订单，请等待系统确认" time="2020-03-03 11:09:06">
+        <template v-slot:status-icon>
+          <nut-icon type="self" :url="require('../../assets/svg/processed.svg')"></nut-icon>
+        </template>
+      </nut-step>
+    </nut-steps>
+    <h4>迷你样式</h4>
+    <nut-steps type="mini">
+      <nut-step title="已签收" content="您的订单已由本人签收。如有疑问您可以联系配送员，感谢您在京东购物。" time="2020-03-03 11:09:96"></nut-step>
+      <nut-step title="运输中" content="您的订单已达到京东【北京旧宫营业部】" time="2020-03-03 11:09:06"></nut-step>
+      <nut-step content="您的订单已达到京东【北京旧宫营业部】" time="2020-03-03 11:09:06"></nut-step>
+      <nut-step content="您的订单由京东【北京顺义分拣中心】送往【北京旧宫营业部】" time="2020-03-03 11:09:06"></nut-step>
+      <nut-step title="已下单" content="您提交了订单，请等待系统确认" time="2020-03-03 11:09:06"></nut-step>
     </nut-steps>
     <h4>时间前置</h4>
     <nut-steps :time-forward="true">
-      <nut-step title="已签收" content="您的订单已由本人签收。如有疑问您可以联系配送员，感谢您在京东购物。" time="2020-03-03 11：09：96"></nut-step>
-      <nut-step title="运输中" content="您的订单已达到京东【北京旧宫营业部】" time="2020-03-03 11：09：96"></nut-step>
-      <nut-step content="您的订单已达到京东【北京旧宫营业部】" time="2020-03-03 11：09：96"></nut-step>
-      <nut-step content="您的订单由京东【北京顺义分拣中心】送往【北京旧宫营业部】" time="2020-03-03 11：09：96"></nut-step>
-      <nut-step title="已下单" content="您提交了订单，请等待系统确认" time="2020-03-03 11：09：96"></nut-step>
+      <nut-step title="已签收" content="您的订单已由本人签收。如有疑问您可以联系配送员，感谢您在京东购物。" time="03-03 11:09">
+        <template v-slot:status-icon>
+          <nut-icon type="self" :url="require('../../assets/svg/finish.svg')"></nut-icon>
+        </template>
+      </nut-step>
+      <nut-step title="运输中" content="您的订单已达到京东【北京旧宫营业部】" time="03-03 11:09">
+        <template v-slot:status-icon>
+          <nut-icon type="self" :url="require('../../assets/svg/processed.svg')"></nut-icon>
+        </template>
+      </nut-step>
+      <nut-step content="您的订单已达到京东【北京旧宫营业部】" time="03-03 11:09"></nut-step>
+      <nut-step content="您的订单由京东【北京顺义分拣中心】送往【北京旧宫营业部】" time="03-03 11:09"></nut-step>
+      <nut-step title="已下单" content="您提交了订单，请等待系统确认" time="03-03 11:09"></nut-step>
     </nut-steps>
     <h4>横向步骤条</h4>
     <nut-steps :current="1" type="process" direction="horizontal">

src/packages/steps/doc.md

@@ -8,11 +8,35 @@
 
 ```html
 <nut-steps>
-  <nut-step title="已签收" content="您的订单已由本人签收。如有疑问您可以联系配送员，感谢您在京东购物。" time="2020-03-03 11：09：96"></nut-step>
-  <nut-step title="运输中" content="您的订单已达到京东【北京旧宫营业部】" time="2020-03-03 11：09：96"></nut-step>
-  <nut-step content="您的订单已达到京东【北京旧宫营业部】" time="2020-03-03 11：09：96"></nut-step>
-  <nut-step content="您的订单由京东【北京顺义分拣中心】送往【北京旧宫营业部】" time="2020-03-03 11：09：96"></nut-step>
-  <nut-step title="已下单" content="您提交了订单，请等待系统确认" time="2020-03-03 11：09：96"></nut-step>
+  <nut-step title="已签收" content="您的订单已由本人签收。如有疑问您可以联系配送员，感谢您在京东购物。" time="2020-03-03 11:09:96">
+    <template v-slot:status-icon>
+      <nut-icon type="self" :url="require('../../assets/svg/finish.svg')"></nut-icon>
+    </template>
+  </nut-step>
+  <nut-step title="运输中" content="您的订单已达到京东【北京旧宫营业部】" time="2020-03-03 11:09:06">
+    <template v-slot:status-icon>
+      <nut-icon type="self" :url="require('../../assets/svg/processed.svg')"></nut-icon>
+    </template>
+  </nut-step>
+  <nut-step content="您的订单已达到京东【北京旧宫营业部】" time="2020-03-03 11:09:06"></nut-step>
+  <nut-step content="您的订单由京东【北京顺义分拣中心】送往【北京旧宫营业部】" time="2020-03-03 11:09:06"></nut-step>
+  <nut-step title="已下单" content="您提交了订单，请等待系统确认" time="2020-03-03 11:09:06">
+    <template v-slot:status-icon>
+      <nut-icon type="self" :url="require('../../assets/svg/processed.svg')"></nut-icon>
+    </template>
+  </nut-step>
+</nut-steps>
+```
+
+迷你样式
+
+```html
+<nut-steps type="mini">
+  <nut-step title="已签收" content="您的订单已由本人签收。如有疑问您可以联系配送员，感谢您在京东购物。" time="2020-03-03 11:09:96"></nut-step>
+  <nut-step title="运输中" content="您的订单已达到京东【北京旧宫营业部】" time="2020-03-03 11:09:06"></nut-step>
+  <nut-step content="您的订单已达到京东【北京旧宫营业部】" time="2020-03-03 11:09:06"></nut-step>
+  <nut-step content="您的订单由京东【北京顺义分拣中心】送往【北京旧宫营业部】" time="2020-03-03 11:09:06"></nut-step>
+  <nut-step title="已下单" content="您提交了订单，请等待系统确认" time="2020-03-03 11:09:06"></nut-step>
 </nut-steps>
 ```
 
@@ -20,24 +44,40 @@
 
 ```html
 <nut-steps :time-forward="true">
-  <nut-step title="已签收" content="您的订单已由本人签收。如有疑问您可以联系配送员，感谢您在京东购物。" time="2020-03-03 11：09：96"></nut-step>
-  <nut-step title="运输中" content="您的订单已达到京东【北京旧宫营业部】" time="2020-03-03 11：09：96"></nut-step>
-  <nut-step content="您的订单已达到京东【北京旧宫营业部】" time="2020-03-03 11：09：96"></nut-step>
-  <nut-step content="您的订单由京东【北京顺义分拣中心】送往【北京旧宫营业部】" time="2020-03-03 11：09：96"></nut-step>
-  <nut-step title="已下单" content="您提交了订单，请等待系统确认" time="2020-03-03 11：09：96"></nut-step>
+  <nut-step title="已签收" content="您的订单已由本人签收。如有疑问您可以联系配送员，感谢您在京东购物。" time="03-03 11:09">
+    <template v-slot:status-icon>
+      <nut-icon type="self" :url="require('../../assets/svg/finish.svg')"></nut-icon>
+    </template>
+  </nut-step>
+  <nut-step title="运输中" content="您的订单已达到京东【北京旧宫营业部】" time="03-03 11:09">
+    <template v-slot:status-icon>
+      <nut-icon type="self" :url="require('../../assets/svg/processed.svg')"></nut-icon>
+    </template>
+  </nut-step>
+  <nut-step content="您的订单已达到京东【北京旧宫营业部】" time="03-03 11:09"></nut-step>
+  <nut-step content="您的订单由京东【北京顺义分拣中心】送往【北京旧宫营业部】" time="03-03 11:09"></nut-step>
+  <nut-step title="已下单" content="您提交了订单，请等待系统确认" time="03-03 11:09"></nut-step>
 </nut-steps>
 ```
 
 横向步骤条
 ```html
 <nut-steps :current="1" type="process" direction="horizontal">
-  <nut-step title="已完成" ></nut-step>
-  <nut-step title="进行中" ></nut-step>
-  <nut-step title="等待中" ></nut-step>
+  <nut-step title="已完成"></nut-step>
+  <nut-step title="进行中">
+    <template v-slot:status-icon>
+      <nut-icon type="self" :url="require('../../assets/svg/process.svg')"></nut-icon>
+    </template>
+  </nut-step>
+  <nut-step title="等待中"></nut-step>
 </nut-steps>
 <nut-steps :current="1" type="process" direction="horizontal">
   <nut-step title="已完成" content="这里是描述文字"></nut-step>
-  <nut-step title="进行中" content="这里是描述文字"></nut-step>
+  <nut-step title="进行中" content="这里是描述文字">
+    <template v-slot:status-icon>
+      <nut-icon type="self" :url="require('../../assets/svg/process.svg')"></nut-icon>
+    </template>
+  </nut-step>
   <nut-step title="等待中" content="这里是描述文字"></nut-step>
 </nut-steps>
 ```
@@ -53,7 +93,7 @@
 | current | 当前所在的步骤                        | Number | 0                                                        |
 | time-forward  | 时间前置选项                    | Boolean | false |
 | direction  | 垂直或水平方向 | String  | vertical                                                       |
-| type  | 步骤条类型 | String  | '' (可选 process)                                                       |
+| type  | 步骤条类型 | String  | '' (可选 process, mini)                                                       |
 | source  | 数据依赖 | any  |                                                     |
 ### nut-step
   

src/packages/steps/step.vue

@@ -3,7 +3,8 @@
     <div v-if="timeForward && time" class="nut-step-time-forward">{{ time }}</div>
     <div class="nut-step-node">
       <div class="nut-step-icon">
-        <slot name="status-icon">
+        <span v-if="type === 'mini'" class="default-icon"></span>
+        <slot v-else name="status-icon">
           <nut-icon v-if="currentStatus === 'nut-step-status-finish'" type="self" :url="require('../../assets/svg/finish.svg')"></nut-icon>
           <span v-else class="default-icon"></span>
         </slot>
@@ -37,6 +38,7 @@ export default {
     return {
       currentStatus: '',
       timeForward: false,
+      type: ''
     };
   },
   methods: {},

src/packages/steps/steps.scss

@@ -14,7 +14,7 @@
 
 .nut-steps {
 	background: #fff;
-	padding: 15px;
+	padding: 16px;
 	&.horizontal {
 		display: flex;
 
@@ -29,7 +29,7 @@
 				width: 100%;
 
 				.nut-step-line {
-					height: 1px;
+					height: 0.5px;
 					width: 100%;
 					top: 50%;
 					left: 50%;
@@ -40,9 +40,15 @@
 				display: flex;
 				flex-direction: column;
 				align-items: center;
-
+				margin-top: 4px;
+				margin-bottom: 0;
 				.nut-step-title {
 					margin-bottom: 0;
+					font-size: 14px;
+				}
+				.nut-step-content {
+					color: $text-black-3;
+					margin-bottom: 0;
 				}
 			}
 		}
@@ -56,7 +62,7 @@
 
 	.nut-step-time-forward {
 		font-size: $font-size-display-small;
-		width: 75px;
+		width: 40px;
 		color: $text-black-2;
 	}
 
@@ -87,8 +93,8 @@
 		.nut-step-line {
 			position: absolute;
 			top: 14px;
-			left: 14px;
-			width: 1px;
+			left: 14.5px;
+			width: 0.5px;
 			height: 100%;
 			background: $split-line-color;
 		}
@@ -102,6 +108,7 @@
 		.nut-step-title {
 			color: $text-black-1;
 			line-height: 20px;
+			font-size: 15px;
 			font-weight: 600;
 			margin-bottom: 5px;
 		}
@@ -109,7 +116,7 @@
 		.nut-step-content {
 			color: $text-black-2;
 			line-height: 20px;
-			font-size: $font-size-display-small;
+			font-size: $font-size-display-large;
 			margin-bottom: 8px;
 		}
 

src/packages/steps/steps.vue

@@ -52,6 +52,9 @@ export default {
               child.currentStatus = 'nut-step-status-wait';
             }
           }
+          if (this.type === 'mini') {
+            child.type = 'mini'
+          }
         }
         
         if (index + 1 === total) {