stellar-ui-plus 1.25.1 → 1.25.2

package/components/ste-radio/ste-radio.vue

@@ -1,12 +1,12 @@
 <script lang="ts" setup>
-import { useSlots, computed, type CSSProperties } from 'vue';
+import { useSlots, computed, ref, watch, type CSSProperties } from 'vue';
 import { useColorStore } from '../../store/color';
 import utils from '../../utils/utils';
 import propsData, { RADIO_KEY, type RadioEmits } from './props';
 import type { RadioGroupProps } from '../ste-radio-group/props';
 import { useInject } from '../../utils/mixin';
 
-// 🚀 优化: 模块级别调用，所有实例共享
+// 🚀 模块级别调用，所有实例共享
 const { getColor } = useColorStore();
 const themeColor = getColor()?.steThemeColor || '#0090FF';
 
@@ -23,135 +23,157 @@ const slots = useSlots();
 
 const Parent = useInject<{ props: Required<RadioGroupProps>; updateValue: (value: string) => void }>(RADIO_KEY);
 
-const parentProps = computed(() => Parent?.parent?.props);
+// 🚀 优化: 使用 watch 而非 computed，避免频繁依赖追踪
+const parentData = ref<{ props: Required<RadioGroupProps>; updateValue: (value: string) => void } | null>(null);
+
+watch(
+    () => Parent?.parent,
+    newParent => {
+        parentData.value = newParent || null;
+    },
+    { immediate: true }
+);
+
+// 是否在 group 中
+const inGroup = computed(() => !!parentData.value);
+
+// ─── 各 prop 单独 computed，直接使用 parentData ──────────────────────────
+
+const cmpDisabled = computed(() => props.disabled ?? parentData.value?.props.disabled ?? false);
+const cmpReadonly = computed(() => props.readonly ?? parentData.value?.props.readonly ?? false);
+const cmpShape = computed(() => props.shape ?? parentData.value?.props.shape ?? 'circle');
+const cmpIconSize = computed(() => props.iconSize ?? parentData.value?.props.iconSize ?? 36);
+const cmpCheckedColor = computed(() => props.checkedColor ?? parentData.value?.props.checkedColor ?? themeColor);
+const cmpTextPosition = computed(() => props.textPosition ?? parentData.value?.props.textPosition ?? 'right');
+const cmpTextSize = computed(() => props.textSize ?? parentData.value?.props.textSize ?? 28);
+const cmpTextInactiveColor = computed(() => props.textInactiveColor ?? parentData.value?.props.textInactiveColor ?? '#000000');
+const cmpTextActiveColor = computed(() => props.textActiveColor ?? parentData.value?.props.textActiveColor ?? '#000000');
+const cmpTextDisabled = computed(() => props.textDisabled ?? parentData.value?.props.textDisabled ?? false);
+const cmpMarginLeft = computed(() => props.marginLeft ?? parentData.value?.props.marginLeft ?? '0');
+const cmpMarginRight = computed(() => props.marginRight ?? parentData.value?.props.marginRight ?? '0');
+const cmpColumnGap = computed(() => props.columnGap ?? parentData.value?.props.columnGap ?? '16');
+
+// ─── 选中状态 ───────────────────────────────────────────────────────────────
 
-// 🚀 优化: 只保留必要的 computed
 const cmpChecked = computed(() => {
-    return parentProps.value ? parentProps.value.modelValue == props.name : props.modelValue == props.name;
+    if (inGroup.value) {
+        return parentData.value!.props.modelValue == props.name;
+    }
+    return props.modelValue == props.name;
 });
 
