stellar-ui-plus 1.19.2 → 1.20.1

package/components/ste-barcode/encode.ts

@@ -172,7 +172,7 @@ export function stringToCode128(text: string) {
 
     codes = codes.concat(codesForChar(b1, b2, barc.currcs))
     // code C takes 2 chars each time
-    if (barc.currcs === CODESET.C)
+    if (barc.currcs === CODESET.C)
       i++
   }
 
@@ -203,7 +203,7 @@ export function stringToCode128(text: string) {
   function perhapsCodeC(bytes: number[], codeset: number) {
     for (let i = 0; i < bytes.length; i++) {
       const b = bytes[i]
-      if ((b < 48 || b > 57) && b !== CHAR_TILDE)
+      if ((b < 48 || b > 57) && b !== CHAR_TILDE)
         return codeset
     }
     return CODESET.C
@@ -221,13 +221,13 @@ export function stringToCode128(text: string) {
         if (chr2 === -1) {
           shifter === SET_CODEB
           currcs = CODESET.B
-        }
+        }
         else if (chr2 !== -1 && !charCompatible(chr2, currcs)) {
           // need to check ahead as well
           if (charCompatible(chr2, CODESET.A)) {
             shifter = SET_CODEA
             currcs = CODESET.A
-          }
+          }
           else {
             shifter = SET_CODEB
             currcs = CODESET.B
@@ -235,7 +235,7 @@ export function stringToCode128(text: string) {
         }
       }
       /* eslint-enable no-unused-expressions */
-    }
+    }
     else {
       // if there is a next char AND that next char is also not compatible
 
@@ -251,11 +251,11 @@ export function stringToCode128(text: string) {
             currcs = CODESET.A
             break
         }
-      }
+      }
       else {
         // no need to shift code sets, a temporary SHIFT will suffice
         shifter = SET_SHIFT
-      }
+      }
     }
 
     // ok some type of shift is nessecary
@@ -263,12 +263,12 @@ export function stringToCode128(text: string) {
       result.push(shifter)
       // result.push(codeValue(chr2));-----------------------------------
       result.push(codeValue(chr1))
-    }
+    }
     else {
       if (currcs === CODESET.C) {
         // include next as well
         result.push(codeValue(chr1, chr2))
-      }
+      }
       else {
         result.push(codeValue(chr1))
       }
@@ -284,19 +284,19 @@ function codeValue(chr1: number, chr2: any = undefined) {
   if (typeof chr2 === 'undefined')
     return chr1 >= 32 ? chr1 - 32 : chr1 + 64
   else
-    return Number.parseInt(String.fromCharCode(chr1) + String.fromCharCode(chr2))
+    return Number.parseInt(String.fromCharCode(chr1) + String.fromCharCode(chr2))
 }
 
 function charCompatible(chr: number, codeset: number) {
   const csa = codeSetAllowedFor(chr)
-  if (csa === CODESET.ANY)
+  if (csa === CODESET.ANY)
     return true
     // if we need to change from current
-  if (csa === CODESET.AB)
+  if (csa === CODESET.AB)
     return true
-  if (csa === CODESET.A && codeset === CODESET.A)
+  if (csa === CODESET.A && codeset === CODESET.A)
     return true
-  if (csa === CODESET.B && codeset === CODESET.B)
+  if (csa === CODESET.B && codeset === CODESET.B)
     return true
   return false
 }
