im-ui-mobile 0.1.12 → 0.1.14

package/components/im-badge/im-badge.vue

@@ -8,7 +8,7 @@
         !childrenSlot && !isAbsolute ? 'im-badge--standalone' : '',
         isAbsolute ? 'im-badge--absolute' : ''
     ]" :style="{
-        '--badge-bg-color': bgColor || undefined,
+        '--badge-bg-color': bgColor || innerBgColor,
         '--badge-text-color': textColor || undefined,
         '--badge-offset-x': offset[0] + 'px',
         '--badge-offset-y': offset[1] + 'px'
@@ -35,7 +35,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch, nextTick, useSlots } from 'vue'
+import { computed, useSlots } from 'vue'
 
 // 定义Props
 interface BadgeProps {
@@ -120,6 +120,20 @@ const typeClass = computed(() => `im-badge--${props.type}`)
 const sizeClass = computed(() => `im-badge--${props.size}`)
 const shapeClass = computed(() => `im-badge--${props.shape}`)
 const isAbsolute = computed(() => props.absolute && childrenSlot.value)
+const innerBgColor = computed(() => {
+    switch (props.type) {
+        case 'primary':
+            return '#409eff';
+        case 'success':
+            return '#67c23a';
+        case 'warning':
+            return '#e6a23c';
+        case 'danger':
+            return '#f56c6c';
+        case 'info':
+            return '#909399';
+    }
+})
 
 // 事件处理
 const handleClick = (event: MouseEvent) => {
@@ -133,6 +147,8 @@ defineExpose({
 </script>
 
 <style lang="scss" scoped>
+@import "../../styles/variables.scss";
+
 .im-badge {
     display: inline-flex;
     position: relative;
@@ -176,36 +192,11 @@ defineExpose({
         font-size: 12px;
         font-weight: 500;
         line-height: 1;
-        color: var(--badge-text-color, #ffffff);
+        color: #ffffff;
         text-align: center;
         white-space: nowrap;
     }
 
-    // 类型样式
-    &--primary {
-        --badge-bg-color: #409eff;
-        --badge-text-color: #ffffff;
-    }
-
-    &--success {
-        --badge-bg-color: #67c23a;
-        --badge-text-color: #ffffff;
-    }
-
-    &--warning {
-        --badge-bg-color: #e6a23c;
-        --badge-text-color: #ffffff;
-    }
-
-    &--danger {
-        --badge-bg-color: #f56c6c;
-        --badge-text-color: #ffffff;
-    }
-
-    &--info {
-        --badge-bg-color: #909399;
-        --badge-text-color: #ffffff;
-    }
 
     // 尺寸样式
     &--small {
@@ -302,7 +293,7 @@ defineExpose({
         align-items: center;
         justify-content: center;
         background-color: var(--badge-bg-color);
-        color: var(--badge-text-color);
+        color: var(--badge-text-color) !important;
 
         // 添加阴影增强视觉效果
         box-shadow: 0 0 0 1px #fff;
@@ -316,7 +307,7 @@ defineExpose({
             align-items: center;
             justify-content: center;
             background-color: var(--badge-bg-color);
-            color: var(--badge-text-color);
+            color: var(--badge-text-color) !important;
 
             // 添加阴影增强视觉效果
             box-shadow: 0 0 0 1px #fff;

package/components/im-tabs/im-tabs.vue

@@ -53,6 +53,7 @@ import {
 } from 'vue'
 import type { TabsProps, TabsEmits, TabItem } from '../../types/components/tabs'
 import TabsNavigation from './tabs-navigation.vue'
+import { safeRequestAnimationFrame } from './utils/compatibility'
 
 const props = withDefaults(defineProps<TabsProps>(), {
     modelValue: 0,
@@ -340,7 +341,7 @@ const scrollToActiveTab = () => {
     if (!props.scrollable) return
 
     // 使用 requestAnimationFrame
-    requestAnimationFrame(() => {
+    safeRequestAnimationFrame(() => {
         scrollToActiveTabImpl()
     })
 }
@@ -436,7 +437,7 @@ const onPageScroll = (event: any) => {
     try {
         const scrollTop = event.scrollTop || 0
 
-        requestAnimationFrame(() => {
+        safeRequestAnimationFrame(() => {
             const query = uni.createSelectorQuery().in(instance)
 
             query.select('.im-tabs-sticky').boundingClientRect((res: any) => {

package/components/im-tabs/utils/compatibility.ts

@@ -0,0 +1,69 @@
+// utils/compatibility.ts
+/**
+ * 兼容 requestAnimationFrame
+ */
+export const requestAnimationFrame = (callback: FrameRequestCallback): number => {
+    // 微信小程序环境
+    // #ifdef MP-WEIXIN || MP-ALIPAY || MP-BAIDU || MP-TOUTIAO || MP-QQ
+    return setTimeout(() => {
+        callback(Date.now())
+    }, 16) as unknown as number
+    // #endif
+
+    // H5 环境
+    // #ifdef H5
+    return window.requestAnimationFrame(callback)
+    // #endif
+
+    // App 环境
+    // #ifdef APP
+    return setTimeout(() => {
+        callback(Date.now())
+    }, 16) as unknown as number
+    // #endif
+}
+
+/**
+ * 兼容 cancelAnimationFrame
+ */
+export const cancelAnimationFrame = (id: number): void => {
+    // 微信小程序环境
+    // #ifdef MP-WEIXIN || MP-ALIPAY || MP-BAIDU || MP-TOUTIAO || MP-QQ
+    return clearTimeout(id)
+    // #endif
+
+    // H5 环境
+    // #ifdef H5
+    return window.cancelAnimationFrame(id)
+    // #endif
+
+    // App 环境
+    // #ifdef APP
+    return clearTimeout(id)
+    // #endif
+}
+
+/**
+ * 安全执行 requestAnimationFrame，避免错误
+ */
+export const safeRequestAnimationFrame = (callback: FrameRequestCallback): number => {
+    try {
+        return requestAnimationFrame(callback)
+    } catch (error) {
+        // 如果 requestAnimationFrame 不存在，使用 setTimeout 模拟
+        return setTimeout(() => {
+            callback(Date.now())
+        }, 16) as unknown as number
+    }
+}
+
+/**
+ * 安全执行 cancelAnimationFrame
+ */
+export const safeCancelAnimationFrame = (id: number): void => {
+    try {
+        cancelAnimationFrame(id)
+    } catch (error) {
+        clearTimeout(id)
+    }
+}