@pisell/materials 1.0.983 → 1.0.988

package/es/components/PisellProcedure/PisellProcedure.less

@@ -1,376 +1,560 @@
-// PisellProcedure 组件样式
-// 流程容器组件，用于管理多步骤流程
-
-// ========== CSS Variables ==========
-.pisell-procedure {
-  // 尺寸变量
-  --procedure-header-height: 80px;
-  --procedure-action-height: 80px;
-  --procedure-summary-width: 405px;
-  --procedure-gap: 16px;
-  --procedure-padding: 16px;
-  --procedure-border-radius: 8px;
-
-  // 颜色变量
-  --procedure-bg: #ffffff;
-  --procedure-summary-bg: #f9fafb;
-  --procedure-border-color: #e5e7eb;
-  --procedure-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-
-  // 响应式断点
-  --breakpoint-xs: 430px;
-  --breakpoint-sm: 744px;
-  --breakpoint-md: 960px;
-  --breakpoint-lg: 1133px;
-  --breakpoint-xl: 1366px;
-}
-
-// ========== 组件主容器 ==========
-.pisell-procedure {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
+@procedure-prefix: pisell-procedure;
+@pisell-layout-prefix: pisell-layout;
+
+// 断点
+@breakpoint-xl: 1366px;
+@breakpoint-lg: 1133px;
+@breakpoint-md: 960px;
+@breakpoint-sm: 744px;
+
+// 信息区宽度（根据屏幕断点）
+@sidebar-width-xl: 405px;  // ≥1133px
+@sidebar-width-md: 376px;  // 960px-1133px
+@sidebar-width-sm: 290px;  // 744px-960px
+
+// 间距
+@gap-default: 16px;
+@padding-default: 16px;
+
+// footer 高度预估（包含 padding）
+@footer-height: 61px;
+
+// 颜色
+@color-bg-header: #fff;
+@color-bg-body: #f5f5f5;
+@color-bg-content: #fff;
+@color-bg-sidebar: #fff;
+@color-bg-footer: #ececec;
+@color-border: #e8e8e8;
+
+// ========== 主容器 ==========
+.@{procedure-prefix} {
   width: 100%;
-  background: var(--procedure-bg);
-  position: relative;
-
-  // 注意：layout 属性影响的是整体内容的排列方式，不是主容器的 flex-direction
-  // 主容器始终是 column（头部在上，主体在下，操作区在底部）
-  // layout-horizontal 指的是 body 内容和其他区域的排列
-
-  // 加载状态
-  &-loading {
-    pointer-events: none;
-    opacity: 0.6;
-  }
-
-  // 禁用状态
-  &-disabled {
-    pointer-events: none;
-    opacity: 0.5;
-  }
-}
-
-// ========== 头部区域 ==========
-.pisell-procedure-header {
+  min-height: 100%;
   display: flex;
-  align-items: center;
-  gap: var(--procedure-gap);
-  min-height: var(--procedure-header-height);
-  padding: 12px var(--procedure-padding);
-  background: var(--procedure-bg);
-  border-bottom: 1px solid var(--procedure-border-color);
-  flex-shrink: 0;
-  width: 100%;
-  box-sizing: border-box;
+  flex-direction: column;
 
-  // 固定定位
-  &-fixed {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    z-index: 100;
-    box-shadow: var(--procedure-shadow);
+  // 最外层 Layout
+  > .pisell-lowcode-layout,
+  > .ant-layout {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
   }
 
-  // 滚动时固定
-  &-scroll-fixed {
+  // ========== 头部区域 ==========
+  &-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px @padding-default;
+    background-color: @color-bg-header;
+    border-bottom: 1px solid @color-border;
+    flex-shrink: 0;
+    height: auto !important;
+    line-height: normal !important;
     position: sticky;
     top: 0;
     z-index: 100;
-    box-shadow: var(--procedure-shadow);
-  }
-
-  // 上一步按钮
-  &-prev {
-    flex-shrink: 0;
-    margin-right: 8px;
-  }
+    gap: @gap-default;
 
-  // 步骤条容器
-  &-steps {
-    flex: 1;
-    min-width: 0;
-    overflow: hidden;
-  }
+    // 左侧区域
+    &__left {
+      flex-shrink: 0;
+      z-index: 1;
+      cursor: pointer;
+    }
 
-  // 额外内容
-  &-extra {
-    flex-shrink: 0;
-    margin: 0 8px;
-  }
+    // 中间步骤条区域
+    &__center {
+      flex: 1;
+      display: flex;
+      justify-content: center;
+      overflow: hidden;
+    }
 
-  // 关闭按钮
-  &-close {
-    flex-shrink: 0;
-    margin-left: 8px;
+    // 右侧区域
+    &__right {
+      flex-shrink: 0;
+      z-index: 1;
+      cursor: pointer;
+    }
   }
-}
 
-// ========== 主体区域 ==========
-.pisell-procedure-body {
-  flex: 1;
-  display: flex;
-  gap: var(--procedure-gap);
-  padding: var(--procedure-padding);
-  overflow: hidden;
-  min-height: 0;
-  width: 100%;
-  box-sizing: border-box;
-
-  // 默认水平布局（内容区 + 信息总结区左右排列）
-  flex-direction: row;
-
-  // 垂直布局（内容区和信息总结区上下排列）
-  &-vertical {
+  // ========== 主体区域 ==========
+  &-body {
+    flex: 1;
+    display: flex;
     flex-direction: column;
-  }
-}
+    height: 100%;
+
+    // 主体区域内部的 Layout
+    > .pisell-lowcode-layout,
+    > .ant-layout {
+      flex: 1;
+      display: flex;
+      flex-direction: row;
+      align-items: stretch; // 让子元素拉伸填满高度
+      background-color: @color-bg-body;
+      gap: @gap-default;
+      padding: @gap-default;
+    }
 
-// ========== 内容区 ==========
-.pisell-procedure-content {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  background: var(--procedure-bg);
-  border-radius: var(--procedure-border-radius);
-  padding: var(--procedure-padding);
-  overflow: hidden;
-  min-width: 0;
+    // ========== 布局模式：固定宽度（默认） ==========
+    // &--fixed 使用默认的固定宽度布局，无需额外样式
+
+    // ========== 布局模式：比例布局 ==========
+    &--ratio {
+      // 移动端：比例模式下也隐藏信息区（弹窗模式下不执行）
+      .@{procedure-prefix}:not(.@{procedure-prefix}--modal) & {
+        @media (max-width: calc(@breakpoint-sm - 1px)) {
+          > .pisell-lowcode-layout,
+          > .ant-layout {
+            .@{procedure-prefix}-sidebar {
+              display: none !important;
+            }
+
+            .@{procedure-prefix}-content {
+              flex: 1 !important;
+              max-width: 100% !important;
+            }
+          }
+        }
+      }
+    }
+  }
 
-  &-inner {
+  // 内容区 - 高度 flex:1 填满主体区域
+  &-content {
     flex: 1;
-    overflow-y: auto;
+    min-width: 0;
+    padding: 12px @padding-default;
+    background-color: @color-bg-content;
+    border-radius: 4px;
+
+    // 纵向排列时的样式
+    .@{procedure-prefix}-body--vertical & {
+      width: 100% !important;
+      flex: 1 1 auto;
+    }
   }
-}
 
-// ========== 信息总结区 ==========
-.pisell-procedure-summary {
-  width: var(--procedure-summary-width);
-  display: flex;
-  flex-direction: column;
-  background: var(--procedure-summary-bg);
-  border-radius: var(--procedure-border-radius);
-  padding: var(--procedure-padding);
-  overflow: hidden;
-  flex-shrink: 0;
-
-  // 可折叠
-  &-collapsible {
-    .pisell-procedure-summary-header {
-      cursor: pointer;
+  // 信息区 - 高度自适应内容，sticky 定位
+  &-sidebar {
+    width: initial !important;
+    max-width: initial !important;
+    min-width: initial !important;
+    background-color: @color-bg-sidebar;
+    border-radius: 4px;
+    position: sticky!important;
+    overflow-y: auto;
+    align-self: flex-start; // 不拉伸高度
+    background: transparent !important;
+    height: fit-content;
+
+    .@{pisell-layout-prefix}-sider-content{
+      overflow: hidden!important;
+      display: flex;
+      flex-direction: column;
+
+      .@{procedure-prefix}-sider-content-top{
+        height: auto;
+        max-height: 100%;
+        overflow-y: auto;
+        background-color: #ffffff;
+      }
+
+      .@{procedure-prefix}-footer{
+        flex-shrink: 0;
+      }
     }
-  }
 
-  // 折叠状态
-  &-collapsed {
-    width: auto;
-    min-width: 80px;
+    // 纵向排列时的样式
+    .@{procedure-prefix}-body--vertical & {
+      width: 100% !important;
+      max-width: 100% !important;
+      min-width: 0 !important;
+      flex: 0 0 auto !important;
+      position: relative;
+      top: auto;
+
+      .@{procedure-prefix}-sider-content-top{
+        height: 100%;
+      }
+    }
 
-    .pisell-procedure-summary-content,
-    .pisell-procedure-summary-extra {
-      display: none;
+    // 响应式宽度调整 - 基于容器宽度的类名控制（适用于弹窗场景）
+    // 使用 CSS 变量 --pisell-procedure-container-width（由 JavaScript 动态设置）
+    // 960px <= containerWidth < 1133px: 376px ~ 405px 线性插值
+    // 公式: 376 + (containerWidth - 960) * (405 - 376) / (1133 - 960)
+    &--responsive-md {
+      @sidebar-width-dynamic: calc(@sidebar-width-md + (var(--pisell-procedure-container-width, 100vw) - @breakpoint-md) * (405 - 376) / (1133 - 960));
+      width: @sidebar-width-dynamic !important;
+      max-width: @sidebar-width-xl !important;
+      min-width: @sidebar-width-md !important;
+      flex: 0 0 @sidebar-width-dynamic !important;
     }
-  }
 
-  // 头部（折叠按钮）
-  &-header {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    margin-bottom: 8px;
-  }
+    // 744px <= containerWidth < 960px: 290px ~ 376px 线性插值
+    // 公式: 290 + (containerWidth - 744) * (376 - 290) / (960 - 744)
+    &--responsive-sm {
+      @sidebar-width-dynamic: calc(@sidebar-width-sm + (var(--pisell-procedure-container-width, 100vw) - @breakpoint-sm) * (376 - 290) / (960 - 744));
+      width: @sidebar-width-dynamic !important;
+      max-width: @sidebar-width-md !important;
+      min-width: @sidebar-width-sm !important;
+      flex: 0 0 @sidebar-width-dynamic !important;
+    }
 
-  // 内容
-  &-content {
-    flex: 1;
-    overflow-y: auto;
-  }
+    // containerWidth < 744px: 弹窗模式下使用最小宽度保持显示
+    // 注意：只有弹窗模式下才会添加响应式类名，页面模式下通过媒体查询隐藏
+    &--responsive-xs {
+      // 弹窗模式下不隐藏 sidebar，使用最小宽度
+      width: @sidebar-width-sm !important;
+      max-width: @sidebar-width-sm !important;
+      min-width: @sidebar-width-sm !important;
+      flex: 0 0 @sidebar-width-sm !important;
+      display: initial !important;
+    }
 
-  // 额外内容
-  &-extra {
-    margin-top: var(--procedure-padding);
-  }
-}
+    // 大于1133px: 405px（仅页面模式，弹窗模式下不执行媒体查询）
+    .@{procedure-prefix}:not(.@{procedure-prefix}--modal) & {
+      @media (min-width: @breakpoint-lg) {
+        width: @sidebar-width-xl !important;
+        max-width: @sidebar-width-xl !important;
+        min-width: @sidebar-width-xl !important;
+        flex: 0 0 @sidebar-width-xl !important;
+      }
 
-// ========== 操作区 ==========
-.pisell-procedure-action {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 12px;
-  min-height: var(--procedure-action-height);
-  padding: 12px var(--procedure-padding);
-  background: var(--procedure-bg);
-  border-top: 1px solid var(--procedure-border-color);
-  flex-shrink: 0;
-  width: 100%;
-  box-sizing: border-box;
-
-  // 固定模式
-  &-fixed {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    z-index: 100;
-  }
+      // 保留媒体查询作为降级方案（当没有提供 containerSelector 时，即页面模式）
+      // 960px < viewportWidth < 1133px: 376px ~ 405px 线性插值
+      @media (max-width: calc(@breakpoint-lg - 1px)) and (min-width: @breakpoint-md) {
+        // 如果没有响应式类名，则应用媒体查询样式
+        &:not(.pisell-procedure-sidebar--responsive-md):not(.pisell-procedure-sidebar--responsive-sm):not(.pisell-procedure-sidebar--responsive-xs) {
+          @sidebar-width-dynamic: calc(@sidebar-width-md + (100vw - @breakpoint-md) * (405 - 376) / (1133 - 960));
+          width: @sidebar-width-dynamic !important;
+          max-width: @sidebar-width-xl !important;
+          min-width: @sidebar-width-md !important;
+          flex: 0 0 @sidebar-width-dynamic !important;
+        }
+      }
 
-  // 悬浮模式
-  &-float {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    z-index: 100;
-    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
-  }
+      // 744px < viewportWidth < 960px: 290px ~ 376px 线性插值
+      @media (max-width: calc(@breakpoint-md)) and (min-width: @breakpoint-sm) {
+        // 如果没有响应式类名，则应用媒体查询样式
+        &:not(.pisell-procedure-sidebar--responsive-md):not(.pisell-procedure-sidebar--responsive-sm):not(.pisell-procedure-sidebar--responsive-xs) {
+          @sidebar-width-dynamic: calc(@sidebar-width-sm + (100vw - @breakpoint-sm) * (376 - 290) / (960 - 744));
+          width: @sidebar-width-dynamic !important;
+          max-width: @sidebar-width-md !important;
+          min-width: @sidebar-width-sm !important;
+          flex: 0 0 @sidebar-width-dynamic !important;
+        }
+      }
+
+      // viewportWidth < 744px: 隐藏（仅页面模式）
+      @media (max-width: calc(@breakpoint-sm - 1px)) {
+        // 如果没有响应式类名，则应用媒体查询样式
+        &:not(.pisell-procedure-sidebar--responsive-md):not(.pisell-procedure-sidebar--responsive-sm):not(.pisell-procedure-sidebar--responsive-xs) {
+          display: none !important;
+        }
+      }
+    }
 
-  // 内嵌模式
-  &-embedded {
-    position: relative;
+    // ========== 比例模式样式（在基础样式内部，确保优先级） ==========
+    &--ratio {
+      // 比例模式下，使用 CSS 变量的宽度值覆盖固定宽度
+      width: var(--sidebar-ratio-width) !important;
+      max-width: var(--sidebar-ratio-max-width) !important;
+      min-width: 0 !important;
+      flex: var(--sidebar-ratio-flex) !important;
+    }
   }
 
-  // 按钮容器
-  &-buttons {
+  // ========== 底部区域基础样式 ==========
+  &-footer {
     display: flex;
     align-items: center;
-    gap: 12px;
-    flex-wrap: wrap;
-  }
-
-  // 额外内容
-  &-extra {
-    margin-right: auto;
-  }
-}
-
-// ========== 响应式样式 ==========
+    justify-content: flex-end;
+    gap: @gap-default;
+    padding: 12px @padding-default;
+    background-color: @color-bg-footer;
+    border-top: 1px solid @color-border;
+    flex-shrink: 0;
+    height: auto !important;
+    z-index: 100;
+    overflow: hidden; // 防止内容溢出
 
-// 1366px 以下
-@media (max-width: 1366px) {
-  .pisell-procedure {
-    --procedure-summary-width: auto;
-  }
+    // 总结按钮插槽 - 仅移动端显示（< 744px），弹窗模式下不执行媒体查询
+    &__summary {
+      flex-shrink: 0;
+      margin-right: auto;
+      // 默认隐藏（PC 端）
+      display: none;
+      cursor: pointer;
 
-  .pisell-procedure-summary {
-    flex: 0 0 405px;
-  }
-}
+      // 移动端显示（仅页面模式）
+      .@{procedure-prefix}:not(.@{procedure-prefix}--modal) & {
+        @media (max-width: calc(@breakpoint-sm - 1px)) {
+          display: block;
+        }
+      }
+    }
 
-// 1133px - 960px
-@media (max-width: 1133px) {
-  .pisell-procedure-summary {
-    flex: 0 0 376px;
-  }
-}
+    // 主要内容容器（左侧插槽 + 右侧操作按钮）
+    &__content {
+      display: flex;
+      align-items: center;
+      gap: @gap-default;
+      flex: 1;
+      min-width: 0;
+      justify-content: space-between;
+    }
 
-// 960px - 744px
-@media (max-width: 960px) {
-  .pisell-procedure-summary {
-    flex: 0 0 290px;
-  }
+    // 左侧插槽区域
+    &__left {
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      gap: @gap-default;
+    }
 
-  .pisell-procedure-header {
-    flex-wrap: wrap;
-    height: auto;
-    min-height: var(--procedure-header-height);
-  }
-}
+    // 右侧操作按钮区域
+    &__actions {
+      display: flex;
+      align-items: center;
+      gap: @gap-default;
+      flex: 1;
+      min-width: 0; // 关键：允许 flex 子元素收缩
+      justify-content: flex-end;
+      overflow: hidden; // 防止内容溢出
+    }
 
-// 744px 以下（移动端）
-@media (max-width: 744px) {
-  .pisell-procedure {
-    --procedure-padding: 12px;
-    --procedure-gap: 12px;
-  }
+    // ========== Footer 位置模式样式 ==========
+    
+    // 固定在整体底部 - 跟随页面滚动，始终在底部
+    &--fixed-bottom {
+      position: sticky;
+      bottom: 0;
+    }
 
-  .pisell-procedure-header {
-    flex-wrap: wrap;
-    padding: 12px;
+    // 内嵌在 content 区域底部 - 紧贴内容底部
+    &--fixed-content-bottom {
+      position: relative;
+      margin-top: auto;
+      border-radius: 0 0 4px 4px;
+    }
 
-    &-steps {
-      width: 100%;
-      order: 2;
+    // 内嵌在 sidebar 区域底部 - 紧贴 sidebar 底部
+    &--fixed-sidebar-bottom {
+      position: relative;
+      margin-top: auto;
+      border-radius: 0 0 4px 4px;
     }
 
-    &-prev {
-      order: 1;
+    // 悬浮在整体区域 - 固定在视口底部，有阴影
+    &--float-all {
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      border-radius: 0;
+      box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
     }
 
-    &-close {
-      order: 3;
-      margin-left: auto;
+    // 悬浮在 content 区域 - 绝对定位在 content 底部
+    &--float-content {
+      border-radius: 8px;
+      box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
+      // 具体定位在容器调整中设置
     }
 
-    &-extra {
-      order: 4;
-      width: 100%;
+    // 悬浮在 sidebar 区域（设计默认）- sticky 在 sidebar 底部
+    &--float-sidebar {
+      border-radius: 8px;
+      box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
+      // 具体定位在容器调整中设置
     }
   }
 
-  .pisell-procedure-body {
-    flex-direction: column;
+  // ========== Footer 位置模式的容器调整 ==========
+  
+  // 悬浮在整体区域 - 需要给内容区域预留 footer 高度
+  &--footer-float-all {
+    // 给内容区域预留空间，避免内容被遮挡
+    .@{procedure-prefix}-content {
+      padding-bottom: calc(@footer-height);
+    }
   }
 
-  .pisell-procedure-summary {
-    display: none;
+  // 当 footer 内嵌在 content 区域底部时
+  &--footer-fixed-content-bottom {
+    .@{procedure-prefix}-content {
+      display: flex;
+      flex-direction: column;
+      
+      // 内容包装器
+      > *:not(.@{procedure-prefix}-footer) {
+        flex: 1;
+      }
+    }
   }
 
-  .pisell-procedure-action {
-    justify-content: space-between;
-    height: auto;
-    min-height: 60px;
-    padding: 12px;
-
-    &-buttons {
-      flex-wrap: wrap;
+  // 当 footer 悬浮在 content 区域时
+  &--footer-float-content {
+    // 让整个页面滚动，不是 content 内部滚动
+    .@{procedure-prefix}-body {
+      overflow: visible;
+      
+      > .pisell-lowcode-layout,
+      > .ant-layout {
+        overflow: visible;
+        padding-bottom: 0;
+      }
+    }
+    
+    .@{procedure-prefix}-content {
+      // 不设置 overflow，让内容自然撑开
+      overflow: visible;
+      padding-bottom: 0;
+      
+      // footer 使用 sticky 定位，随页面滚动保持在底部
+      .@{procedure-prefix}-footer--float-content {
+        position: sticky;
+        bottom: 0;
+        margin: 0 -@padding-default;
+        margin-top: auto;
+      }
     }
   }
-}
 
-// 430px 以下（小屏幕移动端）
-@media (max-width: 430px) {
-  .pisell-procedure {
-    --procedure-padding: 8px;
-    --procedure-gap: 8px;
+  // 当 footer 内嵌在 sidebar 区域底部时
+  &--footer-fixed-sidebar-bottom {
+    .@{procedure-prefix}-sidebar {
+      display: flex;
+      flex-direction: column;
+      max-height: 100%; // 限制最大高度
+      overflow: hidden;
+      
+      .ant-layout-sider-children {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        overflow: hidden;
+        
+        // sidebar 内容区（可滚动）
+        > *:not(.@{procedure-prefix}-footer) {
+          flex: 1;
+          overflow-y: auto;
+        }
+        
+        // footer 固定在底部
+        .@{procedure-prefix}-footer--fixed-sidebar-bottom {
+          flex-shrink: 0;
+        }
+      }
+    }
   }
 
-  .pisell-procedure-header {
-    padding: 8px;
-
-    &-prev,
-    &-close {
-      .ant-btn-icon {
-        margin-right: 0;
+  // 当 footer 悬浮在 sidebar 区域时
+  &--footer-float-sidebar {
+    .@{procedure-prefix}-sidebar {
+      display: flex;
+      flex-direction: column;
+      max-height: 100%; // 限制最大高度
+      overflow: hidden;
+      
+      .ant-layout-sider-children {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        overflow: hidden;
+        
+        // sidebar 内容区（可滚动）
+        > *:not(.@{procedure-prefix}-footer) {
+          flex: 1;
+          overflow-y: auto;
+        }
+        
+        // footer 悬浮在底部
+        .@{procedure-prefix}-footer--float-sidebar {
+          flex-shrink: 0;
+          position: sticky;
+          bottom: 0;
+          margin: 0;
+        }
       }
+    }
+  }
 
-      span:not(.anticon) {
-        display: none;
+  // ========== 小屏适配（744px-960px）：头部两行显示（仅页面模式） ==========
+  &:not(&--modal) {
+    @media (min-width: @breakpoint-sm) and (max-width: calc(@breakpoint-md - 1px)) {
+      .@{procedure-prefix}-header {
+        flex-wrap: wrap;
+        min-height: auto;
+        padding: 12px @padding-default;
+
+        // 第一行：返回按钮
+        .@{procedure-prefix}-header__left {
+          order: 1;
+          flex: 0 0 auto;
+        }
+
+        // 第一行：关闭按钮，推到右边
+        .@{procedure-prefix}-header__right {
+          order: 2;
+          flex: 0 0 auto;
+          margin-left: auto;
+        }
+
+        // 第二行：步骤条独占一行
+        .@{procedure-prefix}-header__center {
+          order: 3;
+          width: 100%;
+          flex: 0 0 100%;
+          padding: 0;
+          justify-content: flex-start;
+          overflow-x: auto;
+        }
       }
     }
-  }
 
-  .pisell-procedure-action {
-    padding: 8px;
+    // ========== 移动端适配（<744px）：头部一行显示 ==========
+    @media (max-width: calc(@breakpoint-sm - 1px)) {
+      .@{procedure-prefix}-header {
+        flex-wrap: nowrap;
+        min-height: auto;
+        padding: 12px @padding-default;
+
+        // 左侧：返回按钮
+        .@{procedure-prefix}-header__left {
+          flex: 0 0 auto;
+        }
+
+        // 中间：步骤条（简化显示当前步骤）
+        .@{procedure-prefix}-header__center {
+          flex: 1;
+          padding: 0 @gap-default;
+          overflow: hidden;
+        }
+
+        // 右侧：关闭按钮
+        .@{procedure-prefix}-header__right {
+          flex: 0 0 auto;
+        }
+      }
 
-    &-buttons {
-      .ant-btn {
-        padding: 4px 8px;
-        font-size: 12px;
+      // 主体区域移动端
+      .@{procedure-prefix}-body {
+        > .pisell-lowcode-layout,
+        > .ant-layout {
+          padding: @gap-default;
+        }
+      }
+
+      // 内容区占满
+      .@{procedure-prefix}-content {
+        width: 100% !important;
       }
     }
   }
 }
-
-// ========== 主题适配 ==========
-
-// 暗色主题
-.pisell-procedure {
-  &.dark {
-    --procedure-bg: #1f1f1f;
-    --procedure-summary-bg: #2a2a2a;
-    --procedure-border-color: #3a3a3a;
-  }
-}