stellar-ui-plus 1.25.1 → 1.25.3

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

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useSlots, computed, ref, nextTick, onMounted, onUnmounted, type CSSProperties } from 'vue';
+import { useSlots, computed, ref, watch, onMounted, onUnmounted, type CSSProperties } from 'vue';
 import { useColorStore } from '../../store/color';
 let { getColor } = useColorStore();
 import utils from '../../utils/utils';
@@ -25,77 +25,95 @@ const Parent = useInject<{
     registerChild: () => number;
     unregisterChild: () => void;
 }>(CHECKBOX_KEY);
-const parentProps = computed(() => Parent?.parent?.props);
+
+// 🚀 优化: 使用 watch 而非 computed，避免频繁依赖追踪
+const parentData = ref<{
+    props: Required<CheckboxGroupProps>;
+    updateValue: (value: any[]) => void;
+    registerChild: () => number;
+    unregisterChild: () => void;
+} | null>(null);
+
+watch(
+    () => Parent?.parent,
+    newParent => {
+        parentData.value = newParent || null;
+    },
+    { immediate: true }
+);
 
 // 记录当前组件在 group 中的索引
 const childIndex = ref<number>(-1);
 
 onMounted(() => {
-    if (Parent?.parent?.registerChild) {
-        childIndex.value = Parent.parent.registerChild();
+    if (parentData.value?.registerChild) {
+        childIndex.value = parentData.value.registerChild();
     }
 });
 
 onUnmounted(() => {
-    if (Parent?.parent?.unregisterChild) {
-        Parent.parent.unregisterChild();
+    if (parentData.value?.unregisterChild) {
+        parentData.value.unregisterChild();
     }
 });
 
-// 🚀 优化: 缓存 themeColor,避免每次调用 getColor()
+// 🚀 优化: 缓存 themeColor
 const themeColor = getColor().steThemeColor;
 
 // 强制更新选中状态
-let num = ref(1);
+const num = ref(1);
+
+// 是否在 group 中
+const inGroup = computed(() => !!parentData.value);
 
-// 🚀 优化: 只保留必要的 computed
+// 🚀 优化: 只保留必要的 computed，直接使用 parentData.value
 const cmpChecked = computed(() => {
-    let v = num.value && parentProps.value ? parentProps.value.modelValue.includes(props.name) : props.modelValue;
-    return v;
+    if (inGroup.value) {
+        return num.value > 0 && parentData.value!.props.modelValue.includes(props.name);
+    }
+    return props.modelValue;
 });
 
 const cmpDisabled = computed(() => {
-    let disabled = getDefaultData('disabled', false);
+    let disabled = props.disabled ?? parentData.value?.props.disabled ?? false;
     // 限制最大可选数
-    if (parentProps.value && parentProps.value.max) {
-        if (!cmpChecked.value && parentProps.value.modelValue.length >= parentProps.value.max) {
+    if (inGroup.value && parentData.value!.props.max > 0) {
+        if (!cmpChecked.value && parentData.value!.props.modelValue.length >= parentData.value!.props.max) {
             disabled = true;
         }
     }
     return disabled;
 });
 
-// 🚀 优化: 合并所有样式计算,直接调用 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 textSize = props.textSize ?? parentData.value?.props.textSize ?? 28;
+    const textPosition = props.textPosition ?? parentData.value?.props.textPosition ?? 'right';
+    const readonly = props.readonly ?? parentData.value?.props.readonly ?? false;
+    const textDisabled = props.textDisabled ?? parentData.value?.props.textDisabled ?? false;
 
-    let marginLeft = getDefaultData('marginLeft', '0');
-    let marginRight = getDefaultData('marginRight', '0');
+    let marginLeft = props.marginLeft ?? parentData.value?.props.marginLeft ?? '0';
+    let marginRight = props.marginRight ?? parentData.value?.props.marginRight ?? '0';
 
     // 如果在 checkbox-group 中，并且不是第一个元素，自动应用间距
-    if (parentProps.value && childIndex.value > 0 && marginLeft === '0') {
-        const direction = parentProps.value.direction || 'column';
-
+    if (inGroup.value && childIndex.value > 0 && marginLeft === '0') {
+        const direction = parentData.value!.props.direction || 'column';
         if (direction === 'row') {
-            // 横向排列时，设置左间距 16rpx
             marginLeft = '16';
         }
     }
 
     const style: CSSProperties = {
         fontSize: `var(--font-size-${textSize},${utils.formatPx(textSize)})`,
-        color: cmpChecked.value ? getDefaultData('textActiveColor', '#000000') : getDefaultData('textInactiveColor', '#000000'),
+        color: cmpChecked.value ? (props.textActiveColor ?? parentData.value?.props.textActiveColor ?? '#000000') : (props.textInactiveColor ?? parentData.value?.props.textInactiveColor ?? '#000000'),
         flexDirection: textPosition === 'right' ? 'row' : 'row-reverse',
         marginLeft: utils.formatPx(marginLeft),
         marginRight: utils.formatPx(marginRight),
     };
 
     // 纵向排列时，设置上间距 16rpx
-    if (parentProps.value && childIndex.value > 0) {
-        const direction = parentProps.value.direction || 'column';
+    if (inGroup.value && childIndex.value > 0) {
+        const direction = parentData.value!.props.direction || 'column';
         if (direction === 'column') {
             style.marginTop = '16rpx';
         }
@@ -119,16 +137,17 @@ const cmpRootStyle = computed(() => {
 });
 
 const cmpIconStyle = computed(() => {
+    const columnGap = props.columnGap ?? parentData.value?.props.columnGap ?? '16';
     return {
-        marginRight: utils.formatPx(getDefaultData('columnGap', '16')),
+        marginRight: utils.formatPx(columnGap),
     } as CSSProperties;
 });
 
 const cmpInputStyle = computed(() => {
-    const shape = getDefaultData('shape', 'circle');
-    const iconSize = getDefaultData('iconSize', 36);
-    const checkedColor = getDefaultData('checkedColor', themeColor);
-    const readonly = getDefaultData('readonly', false);
+    const shape = props.shape ?? parentData.value?.props.shape ?? 'circle';
+    const iconSize = props.iconSize ?? parentData.value?.props.iconSize ?? 36;
+    const checkedColor = props.checkedColor ?? parentData.value?.props.checkedColor ?? themeColor;
+    const readonly = props.readonly ?? parentData.value?.props.readonly ?? false;
     const checked = cmpChecked.value;
 
     const style: CSSProperties = {
@@ -161,7 +180,7 @@ const cmpInputStyle = computed(() => {
 const cmpSlotProps = computed(() => ({
     checked: cmpChecked.value,
     disabled: cmpDisabled.value,
-    readonly: getDefaultData('readonly', false),
+    readonly: props.readonly ?? parentData.value?.props.readonly ?? false,
 }));
 
 const cmpIconMargin = computed(() => {
@@ -174,41 +193,9 @@ const cmpIconMargin = computed(() => {
     // #endif
 });
 
-// 批处理更新相关
-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();
-                }
-            });
-        }
-    }
-};
-
-// 实际的点击处理逻辑
-const handleClick = async () => {
-    const readonly = getDefaultData('readonly', false);
+// 🚀 优化: 简化点击处理，移除 batchedUpdate 和不必要的 async/await
+const handleClick = () => {
+    const readonly = props.readonly ?? parentData.value?.props.readonly ?? false;
 
     if (cmpDisabled.value || readonly) {
         return;
@@ -226,23 +213,20 @@ const handleClick = async () => {
     });
 
     if (!next) {
-        try {
-            await stop;
-        } catch (e) {
-            return;
-        }
+        stop.catch(() => {});
+        return;
     }
 
     let value: boolean | any[];
-    if (parentProps.value) {
+    if (inGroup.value) {
         // 使用浅拷贝避免直接修改原数组
-        value = [...parentProps.value.modelValue];
+        value = [...parentData.value!.props.modelValue];
         if (cmpChecked.value) {
             value = value.filter(v => v !== props.name);
         } else {
             value.push(props.name);
         }
-        Parent.parent?.updateValue(value);
+        parentData.value!.updateValue(value);
         num.value++;
     } else {
         value = !cmpChecked.value;
@@ -252,14 +236,21 @@ const handleClick = async () => {
 };
 
 const click = () => {
-    batchedUpdate(handleClick);
+    handleClick();
 };
 
+// 获取配置值的快捷方法（保留兼容）
 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;
+    if (value !== undefined && value !== null && value !== '') return value as T;
+    const parentVal = parentData.value?.props[key as keyof typeof props];
+    if (parentVal !== undefined && parentVal !== null && parentVal !== '') return parentVal as T;
+    return defaultValue;
 };
+
+// 图标大小（用于模板中）
+const iconSize = computed(() => props.iconSize ?? parentData.value?.props.iconSize ?? 36);
 </script>
 
 <template>
@@ -267,7 +258,7 @@ const getDefaultData = <T,>(key: PropsKeyType, defaultValue: T): T => {
         <view class="icon" :style="[cmpIconStyle]">
             <slot name="icon" :slotProps="cmpSlotProps">
                 <view class="input-icon" :style="[cmpInputStyle]">
-                    <ste-icon v-if="cmpChecked" :size="getDefaultData('iconSize', 36) * 0.8" code="&#xe67a;" :color="cmpDisabled ? '#bbbbbb' : '#fff'" bold :marginBottom="cmpIconMargin" />
+                    <ste-icon v-if="cmpChecked" :size="iconSize * 0.8" code="&#xe67a;" :color="cmpDisabled ? '#bbbbbb' : '#fff'" bold :marginBottom="cmpIconMargin" />
                 </view>
             </slot>
         </view>

package/components/ste-code-input/ATTRIBUTES.md

@@ -1,4 +1,6 @@
-#### Props
+## API
+
+### Props
 | 属性名 | 说明  | 类型 | 默认值  | 可选值 | 支持版本 |
 | ----- | ----- | --- | ------- | ------ | -------- |
 | `value` | 初始内容，支持双向绑定 | `string / number` | - | - | - |
@@ -15,8 +17,10 @@
 | `readOnly` | 是否只读 | `boolean` | `false` | - | - |
 
 
-#### Events
+### Events
 | 事件名 | 说明  | 事件参数 | 支持版本 |
 | ----- | ----- | ------- | -------- |
-| `change` | 改变时触发 | - | - |
-| `finish` | 输入完成触发 | - | - |
+| `change` | 改变时触发 | `data`：(value: string / number) => void | - |
+| `finish` | 输入完成触发 | `data`：(value: string / number) => void | - |
+
+

package/components/ste-code-input/README.md

@@ -4,9 +4,9 @@
 
 ---$
 
-### 代码演示
+## 代码演示
 
-#### 基础使用
+## 基础使用
 
 ```html
 <template>
@@ -15,7 +15,7 @@
 </template>
 ```
 
-#### 横线模式
+## 横线模式
 
 ```html
 <template>
@@ -23,7 +23,7 @@
 </template>
 ```
 
-#### 设置长度
+## 设置长度
 
 ```html
 <template>
@@ -31,7 +31,7 @@
 </template>
 ```
 
-#### 设置间距
+## 设置间距
 
 ```html
 <template>
@@ -39,7 +39,7 @@
 </template>
 ```
 
-#### 调整颜色
+## 调整颜色
 
 ```html
 <template>
@@ -48,7 +48,7 @@
 </template>
 ```
 
-#### 自定义显示
+## 自定义显示
 
 ```html
 <template>
@@ -59,8 +59,6 @@
 
 ---$
 
-### API
-
 <!-- props -->
 
 ---$

package/components/ste-code-input/ste-code-input.easycom.json

@@ -37,7 +37,6 @@
             "type": "string | number",
             "default": 16
         },
-
         {
             "name": "fontColor",
             "description": "字体颜色",
@@ -88,12 +87,22 @@
         {
             "name": "[event]change",
             "description": "改变时触发",
-            "type": "(value: string | number) => void"
+            "params": [
+                {
+                    "name": "data",
+                    "description": "(value: string | number) => void"
+                }
+            ]
         },
         {
             "name": "[event]finish",
             "description": "输入完成触发",
-            "type": "(value: string | number) => void"
+            "params": [
+                {
+                    "name": "data",
+                    "description": "(value: string | number) => void"
+                }
+            ]
         }
     ]
-}
+}

package/components/ste-column-chart/ATTRIBUTES.md

@@ -1,4 +1,6 @@
-#### Props
+## API
+
+### Props
 | 属性名 | 说明  | 类型 | 默认值  | 可选值 | 支持版本 |
 | ----- | ----- | --- | ------- | ------ | -------- |
 | `width` | 图表宽度，单位rpx | `number / string` | `750` | - | - |

package/components/ste-column-chart/README.md

@@ -3,9 +3,9 @@
 柱状图（或称条形图）是一种通过柱形的长度来表现数据大小的一种常用图表类型
 ---$
 
-### 代码演示
+## 代码演示
 
-#### 默认配置
+## 默认配置
 
 ```html
 <template>
@@ -26,7 +26,7 @@
 </script>
 ```
 
-#### 多图例
+## 多图例
 
 ```html
 <template>
@@ -51,7 +51,7 @@
 </script>
 ```
 
-#### 堆叠
+## 堆叠
 
 ```html
 <template>
@@ -78,7 +78,7 @@
 </script>
 ```
 
-#### 迷你图表
+## 迷你图表
 
 ```html
 <template>
@@ -107,9 +107,24 @@
 </script>
 ```
 
----$
+## 事件
+
+- 属性`getImage`: 通过ref来获取实例的base64格式的图片地址，异步方法,需在实例生成后调用。
+
+```html
+<template>
+    <ste-column-chart :series="series" :categories="categories" ref="columnChart"></ste-column-chart>
+</template>
+<script setup lang="ts">
+    import { ref,onMounted } from 'vue';
+    let columnChart: any = ref(null);
+    onMounted(async () => {
+        const base64 = await columnChart.value.getImage()
+    }),
+</script>
+```
 
-### API
+---$
 
 <!-- props -->
 

package/components/ste-column-chart/ste-column-chart.vue

@@ -6,7 +6,7 @@
 
 <script setup lang="ts">
 import uCharts from '../../Charts/Charts';
-import { ref, onMounted, computed, type CSSProperties, watch, getCurrentInstance } from 'vue';
+import { ref, onMounted, computed, type CSSProperties, watch, getCurrentInstance, type ComponentPublicInstance } from 'vue';
 import utils from '../../utils/utils';
 import { propsData, propsComponent } from './props';
 import type { ChartsOptions } from '../../Charts/types/index';
@@ -96,6 +96,39 @@ function tap(e: any) {
     charts.value?.touchLegend(e);
     charts.value?.showToolTip(e);
 }
+
+const thas = ref<ComponentPublicInstance | null>();
+async function getImage() {
+    if (props.canvas2d == false) {
+        return new Promise(resolve => {
+            uni.canvasToTempFilePath(
+                {
+                    canvasId: canvasId.value,
+                    success: res => {
+                        resolve(res.tempFilePath);
+                    },
+                },
+                thas.value
+            );
+        });
+    } else {
+        return new Promise(resolve => {
+            const query = uni.createSelectorQuery().in(thas.value);
+            query
+                .select('#' + canvasId.value)
+                .fields({ node: true, size: true })
+                .exec(res => {
+                    if (res[0]) {
+                        const canvas = res[0].node;
+                        resolve(canvas.toDataURL('image/png'));
+                    }
+                });
+        });
+    }
+}
+defineExpose({
+    getImage,
+});
 </script>
 
 <style scoped></style>

package/components/ste-comment/ATTRIBUTES.md

@@ -1,4 +1,6 @@
-#### Props
+## API
+
+### Props
 | 属性名 | 说明  | 类型 | 默认值  | 可选值 | 支持版本 |
 | ----- | ----- | --- | ------- | ------ | -------- |
 | `tags` | 标签数组 | `string[]` | `[]` | - | - |

package/components/ste-comment/README.md

@@ -4,7 +4,7 @@
 
 ---$
 
-### 基础用法
+## 基础用法
 
 - 属性`tags`用于接收顶部标签列表，默认值`[]`
 - 属性`total`用于接收评论总数，默认值`0`
@@ -42,11 +42,9 @@
 
 ---$
 
-### API
-
 <!-- props -->
 
-#### CommentType
+## CommentType
 
 | 属性         | 说明         | 类型       |
 | ------------ | ------------ | ---------- |

package/components/ste-coupon-list/ATTRIBUTES.md

@@ -1,4 +1,6 @@
-#### Props
+## API
+
+### Props
 | 属性名 | 说明  | 类型 | 默认值  | 可选值 | 支持版本 |
 | ----- | ----- | --- | ------- | ------ | -------- |
 | `data` | 基础数据 | `{title: string;desc?: string;image: string;price: string / number;constraint?: string;footers?: string[]}` | `{}` | - | - |
@@ -10,9 +12,17 @@
 | `backgroundColor` | 背景颜色 | `string` | `#fff` | - | - |
 
 
-#### Events
+### Events
 | 事件名 | 说明  | 事件参数 | 支持版本 |
 | ----- | ----- | ------- | -------- |
-| `buttonClick` | 点击按钮时触发 | - | - |
-| `footerClick` | 点击页脚列表时触发 | - | - |
-| `countDown` | 倒计时触发 | - | - |
+| `buttonClick` | 点击按钮时触发 | `data`：() => void | - |
+| `footerClick` | 点击页脚列表时触发 | `data`：(index:number) => void | - |
+| `countDown` | 倒计时触发 | `data`：(data:any,time:number) => void | - |
+
+
+### Slots
+| 插槽名 | 说明  | 参数 | 支持版本 |
+| ----- | ----- | --- | -------- |
+| `position` | 在任意位置插入内容 | - | - |
+
+

package/components/ste-coupon-list/README.md

@@ -4,7 +4,7 @@
 
 ---$
 
-### 基础用法
+## 基础用法
 
 - 属性`data`用于基础数据展示
 
@@ -26,7 +26,7 @@
 </template>
 ```
 
-### 倒计时
+## 倒计时
 
 - 属性`endTime`用于设置倒计时结束时间
 
@@ -49,7 +49,7 @@
 </template>
 ```
 
-### 按钮文字
+## 按钮文字
 
 - 属性`buttonText`用于设置按钮文字内容
 
@@ -71,7 +71,7 @@
 </template>
 ```
 
-### 禁用按钮
+## 禁用按钮
 
 - 属性`buttonDisabled`禁用按钮
 
@@ -93,7 +93,7 @@
 </template>
 ```
 
-### 进度条
+## 进度条
 
 - 属性`progress`用于设置进度条值，0-100
 - 属性`progressText`用于设置进度条文字内容
@@ -116,7 +116,7 @@
 </template>
 ```
 
-### Position插槽
+## Position插槽
 
 - 插槽`position`可以在任意位置插入内容
 
@@ -153,15 +153,7 @@
 
 ---$
 
-### API
-
 <!-- props -->
 
-#### Slot
-
-| 插槽名称   | 说明               | 支持版本 |
-| ---------- | ------------------ | -------- |
-| `position` | 在任意位置插入内容 | -        |
-
 ---$
 {{xuyajun}}

package/components/ste-coupon-list/ste-coupon-list.easycom.json

@@ -49,17 +49,36 @@
         {
             "name": "[event]buttonClick",
             "description": "点击按钮时触发",
-            "type": "() => void"
+            "params": [
+                {
+                    "name": "data",
+                    "description": "() => void"
+                }
+            ]
         },
         {
             "name": "[event]footerClick",
             "description": "点击页脚列表时触发",
-            "type": "(index:number) => void"
+            "params": [
+                {
+                    "name": "data",
+                    "description": "(index:number) => void"
+                }
+            ]
         },
         {
             "name": "[event]countDown",
             "description": "倒计时触发",
-            "type": "(data:any,time:number) => void"
+            "params": [
+                {
+                    "name": "data",
+                    "description": "(data:any,time:number) => void"
+                }
+            ]
+        },
+        {
+            "name": "[slot]position",
+            "description": "在任意位置插入内容"
         }
     ]
 }