feat: step 视觉升级

ant-design · Sep 20, 2024 · e5bbbba · e5bbbba
1 parent d212287
commit e5bbbba
Show file tree

Hide file tree

Showing 12 changed files with 156 additions and 50 deletions.
diff --git a/compiled/alipay/demo/pages/Steps/index.axml b/compiled/alipay/demo/pages/Steps/index.axml
@@ -10,24 +10,39 @@
 </container>
 <container title="纵向步骤条">
   <steps
-    items="{{items}}"
+    items="{{items2}}"
     direction="vertical"
   ></steps>
 </container>
 <container title="纵向步骤条失败">
   <steps
-    items="{{items}}"
+    items="{{items2}}"
     status="error"
     current="{{1}}"
     direction="vertical"
   ></steps>
 </container>
 <container title="自定义图标">
-  <steps items="{{items}}">
-    <icon
+  <steps
+    items="{{items}}"
+    status="error"
+    current="{{1}}"
+  >
+    <block
       slot="icon"
-      type="SmileFill"
-    ></icon>
+      slot-scope="item"
+    >
+      <icon
+        a:if="{{item.status == 'error' && item.current === item.index}}"
+        slot="icon"
+        type="CloseCircleFill"
+      ></icon>
+      <icon
+        a:else
+        slot="icon"
+        type="SmileFill"
+      ></icon>
+    </block>
   </steps>
 </container>
 <container title="更多自定义">

diff --git a/compiled/alipay/demo/pages/Steps/index.js b/compiled/alipay/demo/pages/Steps/index.js
@@ -14,6 +14,24 @@ Page({
                 description: '描述信息',
             }
         ],