-// 🚀 优化: 合并所有样式计算,直接调用 getDefaultData
-const cmpRootStyle = computed(() => {
-    const textSize = getDefaultData('textSize', 28);
-    const textPosition = getDefaultData('textPosition', 'right');
-    const readonly = getDefaultData('readonly', false);
-    const disabled = getDefaultData('disabled', false);
-    const textDisabled = getDefaultData('textDisabled', false);
+// ─── 根节点样式 ─────────────────────────────────────────────────────────────
 
+const cmpRootStyle = computed(() => {
     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(getDefaultData('marginLeft', '0')),
-        marginRight: utils.formatPx(getDefaultData('marginRight', '0')),
-        columnGap: utils.formatPx(getDefaultData('columnGap', '16')),
+        fontSize: `var(--font-size-${cmpTextSize.value},${utils.formatPx(cmpTextSize.value)})`,
+        color: cmpChecked.value ? cmpTextActiveColor.value : cmpTextInactiveColor.value,
+        flexDirection: cmpTextPosition.value === 'right' ? 'row' : 'row-reverse',
+        marginLeft: utils.formatPx(cmpMarginLeft.value),
+        marginRight: utils.formatPx(cmpMarginRight.value),
+        columnGap: slots.default ? utils.formatPx(cmpColumnGap.value) : '0',
     };
 
     // #ifdef H5
-    if (disabled || readonly) {
+    if (cmpDisabled.value || cmpReadonly.value) {
         style['cursor'] = 'not-allowed';
-    } else if (textDisabled) {
+    } else if (cmpTextDisabled.value) {
         style['cursor'] = 'default';
     } else {
         style['cursor'] = 'pointer';
     }
     // #endif
 
-    if (textDisabled) {
+    if (cmpTextDisabled.value) {
         style['pointerEvents'] = 'none';
     }
     return style;
 });
 
-const cmpInputStyle = computed(() => {
-    const shape = getDefaultData('shape', 'circle');
-    const iconSize = getDefaultData('iconSize', 36);
-    const checkedColor = getDefaultData('checkedColor', themeColor);
-    const readonly = getDefaultData('readonly', false);
-    const disabled = getDefaultData('disabled', false);
-    const checked = cmpChecked.value;
+// ─── 图标样式 ───────────────────────────────────────────────────────────────
 
+const cmpInputStyle = computed(() => {
     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)})`,
+        borderRadius: cmpShape.value === 'circle' ? '50%' : '0',
+        border: `${utils.formatPx(2)} solid ${cmpChecked.value ? cmpCheckedColor.value : '#BBBBBB'}`,
+        background: cmpChecked.value ? cmpCheckedColor.value : '#FFFFFF',
+        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)})`,
     };
 
     // #ifdef H5
-    style['cursor'] = disabled || readonly ? 'not-allowed' : 'pointer';
+    style['cursor'] = cmpDisabled.value || cmpReadonly.value ? 'not-allowed' : 'pointer';
     // #endif
 
-    if (disabled) {
+    if (cmpDisabled.value) {
         style['background'] = '#eeeeee';
         style['borderColor'] = '#bbbbbb';
     }
-
-    // 在没有使用插槽内容时去掉边距
-    if (!slots.default) {
-        style['columnGap'] = '0';
-    }
     return style;
 });
 
-// 🚀 优化: slotProps 也直接计算
+// ─── slotProps & icon props ─────────────────────────────────────────────────
+
 const cmpSlotProps = computed(() => ({
     checked: cmpChecked.value,
-    disabled: getDefaultData('disabled', false),
-    readonly: getDefaultData('readonly', false),
+    disabled: cmpDisabled.value,
+    readonly: cmpReadonly.value,
 }));
 
-// 🚀 优化: 缓存 ste-icon 需要的属性，避免模板中重复调用 getDefaultData
-const cmpIconProps = computed(() => {
-    const iconSize = getDefaultData('iconSize', 36);
-    const disabled = getDefaultData('disabled', false);
-    return {
-        size: iconSize * 0.8,
-        color: disabled ? '#bbbbbb' : '#fff',
-    };
-});
+const cmpIconProps = computed(() => ({
+    size: (cmpIconSize.value as number) * 0.8,
+    color: cmpDisabled.value ? '#bbbbbb' : '#fff',
+}));
 
-async function click() {
-    const readonly = getDefaultData('readonly', false);
-    const disabled = getDefaultData('disabled', false);
-
-    if (!disabled && !readonly) {
-        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;
-            }
-        }
+// ─── 点击处理 ───────────────────────────────────────────────────────────────
 
-        if (!cmpChecked.value) {
-            let value = String(props.name);
-            if (parentProps.value) {
-                Parent.parent?.updateValue(value);
-            } else {
-                emits('update:modelValue', value);
-            }
-            emits('change', value);
+// 🚀 优化: 移除 async，简化 Promise 处理
+function click() {
+    if (cmpDisabled.value || cmpReadonly.value) {
+        return;
+    }
+
+    let next = true;
+    const stop = new Promise<void>(resolve => {
+        emits(
+            'click',
+            props.modelValue,
+            () => (next = false),
+            () => resolve(),
+            () => {}
+        );
+    });
+
+    if (!next) {
+        stop.catch(() => {});
+        return;
+    }
+
+    if (!cmpChecked.value) {
+        let value = String(props.name);
+        if (inGroup.value) {
+            parentData.value!.updateValue(value);
+        } else {
+            emits('update:modelValue', value);
         }
+        emits('change', value);
     }
 }
 
+// ─── 工具函数（保留兼容）──────────────────────────────────────────────────────
+
 type PropsKeyType = keyof typeof props;
+/**
+ * 优先使用子组件自身 prop，否则读父组件 props，最后取默认值。
+ * 每个独立 computed 调用此函数，响应式系统会精准追踪对应字段。
+ */
 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 = parentProps.value?.[key as keyof RadioGroupProps];
+    if (parentVal !== undefined && parentVal !== null && (parentVal as any) !== '') return parentVal as T;
+    return defaultValue;
 };
 </script>
 
@@ -165,10 +187,12 @@ const getDefaultData = <T,>(key: PropsKeyType, defaultValue: T): T => {
             </slot>
         </view>
         <view class="text">
+            <!-- #ifndef MP -->
+            <slot :slotProps="cmpSlotProps"></slot>
+            <!-- #endif -->
             <!-- #ifdef MP -->
             <slot></slot>
             <!-- #endif -->
-            <slot :slotProps="cmpSlotProps"></slot>
         </view>
     </view>
 </template>

package/components/ste-rate/ATTRIBUTES.md

@@ -1,4 +1,6 @@
-#### Props
+## API
+
+### Props
 | 属性名 | 说明  | 类型 | 默认值  | 可选值 | 支持版本 |
 | ----- | ----- | --- | ------- | ------ | -------- |
 | `modelValue` | 当前评分数（支持v-model双向绑定） | `Number` | `0` | - | - |
@@ -15,7 +17,9 @@
 | `iconData` | 每个分值对应的图标code | `Array` | `() => []` | - | - |
 
 
-#### Events
+### Events
 | 事件名 | 说明  | 事件参数 | 支持版本 |
 | ----- | ----- | ------- | -------- |
-| `change` | 当前分值变化时触发的事件 | - | - |
+| `change` | 当前分值变化时触发的事件 | `data`：() => void | - |
+
+

package/components/ste-rate/README.md

@@ -4,7 +4,7 @@
 
 ---$
 
-### 代码演示
+## 代码演示
 
 JavaScript后面的演示代码中涉及到的变量和方法都使用本`javascript`代码
 
@@ -18,7 +18,7 @@ let value4 = ref(2.5);
 let value5 = ref(2);
 ```
 
-#### 基础用法
+## 基础用法
 
 通过`value`属性，双向绑定，设置评分的值
 
@@ -28,7 +28,7 @@ let value5 = ref(2);
 </template>
 ```
 
-#### 自定义图标
+## 自定义图标
 
 - 通过`inactiveCode`属性，设置未选中的图标code，默认`&#xe681;`。
 - 通过`activeCode`属性，设置选中的图标code，默认`&#xe684;`。
@@ -43,7 +43,7 @@ let value5 = ref(2);
 </template>
 ```
 
-#### 自定义样式
+## 自定义样式
 
 - 通过`inactiveColor`属性，设置未选中的颜色，默认`#dddddd`。
 - 通过`activeColor`属性，设置选中的颜色，默认`#0090FF`。
@@ -56,7 +56,7 @@ let value5 = ref(2);
 </template>
 ```
 
-#### 只读
+## 只读
 
 通过`readonly `属性，设置只读，不可切换评分，样式不置灰，可部分星， 默认`false`。
 
@@ -66,7 +66,7 @@ let value5 = ref(2);
 </template>
 ```
 
-#### 禁用
+## 禁用
 
 通过`disabled`属性，设置禁用，不可切换评分，样式置灰，可部分星，默认`false`。
 
@@ -76,7 +76,7 @@ let value5 = ref(2);
 </template>
 ```
 
-#### 自定义数量和自定义分值
+## 自定义数量和自定义分值
 
 - 通过`count`属性，设置图标总数，默认`5`。
 - 通过`score`属性，设置每颗图标代表的分数，默认`1`。
@@ -88,7 +88,7 @@ let value5 = ref(2);
 </template>
 ```
 
-#### 自定义分值图标
+## 自定义分值图标
 
 - 需要传入图标code对应的数组, 此时`inactiveColor`和`activeColor`将失效
 - 会根据当前评分数对应的图标数量来取`iconData`中的值为当前图标的`code`
@@ -105,8 +105,6 @@ let value5 = ref(2);
 
 ---$
 
-### API
-
 <!-- props -->
 
 ---$

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

@@ -79,7 +79,12 @@
         {
             "name": "[event]change",
             "description": "当前分值变化时触发的事件",
-            "type": "() => void"
+            "params": [
+                {
+                    "name": "data",
+                    "description": "() => void"
+                }
+            ]
         }
     ]
-}
+}