@@ -305,11 +305,11 @@ function codeSetAllowedFor(chr: number) {
   if (chr >= 48 && chr <= 57) {
     // 0-9
     return CODESET.ANY
-  }
+  }
   else if (chr >= 32 && chr <= 95) {
     // 0-9 A-Z
     return CODESET.AB
-  }
+  }
   else {
     // if non printable
     return chr < 32 ? CODESET.A : CODESET.B

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

@@ -1,11 +1,12 @@
 <script lang="ts" setup>
-import { useSlots, computed, ref, type CSSProperties } from 'vue';
+import { useSlots, computed, ref, nextTick, markRaw, type CSSProperties } from 'vue';
 import { useColorStore } from '../../store/color';
 let { getColor } = useColorStore();
 import utils from '../../utils/utils';
 import propsData, { CHECKBOX_KEY, type CheckboxEmits } from './props';
 import type { CheckboxGroupProps } from '../ste-checkbox-group/props';
 import { useInject } from '../../utils/mixin';
+
 const componentName = `ste-checkbox`;
 defineOptions({
     name: componentName,
@@ -13,13 +14,21 @@ defineOptions({
         virtualHost: true,
     },
 });
+
 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 parentProps = computed(() => Parent?.parent?.props);
 
+// 基础计算属性
 const cmpReadonly = computed(() => getDefaultData('readonly', false));
 const cmpShape = computed(() => getDefaultData('shape', 'circle'));
 const cmpIconSize = computed(() => getDefaultData('iconSize', 36));
@@ -33,15 +42,29 @@ const cmpMarginLeft = computed(() => getDefaultData('marginLeft', '0'));
 const cmpMarginRight = computed(() => getDefaultData('marginRight', '0'));
 const cmpColumnGap = computed(() => getDefaultData('columnGap', '16'));
 
-const cmpSlotProps = computed(() => ({ checked: cmpChecked.value, disabled: cmpDisabled.value, readonly: cmpReadonly.value }));
+const cmpSlotProps = computed(() => ({
+    checked: cmpChecked.value,
+    disabled: cmpDisabled.value,
+    readonly: cmpReadonly.value,
+}));
+
+// 拆分计算属性依赖 - 静态样式
+const baseRootStyle = computed(() => ({
+    fontSize: `var(--font-size-${cmpTextSize.value},${utils.formatPx(cmpTextSize.value)})`,
+    marginLeft: utils.formatPx(cmpMarginLeft.value),
+    marginRight: utils.formatPx(cmpMarginRight.value),
+}));
+
+// 拆分计算属性依赖 - 动态样式
+const dynamicRootStyle = computed(() => ({
+    color: cmpChecked.value ? cmpTextActiveColor.value : cmpTextInactiveColor.value,
+    flexDirection: cmpTextPosition.value == 'right' ? 'row' : 'row-reverse',
+}));
+
+// 拆分计算属性依赖 - 交互样式
+const interactiveRootStyle = computed(() => {
+    const style: CSSProperties = {};
 
-const cmpRootStyle = computed(() => {
-    let style: CSSProperties = {};
-    style['fontSize'] = `var(--font-size-${cmpTextSize.value},${utils.formatPx(cmpTextSize.value)})`;
-    style['color'] = cmpChecked.value ? cmpTextActiveColor.value : cmpTextInactiveColor.value;
-    style['flexDirection'] = cmpTextPosition.value == 'right' ? 'row' : 'row-reverse';
-    style['marginLeft'] = utils.formatPx(cmpMarginLeft.value);
-    style['marginRight'] = utils.formatPx(cmpMarginRight.value);
     // #ifdef H5
     if (cmpDisabled.value || cmpReadonly.value) {
         style['cursor'] = 'not-allowed';
@@ -51,27 +74,55 @@ const cmpRootStyle = computed(() => {
         style['cursor'] = 'pointer';
     }
     // #endif
+
     if (cmpTextDisabled.value) {
         style['pointerEvents'] = 'none';
     }
+
     return style;
 });
 
-const cmpIconStyle = computed(() => {
-    let style: CSSProperties = {};
-    style['marginRight'] = utils.formatPx(cmpColumnGap.value);
-    return style;
+// 合并所有根样式
+const cmpRootStyle = computed(() => ({
+    ...baseRootStyle.value,
+    ...dynamicRootStyle.value,
+    ...interactiveRootStyle.value,
+}));
+
+// 图标样式（相对简单，保持原样）
+const cmpIconStyle = computed(() => ({
+    marginRight: utils.formatPx(cmpColumnGap.value),
+}));
+
+// 拆分输入框样式 - 基础样式
+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,
+}));
+
+// 拆分输入框样式 - 动态样式
+const dynamicInputStyle = computed(() => ({
+    border: `${utils.formatPx(staticConfig.borderWidth)} solid ${cmpChecked.value ? cmpCheckedColor.value : '#BBBBBB'}`,
+    background: cmpChecked.value ? cmpCheckedColor.value : '#FFFFFF',
+}));
+
+// 拆分输入框样式 - 禁用状态样式
+const disabledInputStyle = computed(() => {
+    if (!cmpDisabled.value) return {};
+
+    return {
+        background: '#eeeeee',
+        borderColor: '#bbbbbb',
+    };
 });
 
-const cmpInputStyle = computed(() => {
-    let style: CSSProperties = {};
-    // 没有icon 则默认样式
-    style['borderRadius'] = cmpShape.value == 'circle' ? '50%' : '0';
-    style['border'] = `${utils.formatPx(2)} solid ${cmpChecked.value ? cmpCheckedColor.value : '#BBBBBB'}`;
-    style['background'] = cmpChecked.value ? cmpCheckedColor.value : '#FFFFFF';
-    style['width'] = `var(--font-size-${cmpIconSize.value},${utils.formatPx(cmpIconSize.value)})`;
-    style['height'] = `var(--font-size-${cmpIconSize.value},${utils.formatPx(cmpIconSize.value)})`;
-    style['lineHeight'] = `var(--font-size-${cmpIconSize.value},${utils.formatPx(cmpIconSize.value)})`;
+// 拆分输入框样式 - 交互样式
+const interactiveInputStyle = computed(() => {
+    const style: CSSProperties = {};
+
     // #ifdef H5
     if (cmpDisabled.value || cmpReadonly.value) {
         style['cursor'] = 'not-allowed';
@@ -79,18 +130,18 @@ const cmpInputStyle = computed(() => {
         style['cursor'] = 'pointer';
     }
     // #endif
-    if (cmpDisabled.value) {
-        style['background'] = '#eeeeee';
-        style['borderColor'] = '#bbbbbb';
-    }
 
-    // 在没有使用插槽内容时去掉边距
-    if (!slots.default) {
-        style['columnGap'] = 0;
-    }
     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;
@@ -106,45 +157,88 @@ const cmpDisabled = computed(() => {
     }
     return disabled;
 });
+
 // 强制更新选中状态
 let num = ref(1);
-async function click() {
-    if (!cmpDisabled.value && !cmpReadonly.value) {
-        let next = true;
-        const stop = new Promise((resolve, reject) => {
-            emits(
-                'click',
-                props.modelValue,
-                () => (next = false),
-                () => resolve(props.modelValue),
-                () => reject()
-            );
-        });
-        if (!next) {
-            try {
-                await stop;
-            } catch (e) {
-                return;
-            }
+
+// 批处理更新相关
+const isBatchUpdating = ref(false);
+const pendingUpdate = ref(false);
+
+// 批处理更新函数
+const batchedUpdate = async (updateFn: () => Promise<void>) => {
+    if (isBatchUpdating.value) {
+        pendingUpdate.value = true;
+        return;
+    }
+
+    isBatchUpdating.value = true;
+
+    try {
+        await updateFn();
+    } finally {
+        await nextTick();
+        isBatchUpdating.value = false;
+
+        // 处理待处理的更新
+        if (pendingUpdate.value) {
+            pendingUpdate.value = false;
+            // 如果有待处理的更新，延迟一帧再处理
+            requestAnimationFrame(() => {
+                if (!isBatchUpdating.value) {
+                    handleClick();
+                }
+            });
         }
+    }
+};
 
-        let value: boolean | any[];
-        if (parentProps.value) {
-            value = parentProps.value.modelValue;
-            if (cmpChecked.value) {
-                value = value.filter(value => value != props.name);
-            } else {
-                value.push(props.name);
-            }
-            Parent.parent?.updateValue(value);
-            num.value++;
+// 实际的点击处理逻辑
+const handleClick = async () => {
+    if (cmpDisabled.value || cmpReadonly.value) {
+        return;
+    }
+
+    let next = true;
+    const stop = new Promise((resolve, reject) => {
+        emits(
+            'click',
+            props.modelValue,
+            () => (next = false),
+            () => resolve(props.modelValue),
+            () => reject()
+        );
+    });
+
+    if (!next) {
+        try {
+            await stop;
+        } catch (e) {
+            return;
+        }
+    }
+
+    let value: boolean | any[];
+    if (parentProps.value) {
+        // 使用浅拷贝避免直接修改原数组
+        value = [...parentProps.value.modelValue];
+        if (cmpChecked.value) {
+            value = value.filter(v => v !== props.name);
         } else {
-            value = !cmpChecked.value;
-            emits('update:modelValue', !cmpChecked.value);
+            value.push(props.name);
         }
-        emits('change', value);
+        Parent.parent?.updateValue(value);
+        num.value++;
+    } else {
+        value = !cmpChecked.value;
+        emits('update:modelValue', value);
     }
-}
+    emits('change', value);
+};
+
+const click = () => {
+    batchedUpdate(handleClick);
+};
 
 type PropsKeyTypee = keyof typeof props;
 function getDefaultData(key: PropsKeyTypee, value: any) {
@@ -167,7 +261,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 * 0.8" code="&#xe67a;" :color="cmpDisabled ? '#bbbbbb' : '#fff'" bold></ste-icon>
+                    <ste-icon v-if="cmpChecked && cmpIconSize" :size="cmpIconSize * staticConfig.defaultIconSizeMultiplier" code="&#xe67a;" :color="cmpDisabled ? '#bbbbbb' : '#fff'" bold />
                 </view>
             </slot>
         </view>

package/components/ste-date-user/ATTRIBUTES.md

@@ -0,0 +1,9 @@
+#### Props
+| 属性名 | 说明  | 类型 | 默认值  | 可选值 | 支持版本 |
+| ----- | ----- | --- | ------- | ------ | -------- |
+| `type` | 组件类型 | `String` | `date` | `date`：日期<br/>`user`：人员 | - |
+| `date` | 日期 | `String` | `new Date()` | - | - |
+| `avatar` | 头像 | `String` | `` | - | - |
+| `nickname` | 昵称 | `String` | `` | - | - |
+
+

package/components/ste-date-user/README.md

@@ -0,0 +1,65 @@
+# DateUser 人员信息以及日期
+
+提供日期和用户信息展示。
+
+---$
+
+## 代码演示
+
+### 日期类型
+
+- 通过 `type`设置组件类型，默认为`date`
+- 通过 `date`设置日期时间，默认为`当天`
+
+```html
+<template>
+    <ste-date-user date="2025-10-01"></ste-date-user>
+</template>
+```
+
+### 返回按钮配置
+
+- 通过 `type`设置组件类型，值为`user`
+- 通过 `avatar` 属性来设置头像，默认``
+- 通过 `desc` 插槽来设置用户描述，默认``
+
+```html
+<template>
+    <ste-date-user type="user" avatar="https://image.whzb.com/chain/StellarUI/图片.jpg" nickname="张三">
+        <template v-slot:desc>
+            <view class="desc">
+                <view class="title">店长</view>
+                <ste-icon code="&#xe6c7;" color="#0275FF" size="15"></ste-icon>
+            </view>
+        </template>
+    </ste-date-user>
+</template>
+
+<style>
+    .desc {
+        display: flex;
+        align-items: center;
+        .title {
+            font-size: 24rpx;
+            color: #0275ff;
+            margin: 4rpx;
+            margin-right: 14rpx;
+        }
+    }
+</style>
+```
+
+---$
+
+### API
+
+<!-- props -->
+
+#### Slots
+
+| 插槽名 | 说明     | 插槽参数 | 支持版本 |
+| ------ | -------- | -------- | -------- |
+| `desc` | 用户描述 | -        | -        |
+
+---$
+{{qinpengfei}}

package/components/ste-date-user/config.json

@@ -0,0 +1,5 @@
+{
+    "group": "业务组件",
+    "title": "DateUser 人员信息以及日期",
+    "icon": "https://image.whzb.com/chain/StellarUI/组件图标/loading.png"
+}

package/components/ste-date-user/props.ts

@@ -0,0 +1,6 @@
+export default {
+    type: { type: String, default: 'date' },
+    date: { type: String, default: new Date() },
+    avatar: { type: String, default: '' },
+    nickname: { type: String, default: '' },
+};

package/components/ste-date-user/ste-date-user.easycom.json

@@ -0,0 +1,42 @@
+{
+    "name": "ste-date-user",
+    "description": "提供日期和用户信息展示。",
+    "example": "<ste-date-user></ste-date-user>",
+    "tutorial": "https://stellar-ui.intecloud.com.cn/plus/#/?active=date-user",
+    "attributes": [
+        {
+            "name": "type",
+            "description": "组件类型",
+            "type": "String",
+            "default": "date",
+            "values": [
+                {
+                    "name": "date",
+                    "description": "日期"
+                },
+                {
+                    "name": "user",
+                    "description": "人员"
+                }
+            ]
+        },
+        {
+            "name": "date",
+            "description": "日期",
+            "type": "String",
+            "default": "new Date()"
+        },
+        {
+            "name": "avatar",
+            "description": "头像",
+            "type": "String",
+            "default": ""
+        },
+        {
+            "name": "nickname",
+            "description": "昵称",
+            "type": "String",
+            "default": ""
+        }
+    ]
+}

package/components/ste-date-user/ste-date-user.vue

@@ -0,0 +1,135 @@
+<script setup lang="ts">
+import { ref, defineComponent, onMounted } from 'vue';
+import { getDateInfo } from '@swjs/chinese-holidays';
+import propsData from './props';
+defineComponent({
+    name: 'ste-date-user',
+});
+
+const props = defineProps(propsData);
+let time: any = ref(props.date);
+let day = ref('');
+let year = ref('');
+onMounted(async () => {
+    time.value = await getDateInfo(time.value);
+    let date = time.value.date.split('-');
+    day.value = date[date.length - 1];
+    year.value = `${date[0]}年${date[1]}月`;
+});
+</script>
+
+<template>
+    <view class="ste-date-user-root">
+        <view class="box">
+            <template v-if="type == 'date'">
+                <view class="left">
+                    <view class="day">{{ day }}</view>
+                </view>
+                <view class="right">
+                    <view class="top">
+                        <view class="year">{{ year }}</view>
+                    </view>
+                    <view class="bottom">
+                        <view class="time">{{ time.day }}</view>
+                        <view class="line" v-if="time.type == 3"></view>
+                        <view class="time" v-if="time.type == 3">{{ time.name }}</view>
+                    </view>
+                </view>
+            </template>
+            <template v-if="type == 'user'">
+                <view class="left">
+                    <view class="image">
+                        <ste-image :width="80" :height="80" :src="avatar"></ste-image>
+                    </view>
+                </view>
+                <view class="right">
+                    <view class="top">
+                        <view class="year">{{ nickname }}</view>
+                    </view>
+                    <view class="bottom">
+                        <view class="desc">
+                            <slot name="desc"></slot>
+                        </view>
+                    </view>
+                </view>
+            </template>
+        </view>
+    </view>
+</template>
+
+<style lang="scss" scoped>
+.ste-date-user-root {
+    background-color: 'red';
+
+    .box {
+        min-width: 336rpx;
+        height: 128rpx;
+        border-radius: 12rpx;
+        display: flex;
+        align-items: center;
+        background-color: #fff;
+        padding-right: 20rpx;
+
+        .left {
+            width: 80rpx;
+            height: 80rpx;
+            background: #e6e8ea;
+            border-radius: 8rpx;
+            margin: 0 28rpx;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            .day {
+                font-size: var(--font-size-40, 40rpx);
+                color: #1c1f23;
+                line-height: 56rpx;
+                height: 56rpx;
+            }
+
+            .image {
+                width: 80rpx;
+                height: 80rpx;
+                background: #ecf6ff;
+                border-radius: 8rpx;
+                overflow: hidden;
+            }
+        }
+
+        .right {
+            .year {
+                line-height: 40rpx;
+                height: 40rpx;
+                font-size: var(--font-size-28, 28rpx);
+                color: #1c1f23;
+            }
+
+            .bottom {
+                margin-top: 6rpx;
+                display: flex;
+                align-items: center;
+
+                .line {
+                    border-left: 4rpx solid #1c1f23;
+                    border-radius: 2rpx;
+                    width: 0;
+                    height: 22rpx;
+                    margin: 0 13rpx;
+                }
+
+                .time {
+                    font-size: var(--font-size-28, 28rpx);
+                    color: #1c1f23;
+                }
+
+                .desc {
+                    width: 96rpx;
+                    height: 38rpx;
+                    background: #ebf4ff;
+                    border-radius: 4rpx;
+                }
+            }
+        }
+    }
+}
+</style>