From 1900da82e49fa221a0bc49e0da5ed8711f128e70 Mon Sep 17 00:00:00 2001
From: chenxi-20 <2465950588@qq.com>
Date: Fri, 18 Jul 2025 14:29:29 +0800
Subject: [PATCH] feat(steps): Add wizard style step bar itemStyle
 differentiated configuration (#3594)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: 去掉步骤条最大宽度限制

* fix: 增加向导型步骤条itemStyle差异化配置
---
 examples/sites/demos/apis/steps.js                       | 6 +++---
 .../demos/mobile-first/app/steps/advanced-steps.vue      | 9 ++++++++-
 .../src/steps/src/mobile-first/mobile-first-advanced.vue | 4 +++-
 .../src/steps/src/mobile-first/mobile-first-normal.vue   | 2 +-
 4 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/examples/sites/demos/apis/steps.js b/examples/sites/demos/apis/steps.js
index 07cdab49b..b8e9a9dc1 100644
--- a/examples/sites/demos/apis/steps.js
+++ b/examples/sites/demos/apis/steps.js
@@ -120,13 +120,13 @@ export default {
           type: 'Object',
           defaultValue: '{}',
           meta: {
-            stable: '3.24.0'
+            stable: '3.26.0'
           },
           desc: {
             'zh-CN':
-              '自定义单链型步骤条块的内联样式，数据类型为{ [statusName: string]: styleObject },，不同状态可根据key值差异化配置， key值为status字段的值，value值为对应节点的样式对象',
+              '步骤条块的内联样式，数据类型为{ [statusName: string]: styleObject },，不同状态可根据key值差异化配置， key值为status字段的值，value值为对应节点的样式对象',
             'en-US':
-              'Customize the inline style of single chain step blocks, with data type {[statusName: string]: styleObject}. Different states can be configured differently based on key values, where the key value is the value of the status field and the value value is the style object of the corresponding node'
+              'Customize the inline style of step blocks, with data type {[statusName: string]: styleObject}. Different states can be configured differently based on key values, where the key value is the value of the status field and the value value is the style object of the corresponding node'
           },
           mode: ['mobile-first']
         },
diff --git a/examples/sites/demos/mobile-first/app/steps/advanced-steps.vue b/examples/sites/demos/mobile-first/app/steps/advanced-steps.vue
index ff9a9ea5a..67be45d79 100644
--- a/examples/sites/demos/mobile-first/app/steps/advanced-steps.vue
+++ b/examples/sites/demos/mobile-first/app/steps/advanced-steps.vue
@@ -1,5 +1,12 @@
 <template>
-  <tiny-steps ref="steps" advanced :data="data" :active="advancedActive" @click="advancedClick"></tiny-steps>
+  <tiny-steps
+    ref="steps"
+    advanced
+    :item-style="{ disabled: { background: 'yellow', maxWidth: '360px' } }"
+    :data="data"
+    :active="advancedActive"
+    @click="advancedClick"
+  ></tiny-steps>
 </template>
 
 <script>
diff --git a/packages/vue/src/steps/src/mobile-first/mobile-first-advanced.vue b/packages/vue/src/steps/src/mobile-first/mobile-first-advanced.vue
index 90d4c7195..13fa6d3f7 100644
--- a/packages/vue/src/steps/src/mobile-first/mobile-first-advanced.vue
+++ b/packages/vue/src/steps/src/mobile-first/mobile-first-advanced.vue
@@ -31,6 +31,7 @@
       <template #block="{ slotScoped: { node, index } }">
         <div
           data-tag="tiny-steps-block"
+          :style="itemStyle[node.status]"
           :class="
             m(
               gcls('steps-block'),
@@ -201,7 +202,8 @@ export default defineComponent({
     'noArrow',
     'flex',
     'size',
-    'contentCenter'
+    'contentCenter',
+    'itemStyle'
   ],
   setup(props: any, context: any) {
     return setup({ props, context, renderless, api, classes })
diff --git a/packages/vue/src/steps/src/mobile-first/mobile-first-normal.vue b/packages/vue/src/steps/src/mobile-first/mobile-first-normal.vue
index 431e6b116..2358f6c6c 100644
--- a/packages/vue/src/steps/src/mobile-first/mobile-first-normal.vue
+++ b/packages/vue/src/steps/src/mobile-first/mobile-first-normal.vue
@@ -45,7 +45,7 @@
     <div
       data-tag="tiny-steps-block"
       v-for="(node, index) in data"
-      :style="itemStyle[node.status || 'none']"
+      :style="itemStyle[node.status]"
       v-show="isVisibleHandler(index) === 'visible'"
       :key="index"
       :class="