im-ui-mobile 0.1.11 → 0.1.13

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-stepper/im-stepper.vue

@@ -56,7 +56,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, watch, nextTick, useSlots } from 'vue'
+import { ref, computed, watch, nextTick, onMounted } from 'vue'
 import type { StepperProps, StepperEmits } from '../../types/components/stepper'
 import ImIcon from '../im-icon/im-icon.vue'
 

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)
+    }
+}

package/components/im-virtual-list/im-virtual-list.vue

@@ -1,6 +1,6 @@
 <template>
     <!-- 虚拟列表容器 -->
-    <scroll-view class="virtual-list" :scroll-y="true" :scroll-with-animation="true" :show-scrollbar="false"
+    <scroll-view class="im-virtual-list" :scroll-y="true" :scroll-with-animation="true" :show-scrollbar="false"
         :enhanced="true" :bounces="false" :lower-threshold="lowerThreshold" :upper-threshold="upperThreshold"
         :scroll-top="scrollTop" :scroll-into-view="scrollIntoViewId" @scroll="handleScroll"
         @scrolltolower="handleScrollToLower" @scrolltoupper="handleScrollToUpper">
@@ -313,7 +313,7 @@ const clearScrollTimer = () => {
 const measureContainer = () => {
     nextTick(() => {
         const query = uni.createSelectorQuery().in(getCurrentInstance())
-        query.select('.virtual-list').boundingClientRect((rect: any) => {
+        query.select('.im-virtual-list').boundingClientRect((rect: any) => {
             if (rect && rect.height) {
                 containerHeight.value = rect.height
             }
@@ -379,7 +379,7 @@ defineExpose({
 </script>
 
 <style lang="scss" scoped>
-.virtual-list {
+.im-virtual-list {
     // min-height: 200rpx;
     // height: 100vh;
 }

package/package.json

@@ -1,58 +1,60 @@
-{
-  "name": "im-ui-mobile",
-  "version": "0.1.11",
-  "description": "A Vue3.0 + Typescript instant messaging component library for Uniapp",
-  "type": "module",
-  "main": "index.js",
-  "types": "types/index.d.ts",
-  "files": [
-    "components",
-    "libs",
-    "types",
-    "utils",
-    "plugins",
-    "index.js",
-    "styles",
-    "theme.scss",
-    "index.scss"
-  ],
-  "scripts": {
-    "wx": "cd examples-dev && npm run dev:mp-weixin",
-    "h5": "cd examples-dev && npm run dev:h5",
-    "build": "npm run build:types",
-    "build:types": "vue-tsc -p tsconfig.build.json",
-    "clean:types": "rmdir /s /q src/types 2>nul # '删除 types 目录'",
-    "prepublishOnly": "npm run build"
-  },
-  "devDependencies": {
-    "@dcloudio/uni-app": "3.0.0-4070520250711001",
-    "@dcloudio/types": "^3.4.8",
-    "@dcloudio/uni-cli-shared": "3.0.0-4070520250711001",
-    "@dcloudio/vite-plugin-uni": "3.0.0-4070520250711001",
-    "@types/node": "^24.10.1",
-    "@vitejs/plugin-vue": "^4.0.0",
-    "typescript": "~5.4.5",
-    "vite": "^4.0.0",
-    "vite-plugin-dts": "^3.0.0",
-    "vue-tsc": "^1.0.0"
-  },
-  "peerDependencies": {
-    "@dcloudio/uni-app": "3.0.0-4070520250711001",
-    "vue": "^3.3.0",
-    "pinia": "^2.1.7"
-  },
-  "peerDependenciesMeta": {
-    "pinia": {
-      "optional": true
-    }
-  },
-  "keywords": [
-    "vue3",
-    "components",
-    "ui",
-    "instant-messaging",
-    "chat"
-  ],
-  "author": "Joncky Cai",
-  "license": "MIT"
+{
+  "name": "im-ui-mobile",
+  "version": "0.1.13",
+  "description": "A Vue3.0 + Typescript instant messaging component library for Uniapp",
+  "type": "module",
+  "main": "index.js",
+  "types": "types/index.d.ts",
+  "files": [
+    "components",
+    "libs",
+    "types",
+    "utils",
+    "plugins",
+    "index.js",
+    "styles",
+    "theme.scss",
+    "index.scss"
+  ],
+  "scripts": {
+    "wx": "cd examples-dev && npm run dev:mp-weixin",
+    "h5": "cd examples-dev && npm run dev:h5",
+    "build": "npm run build:types",
+    "build:types": "vue-tsc -p tsconfig.build.json",
+    "clean:types": "rmdir /s /q src/types 2>nul # '删除 types 目录'",
+    "prepublishOnly": "npm run build"
+  },
+  "devDependencies": {
+    "@dcloudio/types": "^3.4.8",
+    "@dcloudio/uni-app": "3.0.0-4070520250711001",
+    "@dcloudio/uni-cli-shared": "3.0.0-4070520250711001",
+    "@dcloudio/vite-plugin-uni": "3.0.0-4070520250711001",
+    "@types/node": "^24.10.1",
+    "@vitejs/plugin-vue": "^4.0.0",
+    "sass": "^1.97.2",
+    "sass-loader": "^10.5.2",
+    "typescript": "~5.4.5",
+    "vite": "^4.0.0",
+    "vite-plugin-dts": "^3.0.0",
+    "vue-tsc": "^1.0.0"
+  },
+  "peerDependencies": {
+    "@dcloudio/uni-app": "3.0.0-4070520250711001",
+    "pinia": "^2.1.7",
+    "vue": "^3.3.0"
+  },
+  "peerDependenciesMeta": {
+    "pinia": {
+      "optional": true
+    }
+  },
+  "keywords": [
+    "vue3",
+    "components",
+    "ui",
+    "instant-messaging",
+    "chat"
+  ],
+  "author": "Joncky Cai",
+  "license": "MIT"
 }

package/styles/functions.scss

@@ -0,0 +1,24 @@
+// 将px转换为rpx
+@function px2rpx($px) {
+    @return $px * 2rpx;
+}
+
+// 将rpx转换为px
+@function rpx2px($rpx) {
+    @return $rpx / 2px;
+}
+
+// 计算rem
+@function rem($px) {
+    @return $px / 16px * 1rem;
+}
+
+// 颜色变亮
+@function tint($color, $percentage) {
+    @return mix(white, $color, $percentage);
+}
+
+// 颜色变暗
+@function shade($color, $percentage) {
+    @return mix(black, $color, $percentage);
+}

package/styles/mixins.scss

@@ -0,0 +1,148 @@
+// 文本溢出省略号
+@mixin text-ellipsis($lines: 1) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    @if $lines ==1 {
+        white-space: nowrap;
+    }
+
+    @else {
+        display: -webkit-box;
+        -webkit-line-clamp: $lines;
+        -webkit-box-orient: vertical;
+    }
+}
+
+// 清除浮动
+@mixin clearfix {
+    &::after {
+        content: '';
+        display: table;
+        clear: both;
+    }
+}
+
+// 多行文本省略
+@mixin multi-line-ellipsis($line-height: 1.4, $lines: 2) {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: $lines;
+    line-height: $line-height;
+    max-height: $line-height * $lines * 1em;
+    overflow: hidden;
+}
+
+// 1像素边框
+@mixin hairline($color: $border-base, $direction: bottom) {
+    position: relative;
+
+    &::after {
+        content: '';
+        position: absolute;
+        transform-origin: center;
+        box-sizing: border-box;
+        pointer-events: none;
+
+        @if $direction ==top {
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 1px;
+            border-top: 1px solid $color;
+            transform: scaleY(0.5);
+        }
+
+        @else if $direction ==bottom {
+            bottom: 0;
+            left: 0;
+            right: 0;
+            height: 1px;
+            border-bottom: 1px solid $color;
+            transform: scaleY(0.5);
+        }
+
+        @else if $direction ==left {
+            top: 0;
+            left: 0;
+            bottom: 0;
+            width: 1px;
+            border-left: 1px solid $color;
+            transform: scaleX(0.5);
+        }
+
+        @else if $direction ==right {
+            top: 0;
+            right: 0;
+            bottom: 0;
+            width: 1px;
+            border-right: 1px solid $color;
+            transform: scaleX(0.5);
+        }
+
+        @else if $direction ==all {
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            border: 1px solid $color;
+            transform: scale(0.5);
+            transform-origin: 0 0;
+        }
+    }
+}
+
+// 移除1像素边框
+@mixin hairline-remove {
+    &::after {
+        display: none;
+    }
+}
+
+// 弹性布局快捷方式
+@mixin flex($justify: flex-start, $align: center, $direction: row) {
+    display: flex;
+    flex-direction: $direction;
+    justify-content: $justify;
+    align-items: $align;
+}
+
+// 垂直居中
+@mixin vertical-center {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+// 响应式媒体查询
+@mixin respond-to($breakpoint) {
+    @if $breakpoint ==xs {
+        @media (max-width: 320px) {
+            @content;
+        }
+    }
+
+    @else if $breakpoint ==sm {
+        @media (max-width: 375px) {
+            @content;
+        }
+    }
+
+    @else if $breakpoint ==md {
+        @media (max-width: 414px) {
+            @content;
+        }
+    }
+
+    @else if $breakpoint ==lg {
+        @media (max-width: 768px) {
+            @content;
+        }
+    }
+
+    @else if $breakpoint ==xl {
+        @media (min-width: 1024px) {
+            @content;
+        }
+    }
+}

package/styles/variables.scss

@@ -0,0 +1,58 @@
+// 颜色系统
+$primary-color: #1989fa;
+$success-color: #07c160;
+$warning-color: #ff976a;
+$danger-color: #ee0a24;
+$info-color: #909399;
+
+// 文本颜色
+$text-primary: #303133;
+$text-regular: #606266;
+$text-secondary: #909399;
+$text-placeholder: #c0c4cc;
+
+// 边框颜色
+$border-base: #dcdfe6;
+$border-light: #e4e7ed;
+$border-lighter: #ebeef5;
+
+// 背景颜色
+$bg-color: #f8f8f8;
+$bg-color-light: #fafafa;
+
+// 尺寸
+$font-size-xs: 10px;
+$font-size-sm: 12px;
+$font-size-base: 14px;
+$font-size-md: 16px;
+$font-size-lg: 18px;
+$font-size-xl: 20px;
+
+// 间距
+$spacing-xs: 4px;
+$spacing-sm: 8px;
+$spacing-base: 16px;
+$spacing-md: 24px;
+$spacing-lg: 32px;
+$spacing-xl: 48px;
+
+// 圆角
+$border-radius-sm: 2px;
+$border-radius-base: 4px;
+$border-radius-md: 8px;
+$border-radius-lg: 12px;
+$border-radius-round: 20px;
+$border-radius-circle: 50%;
+
+// 阴影
+$box-shadow-base: 0 2px 4px rgba(0, 0, 0, 0.12);
+$box-shadow-light: 0 2px 12px rgba(0, 0, 0, 0.1);
+
+// 动画
+$transition-duration: 0.3s;
+$transition-timing: ease;
+
+// 深色模式变量
+$dark-bg-color: #2a2a2a;
+$dark-text-color: #ffffff;
+$dark-border-color: #444444;