+        items2: [
+            {
+                title: '步骤一',
+                description: '内容详情，根据实际文案安排根据实际文案安排',
+            },
+            {
+                title: '步骤二',
+                description: '描述信息',
+            },
+            {
+                title: '步骤三',
+                description: '',
+            },
+            {
+                title: '步骤四',
+                description: '内容详情，根据实际文案安排',
+            }
+        ],
         iconList: [
             'SmileFill',
             '',

diff --git a/compiled/alipay/src/Steps/index.axml b/compiled/alipay/src/Steps/index.axml
@@ -11,7 +11,7 @@
     a:for-index="index"
     a:for-item="item"
   >
-    <view class="ant-steps-item ant-steps-item-{{direction}} {{index < current ? 'ant-steps-item-finish' : ''}} {{index === current ? 'ant-steps-item-active' : ''}} {{index > current ? 'ant-steps-item-non-active' : ''}}">
+    <view class="ant-steps-item ant-steps-item-{{direction}} {{index < current ? 'ant-steps-item-finish' : ''}} {{index === current ? 'ant-steps-item-active' : ''}} {{index > current || status === 'error' && index === current ? 'ant-steps-item-non-active' : ''}}">
       <view class="ant-steps-item-indicator ant-steps-item-indicator-{{direction}}">
         <view class="ant-steps-item-indicator-icon ant-steps-item-{{utils.getClassName(current, index, status)}}-icon">
           <slot

diff --git a/compiled/alipay/src/Steps/index.less b/compiled/alipay/src/Steps/index.less
@@ -5,6 +5,7 @@
 .@{stepsPrefix} {
   display: flex;
   overflow: hidden;
+  line-height: 1.4;
 
   &-horizontal {
     flex-direction: row;
@@ -14,6 +15,22 @@
   &-vertical {
     display: block;
     padding: 64 * @rpx;
+    .ant-steps-item-active {
+      &::after {
+        background: linear-gradient(
+          to top,
+          @COLOR_GREY_2 0%,
+          @COLOR_GREY_2 50%,
+          @COLOR_BRAND1 50%,
+          @COLOR_BRAND1 100%
+        );
+      }
+    }
+    .ant-steps-item-non-active {
+      &::after {
+        background: @COLOR_GREY_2;
+      }
+    }
   }
 
   &-item:last-child &-item-indicator-vertical::after {
@@ -34,18 +51,17 @@
   margin: 16 * @rpx 0 16 * @rpx 0;
 
   &-vertical {
-    padding-bottom: 48 * @rpx;
+    padding-bottom: 24 * @rpx;
     margin: 0;
-
     .ant-steps-item-title {
-      margin-bottom: 8 * @rpx;
-      font-size: 26 * @rpx;
+      font-size: 34 * @rpx;
       color: @COLOR_TEXT_PRIMARY;
     }
 
     .ant-steps-item-desc {
-      font-size: 24 * @rpx;
+      font-size: 30 * @rpx;
       color: @COLOR_TEXT_ASSIST;
+      padding-top: 4 * @rpx;
     }
 
     &::after {
@@ -125,16 +141,15 @@
     display: flex;
 
     .ant-steps-item-title {
-      margin-bottom: 4 * @rpx;
-      font-size: 26 * @rpx;
+      font-size: 24 * @rpx;
 
       &:empty {
         display: none;
       }
     }
 
     .ant-steps-item-desc {
-      margin: 4 * @rpx 0 4 * @rpx 0;
+      padding-top: 4 * @rpx;
       color: @COLOR_TEXT_ASSIST;
       font-size: 24 * @rpx;
 
@@ -202,10 +217,6 @@
         background-color: @COLOR_GREY_2;
       }
     }
-
-    & .@{stepItemPrefix}-title {
-      color: @COLOR_TEXT_ASSIST;
-    }
   }
 
   &-finish {

diff --git a/compiled/wechat/demo/pages/Steps/index.js b/compiled/wechat/demo/pages/Steps/index.js
@@ -14,6 +14,24 @@ Page({
                 description: '描述信息',
             }
         ],
+        items2: [
+            {
+                title: '步骤一',
+                description: '内容详情，根据实际文案安排根据实际文案安排',
+            },
+            {
+                title: '步骤二',
+                description: '描述信息',
+            },
+            {
+                title: '步骤三',
+                description: '',
+            },
+            {
+                title: '步骤四',
+                description: '内容详情，根据实际文案安排',
+            }
+        ],
         iconList: [
             'SmileFill',
             '',

diff --git a/compiled/wechat/demo/pages/Steps/index.wxml b/compiled/wechat/demo/pages/Steps/index.wxml
@@ -10,13 +10,13 @@
 </container>
 <container title="纵向步骤条">
   <steps
-    items="{{items}}"
+    items="{{items2}}"
     direction="vertical"
   ></steps>
 </container>
 <container title="纵向步骤条失败">
   <steps
-    items="{{items}}"
+    items="{{items2}}"
     status="error"
     current="{{1}}"
     direction="vertical"

diff --git a/compiled/wechat/src/Steps/index.wxml b/compiled/wechat/src/Steps/index.wxml
@@ -11,7 +11,7 @@
     wx:for-index="index"
     wx:for-item="item"
   >
-    <view class="ant-steps-item ant-steps-item-{{direction}} {{index < current ? 'ant-steps-item-finish' : ''}} {{index === current ? 'ant-steps-item-active' : ''}} {{index > current ? 'ant-steps-item-non-active' : ''}}">
+    <view class="ant-steps-item ant-steps-item-{{direction}} {{index < current ? 'ant-steps-item-finish' : ''}} {{index === current ? 'ant-steps-item-active' : ''}} {{index > current || status === 'error' && index === current ? 'ant-steps-item-non-active' : ''}}">
       <view class="ant-steps-item-indicator ant-steps-item-indicator-{{direction}}">
         <view class="ant-steps-item-indicator-icon ant-steps-item-{{utils.getClassName(current, index, status)}}-icon">
           <view class="ant-steps-item-{{utils.getClassName(current, index, status)}}-icon-default"></view>

diff --git a/compiled/wechat/src/Steps/index.wxss b/compiled/wechat/src/Steps/index.wxss
@@ -1,6 +1,7 @@
 .ant-steps {
   display: flex;
   overflow: hidden;
+  line-height: 1.4;
 }
 .ant-steps-horizontal {
   flex-direction: row;
@@ -10,6 +11,12 @@
   display: block;
   padding: 32px;
 }
+.ant-steps-vertical .ant-steps-item-active::after {
+  background: linear-gradient(to top, #e5e5e5 0%, #e5e5e5 50%, #1677ff 50%, #1677ff 100%);
+}
+.ant-steps-vertical .ant-steps-item-non-active::after {
+  background: #e5e5e5;
+}
 .ant-steps-item:last-child .ant-steps-item-indicator-vertical::after {
   display: none;
 }
@@ -23,17 +30,17 @@
   margin: 8px 0 8px 0;
 }
 .ant-steps-item-vertical {
-  padding-bottom: 24px;
+  padding-bottom: 12px;
   margin: 0;
 }
 .ant-steps-item-vertical .ant-steps-item-title {
-  margin-bottom: 4px;
-  font-size: 13px;
+  font-size: 17px;
   color: #333333;
 }
 .ant-steps-item-vertical .ant-steps-item-desc {
-  font-size: 12px;
+  font-size: 15px;
   color: #999999;
+  padding-top: 2px;
 }
 .ant-steps-item-vertical::after {
   position: absolute;
@@ -95,14 +102,13 @@
   display: flex;
 }
 .ant-steps-item-horizontal .ant-steps-item-title {
-  margin-bottom: 2px;
-  font-size: 13px;
+  font-size: 12px;
 }
 .ant-steps-item-horizontal .ant-steps-item-title:empty {
   display: none;
 }
 .ant-steps-item-horizontal .ant-steps-item-desc {
-  margin: 2px 0 2px 0;
+  padding-top: 2px;
   color: #999999;
   font-size: 12px;
 }
@@ -154,9 +160,6 @@
   border-radius: 50%;
   background-color: #e5e5e5;
 }
-.ant-steps-item-non-active .ant-steps-item-title {
-  color: #999999;
-}
 .ant-steps-item-finish::after {
   background-color: #1677ff;
 }

diff --git a/demo/pages/Steps/index.axml b/demo/pages/Steps/index.axml
@@ -11,23 +11,35 @@
 
 <container title="纵向步骤条">
   <steps
-    items="{{ items }}"
+    items="{{ items2 }}"
     direction="vertical" />
 </container>
 
 <container title="纵向步骤条失败">
   <steps
-    items="{{ items }}"
+    items="{{ items2 }}"
     status="error"
     current="{{ 1 }}"
     direction="vertical" />
 </container>
 <!-- #if ALIPAY -->
 <container title="自定义图标">
-  <steps items="{{ items }}">
-    <icon
+  <steps 
+    items="{{ items }}" 
+    status="error"
+    current="{{ 1 }}">
+    <block
       slot="icon"
-      type="SmileFill" />
+      slot-scope="item">
+      <icon
+        slot="icon"
+        a:if="{{ item.status == 'error' && item.current === item.index }}"
+        type="CloseCircleFill" />
+      <icon
+        slot="icon"
+        a:else
+        type="SmileFill" />
+    </block>
   </steps>
 </container>
 

diff --git a/demo/pages/Steps/index.ts b/demo/pages/Steps/index.ts
@@ -14,6 +14,24 @@ Page({
         description: '描述信息',
       }
     ],
+    items2: [
+      {
+        title: '步骤一',
+        description: '内容详情，根据实际文案安排根据实际文案安排',
+      },
+      {
+        title: '步骤二',
+        description: '描述信息',
+      },
+      {
+        title: '步骤三',
+        description: '',
+      },
+      {
+        title: '步骤四',
+        description: '内容详情，根据实际文案安排',
+      }
+    ],
     iconList: [
       'SmileFill',
       '',

diff --git a/src/Steps/index.axml b/src/Steps/index.axml
@@ -10,7 +10,7 @@
     a:for-index="index"
     a:for-item="item">
     <view
-      class="ant-steps-item ant-steps-item-{{ direction }} {{ index < current ? 'ant-steps-item-finish' : '' }} {{ index === current ? 'ant-steps-item-active' : '' }} {{ index > current ? 'ant-steps-item-non-active' : '' }}">
+      class="ant-steps-item ant-steps-item-{{ direction }} {{ index < current ? 'ant-steps-item-finish' : '' }} {{ index === current ? 'ant-steps-item-active' : '' }} {{ index > current || (status === 'error' &&  index === current) ? 'ant-steps-item-non-active' : '' }}">
       <view
         class="ant-steps-item-indicator ant-steps-item-indicator-{{ direction }}">
         <view