package/components/ste-read-more/ATTRIBUTES.md

@@ -1,4 +1,6 @@
-#### Props
+## API
+
+### Props
 | 属性名 | 说明  | 类型 | 默认值  | 可选值 | 支持版本 |
 | ----- | ----- | --- | ------- | ------ | -------- |
 | `showHeight` | 需要折叠的高度 | `string / number` | `400` | - | - |
@@ -9,8 +11,22 @@
 | `color` | 文本颜色 | `string` | `#666666` | - | - |
 
 
-#### Events
+### Events
 | 事件名 | 说明  | 事件参数 | 支持版本 |
 | ----- | ----- | ------- | -------- |
-| `open` | 展开时触发 | - | - |
-| `click` | 收起时触发 | - | - |
+| `open` | 展开时触发 | `data`：() => void | - |
+| `click` | 收起时触发 | `data`：() => void | - |
+
+
+### Methods
+| 方法名 | 说明  | 参数 | 返回值 | 支持版本 |
+| ----- | ----- | --- | ------ | -------- |
+| `init` | 重新初始化组件内部高度计算过程，如果是异步获取内容需要用到 | - | - | - |
+
+
+### Slots
+| 插槽名 | 说明  | 参数 | 支持版本 |
+| ----- | ----- | --- | -------- |
+| `default` | 单选框文本内容 | - | - |
+
+

