From a8b630bb5ce60f3620fefeb380d46694a72e6286 Mon Sep 17 00:00:00 2001
From: fujianchao <fujianchao@baidu.com>
Date: Fri, 22 Nov 2024 17:00:31 +0800
Subject: [PATCH] =?UTF-8?q?=20feat:=20=E6=AD=A5=E9=AA=A4=E6=9D=A1=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9EiconPositon=E5=B1=9E=E6=80=A7=EF=BC=8C=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=E7=AE=80=E5=8D=95=E6=A8=A1=E5=BC=8F=E4=B8=8B=E7=AE=AD?=
 =?UTF-8?q?=E5=A4=B4=E5=B8=83=E5=B1=80=E9=94=99=E4=B9=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/amis-editor/src/plugin/Button.tsx   |  1 +
 packages/amis-editor/src/plugin/Steps.tsx    |  5 ++++
 packages/amis-ui/scss/components/_steps.scss |  7 ++++-
 packages/amis-ui/src/components/Steps.tsx    | 27 ++++++++++++--------
 packages/amis/src/renderers/Steps.tsx        |  7 +++++
 5 files changed, 36 insertions(+), 11 deletions(-)

diff --git a/packages/amis-editor/src/plugin/Button.tsx b/packages/amis-editor/src/plugin/Button.tsx
index 3e0b77dd71c..d3462d76c80 100644
--- a/packages/amis-editor/src/plugin/Button.tsx
+++ b/packages/amis-editor/src/plugin/Button.tsx
@@ -204,6 +204,7 @@ export class ButtonPlugin extends BasePlugin {
                 formType: 'extend',
                 mode: 'normal',
                 label: '气泡提示',
+                id: 'button-tooltip', //便于扩充定位
                 hidden: isInDropdown,
                 form: {
                   body: [
diff --git a/packages/amis-editor/src/plugin/Steps.tsx b/packages/amis-editor/src/plugin/Steps.tsx
index 1eb60ae9805..7199aca6708 100644
--- a/packages/amis-editor/src/plugin/Steps.tsx
+++ b/packages/amis-editor/src/plugin/Steps.tsx
@@ -107,6 +107,11 @@ export class StepsPlugin extends BasePlugin {
       {
         title: '外观',
         body: [
+          getSchemaTpl('switch', {
+            name: 'iconPosition',
+            label: '图标文字垂直展示',
+            value: false
+          }),
           {
             name: 'mode',
             type: 'select',
diff --git a/packages/amis-ui/scss/components/_steps.scss b/packages/amis-ui/scss/components/_steps.scss
index 555c4ca6e07..de4a77d90a8 100644
--- a/packages/amis-ui/scss/components/_steps.scss
+++ b/packages/amis-ui/scss/components/_steps.scss
@@ -12,6 +12,11 @@
     height: auto;
     line-height: px2rem(22px);
     &-container {
+      &.#{$ns}StepsItem-vertical {
+        display: flex;
+        flex-direction: column;
+      }
+
       position: relative;
       &Icon {
         vertical-align: top;
@@ -36,7 +41,7 @@
         }
       }
       &Wrapper {
-        display: inline-block;
+        display: inline-flex;
         position: relative;
         .#{$ns}StepsItem-body {
           .#{$ns}StepsItem-title {
diff --git a/packages/amis-ui/src/components/Steps.tsx b/packages/amis-ui/src/components/Steps.tsx
index f6a90fd4cd6..515328f93e4 100644
--- a/packages/amis-ui/src/components/Steps.tsx
+++ b/packages/amis-ui/src/components/Steps.tsx
@@ -89,6 +89,7 @@ export interface StepsProps extends ThemeProps {
   labelPlacement?: 'horizontal' | 'vertical';
   progressDot?: boolean;
   onClickStep?: (i: number, step: StepObject) => void;
+  iconPosition?: boolean;
 }
 
 export function Steps(props: StepsProps) {
@@ -102,6 +103,7 @@ export function Steps(props: StepsProps) {
     mode = 'horizontal',
     labelPlacement = 'horizontal',
     progressDot = false,
+    iconPosition,
     mobileUI,
     onClickStep
   } = props;
@@ -172,7 +174,12 @@ export function Steps(props: StepsProps) {
               }`
             )}
           >
-            <div className={cx('StepsItem-container')}>
+            <div
+              className={cx(
+                'StepsItem-container',
+                iconPosition && mode != 'vertical' && 'StepsItem-vertical'
+              )}
+            >
               <div className={cx('StepsItem-containerTail')}></div>
               {progressDot ? (
                 <div
@@ -239,16 +246,16 @@ export function Steps(props: StepsProps) {
                     <span>{step.description}</span>
                   </div>
                 </div>
+                {mode === 'simple' && i < stepsRow.length - 1 && (
+                  <div className={cx('StepsItem-icon-line')}>
+                    <Icon
+                      icon="right-arrow"
+                      className="icon"
+                      iconContent="StepsItem-icon-line"
+                    />
+                  </div>
+                )}
               </div>
-              {mode === 'simple' && i < stepsRow.length - 1 && (
-                <div className={cx('StepsItem-icon-line')}>
-                  <Icon
-                    icon="right-arrow"
-                    className="icon"
-                    iconContent="StepsItem-icon-line"
-                  />
-                </div>
-              )}
             </div>
           </li>
         );
diff --git a/packages/amis/src/renderers/Steps.tsx b/packages/amis/src/renderers/Steps.tsx
index daf2656f820..dd9ed641b56 100644
--- a/packages/amis/src/renderers/Steps.tsx
+++ b/packages/amis/src/renderers/Steps.tsx
@@ -85,6 +85,11 @@ export interface StepsSchema extends BaseSchema {
    * 点状步骤条
    */
   progressDot?: boolean;
+
+  /**
+   * 切换图标位置
+   */
+  iconPosition: false;
 }
 
 export interface StepsProps
@@ -98,6 +103,7 @@ export function StepsCmpt(props: StepsProps) {
     steps,
     status,
     mode,
+    iconPosition,
     labelPlacement,
     progressDot,
     data,
@@ -163,6 +169,7 @@ export function StepsCmpt(props: StepsProps) {
       style={style}
       status={statusValue}
       mode={mode}
+      iconPosition={iconPosition}
       progressDot={progressDot}
       labelPlacement={labelPlacement}
       mobileUI={mobileUI}