stellar-ui-plus 1.17.15 → 1.17.17

package/components/ste-progress/ATTRIBUTES.md

@@ -13,5 +13,6 @@
 | `textAlign` | 文字对齐方式 | `string` | `'right'` | - | - |
 | `textSize` | 文字大小 | `string / number` | `16` | - | - |
 | `displayTextThreshold` | 显示文本的阈值 | `number` | `0` | - | - |
+| `stageData` | 阶段配置信息，该值存在时percentage将不生效 | `object` | `{}` | - | - |
 
 

package/components/ste-progress/README.md

@@ -8,8 +8,8 @@
 
 #### 背景色
 
--   背景色支持纯色、渐变色、图片
--   支持设置激活部分的背景(`activeBg`)和未激活部分(`inactiveBg`)的背景
+- 背景色支持纯色、渐变色、图片
+- 支持设置激活部分的背景(`activeBg`)和未激活部分(`inactiveBg`)的背景
 
 ```html
 <ste-progress :percentage="40"></ste-progress>
@@ -19,7 +19,7 @@
 
 #### 线条粗细
 
--   通过`strokeWidth`设置线条的粗细
+- 通过`strokeWidth`设置线条的粗细
 
 ```html
 <ste-progress :percentage="40" strokeWidth="20"></ste-progress>
@@ -34,8 +34,8 @@
 
 #### 长度
 
--   通过`width`设置进度条长度
--   默认是`100%`，跟随父容器的宽度
+- 通过`width`设置进度条长度
+- 默认是`100%`，跟随父容器的宽度
 
 ```html
 <ste-progress :percentage="40" width="80%"></ste-progress>
@@ -50,10 +50,10 @@
 
 #### 自定义文字内容
 
--   通过`pivotText`属性来自定义进度条内文字显示的内容
--   通过`textColor`属性来自定义进度条内文字的颜色
--   通过`textAlign`属性来自定义进度条内文字的对齐方式
--   通过`textSize`属性来自定义进度条内文字的大小
+- 通过`pivotText`属性来自定义进度条内文字显示的内容
+- 通过`textColor`属性来自定义进度条内文字的颜色
+- 通过`textAlign`属性来自定义进度条内文字的对齐方式
+- 通过`textSize`属性来自定义进度条内文字的大小
 
 ```html
 <ste-progress :percentage="30" pivotText="已抢30%"></ste-progress>
@@ -64,14 +64,27 @@
 
 #### 文本显示阈值
 
--   当进度条百分比(`percentage`)小于阈值时(`displayTextThreshold`)，进度条的内容将不会显示
--   默认阈值是`0`，此时内容将始终显示
+- 当进度条百分比(`percentage`)小于阈值时(`displayTextThreshold`)，进度条的内容将不会显示
+- 默认阈值是`0`，此时内容将始终显示
 
 ```html
 <ste-progress :percentage="14" :displayTextThreshold="15"></ste-progress>
 <ste-progress :percentage="35" :displayTextThreshold="15"></ste-progress>
 ```
 
+#### 阶段配置
+
+```html
+<script lang="ts" setup>
+    const stageData = ref({
+        20: { label: '完成进度20%', style: { background: '#F53F3F' } },
+        50: { label: '完成进度50%', style: { background: '#FFC53D' } },
+        100: { label: '当月销售计划20,80万', style: { background: '#077EDB', textAlign: 'right' } },
+    });
+</script>
+<ste-progress :percentage="10" strokeWidth="36" :stageData="stageData"></ste-progress>
+```
+
 ---$
 
 ### API

package/components/ste-progress/props.ts

@@ -1,16 +1,22 @@
+import type { PropType } from 'vue';
+
 const progressProps = {
-  activeBg: { type: [String], default: '' },
-  inactiveBg: { type: [String], default: '#eeeeee' },
-  percentage: { type: [Number], default: 0 },
-  strokeWidth: { type: [String, Number], default: 24 },
-  disabled: { type: [Boolean], default: false },
-  width: { type: [String, Number], default: '100%' },
-  duration: { type: [Number], default: 0.3 },
-  pivotText: { type: [String], default: '' },
-  textColor: { type: [String], default: '#ffffff' },
-  textAlign: { type: [String], default: 'right' },
-  textSize: { type: [String, Number], default: 16 },
-  displayTextThreshold: { type: [Number], default: 0 },
-}
+    activeBg: { type: [String], default: '' },
+    inactiveBg: { type: [String], default: '#eeeeee' },
+    percentage: { type: [Number], default: 0 },
+    strokeWidth: { type: [String, Number], default: 24 },
+    disabled: { type: [Boolean], default: false },
+    width: { type: [String, Number], default: '100%' },
+    duration: { type: [Number], default: 0.3 },
+    pivotText: { type: [String], default: '' },
+    textColor: { type: [String], default: '#ffffff' },
+    textAlign: { type: [String], default: 'right' },
+    textSize: { type: [String, Number], default: 16 },
+    displayTextThreshold: { type: [Number], default: 0 },
+    stageData: {
+        type: Object as PropType<Record<string | number, any>>,
+        default: () => ({}),
+    },
+};
 