package/components/ste-read-more/README.md

@@ -4,9 +4,9 @@
 
 ---$
 
-### 代码演示
+## 代码演示
 
-#### 基础使用
+## 基础使用
 
 ```html
 <template>
@@ -21,7 +21,7 @@
 </script>
 ```
 
-#### 收起后展示按钮
+## 收起后展示按钮
 
 ```html
 <template>
@@ -36,7 +36,7 @@
 </script>
 ```
 
-#### 提示文字
+## 提示文字
 
 ```html
 <template>
@@ -51,7 +51,7 @@
 </script>
 ```
 
-#### 异步初始化
+## 异步初始化
 
 有时候需要展示的内容是从后端获取的，组件内部的`mounted`生命周期初始化时，请求尚未回来，会导致 内容的高度在初始化有误差。可以在请求完毕渲染后(指的是this.$nextTick)，通过`ref`调用组件的`init`方法，重新初始化
 
@@ -83,21 +83,7 @@
 
 ---$
 
-### API
-
 <!-- props -->
 
-#### Slots
-
-| 插槽名    | 说明           | 插槽参数 | 支持版本 |
-| --------- | -------------- | -------- | -------- |
-| `default` | 单选框文本内容 | -        | -        |
-
-#### Methods
-
-| 方法名 | 说明                                                       | 方法参数 | 支持版本 |
-| ------ | ---------------------------------------------------------- | -------- | -------- |
-| `init` | 重新初始化组件内部高度计算过程，如果是异步获取内容需要用到 | -        | -        |
-
 ---$
 {{fuyuwei}}

