uview-pro 0.6.15 → 0.6.16

package/changelog.md

@@ -1,14 +1,24 @@
-## 0.6.15（2026-08-04）
+## 0.6.16（2026-08-20）
 
-### ♻️ Code Refactoring | 代码重构
+### 🐛 Bug Fixes | Bug 修复
 
-- **components:** 统一补全各组件内部依赖的子组件导入，支持单独组件引用 ([091b5bb](https://github.com/anyup/uView-Pro/commit/091b5bb70312f43026c9847cca0709cafccaaaaa))
-- **types:** 完善类型定义与包导出配置 ([d86d5cd](https://github.com/anyup/uView-Pro/commit/d86d5cd39d4e68adfa3000103fe90504727d978b))
+- **steps:** 修复横向步骤条连线断开和超宽截断问题 ([92fecdc](https://github.com/anyup/uView-Pro/commit/92fecdc75df0b20e4247397f47551e4472d32c0b))
 
 ### 👥 Contributors
 
 <a href="https://github.com/anyup"><img src="https://github.com/anyup.png?size=40" width="40" height="40" alt="anyup" title="anyup"/></a> 
 
+## 0.6.15（2026-08-04）
+
+### ♻️ Code Refactoring | 代码重构
+
+- **components:** 统一补全各组件内部依赖的子组件导入，支持单独组件引用 ([091b5bb](https://github.com/anyup/uView-Pro/commit/091b5bb70312f43026c9847cca0709cafccaaaaa))
+- **types:** 完善类型定义与包导出配置 ([d86d5cd](https://github.com/anyup/uView-Pro/commit/d86d5cd39d4e68adfa3000103fe90504727d978b))
+
+### 👥 Contributors
+
+<a href="https://github.com/anyup"><img src="https://github.com/anyup.png?size=40" width="40" height="40" alt="anyup" title="anyup"/></a> 
+
 ## 0.6.14（2026-07-30）
 
 ### 🐛 Bug Fixes | Bug 修复

package/components/u-step/u-step.vue

@@ -42,6 +42,14 @@
         <view class="u-steps__item__line" :class="['u-steps__item__line--' + mode]" v-if="showLine">
             <u-line :direction="direction" length="100%" :hair-line="false" :color="unActiveColor"></u-line>
         </view>
+        <!-- 横排模式下补左半连接线：节点宽度不一致时避免与上一个节点之间连线断开 -->
+        <view
+            class="u-steps__item__line"
+            :class="['u-steps__item__line--left--' + mode]"
+            v-if="direction === 'row' && childIndex > 0"
+        >
+            <u-line :direction="direction" length="100%" :hair-line="false" :color="unActiveColor"></u-line>
+        </view>
     </view>
 </template>
 <script lang="ts">
@@ -156,6 +164,8 @@ $u-steps-item-dot-width: 20rpx;
     flex-direction: column;
 
     &--row {
+        // 步骤多时禁止收缩到内容宽度以下，超宽交给容器横向滚动，避免文字遮挡
+        flex: 1 0 auto;
         align-items: center;
         @include vue-flex;
         flex-direction: column;
@@ -164,17 +174,31 @@ $u-steps-item-dot-width: 20rpx;
             position: absolute;
             z-index: 0;
 
+            // 右半线：自本节点圆心向右伸至自身右边缘，与下一节点的左半线无缝衔接
             &--dot {
-                width: calc(100% - #{$u-steps-item-dot-width});
+                width: calc(50% - #{$u-steps-item-dot-width} / 2);
                 top: calc(#{$u-steps-item-dot-width} / 2);
                 left: calc(#{$u-steps-item-dot-width} / 2 + 50%);
             }
 
+            // 左半线：自自身左边缘向左半圆心（不含圆心），补偿右半线在宽度不同时够不到下一节点圆心
+            &--left--dot {
+                width: calc(50% - #{$u-steps-item-dot-width} / 2);
+                top: calc(#{$u-steps-item-dot-width} / 2);
+                right: calc(#{$u-steps-item-dot-width} / 2 + 50%);
+            }
+
             &--number {
-                width: calc(100% - $u-steps-item-number-width);
+                width: calc(50% - #{$u-steps-item-number-width} / 2);
                 top: calc(#{$u-steps-item-number-width} / 2);
                 left: calc(#{$u-steps-item-number-width} / 2 + 50%);
             }
+
+            &--left--number {
+                width: calc(50% - #{$u-steps-item-number-width} / 2);
+                top: calc(#{$u-steps-item-number-width} / 2);
+                right: calc(#{$u-steps-item-number-width} / 2 + 50%);
+            }
         }
     }
 
@@ -252,6 +276,8 @@ $u-steps-item-dot-width: 20rpx;
     }
 
     &__desc--row {
+        // 保持单行，超宽由容器横向滚动承载
+        white-space: nowrap;
         color: $u-type-info;
         font-size: 24rpx;
     }

package/components/u-steps/u-steps.vue

@@ -76,7 +76,19 @@ const props = defineProps(StepsProps);
 
 const { children } = useParent('u-steps');
 // 计算方向样式
-const directionStyle = computed(() => ({ flexDirection: props.direction as 'row' | 'column' }));
+const directionStyle = computed(() => {
+    const isRow = props.direction === 'row';
+    return {
+        flexDirection: props.direction as 'row' | 'column',
+        ...(isRow
+            ? {
+                  // 内容总宽超出一行时横向滚动，避免右侧节点被截断
+                  overflowX: 'auto',
+                  flexWrap: 'nowrap'
+              }
+            : {})
+    };
+});
 
 defineExpose({
     props,

package/package.json

@@ -2,7 +2,7 @@
     "id": "uview-pro",
     "name": "uview-pro",
     "displayName": "【支持鸿蒙】uView Pro｜基于Vue3+TS的高质量UI组件库，支持多主题、暗黑模式、多语言",
-    "version": "0.6.15",
+    "version": "0.6.16",
     "description": "uView Pro是基于Vue3+TS的多平台UI框架，提供80+高质量组件、便捷工具和常用模板，支持多主题、暗黑模式、多语言，支持H5/APP/鸿蒙/小程序多端开发。已在鸿蒙应用商店上架，欢迎体验！",
     "main": "index.ts",
     "module": "index.ts",