-export default progressProps
+export default progressProps;

package/components/ste-progress/ste-progress.easycom.json

@@ -75,6 +75,12 @@
             "description": "显示文本的阈值",
             "type": "number",
             "default": "0"
+        },
+        {
+            "name": "stageData",
+            "description": "阶段配置信息，该值存在时percentage将不生效",
+            "type": "object",
+            "default": "{}"
         }
     ]
 }

package/components/ste-progress/ste-progress.vue

@@ -5,6 +5,8 @@ import utils from '../../utils/utils';
 import { useColorStore } from '../../store/color';
 let { getColor } = useColorStore();
 
+let hasStage = false;
+
 const slots = useSlots();
 const props = defineProps(propsData);
 
@@ -18,20 +20,6 @@ onMounted(() => {
     haveSlot.value = !!slots.default;
 });
 
-watch(
-    () => props.percentage,
-    val => {
-        if (val >= MAX) {
-            realPercentage.value = MAX;
-        } else if (val <= MIN) {
-            realPercentage.value = MIN;
-        } else {
-            realPercentage.value = val;
-        }
-    },
-    { immediate: true }
-);
-
 const cmpRootCssVar = computed(() => {
     let style: CSSProperties = {
         '--progress-width': utils.addUnit(props.width),
@@ -83,12 +71,72 @@ const cmpActiveText = computed(() => {
     }
     return str;
 });
+
+const getPercentage = (value: number): number => {
+    if (!(typeof value === 'number')) {
+        return MIN;
+    }
+    if (value >= MAX) {
+        return MAX;
+    } else if (value <= MIN) {
+        return MIN;
+    } else {
+        return value;
+    }
+};
+
+const getStageStyle = (stageValue: number, index: number, value: any): CSSProperties => {
+    let style: CSSProperties = { width: `${getPercentage(stageValue)}%`, zIndex: Object.keys(props.stageData).length - index };
+
+    if (value instanceof Object && value.style) {
+        const { background, ...restStyle } = value.style;
+        style = {
+            ...style,
+            ...utils.bg2style(background),
+            ...restStyle,
+        };
+    }
+
+    return style;
+};
+
+const getStageTextWidth = (index: number, value: any): CSSProperties => {
+    let style: CSSProperties = { width: '100%' };
+    if (index > 0) {
+        const stageValues = Object.keys(props.stageData);
+        const widthPercentage = (Number(stageValues[index]) - Number(stageValues[index - 1])) / Number(stageValues[index]);
+        style.width = `${widthPercentage * 100}%`;
+        style.textAlign = value.style?.textAlign;
+    }
+    return style;
+};
+
+watch(
+    () => props.stageData,
+    val => {
+        hasStage = Object.keys(val || {}).length > 0;
+    },
+    { immediate: true }
+);
+
+watch(
+    () => props.percentage,
+    val => {
+        realPercentage.value = getPercentage(val);
+    },
+    { immediate: true }
+);
 </script>
 
 <template>
     <view class="ste-progress-root" :style="[cmpRootCssVar]">
         <view class="inactive-box" :style="[cmpInactiveStyle]"></view>
-        <view class="active-box line" :style="[cmpActiveStyle]" v-if="realPercentage > 0">
+        <view class="stage-box" v-if="hasStage">
+            <view class="stage" v-for="(item, index) in Object.keys(stageData)" :style="[getStageStyle(Number(item), index, stageData[item])]">
+                <text class="text" :style="[getStageTextWidth(index, stageData[item])]">{{ stageData[item].label }}</text>
+            </view>
+        </view>
+        <view class="active-box line" :style="[cmpActiveStyle]" v-if="realPercentage > 0 && !hasStage">
             <slot v-if="haveSlot"></slot>
             <text class="text" v-else>{{ cmpActiveText }}</text>
         </view>
@@ -102,7 +150,9 @@ const cmpActiveText = computed(() => {
     height: var(--progress-height);
 
     > .inactive-box,
-    > .active-box {
+    > .active-box,
+    > .stage-box,
+    > .stage-box > .stage {
         width: var(--progress-width);
         height: var(--progress-height);
         border-radius: 24rpx;
@@ -131,5 +181,33 @@ const cmpActiveText = computed(() => {
             line-height: 0;
         }
     }
+
+    .stage-box {
+        position: absolute;
+        left: 0;
+        top: 0;
+
+        .stage {
+            position: absolute;
+            left: 0;
+            top: 0;
+
+            text-align: right;
+
+            display: flex;
+            align-items: center;
+            justify-content: flex-end;
+            padding: var(--progress-padding) 0;
+            .text {
+                color: var(--active-text-color);
+                font-size: var(--active-text-font-size);
+                text-align: center;
+
+                overflow: hidden; //超出的文本隐藏
+                text-overflow: ellipsis; //溢出用省略号显示
+                white-space: nowrap; //溢出不换行
+            }
+        }
+    }
 }
 </style>

package/components/ste-select/ste-select.vue

@@ -102,11 +102,13 @@ const loadMore = () => {
                     </scroll-view>
                 </slot>
                 <view class="open-icon-event" @click.stop="clickOpenIcon">
-                    <view class="open-icon">
-                        <view class="open-icon-transform">
-                            <ste-icon code="&#xe676;" size="20" />
+                    <slot name="icon">
+                        <view class="open-icon">
+                            <view class="open-icon-transform">
+                                <ste-icon code="&#xe676;" size="20" />
+                            </view>
                         </view>
-                    </view>
+                    </slot>
                 </view>
 
                 <view class="clearable-icon" v-if="cmpShowClearable" @click.stop="clickClearable">

package/components/ste-toast/ste-toast.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { ref, computed, onUnmounted, onMounted } from 'vue';
-import { toastState } from './toast-bus';
 defineOptions({
     name: 'ste-toast',
 });
@@ -87,21 +86,39 @@ function hideToast() {
     close.value();
 }
 
-// 替换为 uni-app 事件监听
-onMounted(() => {
-    uni.$on('ste:toast:show', options => {
-        showToast(options);
-    });
+const registEvent = (flag = true) => {
+    if (flag) {
+        // 注册事件
+        uni.$on('ste:toast:show', showToast);
+        uni.$on('ste:toast:hide', hideToast);
+    } else {
+        // 卸载事件
+        uni.$off('ste:toast:show');
+        uni.$off('ste:toast:hide');
+    }
+};
+
+// 记录组件挂载时间
+let mountTimestamp = 0;
+// 最短合理的组件生命周期(毫秒)
+// 用于解决APP等某些环境下组件卸载顺序异常，导致事件卸载
+const MIN_REASONABLE_LIFECYCLE = 800;
 
-    uni.$on('ste:toast:hide', () => {
-        hideToast();
-    });
+onMounted(() => {
+    mountTimestamp = Date.now();
+    registEvent(false);
+    setTimeout(() => {
+        registEvent();
+    }, 200);
 });
 
-// 记得在组件卸载时移除事件监听
 onUnmounted(() => {
-    uni.$off('ste:toast:show');
-    uni.$off('ste:toast:hide');
+    // 计算组件生命周期时长
+    const lifecycleDuration = Date.now() - mountTimestamp;
+    // 只有当组件存活时间合理时，才考虑卸载事件监听
+    if (lifecycleDuration >= MIN_REASONABLE_LIFECYCLE) {
+        registEvent(false);
+    }
 });
 
 defineExpose({

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "stellar-ui-plus",
-    "version": "1.17.15",
+    "version": "1.17.17",
     "description": "",
     "author": "",
     "license": "MIT",
@@ -11,7 +11,8 @@
     },
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
-        "publish-vscode-plugin": "cd ../../../plugins/ste-helper & pnpm run publish"
+        "publish-vscode-plugin": "cd ../../../plugins/ste-helper & pnpm run publish",
+        "prepublishOnly": "pnpm run publish-vscode-plugin"
     },
     "dependencies": {
         "dayjs": "^1.11.11"

package/components/ste-toast/toast-bus.ts

@@ -1,15 +0,0 @@
-import { ref } from 'vue';
-
-export const toastState = ref({
-    show: false,
-    title: '',
-    icon: 'success',
-    image: '',
-    duration: 1500,
-    mask: false,
-    success: undefined,
-    fail: undefined,
-    complete: undefined,
-    close: undefined,
-    order: false,
-});