stellar-ui-plus 1.22.26 → 1.22.28

package/components/ste-calendar/ATTRIBUTES.md

@@ -25,6 +25,7 @@
 | `monthCount` | 渲染的月份个数 | `number` | `12` | - | - |
 | `weekendColor` | 周末颜色，默认跟随主题色 | `string` | `` | - | - |
 | `signs` | 日历标签 | `{[key:string]:SignType}` | `{}` | - | - |
+| `showScrollbar` | 是否显示滚动条 | `boolean` | `true` | - | `1.22.27` |
 
 
 #### Events

package/components/ste-calendar/props.ts

@@ -1,29 +1,30 @@
-import type { PropType } from 'vue'
-import type { DateType, SignType } from './date'
+import type { PropType } from 'vue';
+import type { DateType, SignType } from './date';
 
 export default {
-  title: { type: String, default: () => '日期选择' },
-  showTitle: { type: Boolean, default: () => true },
-  list: { type: Array as PropType<DateType[]>, default: () => [] },
-  mode: { type: String, default: () => 'single' },
-  startText: { type: String, default: () => '开始' },
-  endText: { type: String, default: () => '结束' },
-  color: { type: String, default: () => '' },
-  minDate: { type: [String, Number, Date], default: () => 0 },
-  maxDate: { type: [String, Number, Date], default: () => 0 },
-  maxCount: { type: [Number, String], default: () => 0 },
-  formatter: { type: String, default: () => 'YYYY-MM-DD' },
-  showMark: { type: Boolean, default: () => true },
-  readonly: { type: Boolean, default: () => false },
-  maxRange: { type: Number, default: () => null },
-  rangePrompt: { type: String, default: () => null },
-  showRangePrompt: { type: Boolean, default: () => true },
-  allowSameDay: { type: Boolean, default: () => false },
-  showConfirm: { type: Boolean, default: () => true },
-  width: { type: [Number, String], default: () => '100%' },
-  height: { type: [Number, String], default: () => '100%' },
-  signs: { type: Object as PropType<{ [key: string]: SignType }>, default: () => ({}) },
-  defaultDate: { type: [String, Number, Date], default: () => 0 },
-  monthCount: { type: Number, default: () => 12 },
-  weekendColor: { type: String, default: () => '' },
-}
+    title: { type: String, default: () => '日期选择' },
+    showTitle: { type: Boolean, default: () => true },
+    list: { type: Array as PropType<DateType[]>, default: () => [] },
+    mode: { type: String, default: () => 'single' },
+    startText: { type: String, default: () => '开始' },
+    endText: { type: String, default: () => '结束' },
+    color: { type: String, default: () => '' },
+    minDate: { type: [String, Number, Date], default: () => 0 },
+    maxDate: { type: [String, Number, Date], default: () => 0 },
+    maxCount: { type: [Number, String], default: () => 0 },
+    formatter: { type: String, default: () => 'YYYY-MM-DD' },
+    showMark: { type: Boolean, default: () => true },
+    readonly: { type: Boolean, default: () => false },
+    maxRange: { type: Number, default: () => null },
+    rangePrompt: { type: String, default: () => null },
+    showRangePrompt: { type: Boolean, default: () => true },
+    allowSameDay: { type: Boolean, default: () => false },
+    showConfirm: { type: Boolean, default: () => true },
+    width: { type: [Number, String], default: () => '100%' },
+    height: { type: [Number, String], default: () => '100%' },
+    signs: { type: Object as PropType<{ [key: string]: SignType }>, default: () => ({}) },
+    defaultDate: { type: [String, Number, Date], default: () => 0 },
+    monthCount: { type: Number, default: () => 12 },
+    weekendColor: { type: String, default: () => '' },
+    showScrollbar: { type: Boolean, default: () => true },
+};

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

@@ -160,6 +160,13 @@
             "type": "{[key:string]:SignType}",
             "default": "{}"
         },
+        {
+            "name": "showScrollbar",
+            "description": "是否显示滚动条",
+            "type": "boolean",
+            "default": "true",
+            "version": "1.22.27"
+        },
         {
             "name": "[event]select",
             "description": "选择日期时触发",
@@ -198,4 +205,4 @@
             ]
         }
     ]
