stellar-ui-plus 1.16.19 → 1.17.0

package/components/ste-button/ste-button.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, defineOptions, type CSSProperties } from 'vue';
-import useColor from '../../config/color';
-let color = useColor();
+import { useColorStore } from '../../store/color';
+let { getColor } = useColorStore();
 import propsData from './props';
 import utils from '../../utils/utils';
 import type {
@@ -109,7 +109,7 @@ const cmpBtnStyle = computed(() => {
             break;
     }
     // 背景色 & 字体色
-    style = { ...style, ...utils.bg2style(props.background ? props.background : color.getColor().steThemeColor) };
+    style = { ...style, ...utils.bg2style(props.background ? props.background : getColor().steThemeColor) };
     style.color = props.color;
 
     // 禁用 disabled | 加载 loading

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { watch, onMounted, computed } from 'vue';
-import useColor from '../../config/color';
-let color = useColor();
+import { useColorStore } from '../../store/color';
+let { getColor } = useColorStore();
 import { formatDate, type WeekType } from './date';
 import utils from '../../utils/utils';
 import useData from './useData';
@@ -13,10 +13,10 @@ const props = defineProps(propsData);
 const cmpRootStyle = computed(() => ({
     '--calendar-width': utils.formatPx(props.width),
     '--calendar-height': utils.formatPx(props.height),
-    '--calendar-color': props.color ? props.color : color.getColor().steThemeColor,
-    '--calendar-bg-color': utils.Color.formatColor(props.color ? props.color : color.getColor().steThemeColor, 0.1),
-    '--calendar-range-color': utils.Color.formatColor(props.color ? props.color : color.getColor().steThemeColor, 0.2),
-    '--calendar-disabled-color': utils.Color.formatColor(props.color ? props.color : color.getColor().steThemeColor, 0.3),
+    '--calendar-color': props.color ? props.color : getColor().steThemeColor,
+    '--calendar-bg-color': utils.Color.formatColor(props.color ? props.color : getColor().steThemeColor, 0.1),
+    '--calendar-range-color': utils.Color.formatColor(props.color ? props.color : getColor().steThemeColor, 0.2),
+    '--calendar-disabled-color': utils.Color.formatColor(props.color ? props.color : getColor().steThemeColor, 0.3),
     '--calendar-start-text': `"${props.startText}"`,
     '--calendar-end-text': `"${props.endText}"`,
 }));

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

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { useSlots, computed, ref, type CSSProperties } from 'vue';
-import useColor from '../../config/color';
-let color = useColor();
+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';
@@ -23,7 +23,7 @@ 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', color.getColor().steThemeColor));
+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'));

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

@@ -22,8 +22,8 @@
 
 <script lang="ts" setup>
 import { ref, onMounted, nextTick, defineOptions, computed } from 'vue';
-import useColor from '../../config/color';
-let color = useColor();
+import { useColorStore } from '../../store/color';
+let { getColor } = useColorStore();
 import propsData from './props';
 import type { CloumnType } from './types';
 import utils from '../../utils/utils';
@@ -37,7 +37,7 @@ defineOptions({
 const props = defineProps(propsData);
 
 let cmpConfirmColor = computed(() => {
-    return props.confirmColor ? props.confirmColor : color.getColor().steThemeColor;
+    return props.confirmColor ? props.confirmColor : getColor().steThemeColor;
 });
 
 const DEFAULT_DATE = dayjs(new Date(1970, 1, 1, 0, 0, 0));

package/components/ste-dropdown-menu/ste-dropdown-menu.vue

@@ -7,8 +7,8 @@ import type { DropdownItem } from '../ste-dropdown-menu-item/type';
 import { type DropdownMenuItemProps } from '../ste-dropdown-menu-item/props';
 import utils from '../../utils/utils';
 import System from '../../utils/System.js';
-import useColor from '../../config/color';
-let color = useColor();
+import { useColorStore } from '../../store/color';
+let { getColor } = useColorStore();
 
 const props = defineProps(propsData);
 const emits = defineEmits(dropDownMenuEmits);
@@ -44,7 +44,7 @@ const cmpRootClass = computed(() => {
 
 const cmpRootStyle = computed(() => ({
     '--duration': cmpDuration.value + 's',
-    '--active-color': props.activeColor ? props.activeColor : color.getColor().steThemeColor,
+    '--active-color': props.activeColor ? props.activeColor : getColor().steThemeColor,
     '--inactive-color': props.inactiveColor,
     '--menu-z-index': props.zIndex,
 }));

package/components/ste-index-list/ste-index-list.vue

@@ -3,8 +3,8 @@ import { ref, computed, watch, nextTick, getCurrentInstance, defineOptions, onMo
 import propsData, { INDEX_LIST_KEY } from './props';
 import useData from '../ste-scroll-to/useData';
 import { useProvide } from '../../utils/mixin';
-import useColor from '../../config/color';
-let color = useColor();
+import { useColorStore } from '../../store/color';
+let { getColor } = useColorStore();
 
 defineOptions({
     name: 'ste-index-list',
@@ -38,7 +38,7 @@ const { dataActive, setDataActive, scrollTop, cmpRootStyle, onScroll, initChildr
 
 const cmpIndexRootStyle = computed(() => ({
     '--ste-index-list-inactive-color': props.inactiveColor,
-    '--ste-index-list-active-color': props.activeColor ? props.activeColor : color.getColor().steThemeColor,
+    '--ste-index-list-active-color': props.activeColor ? props.activeColor : getColor().steThemeColor,
 }));
 const cmpTitles = computed(() => internalChildren.map(c => c?.props?.title));
 

package/components/ste-message-box/ste-message-box.vue

@@ -7,8 +7,9 @@ import { ICON_OBJ, ANIMATION_PROP, DURATION } from './constants';
 import type { MessageBoxOptions } from '../../types';
 import { STE_MESSAGE_BOX_KEY } from './use-message-box';
 import { useMsgBoxStore } from '../../store';
-import useColor from '../../config/color';
-let color = useColor();
+import { useColorStore } from '../../store/color';
+let { getColor } = useColorStore();
+
 defineOptions({
     name: 'ste-message-box',
 });
@@ -58,7 +59,7 @@ const cmpRootStyle = computed(() => {
     return {
         opacity: 0,
         '--cancel-color': cancelColor.value,
-        '--confirm-color': confirmColor.value ? confirmColor.value : color.getColor().steThemeColor,
+        '--confirm-color': confirmColor.value ? confirmColor.value : getColor().steThemeColor,
     };
 });
 

package/components/ste-number-keyboard/useData.ts

@@ -1,144 +1,132 @@
-import { computed, ref, watch } from 'vue'
-import utils from '../../utils/utils'
-import useColor from '../../config/color'
-import type { NumberKeyboardProps } from './props'
-
-const color = useColor()
+import { computed, ref, watch } from 'vue';
+import utils from '../../utils/utils';
+import { useColorStore } from '../../store/color';
+let { getColor } = useColorStore();
+import type { NumberKeyboardProps } from './props';
 export default function useData({
-  props,
-  emits,
+    props,
+    emits,
 }: {
-  props: NumberKeyboardProps
-  emits: {
-    (e: 'change', value: string): void
-    (e: 'input', value: string): void
-    (e: 'update:modelValue', value: string): void
-    (e: 'clear'): void
-    (e: 'backspace'): void
-    (e: 'confirm', value: string): void
-    (e: 'click', key: string): void
-    (e: 'beforeinput', key: string, suspend: () => void, next: () => void, stop: () => void): void
-    (e: 'close'): void
-    (e: 'update:show', show: boolean): void
-    (e: 'open'): void
-  }
+    props: NumberKeyboardProps;
+    emits: {
+        (e: 'change', value: string): void;
+        (e: 'input', value: string): void;
+        (e: 'update:modelValue', value: string): void;
+        (e: 'clear'): void;
+        (e: 'backspace'): void;
+        (e: 'confirm', value: string): void;
+        (e: 'click', key: string): void;
+        (e: 'beforeinput', key: string, suspend: () => void, next: () => void, stop: () => void): void;
+        (e: 'close'): void;
+        (e: 'update:show', show: boolean): void;
+        (e: 'open'): void;
+    };
 }) {
-  const dataValue = ref('')
-  const setDataValue = (value: string) => {
-    if (value === dataValue.value)
-      return
-    if (value === null || value === undefined)
-      dataValue.value = ''
-    else if (typeof value === 'string')
-      dataValue.value = value
-    else dataValue.value = String(value)
-  }
+    const dataValue = ref('');
+    const setDataValue = (value: string) => {
+        if (value === dataValue.value) return;
+        if (value === null || value === undefined) dataValue.value = '';
+        else if (typeof value === 'string') dataValue.value = value;
+        else dataValue.value = String(value);
+    };
 
-  const dataShow = ref(false)
-  const setDataShow = (value: boolean) => {
-    if (value === dataShow.value)
-      return
-    dataShow.value = value
-  }
+    const dataShow = ref(false);
+    const setDataShow = (value: boolean) => {
+        if (value === dataShow.value) return;
+        dataShow.value = value;
+    };
 
-  const cmpNumbers = computed(() => {
-    let keys = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0']
-    if (props.randomKeys)
-      keys = utils.randomArray(keys)
+    const cmpNumbers = computed(() => {
+        let keys = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'];
+        if (props.randomKeys) keys = utils.randomArray(keys);
 
-    if (Array.isArray(props.customKeys))
-      keys.push(...props.customKeys)
+        if (Array.isArray(props.customKeys)) keys.push(...props.customKeys);
 
-    if (!props.rightKeys) {
-      if (!props.showClear) {
-        keys.push('backspace')
-        return
-      }
-      const d = keys.length % 3
-      if (d === 1) {
-        const end = keys.pop()
-        keys.push('clear', end || '', 'backspace')
-      }
-      else {
-        keys.push('clear', 'backspace')
-      }
-    }
-    return keys
-  })
+        if (!props.rightKeys) {
+            if (!props.showClear) {
+                keys.push('backspace');
+                return;
+            }
+            const d = keys.length % 3;
+            if (d === 1) {
+                const end = keys.pop();
+                keys.push('clear', end || '', 'backspace');
+            } else {
+                keys.push('clear', 'backspace');
+            }
+        }
+        return keys;
+    });
 
-  const cmpRootStyle = computed(() => {
-    return {
-      '--ste-number-keyboard-text-color': props.textColor,
-      '--ste-number-keyboard-text-size': `var(--font-size-${props.textSize},${utils.formatPx(props.textSize)})`,
-      '--ste-number-keyboard-clear-text-size': `var(--font-size-${props.textSize},${utils.formatPx(Number(props.textSize) - 8)})`,
-      '--ste-number-keyboard-confirm-text-size': `var(--font-size-${props.textSize},${utils.formatPx(Number(props.textSize) - 3)})`,
-      '--ste-number-keyboard-confirm-bg': props.confirmBg ? props.confirmBg : color.getColor().steThemeColor,
-      '--ste-number-keyboard-confirm-bg-active': utils.Color.formatColor(props.confirmBg, 0.8),
-      '--ste-number-keyboard-confirm-color': props.confirmColor,
-    }
-  })
+    const cmpRootStyle = computed(() => {
+        return {
+            '--ste-number-keyboard-text-color': props.textColor,
+            '--ste-number-keyboard-text-size': `var(--font-size-${props.textSize},${utils.formatPx(props.textSize)})`,
+            '--ste-number-keyboard-clear-text-size': `var(--font-size-${props.textSize},${utils.formatPx(Number(props.textSize) - 8)})`,
+            '--ste-number-keyboard-confirm-text-size': `var(--font-size-${props.textSize},${utils.formatPx(Number(props.textSize) - 3)})`,
+            '--ste-number-keyboard-confirm-bg': props.confirmBg ? props.confirmBg : getColor().steThemeColor,
+            '--ste-number-keyboard-confirm-bg-active': utils.Color.formatColor(props.confirmBg, 0.8),
+            '--ste-number-keyboard-confirm-color': props.confirmColor,
+        };
+    });
 
-  watch(() => props.modelValue, setDataValue, { immediate: true })
-  watch(() => props.show, setDataShow, { immediate: true })
+    watch(() => props.modelValue, setDataValue, { immediate: true });
+    watch(() => props.show, setDataShow, { immediate: true });
 
-  const onClose = () => {
-    setDataShow(false)
-    emits('update:show', false)
-    emits('close')
-  }
+    const onClose = () => {
+        setDataShow(false);
+        emits('update:show', false);
+        emits('close');
+    };
 
-  const beforInput = async (value: string) => {
-    let next = true
-    const stop = new Promise((resolve, reject) => {
-      emits(
-        'beforeinput',
-        value,
-        () => (next = false),
-        () => resolve('next'),
-        () => reject(new Error('beforInput stop')),
-      )
-    })
-    if (!next)
-      await stop
+    const beforInput = async (value: string) => {
+        let next = true;
+        const stop = new Promise((resolve, reject) => {
+            emits(
+                'beforeinput',
+                value,
+                () => (next = false),
+                () => resolve('next'),
+                () => reject(new Error('beforInput stop'))
+            );
+        });
+        if (!next) await stop;
 
-    /* eslint prefer-promise-reject-errors: "error" */
-  }
+        /* eslint prefer-promise-reject-errors: "error" */
+    };
 
-  const onChange = async (value: string) => {
-    try {
-      if (value === 'confirm') {
-        emits('confirm', dataValue.value)
-        onClose()
-        return
-      }
-      switch (value) {
-        case 'backspace':
-          setDataValue(dataValue.value.slice(0, dataValue.value.length - 1))
-          emits('backspace')
-          break
-        case 'clear':
-          setDataValue('')
-          emits('clear')
-          break
-        default:
-          await beforInput(value)
-          emits('click', value)
-          if (props.maxlength && dataValue.value.length >= Number(props.maxlength))
-            return
-          dataValue.value += value
-          break
-      }
-      emits('input', dataValue.value)
-      emits('change', dataValue.value)
-      emits('update:modelValue', dataValue.value)
-    }
-    catch (e) {
-      if (e)
-        console.error(e)
-    }
-  }
+    const onChange = async (value: string) => {
+        try {
+            if (value === 'confirm') {
+                emits('confirm', dataValue.value);
+                onClose();
+                return;
+            }
+            switch (value) {
+                case 'backspace':
+                    setDataValue(dataValue.value.slice(0, dataValue.value.length - 1));
+                    emits('backspace');
+                    break;
+                case 'clear':
+                    setDataValue('');
+                    emits('clear');
+                    break;
+                default:
+                    await beforInput(value);
+                    emits('click', value);
+                    if (props.maxlength && dataValue.value.length >= Number(props.maxlength)) return;
+                    dataValue.value += value;
+                    break;
+            }
+            emits('input', dataValue.value);
+            emits('change', dataValue.value);
+            emits('update:modelValue', dataValue.value);
+        } catch (e) {
+            if (e) console.error(e);
+        }
+    };
 
-  const onOpen = () => emits('open')
+    const onOpen = () => emits('open');
 
-  return { cmpNumbers, cmpRootStyle, dataShow, onClose, onChange, onOpen }
+    return { cmpNumbers, cmpRootStyle, dataShow, onClose, onChange, onOpen };
 }

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

@@ -2,8 +2,8 @@
 import { computed, ref, watch, useSlots, onMounted, type CSSProperties } from 'vue';
 import propsData from './props';
 import utils from '../../utils/utils';
-import useColor from '../../config/color';
-let color = useColor();
+import { useColorStore } from '../../store/color';
+let { getColor } = useColorStore();
 
 const slots = useSlots();
 const props = defineProps(propsData);
@@ -70,7 +70,7 @@ const cmpActiveStyle = computed(() => {
     if (props.disabled) {
         style.backgroundColor = '#cccccc';
     } else {
-        const bg = utils.bg2style(props.activeBg ? props.activeBg : color.getColor().steThemeColor);
+        const bg = utils.bg2style(props.activeBg ? props.activeBg : getColor().steThemeColor);
         style = { ...style, ...bg };
     }
     return style;

package/components/ste-qrcode/ste-qrcode.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import utils from '../../utils/utils';
-import { nextTick, onMounted, watch, defineOptions, getCurrentInstance, type ComponentPublicInstance } from 'vue';
+import { nextTick, onMounted, watch, defineOptions, getCurrentInstance, ref, computed, type ComponentPublicInstance } from 'vue';
 import propsData from './props';
 
 import UQRCode, { type URCodeCanvasContext } from './uqrcode';
@@ -15,6 +15,16 @@ defineOptions({
 const instance = getCurrentInstance() as unknown as ComponentPublicInstance;
 const props = defineProps(propsData);
 const canvasId = 'ste-qrcode-' + utils.guid(8);
+const canvasWidth = ref(props.size);
+const canvasHeight = ref(props.size);
+
+const compCanvasStyle = computed(() => {
+    return {
+        width: canvasWidth.value + 'px',
+        height: canvasHeight.value + 'px',
+        transform: `scale(${props.size / canvasWidth.value}, ${props.size / canvasHeight.value})`,
+    };
+});
 
 onMounted(() => {
     initCanvas();
@@ -42,10 +52,6 @@ const initCanvas = () => {
             .select(`#${canvasId}`)
             .node(res => {
                 const context = res.node.getContext('2d');
-                const dpr = utils.System.getWindowInfo().pixelRatio;
-                res.node.width = props.size * dpr;
-                res.node.height = props.size * dpr;
-                context.scale(dpr, dpr);
                 draw(context, res.node);
             })
             .exec();
@@ -55,7 +61,26 @@ const initCanvas = () => {
 
 const draw = (ctx: URCodeCanvasContext, canvas: any = null) => {
     const qr = new UQRCode();
+    qr.useDynamicSize = true;
+
+    qr.backgroundColor = props.background;
+    qr.foregroundColor = props.foreground;
+    qr.foregroundImageSrc = props.foregroundImageSrc;
+    props.foregroundImageWidth ? (qr.foregroundImageWidth = props.foregroundImageWidth) : '';
+    props.foregroundImageHeight ? (qr.foregroundImageHeight = props.foregroundImageHeight) : '';
+    // 设置二维码内容
+    qr.data = props.content;
+    // 设置二维码大小，必须与canvas设置的宽高一致
+    qr.size = props.size;
+    // 调用制作二维码方法
+    qr.make();
+
     // #ifdef MP-WEIXIN || MP-ALIPAY
+    const context = canvas.getContext('2d');
+    const dpr = utils.System.getWindowInfo().pixelRatio;
+    canvas.width = qr.dynamicSize * dpr;
+    canvas.height = qr.dynamicSize * dpr;
+    context.scale(dpr, dpr);
     qr.loadImage = src => {
         // 需要返回Promise对象，小程序下获取网络图片信息需先配置download域名白名单才能生效
         return new Promise((resolve, reject) => {
@@ -75,6 +100,8 @@ const draw = (ctx: URCodeCanvasContext, canvas: any = null) => {
     // #endif
 
     // #ifdef H5
+    canvasWidth.value = qr.dynamicSize;
+    canvasHeight.value = qr.dynamicSize;
     qr.loadImage = src => {
         // 需要返回Promise对象
         return new Promise((resolve, reject) => {
@@ -93,42 +120,34 @@ const draw = (ctx: URCodeCanvasContext, canvas: any = null) => {
 
     // #endif
 
-    qr.backgroundColor = props.background;
-    qr.foregroundColor = props.foreground;
-    qr.foregroundImageSrc = props.foregroundImageSrc;
-    props.foregroundImageWidth ? (qr.foregroundImageWidth = props.foregroundImageWidth) : '';
-    props.foregroundImageHeight ? (qr.foregroundImageHeight = props.foregroundImageHeight) : '';
-    // 设置二维码内容
-    qr.data = props.content;
-    // 设置二维码大小，必须与canvas设置的宽高一致
-    qr.size = props.size;
-    // 调用制作二维码方法
-    qr.make();
-
     // 设置uQRCode实例的canvas上下文
     qr.canvasContext = ctx;
     // 调用绘制方法将二维码图案绘制到canvas上
-    qr.drawCanvas();
+    setTimeout(() => {
+        qr.drawCanvas().then(() => {});
+    }, 300);
 };
 </script>
 
 <template>
-    <view class="ste-qrcode-root">
-        <!-- #ifdef H5 || APP -->
-        <canvas :style="{ width: size + 'px', height: size + 'px' }" :canvas-id="canvasId" :id="canvasId" class="h5-canvas"></canvas>
-        <!-- #endif -->
-
-        <!-- #ifdef MP-WEIXIN || MP-ALIPAY -->
-        <canvas type="2d" :id="canvasId" :style="{ width: size + 'px', height: size + 'px' }" class="mp-canvas"></canvas>
-        <!-- #endif -->
+    <view class="ste-qrcode-root" :style="{ width: `${size}px`, height: `${size}px` }">
+        <view class="canvas-wrapper">
+            <!-- #ifdef H5 || APP -->
+            <canvas :style="[compCanvasStyle]" :canvas-id="canvasId" :id="canvasId" class="h5-canvas"></canvas>
+            <!-- #endif -->
+
+            <!-- #ifdef MP-WEIXIN || MP-ALIPAY -->
+            <canvas type="2d" :id="canvasId" :style="[compCanvasStyle]" class="mp-canvas"></canvas>
+            <!-- #endif -->
+        </view>
     </view>
 </template>
 
 <style lang="scss" scoped>
-.ste-barcode-root {
-    width: fit-content;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+.ste-qrcode-root {
+    position: relative;
+    .h5-canvas {
+        transform-origin: top left;
+    }
 }
 </style>

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

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { useSlots, computed, type CSSProperties } from 'vue';
-import useColor from '../../config/color';
-let color = useColor();
+import { useColorStore } from '../../store/color';
+let { getColor } = useColorStore();
 import utils from '../../utils/utils';
 import propsData, { RADIO_KEY, type RadioEmits } from './props';
 import type { RadioGroupProps } from '../ste-radio-group/props';
@@ -24,7 +24,7 @@ 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', color.getColor().steThemeColor));
+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'));

package/components/ste-rate/ste-rate.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import utils from '../../utils/utils.js';
-import useColor from '../../config/color';
-let color = useColor();
+import { useColorStore } from '../../store/color';
+let { getColor } = useColorStore();
 import propsData from './props';
 import { computed, defineOptions, type CSSProperties } from 'vue';
 
@@ -47,7 +47,7 @@ const cmpInactiveCode = computed(() => {
 });
 
 let cmpActiveColor = computed(() => {
-    return props.activeColor ? props.activeColor : color.getColor().steThemeColor;
+    return props.activeColor ? props.activeColor : getColor().steThemeColor;
 });
 
 // 根据iconData来算出每个分值对应的iconCode