From 2e9ab1f10ebcd0ef2ec99053f4f7514170649c61 Mon Sep 17 00:00:00 2001
From: anlyyao <anly_yaw@163.com>
Date: Tue, 19 Apr 2022 12:59:25 +0800
Subject: [PATCH] fix(steps): use t-step-item as substep name

---
 example/app.json               |   2 +-
 example/pages/steps/steps.wxml | 144 ++++++++++++++++-----------------
 src/steps/steps.less           |   5 +-
 3 files changed, 76 insertions(+), 75 deletions(-)

diff --git a/example/app.json b/example/app.json
index c7d4c8568..ebbd41f37 100644
--- a/example/app.json
+++ b/example/app.json
@@ -103,7 +103,7 @@
     "t-popup": "tdesign-miniprogram/popup/popup",
     "t-indexes": "tdesign-miniprogram/indexes/indexes",
     "t-steps": "tdesign-miniprogram/steps/steps",
-    "t-step": "tdesign-miniprogram/steps/step-item",
+    "t-step-item": "tdesign-miniprogram/steps/step-item",
     "t-dropdown-menu": "tdesign-miniprogram/dropdown-menu/dropdown-menu",
     "t-dropdown-item": "tdesign-miniprogram/dropdown-menu/dropdown-item",
     "t-drawer": "tdesign-miniprogram/drawer/drawer",
diff --git a/example/pages/steps/steps.wxml b/example/pages/steps/steps.wxml
index 8e02f90af..f1f63ddbc 100644
--- a/example/pages/steps/steps.wxml
+++ b/example/pages/steps/steps.wxml
@@ -5,40 +5,40 @@
   <t-demo title="01 类型" desc="横向可操作步骤条">
     <view class="group">
       <t-steps class="demo-steps" defaultCurrent="1">
-        <t-step title="步骤描述" />
-        <t-step title="步骤描述" />
+        <t-step-item title="步骤描述" />
+        <t-step-item title="步骤描述" />
       </t-steps>
       <t-steps class="demo-steps" bind:change="handleChange" current="{{current}}">
-        <t-step title="步骤描述" content="辅助信息文字最多两行" />
-        <t-step title="步骤描述" content="辅助信息文字最多两行" />
+        <t-step-item title="步骤描述" content="辅助信息文字最多两行" />
+        <t-step-item title="步骤描述" content="辅助信息文字最多两行" />
       </t-steps>
     </view>
 
     <view class="group">
       <t-steps class="demo-steps" defaultCurrent="1">
-        <t-step title="步骤描述" />
-        <t-step title="步骤描述" />
-        <t-step title="步骤描述" />
+        <t-step-item title="步骤描述" />
+        <t-step-item title="步骤描述" />
+        <t-step-item title="步骤描述" />
       </t-steps>
       <t-steps class="demo-steps" defaultCurrent="1">
-        <t-step title="步骤描述" content="辅助信息文字最多两行" />
-        <t-step title="步骤描述" content="辅助信息文字最多两行" />
-        <t-step title="步骤描述" content="辅助信息文字最多两行" />
+        <t-step-item title="步骤描述" content="辅助信息文字最多两行" />
+        <t-step-item title="步骤描述" content="辅助信息文字最多两行" />
+        <t-step-item title="步骤描述" content="辅助信息文字最多两行" />
       </t-steps>
     </view>
 
     <view class="group">
       <t-steps class="demo-steps" defaultCurrent="1">
-        <t-step title="步骤描述" />
-        <t-step title="步骤描述" />
-        <t-step title="步骤描述" />
-        <t-step title="步骤描述" />
+        <t-step-item title="步骤描述" />
+        <t-step-item title="步骤描述" />
+        <t-step-item title="步骤描述" />
+        <t-step-item title="步骤描述" />
       </t-steps>
       <t-steps class="demo-steps" defaultCurrent="1">
-        <t-step title="步骤描述" content="辅助信息文字最多两行" />
-        <t-step title="步骤描述" content="辅助信息文字最多两行" />
-        <t-step title="步骤描述" content="辅助信息文字最多两行" />
-        <t-step title="步骤描述" content="辅助信息文字最多两行" />
+        <t-step-item title="步骤描述" content="辅助信息文字最多两行" />
+        <t-step-item title="步骤描述" content="辅助信息文字最多两行" />
+        <t-step-item title="步骤描述" content="辅助信息文字最多两行" />
+        <t-step-item title="步骤描述" content="辅助信息文字最多两行" />
       </t-steps>
     </view>
 
@@ -46,14 +46,14 @@
 
     <view class="group">
       <t-steps class="demo-steps" defaultCurrent="1">