-}
+}

package/components/ste-calendar/ste-calendar.vue

@@ -215,7 +215,15 @@ const onScroll = (e: any) => {
                 </view>
             </view>
         </view>
-        <scroll-view class="date-content" :class="{ 'show-confirm': cmpShowConfirm, 'show-title': showTitle }" scroll-y :scroll-top="contentScrollTop" @scroll="onScroll">
+        <scroll-view
+            class="date-content"
+            :class="{ 'show-confirm': cmpShowConfirm, 'show-title': showTitle }"
+            scroll-y
+            :scroll-top="contentScrollTop"
+            @scroll="onScroll"
+            :show-scrollbar="showScrollbar"
+            enhanced
+        >
             <view class="month-item" v-for="m in cmpDates.monthDatas" :key="m.key" :id="`month-${m.key}`">
                 <view class="month-bg" v-if="showMark">
                     {{ m.month }}
@@ -304,7 +312,6 @@ const onScroll = (e: any) => {
 
     .date-content {
         width: 100%;
-        overflow-y: auto;
         height: calc(100% - var(--font-size-80, 80rpx));
         padding-bottom: 12rpx;
 

package/components/ste-checkbox/README.md

@@ -4,6 +4,8 @@
 
 ---$
 
+- 由于性能不如原生组件，若数据量较多时推荐使用虚拟列表的形式渲染或者直接使用原生组件
+
 ### 代码演示
 
 #### 基础用法

package/components/ste-checkbox/ste-checkbox.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useSlots, computed, ref, nextTick, markRaw, type CSSProperties } from 'vue';
+import { useSlots, computed, ref, nextTick, onMounted, onUnmounted, type CSSProperties } from 'vue';
 import { useColorStore } from '../../store/color';
 let { getColor } = useColorStore();
 import utils from '../../utils/utils';
@@ -19,147 +19,150 @@ const props = defineProps(propsData);
 const emits = defineEmits<CheckboxEmits>();
 const slots = useSlots();
 
-// 静态配置使用 markRaw 避免不必要的响应式
-const staticConfig = markRaw({
-    defaultIconSizeMultiplier: 0.8,
-    borderWidth: 2,
-});
-
-const Parent = useInject<{ props: Required<CheckboxGroupProps>; updateValue: (value: any[]) => void }>(CHECKBOX_KEY);
+const Parent = useInject<{
+    props: Required<CheckboxGroupProps>;
+    updateValue: (value: any[]) => void;
+    registerChild: () => number;
+    unregisterChild: () => void;
+}>(CHECKBOX_KEY);
 const parentProps = computed(() => Parent?.parent?.props);
 
-// 基础计算属性
-const cmpReadonly = computed(() => getDefaultData('readonly', false));
-const cmpShape = computed(() => getDefaultData('shape', 'circle'));
-const cmpIconSize = computed(() => getDefaultData('iconSize', 36));
-const cmpCheckedColor = computed(() => getDefaultData('checkedColor', getColor().steThemeColor));
-const cmpTextPosition = computed(() => getDefaultData('textPosition', 'right'));
-const cmpTextSize = computed(() => getDefaultData('textSize', 28));
-const cmpTextInactiveColor = computed(() => getDefaultData('textInactiveColor', '#000000'));
-const cmpTextActiveColor = computed(() => getDefaultData('textActiveColor', '#000000'));
-const cmpTextDisabled = computed(() => getDefaultData('textDisabled', false));
-const cmpMarginLeft = computed(() => getDefaultData('marginLeft', '0'));
-const cmpMarginRight = computed(() => getDefaultData('marginRight', '0'));
-const cmpColumnGap = computed(() => getDefaultData('columnGap', '16'));
+// 记录当前组件在 group 中的索引
+const childIndex = ref<number>(-1);
 
-const cmpSlotProps = computed(() => ({
-    checked: cmpChecked.value,
-    disabled: cmpDisabled.value,
-    readonly: cmpReadonly.value,
-}));
+onMounted(() => {
+    if (Parent?.parent?.registerChild) {
+        childIndex.value = Parent.parent.registerChild();
+    }
+});
 
-// 拆分计算属性依赖 - 静态样式
-const baseRootStyle = computed(() => ({
-    fontSize: `var(--font-size-${cmpTextSize.value},${utils.formatPx(cmpTextSize.value)})`,
-    marginLeft: utils.formatPx(cmpMarginLeft.value),
-    marginRight: utils.formatPx(cmpMarginRight.value),
-}));
+onUnmounted(() => {
+    if (Parent?.parent?.unregisterChild) {
+        Parent.parent.unregisterChild();
+    }
+});
 
-// 拆分计算属性依赖 - 动态样式
-const dynamicRootStyle = computed(() => ({
-    color: cmpChecked.value ? cmpTextActiveColor.value : cmpTextInactiveColor.value,
-    flexDirection: cmpTextPosition.value == 'right' ? 'row' : 'row-reverse',
-}));
+// 🚀 优化: 缓存 themeColor,避免每次调用 getColor()
+const themeColor = getColor().steThemeColor;
 
-// 拆分计算属性依赖 - 交互样式
-const interactiveRootStyle = computed(() => {
-    const style: CSSProperties = {};
+// 强制更新选中状态
+let num = ref(1);
 
-    // #ifdef H5
-    if (cmpDisabled.value || cmpReadonly.value) {
-        style['cursor'] = 'not-allowed';
-    } else if (cmpTextDisabled.value) {
-        style['cursor'] = 'default';
-    } else {
-        style['cursor'] = 'pointer';
-    }
-    // #endif
+// 🚀 优化: 只保留必要的 computed
+const cmpChecked = computed(() => {
+    let v = num.value && parentProps.value ? parentProps.value.modelValue.includes(props.name) : props.modelValue;
+    return v;
+});
 
-    if (cmpTextDisabled.value) {
-        style['pointerEvents'] = 'none';
+const cmpDisabled = computed(() => {
+    let disabled = getDefaultData('disabled', false);
+    // 限制最大可选数
+    if (parentProps.value && parentProps.value.max) {
+        if (!cmpChecked.value && parentProps.value.modelValue.length >= parentProps.value.max) {
+            disabled = true;
+        }
     }
-
-    return style;
+    return disabled;
 });
 
-// 合并所有根样式
-const cmpRootStyle = computed(() => ({
-    ...baseRootStyle.value,
-    ...dynamicRootStyle.value,
-    ...interactiveRootStyle.value,
-}));
-
-// 图标样式（相对简单，保持原样）
-const cmpIconStyle = computed(() => ({
-    marginRight: utils.formatPx(cmpColumnGap.value),
-}));
+// 🚀 优化: 合并所有样式计算,直接调用 getDefaultData
+const cmpRootStyle = computed(() => {
+    const textSize = getDefaultData('textSize', 28);
+    const textPosition = getDefaultData('textPosition', 'right');
+    const readonly = getDefaultData('readonly', false);
+    const textDisabled = getDefaultData('textDisabled', false);
 
-// 拆分输入框样式 - 基础样式
-const baseInputStyle = computed(() => ({
-    borderRadius: cmpShape.value == 'circle' ? '50%' : '0',
-    width: `var(--font-size-${cmpIconSize.value},${utils.formatPx(cmpIconSize.value)})`,
-    height: `var(--font-size-${cmpIconSize.value},${utils.formatPx(cmpIconSize.value)})`,
-    lineHeight: `var(--font-size-${cmpIconSize.value},${utils.formatPx(cmpIconSize.value)})`,
-    columnGap: slots.default ? undefined : 0,
-}));
+    let marginLeft = getDefaultData('marginLeft', '0');
+    let marginRight = getDefaultData('marginRight', '0');
 
-// 拆分输入框样式 - 动态样式
-const dynamicInputStyle = computed(() => ({
-    border: `${utils.formatPx(staticConfig.borderWidth)} solid ${cmpChecked.value ? cmpCheckedColor.value : '#BBBBBB'}`,
-    background: cmpChecked.value ? cmpCheckedColor.value : '#FFFFFF',
-}));
+    // 如果在 checkbox-group 中，并且不是第一个元素，自动应用间距
+    if (parentProps.value && childIndex.value > 0 && marginLeft === '0') {
+        const direction = parentProps.value.direction || 'column';
 
-// 拆分输入框样式 - 禁用状态样式
-const disabledInputStyle = computed(() => {
-    if (!cmpDisabled.value) return {};
+        if (direction === 'row') {
+            // 横向排列时，设置左间距 16rpx
+            marginLeft = '16';
+        }
+    }
 
-    return {
-        background: '#eeeeee',
-        borderColor: '#bbbbbb',
+    const style: CSSProperties = {
+        fontSize: `var(--font-size-${textSize},${utils.formatPx(textSize)})`,
+        color: cmpChecked.value ? getDefaultData('textActiveColor', '#000000') : getDefaultData('textInactiveColor', '#000000'),
+        flexDirection: textPosition === 'right' ? 'row' : 'row-reverse',
+        marginLeft: utils.formatPx(marginLeft),
+        marginRight: utils.formatPx(marginRight),
     };
-});
 
-// 拆分输入框样式 - 交互样式
-const interactiveInputStyle = computed(() => {
-    const style: CSSProperties = {};
+    // 纵向排列时，设置上间距 16rpx
+    if (parentProps.value && childIndex.value > 0) {
+        const direction = parentProps.value.direction || 'column';
+        if (direction === 'column') {
+            style.marginTop = '16rpx';
+        }
+    }
 
     // #ifdef H5
-    if (cmpDisabled.value || cmpReadonly.value) {
+    if (cmpDisabled.value || readonly) {
         style['cursor'] = 'not-allowed';
+    } else if (textDisabled) {
+        style['cursor'] = 'default';
     } else {
         style['cursor'] = 'pointer';
     }
     // #endif
 
+    if (textDisabled) {
+        style['pointerEvents'] = 'none';
+    }
+
     return style;
 });
 
-// 合并所有输入框样式
-const cmpInputStyle = computed(() => ({
-    ...baseInputStyle.value,
-    ...dynamicInputStyle.value,
-    ...disabledInputStyle.value,
-    ...interactiveInputStyle.value,
-}));
-
-const cmpChecked = computed(() => {
-    let v = num.value && parentProps.value ? parentProps.value.modelValue.includes(props.name) : props.modelValue;
-    return v;
+const cmpIconStyle = computed(() => {
+    return {
+        marginRight: utils.formatPx(getDefaultData('columnGap', '16')),
+    } as CSSProperties;
 });
 
-const cmpDisabled = computed(() => {
-    let disabled = getDefaultData('disabled', false);
-    // 限制最大可选数
-    if (parentProps.value && parentProps.value.max) {
-        if (!cmpChecked.value && parentProps.value.modelValue.length >= parentProps.value.max) {
-            disabled = true;
-        }
+const cmpInputStyle = computed(() => {
+    const shape = getDefaultData('shape', 'circle');
+    const iconSize = getDefaultData('iconSize', 36);
+    const checkedColor = getDefaultData('checkedColor', themeColor);
+    const readonly = getDefaultData('readonly', false);
+    const checked = cmpChecked.value;
+
+    const style: CSSProperties = {
+        borderRadius: shape === 'circle' ? '50%' : '0',
+        border: `${utils.formatPx(2)} solid ${checked ? checkedColor : '#BBBBBB'}`,
+        background: checked ? checkedColor : '#FFFFFF',
+        width: `var(--font-size-${iconSize},${utils.formatPx(iconSize)})`,
+        height: `var(--font-size-${iconSize},${utils.formatPx(iconSize)})`,
+        lineHeight: `var(--font-size-${iconSize},${utils.formatPx(iconSize)})`,
+    };
+
+    // #ifdef H5
+    style['cursor'] = cmpDisabled.value || readonly ? 'not-allowed' : 'pointer';
+    // #endif
+
+    if (cmpDisabled.value) {
+        style['background'] = '#eeeeee';
+        style['borderColor'] = '#bbbbbb';
     }
-    return disabled;
+
+    // 在没有使用插槽内容时去掉边距
+    if (!slots.default) {
+        style['columnGap'] = '0';
+    }
+
+    return style;
 });
 
-// 强制更新选中状态
-let num = ref(1);
+// 🚀 优化: slotProps 也直接计算
+const cmpSlotProps = computed(() => ({
+    checked: cmpChecked.value,
+    disabled: cmpDisabled.value,
+    readonly: getDefaultData('readonly', false),
+}));
 
 // 批处理更新相关
 const isBatchUpdating = ref(false);
@@ -195,7 +198,9 @@ const batchedUpdate = async (updateFn: () => Promise<void>) => {
 
 // 实际的点击处理逻辑
 const handleClick = async () => {
-    if (cmpDisabled.value || cmpReadonly.value) {
+    const readonly = getDefaultData('readonly', false);
+
+    if (cmpDisabled.value || readonly) {
         return;
     }
 
@@ -240,20 +245,11 @@ const click = () => {
     batchedUpdate(handleClick);
 };
 
-type PropsKeyTypee = keyof typeof props;
-function getDefaultData(key: PropsKeyTypee, value: any) {
-    try {
-        if (Object.prototype.hasOwnProperty.call(props, key)) {
-            if (props[key]) {
-                return props[key];
-            } else {
-                return value;
-            }
-        }
-    } catch (e) {
-        return value;
-    }
-}
+type PropsKeyType = keyof typeof props;
+const getDefaultData = <T,>(key: PropsKeyType, defaultValue: T): T => {
+    const value = props[key];
+    return value !== undefined && value !== '' ? (value as T) : defaultValue;
+};
 </script>
 
 <template>
@@ -261,7 +257,7 @@ function getDefaultData(key: PropsKeyTypee, value: any) {
         <view class="icon" :style="[cmpIconStyle]">
             <slot name="icon" :slotProps="cmpSlotProps">
                 <view class="input-icon" :style="[cmpInputStyle]">
-                    <ste-icon v-if="cmpChecked && cmpIconSize" :size="cmpIconSize * staticConfig.defaultIconSizeMultiplier" code="&#xe67a;" :color="cmpDisabled ? '#bbbbbb' : '#fff'" bold />
+                    <ste-icon v-if="cmpChecked" :size="getDefaultData('iconSize', 36) * 0.8" code="&#xe67a;" :color="cmpDisabled ? '#bbbbbb' : '#fff'" bold />
                 </view>
             </slot>
         </view>

package/components/ste-checkbox-group/ste-checkbox-group.vue

@@ -1,12 +1,26 @@
 <script lang="ts" setup>
-import { computed, type CSSProperties } from 'vue';
+import { computed, ref, type CSSProperties } from 'vue';
 import propsData, { checkboxGroupEmits } from './props';
 import { useProvide } from '../../utils/mixin';
 import { CHECKBOX_KEY } from '../ste-checkbox/props';
 const props = defineProps(propsData);
 const emits = defineEmits(checkboxGroupEmits);
 
-useProvide(CHECKBOX_KEY, 'ste-checkbox')({ props, updateValue });
+const childrenCount = ref(0);
+
+// 注册子组件，返回索引
+function registerChild() {
+    const index = childrenCount.value;
+    childrenCount.value++;
+    return index;
+}
+
+// 卸载时减少计数
+function unregisterChild() {
+    childrenCount.value--;
+}
+
+useProvide(CHECKBOX_KEY, 'ste-checkbox')({ props, updateValue, registerChild, unregisterChild });
 
 const cmpRootStyle = computed(() => {
     return {
@@ -21,14 +35,13 @@ function updateValue(value: any[]) {
 </script>
 
 <template>
-    <view class="ste-checkbox-group-root" :style="[cmpRootStyle]">
+    <view class="ste-checkbox-group-root" :style="[cmpRootStyle]" :class="[direction]">
         <slot></slot>
     </view>
 </template>
 
 <style lang="scss" scoped>
 .ste-checkbox-group-root {
-    display: grid;
-    row-gap: 16rpx;
+    display: flex;
 }
 </style>

package/components/ste-input/README.md

@@ -129,17 +129,50 @@
 ```html
 <template>
     <ste-input placeholder="请输入内容" confirmType="next" rootClass="root-my-input" shape="line">
-        <view slot="prefix" style="margin-right: 28rpx">
-            <ste-icon code="&#xe68c;" size="28" />
-            <text>文本</text>
-        </view>
-        <view slot="suffix">
-            <ste-icon code="&#xe672;" size="28" />
-        </view>
+        <template v-slot:prefix>
+            <view style="margin-right: 28rpx">
+                <ste-icon code="&#xe68c;" size="28" />
+                <text>文本</text>
+            </view>
+        </template>
+        <template v-slot:suffix>
+            <view>
+                <ste-icon code="&#xe672;" size="28" />
+            </view>
+        </template>
     </ste-input>
 </template>
 ```
 
+#### 前后插槽-验证码
+
+```html
+<template>
+    <ste-input placeholder="请输入验证码" confirmType="next" rootClass="root-my-input" shape="line">
+        <template v-slot:suffix>
+            <view>
+                <ste-button :mode="100" :round="false" @click="getCode" :disabled="count > 0">{{ count <= 0 ? '获取验证码' : count + '秒后获取' }}</ste-button>
+            </view>
+        </template>
+    </ste-input>
+</template>
+<script lang="ts" setup>
+    import { ref } from 'vue';
+    const count = ref(0);
+    let codeTimer: any;
+
+    function getCode() {
+        count.value = 20;
+        codeTimer = setInterval(() => {
+            if (count.value <= 0) {
+                clearInterval(codeTimer);
+            }
+            count.value--;
+        }, 1000);
+    }
+</script>
+```
+
 #### 前置过滤
 
 ```html

package/components/ste-input/ste-input.scss

@@ -55,7 +55,8 @@
                 // letter-spacing: 10rpx;
 
                 &.textarea {
-                    height: 160rpx;
+                    min-height: 160rpx;
+                    height: 100%;
                 }
             }
 

package/components/ste-input/ste-input.vue

@@ -169,6 +169,7 @@ function inputClick() {
                         :placeholder-class="placeholderClass"
                         :confirm-type="confirmType"
                         :cursor-spacing="cursorSpacing"
+                        :maxlength="maxlength"
                         @input="onInput"
                         @focus="onFocus"
                         @blur="onBlur"
@@ -197,6 +198,7 @@ function inputClick() {
                         :placeholder-style="placeholderStyle"
                         :placeholder-class="placeholderClass"
                         :confirm-type="confirmType"
+                        :maxlength="maxlength"
                         @input="onInput"
                         @focus="onFocus"
                         @blur="onBlur"

package/components/ste-login-info/props.ts

@@ -16,6 +16,10 @@ const loginInfoProps = {
     loginSrc: { type: String, default: '' },
     /** 未登录标题 */
     loginTitle: { type: String, default: '' },
+    showTitleIcon: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
 };
 
 export const loginInfoEmits = {

package/components/ste-login-info/ste-login-info.vue

@@ -13,7 +13,7 @@
                     <text>{{ subTitle }}</text>
                 </view>
             </view>
-            <view class="user-info user-info-login" @click="loginTitleClick" v-else>
+            <view class="user-info user-info-login" @click="loginTitleClick" v-if="loginStatus == 0 || showTitleIcon">
                 <view class="name">
                     <text class="name-text">{{ loginTitle }}</text>
                     <ste-icon code="&#xe674;" size="28" color="#000" marginLeft="8" :fontFamily="fontFamily" />
@@ -76,13 +76,11 @@ const loginTitleClick = () => {
             margin-right: 24rpx;
         }
         .user-info-login {
-            justify-content: center;
+            // justify-content: center;
+            flex: 0 !important;
         }
         .user-info {
             flex: 1;
-            display: flex;
-            flex-direction: column;
-            justify-content: space-between;
 
             .name {
                 display: flex;

package/components/ste-notice-bar/ste-notice-bar.vue

@@ -200,6 +200,7 @@ function handleClick() {
         display: flex;
         align-items: center;
         overflow-x: hidden;
+        overflow-y: hidden;
         justify-content: flex-start;
         flex: 1;
         height: 100%;

package/components/ste-radio/README.md

@@ -4,63 +4,9 @@
 
 ---$
 
-### 代码演示
-
-后面的演示代码中涉及到的变量和方法都使用该代码
+- 由于性能不如原生组件，若数据量较多时推荐使用虚拟列表的形式渲染或者直接使用原生组件
 
-```html
-<script lang="ts" setup>
-    import { reactive } from 'vue';
-    const val = reactive({
-        value1: 'a',
-        value2: 'a',
-        value3: 'a',
-        value4: 'a',
-        value5: 'a',
-        value6: 'a',
-        value7: 'a',
-        value8: '',
-        value9: 'a',
-        value10: 'a',
-        value11: '',
-        value12: '',
-        value13: '',
-        value14: '',
-        value15: '',
-    });
-    function click1(value: any, suspend: () => void, next: () => void) {
-        uni.showToast({
-            icon: 'none',
-            title: `点击：${value} 复选框的值`,
-        });
-        suspend(); // 阻止操作
-
-        setTimeout(() => {
-            next(); // 异步操作后，执行操作
-        }, 1500);
-    }
-    function click2(value: any, suspend: () => void, _next: any, stop: () => void) {
-        uni.showToast({
-            icon: 'none',
-            title: `点击：${value} 复选框的值`,
-        });
-        suspend(); // 阻止操作
-        setTimeout(() => {
-            // 异步操作后，停止操作
-            stop();
-        }, 200);
-    }
-
-    function change(value: any) {
-        setTimeout(() => {
-            uni.showToast({
-                icon: 'none',
-                title: `改变：${value} 复选框的值`,
-            });
-        }, 1000);
-    }
-</script>
-```
+### 代码演示
 
 #### 基础用法
 

package/components/ste-step/ste-step.scss

@@ -62,13 +62,17 @@
         position: relative;
 
         .ste-step-line {
-            background: var(---line-color);
+            // background: var(---line-color);
             display: inline-block;
             position: absolute;
             height: 2rpx;
             left: 50%;
             right: -50%;
             top: 20rpx;
+            border-top-width: 2rpx;
+            border-top-color: var(---line-color);
+            border-top-style: solid;
+            box-sizing: border-box;
         }
         .ste-step-icon.is-icon {
             border-radius: 50%;

package/components/ste-step/ste-step.vue

@@ -27,6 +27,7 @@ const stepIndex = ref(0);
 const cmpDirection = computed(() => parentProps.direction);
 const cmpDot = computed(() => parentProps.dot);
 const cmpReverse = computed(() => parentProps.reverse);
+const cmpLineStyle = computed(() => parentProps.lineStyle);
 
 watch(
     () => parent?.internalChildren,
@@ -90,18 +91,17 @@ function clickStep() {
 <template>
     <view class="ste-step" :class="[`ste-step-${cmpDirection}`, cmpReverse ? 'reverse' : '']" :style="[cmpRootStyle]">
         <view class="ste-step-head" :class="cmpDot ? 'head-is-dot' : ''">
-            <view class="ste-step-line" v-if="stepIndex < childrenLen"></view>
+            <view class="ste-step-line" v-if="stepIndex < childrenLen" :style="{ borderTopStyle: cmpLineStyle }"></view>
             <view class="ste-step-icon" :class="[!cmpDot ? ($slots.icon || icon ? '' : cmpStatusObj.icon ? 'is-icon' : 'is-text') : 'is-dot']" @click="clickStep">
-                <template v-if="$slots.icon">
-                    <slot name="icon"></slot>
-                </template>
-                <template v-else-if="cmpDot"></template>
-                <template v-else-if="cmpStatusObj.icon">
-                    <ste-icon class="ste-step-icon-inner" :code="cmpStatusObj.icon" :size="icon ? 40 : 20" :color="cmpStatusObj.color"></ste-icon>
-                </template>
-                <template v-else>
-                    <view class="ste-step-inner">{{ stepIndex }}</view>
-                </template>
+                <slot name="icon">
+                    <template v-if="cmpDot"></template>
+                    <template v-else-if="cmpStatusObj.icon">
+                        <ste-icon class="ste-step-icon-inner" :code="cmpStatusObj.icon" :size="icon ? 40 : 20" :color="cmpStatusObj.color"></ste-icon>
+                    </template>
+                    <template v-else>
+                        <view class="ste-step-inner">{{ stepIndex }}</view>
+                    </template>
+                </slot>
             </view>
         </view>
         <view class="ste-step-content" :class="[`ste-step-content-${parentProps.direction}`]">
@@ -112,8 +112,7 @@ function clickStep() {
                 <slot name="title"></slot>
             </view>
             <view class="ste-step-desc" v-if="description || $slots.description">
-                <span v-if="!$slots.description" v-html="description"></span>
-                <slot name="description"></slot>
+                <slot name="description"><span v-html="description"></span></slot>
             </view>
         </view>
     </view>

package/components/ste-steps/ATTRIBUTES.md

@@ -4,7 +4,8 @@
 | `active` | 步骤进度 | `number` | `0` | - | - |
 | `direction` | 步骤条方向 | `boolean` | `row` | `row`：横向<br/>`column`：竖向 | - |
 | `dot` | 点状步骤条 | `boolean` | `false` | - | - |
-| `reverse` | 方向反转 | `boolean` | `false` | - | - |
+| `reverse` | 方向反转 | `boolean` | `false` | - | `1.22.27` |
+| `lineStyle` | 线条样式（支持border-style全部属性） | `string` | `solid` | - | `1.22.27` |
 
 
 #### Events

package/components/ste-steps/props.ts

@@ -1,19 +1,20 @@
-import type { ExtractPropTypes, PropType } from 'vue'
+import type { ExtractPropTypes, PropType } from 'vue';
 
-type directionType = 'row' | 'column'
+type directionType = 'row' | 'column';
 
-export const STEPS_KEY = Symbol('ste-steps')
+export const STEPS_KEY = Symbol('ste-steps');
 const stepsProps = {
-  active: { type: Number, default: 0 },
-  direction: { type: String as PropType<directionType>, default: 'row' },
-  dot: { type: Boolean, default: false },
-  reverse: { type: Boolean, default: false },
-}
+    active: { type: Number, default: 0 },
+    direction: { type: String as PropType<directionType>, default: 'row' },
+    dot: { type: Boolean, default: false },
+    reverse: { type: Boolean, default: false },
+    lineStyle: { type: String, default: 'solid' },
+};
 
-export type StepsProps = ExtractPropTypes<typeof stepsProps>
+export type StepsProps = ExtractPropTypes<typeof stepsProps>;
 
 export const stepsEmits = {
-  'click-step': (index: number) => typeof index === 'number',
-}
+    'click-step': (index: number) => typeof index === 'number',
+};
 
-export default stepsProps
+export default stepsProps;

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

@@ -35,7 +35,15 @@
             "name": "reverse",
             "description": "方向反转",
             "type": "boolean",
-            "default": "false"
+            "default": "false",
+            "version": "1.22.27"
+        },
+        {
+            "name": "lineStyle",
+            "description": "线条样式（支持border-style全部属性）",
+            "type": "string",
+            "default": "solid",
+            "version": "1.22.27"
         },
         {
             "name": "[event]clickStep",

package/components/ste-swiper-item/ste-swiper-item.vue

@@ -42,7 +42,18 @@ useInject(SWIPER_KEY, { setTransform, setLinearScale });
 .ste-swiper-item-root {
     width: 100%;
     height: 100%;
-    /* 添加此行以确保在循环播放时不会出现闪烁 */
+    /* 启用硬件加速优化 */
     will-change: transform;
+    /* 隐藏背面，避免翻转时闪烁 */
+    backface-visibility: hidden;
+    /* CSS containment 优化 */
+    contain: layout style paint;
+    /* 抗锯齿 */
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    /* 优化图像渲染 */
+    image-rendering: -webkit-optimize-contrast;
+    /* 确保子元素也使用硬件加速 */
+    transform-style: flat;
 }
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "stellar-ui-plus",
-    "version": "1.22.26",
+    "version": "1.22.28",
     "description": "",
     "author": "",
     "license": "MIT",