package/components/ste-read-more/ste-read-more.easycom.json

@@ -43,12 +43,30 @@
         {
             "name": "[event]open",
             "description": "展开时触发",
-            "type": "() => void"
+            "params": [
+                {
+                    "name": "data",
+                    "description": "() => void"
+                }
+            ]
         },
         {
             "name": "[event]click",
             "description": "收起时触发",
-            "type": "() => void"
+            "params": [
+                {
+                    "name": "data",
+                    "description": "() => void"
+                }
+            ]
+        },
+        {
+            "name": "[method]init",
+            "description": "重新初始化组件内部高度计算过程，如果是异步获取内容需要用到"
+        },
+        {
+            "name": "[slot]default",
+            "description": "单选框文本内容"
         }
     ]
 }

package/components/ste-rich-text/ATTRIBUTES.md

@@ -1,4 +1,6 @@
-#### Props
+## API
+
+### Props
 | 属性名 | 说明  | 类型 | 默认值  | 可选值 | 支持版本 |
 | ----- | ----- | --- | ------- | ------ | -------- |
 | `text` | 富文本值 | `string` | `` | - | - |

package/components/ste-rich-text/README.md

@@ -4,7 +4,7 @@
 
 ---$
 
-#### 一张图片
+## 一张图片
 
 ```html
 <template>
@@ -12,7 +12,7 @@
 </template>
 ```
 
-#### 两张图片
+## 两张图片
 
 ```html
 <template>
@@ -22,8 +22,6 @@
 
 ---$
 
-### API
-
 <!-- props -->
 
 ---$

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

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

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

@@ -4,9 +4,9 @@
 
 ---$
 
-### 代码演示
+## 代码演示
 
-#### 默认配置
+## 默认配置
 
 ```html
 <template>
@@ -26,7 +26,7 @@
 </script>
 ```
 
-#### 默认颜色
+## 默认颜色
 
 - 属性`color`: `['#165DFF', '#14C9C9', '#F7BA1E', '#3491FA', '#722ED1', '#9FDB1D']`
 
@@ -52,7 +52,7 @@
 </script>
 ```
 
-#### 副标题，标题+副标题
+## 副标题，标题+副标题
 
 - 属性`subtitle`: 副标题对象
 - 属性`title`: 标题对象
@@ -76,7 +76,7 @@
 </script>
 ```
 
-#### 图例
+## 图例
 
 - 属性`legend`: 图例对象
 
@@ -104,6 +104,23 @@
 </script>
 ```
 
+## 事件
+
+- 属性`getImage`: 通过ref来获取实例的base64格式的图片地址，异步方法,需在实例生成后调用。
+
+```html
+<template>
+    <ste-ring-chart :series="series1" ref="ringChart"></ste-ring-chart>
+</template>
+<script setup lang="ts">
+    import { ref,onMounted } from 'vue';
+    let ringChart: any = ref(null);
+    onMounted(async () => {
+        const base64 = await ringChart.value.getImage()
+    }),
+</script>
+```
+
 ---$
 
 <!-- props -->

package/components/ste-ring-chart/ste-ring-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';
@@ -95,6 +95,45 @@ function tap(e: any) {
     charts?.value.touchLegend(e);
     charts?.value.showToolTip(e);
 }
+const thas = ref<ComponentPublicInstance | null>();
+const emits = defineEmits<{
+    (e: 'getImage'): String;
+}>();
+
+async function getImage() {
+    console.log('getImage', props.canvas2d);
+    if (props.canvas2d == false) {
+        return new Promise(resolve => {
+            uni.canvasToTempFilePath(
+                {
+                    canvasId: canvasId.value,
+                    success: res => {
+                        resolve(emits('getImage', 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 => {
+                    console.log('res[0]', res[0].node.toDataURL('image/png'));
+                    if (res[0]) {
+                        const canvas = res[0].node;
+                        emits('getImage', canvas.toDataURL('image/png'));
+                        resolve(canvas.toDataURL('image/png'));
+                    }
+                });
+        });
+    }
+}
+defineExpose({
+    getImage,
+});
 </script>
 
 <style scoped></style>