-        <t-step title="步骤描述" icon="user"></t-step>
-        <t-step title="步骤描述" icon="location" />
-        <t-step title="步骤描述" icon="time" />
+        <t-step-item title="步骤描述" icon="user"></t-step-item>
+        <t-step-item title="步骤描述" icon="location" />
+        <t-step-item title="步骤描述" icon="time" />
       </t-steps>
       <t-steps class="demo-steps" defaultCurrent="1">
-        <t-step title="步骤描述" icon="user" content="辅助信息文字最多两行"></t-step>
-        <t-step title="步骤描述" icon="location" content="辅助信息文字最多两行" />
-        <t-step title="步骤描述" icon="time" content="辅助信息文字最多两行" />
+        <t-step-item title="步骤描述" icon="user" content="辅助信息文字最多两行"></t-step-item>
+        <t-step-item title="步骤描述" icon="location" content="辅助信息文字最多两行" />
+        <t-step-item title="步骤描述" icon="time" content="辅助信息文字最多两行" />
       </t-steps>
     </view>
 
@@ -61,99 +61,99 @@
 
     <view class="group">
       <t-steps class="demo-steps" defaultCurrent="0" readonly="true">
-        <t-step title="当前步骤" />
-        <t-step title="未完成步骤" />
+        <t-step-item title="当前步骤" />
+        <t-step-item title="未完成步骤" />
       </t-steps>
       <t-steps class="demo-steps" defaultCurrent="0" readonly="true">
-        <t-step title="当前步骤" content="辅助信息文字最多两行" />
-        <t-step title="未完成步骤" content="辅助信息文字最多两行" />
+        <t-step-item title="当前步骤" content="辅助信息文字最多两行" />
+        <t-step-item title="未完成步骤" content="辅助信息文字最多两行" />
       </t-steps>
       <t-steps class="demo-steps" defaultCurrent="0" readonly="true">
-        <t-step title="错误步骤" status="error" content="辅助信息文字最多两行" />
-        <t-step title="未完成步骤" content="辅助信息文字最多两行" />
+        <t-step-item title="错误步骤" status="error" content="辅助信息文字最多两行" />
+        <t-step-item title="未完成步骤" content="辅助信息文字最多两行" />
       </t-steps>
     </view>
 
     <view class="group">
       <t-steps class="demo-steps" defaultCurrent="1" readonly="true">
-        <t-step title="已完成步骤" />
-        <t-step title="当前步骤" />
-        <t-step title="未完成步骤" />
+        <t-step-item title="已完成步骤" />
+        <t-step-item title="当前步骤" />
+        <t-step-item title="未完成步骤" />
       </t-steps>
       <t-steps class="demo-steps" defaultCurrent="1" readonly="true">
-        <t-step title="已完成步骤" content="辅助信息文字最多两行" />
-        <t-step title="当前步骤" content="辅助信息文字最多两行" />
-        <t-step title="未完成步骤" content="辅助信息文字最多两行" />
+        <t-step-item title="已完成步骤" content="辅助信息文字最多两行" />
+        <t-step-item title="当前步骤" content="辅助信息文字最多两行" />
+        <t-step-item title="未完成步骤" content="辅助信息文字最多两行" />
       </t-steps>
       <t-steps class="demo-steps" defaultCurrent="1" readonly="true">
-        <t-step title="已完成步骤" content="辅助信息文字最多两行" />
-        <t-step title="错误步骤" status="error" content="辅助信息文字最多两行" />
-        <t-step title="未完成步骤" content="辅助信息文字最多两行" />
+        <t-step-item title="已完成步骤" content="辅助信息文字最多两行" />
+        <t-step-item title="错误步骤" status="error" content="辅助信息文字最多两行" />
+        <t-step-item title="未完成步骤" content="辅助信息文字最多两行" />
       </t-steps>
     </view>
 
     <view class="group">
       <t-steps class="demo-steps" defaultCurrent="1" readonly="true">
-        <t-step title="已完成步骤" />
-        <t-step title="当前步骤" />
-        <t-step title="未完成步骤" />
-        <t-step title="未完成步骤" />
+        <t-step-item title="已完成步骤" />
+        <t-step-item title="当前步骤" />
+        <t-step-item title="未完成步骤" />
+        <t-step-item title="未完成步骤" />
       </t-steps>
       <t-steps class="demo-steps" defaultCurrent="1" readonly="true">
-        <t-step title="已完成步骤" content="辅助信息文字最多两行" />
-        <t-step title="当前步骤" content="辅助信息文字最多两行" />
-        <t-step title="未完成步骤" content="辅助信息文字最多两行" />
-        <t-step title="未完成步骤" content="辅助信息文字最多两行" />
+        <t-step-item title="已完成步骤" content="辅助信息文字最多两行" />
+        <t-step-item title="当前步骤" content="辅助信息文字最多两行" />
+        <t-step-item title="未完成步骤" content="辅助信息文字最多两行" />
+        <t-step-item title="未完成步骤" content="辅助信息文字最多两行" />
       </t-steps>
       <t-steps class="demo-steps" defaultCurrent="1" readonly="true">
-        <t-step title="已完成步骤" content="辅助信息文字最多两行" />
-        <t-step title="错误步骤" status="error" content="辅助信息文字最多两行" />
-        <t-step title="未完成步骤" content="辅助信息文字最多两行" />
-        <t-step title="未完成步骤" content="辅助信息文字最多两行" />
+        <t-step-item title="已完成步骤" content="辅助信息文字最多两行" />
+        <t-step-item title="错误步骤" status="error" content="辅助信息文字最多两行" />
+        <t-step-item title="未完成步骤" content="辅助信息文字最多两行" />
+        <t-step-item title="未完成步骤" content="辅助信息文字最多两行" />
       </t-steps>
     </view>
 
     <view class="demo-section__desc">竖向只读步骤条</view>
     <view class="group vertical">
       <t-steps class="demo-steps vertical" current="1" readonly="true" layout="vertical">
-        <t-step title="已完成步骤" />
-        <t-step title="当前步骤" />
-        <t-step title="未完成步骤" />
+        <t-step-item title="已完成步骤" />
+        <t-step-item title="当前步骤" />
+        <t-step-item title="未完成步骤" />
       </t-steps>
       <t-steps class="demo-steps vertical" current="1" readonly="true" layout="vertical">
-        <t-step title="已完成步骤" />
-        <t-step title="错误步骤" status="error" />
-        <t-step title="未完成步骤" />
+        <t-step-item title="已完成步骤" />
+        <t-step-item title="错误步骤" status="error" />
+        <t-step-item title="未完成步骤" />
       </t-steps>
     </view>
 
     <view class="demo-section__desc">竖向双层级只读步骤条</view>
     <view class="group vertical">
       <t-steps class="demo-steps vertical" current="1-0" readonly="true" layout="vertical">
-        <t-step title="已完成步骤" />
-        <t-step title="当前步骤" subStepItems="{{subStepItems}}" />
-        <t-step title="未完成步骤" />
+        <t-step-item title="已完成步骤" />
+        <t-step-item title="当前步骤" subStepItems="{{subStepItems}}" />
+        <t-step-item title="未完成步骤" />
       </t-steps>
       <t-steps class="demo-steps vertical" current="1-0" currentStatus="error" readonly="true" layout="vertical">
-        <t-step title="已完成步骤" />
-        <t-step title="错误步骤" subStepItems="{{subStepItems}}" />
-        <t-step title="未完成步骤" />
+        <t-step-item title="已完成步骤" />
+        <t-step-item title="错误步骤" subStepItems="{{subStepItems}}" />
+        <t-step-item title="未完成步骤" />
       </t-steps>
     </view>
 
     <view class="demo-section__desc">竖向简化只读步骤条</view>
     <view class="group vertical">
       <t-steps class="demo-steps vertical" current="1" readonly="true" layout="vertical" theme="dot">
-        <t-step title="事件描述" />
-        <t-step title="事件描述" />
-        <t-step title="事件描述" />
+        <t-step-item title="事件描述" />
+        <t-step-item title="事件描述" />
+        <t-step-item title="事件描述" />
       </t-steps>
     </view>
 
     <view class="demo-section__desc">自定义内容步骤条</view>
     <view class="group vertical">
       <t-steps class="demo-steps vertical" current="1" readonly="true" layout="vertical">
-        <t-step title="已完成步骤">
+        <t-step-item title="已完成步骤">
           <view slot="content">可自定义此处内容</view>
           <view class="extra-img" slot="extra">
             <image
@@ -163,13 +163,13 @@
               mode="widthFix"
             />
           </view>
-        </t-step>
-        <t-step title="当前步骤">
+        </t-step-item>
+        <t-step-item title="当前步骤">
           <view slot="content">可自定义此处内容</view>
-        </t-step>
-        <t-step title="未完成步骤">
+        </t-step-item>
+        <t-step-item title="未完成步骤">
           <view slot="content">可自定义此处内容</view>
-        </t-step>
+        </t-step-item>
       </t-steps>
     </view>
   </t-demo>
diff --git a/src/steps/steps.less b/src/steps/steps.less
index d20943b7c..48be0d271 100644
--- a/src/steps/steps.less
+++ b/src/steps/steps.less
@@ -2,12 +2,13 @@
 
 @step: ~'@{prefix}-step';
 @steps: ~'@{step}s';
+@item: ~'@{step}-item';
 
 @{steps} {
   display: flex;
 }
 
-@{step} {
+@{item} {
   flex: 1;
   vertical-align: top;
   position: relative;
@@ -28,7 +29,7 @@
   &--vertical {
     flex-direction: column;
 
-    @{step} {
+    @{item} {
       width: 100%;
     }
   }