im-ui-mobile 0.1.34 → 0.1.35

package/components/im-avatar/im-avatar.vue

@@ -1,123 +1,568 @@
 <template>
-	<view class="avatar  none-pointer-events" @click="showUserInfo" :title="title">
-		<image v-if="url" class="avatar-image" :src="url" :style="avatarImageStyle" lazy-load="true"
-			mode="aspectFill" />
-		<view v-else-if="title" class="avatar-text" :style="avatarTextStyle">
-			{{ title?.substring(0, 1).toUpperCase() }}
-		</view>
-		<view v-if="online" class="online" title="用户当前在线" />
-		<slot />
-	</view>
+    <!-- 角标 -->
+    <im-badge v-if="badge && url" :value="badgeText" :dot="badgeDot">
+        <view class="im-avatar" :class="[
+            `im-avatar--${size}`,
+            {
+                'im-avatar--square': shape === 'square',
+                'im-avatar--rounded': shape === 'rounded',
+                'im-avatar--circle': shape === 'circle',
+                'im-avatar--with-border': border,
+                'im-avatar--clickable': clickable
+            }
+        ]" :style="[customStyle, avatarStyle]" @click="handleClick" @longpress="handleLongPress">
+            <!-- 图片头像 -->
+            <image v-if="url" :class="['im-avatar__image',
+                {
+                    'im-avatar__image--square': shape === 'square',
+                    'im-avatar__image--rounded': shape === 'rounded',
+                    'im-avatar__image--circle': shape === 'circle',
+                    'im-avatar__image--with-border': border,
+                }
+            ]" :src="url" :mode="imageMode" :show-menu-by-longpress="showMenuByLongpress" @error="handleImageError" />
+        </view>
+    </im-badge>
+    <view v-else class="im-avatar" :class="[
+        `im-avatar--${size}`,
+        {
+            'im-avatar--square': shape === 'square',
+            'im-avatar--rounded': shape === 'rounded',
+            'im-avatar--circle': shape === 'circle',
+            'im-avatar--with-border': border,
+            'im-avatar--clickable': clickable
+        }
+    ]" :style="[customStyle, avatarStyle]" @click="handleClick" @longpress="handleLongPress">
+        <!-- 图片头像 -->
+        <image v-if="url" :class="['im-avatar__image',
+            {
+                'im-avatar__image--square': shape === 'square',
+                'im-avatar__image--rounded': shape === 'rounded',
+                'im-avatar__image--circle': shape === 'circle',
+                'im-avatar__image--with-border': border,
+            }
+        ]" :src="url" :mode="imageMode" :show-menu-by-longpress="showMenuByLongpress" @error="handleImageError" />
+
+        <!-- 文字头像（无图片时显示） -->
+        <text v-else-if="title" class="im-avatar__text" :style="textStyle">
+            {{ displayText }}
+        </text>
+
+        <!-- 默认图标（无图片和文字时显示） -->
+        <text v-else-if="icon" class="im-avatar__icon">
+            <im-icon :name="icon" :color="iconColor" :size="iconSize" />
+        </text>
+
+        <!-- 在线状态指示器 -->
+        <view v-if="showStatus && status" class="im-avatar__status" :class="`im-avatar__status--${status}`" />
+
+        <!-- 角标 -->
+        <im-badge v-if="badge" :value="badgeText" :dot="badgeDot" :class="[`im-avatar__badge`]" :size="badgeSize" />
+
+        <!-- 加载状态 -->
+        <view v-if="loading" class="im-avatar__loading">
+            <im-loading v-if="loading" :size="32" text="" :mask="true" :class="[
+                {
+                    'im-avatar__loading--square': shape === 'square',
+                    'im-avatar__loading--rounded': shape === 'rounded',
+                    'im-avatar__loading--circle': shape === 'circle'
+                }
+            ]" />
+        </view>
+    </view>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue'
+import ImIcon from '../im-icon/im-icon.vue'
+import { validator } from '../../index'
 
+// 定义组件Props
 interface Props {
-	id?: number;
-	size?: number | string;
-	url?: string;
-	title?: string;
-	radius?: string;
-	online?: boolean;
+    // 基础属性
+    id?: string | number
+    url?: string               // 头像图片地址
+    title?: string            // 显示的文字（无图片时）
+    size?: 'mini' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'  // 尺寸
+    shape?: 'circle' | 'square' | 'rounded'  // 形状
+    border?: boolean          // 是否显示边框
+    borderColor?: string      // 边框颜色
+
+    // 样式控制
+    bgColor?: string          // 背景颜色（无图片时）
+    textColor?: string        // 文字颜色（无图片时）
+    fontSize?: number         // 文字大小（无图片时）
+    fontWeight?: number | string  // 文字粗细
+
+    // 图标设置
+    icon?: string             // 图标字符（无图片和文字时）
+    iconColor?: string        // 图标颜色
+    iconSize?: number         // 图标大小
+
+    // 状态指示
+    status?: 'online' | 'offline' | 'busy' | 'away'  // 在线状态
+    showStatus?: boolean      // 是否显示状态指示器
+    badge?: string | number | boolean   // 角标内容
+    badgeDot?: boolean        // 是否显示圆点角标
+    badgeMax?: number         // 角标最大值
+    badgeColor?: string       // 角标背景色
+    badgeTextColor?: string   // 角标文字颜色
+
+    // 交互功能
+    clickable?: boolean       // 是否可点击
+    loading?: boolean         // 加载状态
+    showMenuByLongpress?: boolean  // 是否允许长按显示菜单
+
+    // 图片相关
+    imageMode?: 'scaleToFill' | 'aspectFit' | 'aspectFill' | 'widthFix' | 'heightFix' | 'top' | 'bottom' | 'center' | 'left' | 'right' | 'top left' | 'top right' | 'bottom left' | 'bottom right'
+
+    // 自定义样式
+    customStyle?: Record<string, string | number>
 }
 
+// 默认Props
 const props = withDefaults(defineProps<Props>(), {
-	size: 'default',
-	title: '',
-	radius: "50%",
-	online: false
-});
-
-interface Emits {
-	(e: 'click', id: number): void
+    size: 'medium',
+    shape: 'circle',
+    border: false,
+    borderColor: '#dcdfe6',
+    bgColor: '#409eff',
+    textColor: '#ffffff',
+    fontSize: undefined,
+    fontWeight: 500,
+    icon: '👤',
+    iconColor: '#909399',
+    iconSize: undefined,
+    status: 'offline',
+    showStatus: false,
+    badge: undefined,
+    badgeDot: false,
+    badgeMax: 99,
+    badgeColor: '#ff4d4f',
+    badgeTextColor: '#ffffff',
+    clickable: false,
+    loading: false,
+    showMenuByLongpress: false,
+    imageMode: 'aspectFill',
+    customStyle: () => ({})
+})
+
+// 定义事件
+const emit = defineEmits<{
+    click: [id?: string | number]
+    longpress: [id?: string | number]
+    error: [error: Error]
+}>()
+
+// 计算属性
+const displayText = computed(() => {
+    if (!props.title) return ''
+    // 取最后一个字符或前两个字符
+    if (props.title.length <= 2) {
+        return props.title
+    }
+    // 中文取最后两个字符，英文取首字母
+    const isChinese = /[\u4e00-\u9fa5]/.test(props.title)
+    if (isChinese) {
+        return props.title.slice(-2)
+    } else {
+        const words = props.title.split(' ').filter(word => word.length > 0)
+        if (words.length >= 2) {
+            return words[0][0] + words[1][0]
+        } else {
+            return props.title.slice(0, 2)
+        }
+    }
+})
+
+const avatarStyle = computed(() => {
+    const style: Record<string, string> = {}
+
+    if (props.bgColor && !props.url) {
+        style.backgroundColor = props.bgColor
+    }
+
+    if (props.border) {
+        style.border = `2rpx solid ${props.borderColor}`
+    }
+
+    return style
+})
+
+const textStyle = computed(() => {
+    const style: Record<string, string> = {
+        color: props.textColor,
+        fontWeight: String(props.fontWeight)
+    }
+
+    // 根据尺寸设置字体大小
+    if (props.fontSize) {
+        style.fontSize = `${props.fontSize}rpx`
+    }
+
+    return style
+})
+
+// const iconStyle = computed(() => {
+//     const style: Record<string, string> = {
+//         color: props.iconColor
+//     }
+
+//     if (props.iconSize) {
+//         style.fontSize = `${props.iconSize}rpx`
+//     }
+
+//     return style
+// })
+
+// const badgeClass = computed(() => {
+//     if (props.badgeColor) {
+//         return ''
+//     }
+//     return 'im-avatar__badge--default'
+// })
+
+const badgeSize = computed(() => {
+    switch (props.size) {
+        case 'mini':
+            return 'small'
+        case 'small':
+        case 'medium':
+        case 'large':
+            return props.size
+        case 'xlarge':
+        case 'xxlarge':
+            return 'large'
+    }
+})
+
+const badgeText = computed(() => {
+    if (!props.badge) return ''
+
+    if (validator.isNumber(String(props.badge))) {
+        const badgeNum = Number(props.badge)
+
+        if (badgeNum > props.badgeMax) {
+            return `${props.badgeMax}+`
+        }
+
+        return String(props.badge)
+    }
+
+    // const badgeNum = Number(props.badge)
+
+    // if (isNaN(badgeNum)) {
+    //     return String(props.badge)
+    // }
+
+    // if (badgeNum > props.badgeMax) {
+    //     return `${props.badgeMax}+`
+    // }
+
+    return String(props.badge)
+})
+
+// 事件处理
+const handleClick = () => {
+    if (props.clickable && !props.loading) {
+        emit('click', props.id)
+    }
+}
+
+const handleLongPress = () => {
+    if (props.clickable && !props.loading) {
+        emit('longpress', props.id)
+    }
+}
+
+const handleImageError = (error: any) => {
+    emit('error', error)
 }
-const emit = defineEmits<Emits>()
-
-const colors = [
-	"#5daa31", "#c7515a", "#e03697", "#85029b",
-	"#c9b455", "#326eb6"
-];
-
-const showUserInfo = () => {
-	if (props.id && props.id > 0) {
-		// TODO:组件化
-		// uni.navigateTo({ url: "/pages/common/user-info?id=" + props.id });
-		emit('click', props.id)
-	}
-};
-
-const _size = computed(() => {
-	if (typeof props.size === 'number') {
-		return props.size;
-	} else if (typeof props.size === 'string') {
-		const sizeMap: Record<string, number> = {
-			'default': 96,
-			'small': 84,
-			'smaller': 72,
-			'mini': 60,
-			'minier': 48,
-			'lage': 108,
-			'lager': 120,
-		};
-		return sizeMap[props.size] || 96;
-	}
-	return 96;
-});
-
-const avatarImageStyle = computed(() => {
-	return `width:${_size.value}rpx;height:${_size.value}rpx;`;
-});
-
-const avatarTextStyle = computed(() => {
-	return `width: ${_size.value}rpx;
-          height:${_size.value}rpx;
-          background: linear-gradient(145deg,#ffffff20 25%,#00000060),${textColor.value};
-          font-size:${_size.value * 0.45}rpx;
-          border-radius: ${props.radius};`;
-});
-
-const textColor = computed(() => {
-	if (!props.title) {
-		return '#fff';
-	}
-	let hash = 0;
-	for (let i = 0; i < props.title.length; i++) {
-		hash += props.title.charCodeAt(i);
-	}
-	return colors[hash % colors.length];
-});
 </script>
 
-<style scoped lang="scss">
-.avatar {
-	position: relative;
-	cursor: pointer;
-
-	.avatar-image {
-		position: relative;
-		overflow: hidden;
-		border-radius: 50%;
-		vertical-align: bottom;
-	}
-
-	.avatar-text {
-		color: white;
-		border-radius: 50%;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.online {
-		position: absolute;
-		right: -10%;
-		bottom: 0;
-		width: 24rpx;
-		height: 24rpx;
-		background: rgb(108, 198, 108);
-		border-radius: 50%;
-		border: 6rpx solid white;
-	}
+<style lang="scss" scoped>
+@import '../../styles/variables.scss';
+
+.im-avatar {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    vertical-align: middle;
+    transition: all 0.3s ease;
+    user-select: none;
+    background-color: #ffffff;
+
+    // 形状
+    &--circle {
+        border-radius: 50%;
+    }
+
+    &--square {
+        border-radius: 8rpx;
+    }
+
+    &--rounded {
+        border-radius: 20%;
+    }
+
+    &--with-border {
+        box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.3);
+    }
+
+    &--clickable {
+        cursor: pointer;
+
+        &:active {
+            opacity: 0.8;
+            transform: scale(0.95);
+        }
+    }
+
+    // 尺寸
+    &--mini {
+        width: 64rpx;
+        height: 64rpx;
+        font-size: 24rpx;
+
+        .im-avatar__text {
+            font-size: 24rpx;
+        }
+
+        .im-avatar__icon {
+            font-size: 32rpx;
+        }
+    }
+
+    &--small {
+        width: 80rpx;
+        height: 80rpx;
+        font-size: 28rpx;
+
+        .im-avatar__text {
+            font-size: 28rpx;
+        }
+
+        .im-avatar__icon {
+            font-size: 40rpx;
+        }
+    }
+
+    &--medium {
+        width: 100rpx;
+        height: 100rpx;
+        font-size: 32rpx;
+
+        .im-avatar__text {
+            font-size: 32rpx;
+        }
+
+        .im-avatar__icon {
+            font-size: 48rpx;
+        }
+    }
+
+    &--large {
+        width: 120rpx;
+        height: 120rpx;
+        font-size: 36rpx;
+
+        .im-avatar__text {
+            font-size: 36rpx;
+        }
+
+        .im-avatar__icon {
+            font-size: 56rpx;
+        }
+    }
+
+    &--xlarge {
+        width: 160rpx;
+        height: 160rpx;
+        font-size: 48rpx;
+
+        .im-avatar__text {
+            font-size: 48rpx;
+        }
+
+        .im-avatar__icon {
+            font-size: 72rpx;
+        }
+    }
+
+    &--xxlarge {
+        width: 200rpx;
+        height: 200rpx;
+        font-size: 60rpx;
+
+        .im-avatar__text {
+            font-size: 60rpx;
+        }
+
+        .im-avatar__icon {
+            font-size: 88rpx;
+        }
+    }
+
+    // 子元素
+    &__image {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+
+        // 形状
+        &--circle {
+            border-radius: 50%;
+        }
+
+        &--square {
+            border-radius: 8rpx;
+        }
+
+        &--rounded {
+            border-radius: 20%;
+        }
+
+        &--with-border {
+            box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
+        }
+    }
+
+    &__text {
+        font-weight: 500;
+        line-height: 1;
+        text-transform: uppercase;
+    }
+
+    &__icon {
+        line-height: 1;
+    }
+
+    // 状态指示器
+    &__status {
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        width: 20rpx;
+        height: 20rpx;
+        border: 2rpx solid white;
+        border-radius: 50%;
+
+        &--online {
+            background-color: #07c160;
+        }
+
+        &--offline {
+            background-color: #c8c9cc;
+        }
+
+        &--busy {
+            background-color: #ff976a;
+        }
+
+        &--away {
+            background-color: #ffd700;
+        }
+
+        // 根据尺寸调整位置和大小
+        .im-avatar--mini &,
+        .im-avatar--small & {
+            width: 16rpx;
+            height: 16rpx;
+            right: -2rpx;
+            bottom: -2rpx;
+        }
+
+        .im-avatar--large &,
+        .im-avatar--xlarge &,
+        .im-avatar--xxlarge & {
+            width: 24rpx;
+            height: 24rpx;
+            right: 4rpx;
+            bottom: 4rpx;
+        }
+    }
+
+    // 角标
+    &__badge {
+
+        // 尺寸
+        .im-avatar--mini & {
+            top: -30rpx;
+            right: -6rpx;
+        }
+
+        .im-avatar--small & {
+            top: -38rpx;
+            right: -8rpx;
+        }
+
+        .im-avatar--medium & {
+            top: -48rpx;
+            right: -14rpx;
+        }
+
+        .im-avatar--large & {
+            top: -56rpx;
+            right: -20rpx;
+        }
+
+        .im-avatar--xlarge & {
+            top: -72rpx;
+            right: -25rpx;
+        }
+
+        .im-avatar--xxlarge & {
+            top: -88rpx;
+            right: -30rpx;
+        }
+    }
+
+    // 加载状态
+    &__loading {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 2;
+
+        // 形状
+        &--circle {
+            border-radius: 50%;
+        }
+
+        &--square {
+            border-radius: 8rpx;
+        }
+
+        &--rounded {
+            border-radius: 20%;
+        }
+    }
+}
+
+// 暗黑模式适配
+@media (prefers-color-scheme: dark) {
+    .im-avatar {
+        &--with-border {
+            border-color: #5c5c5c;
+        }
+
+        &__status {
+            border-color: #2c2c2c;
+        }
+
+        &__badge {
+
+            &--dot,
+            &--number {
+                border-color: #2c2c2c;
+            }
+        }
+    }
 }
 </style>

package/components/im-avatar1/im-avatar.vue

@@ -0,0 +1,123 @@
+<template>
+	<view class="avatar  none-pointer-events" @click="showUserInfo" :title="title">
+		<image v-if="url" class="avatar-image" :src="url" :style="avatarImageStyle" lazy-load="true"
+			mode="aspectFill" />
+		<view v-else-if="title" class="avatar-text" :style="avatarTextStyle">
+			{{ title?.substring(0, 1).toUpperCase() }}
+		</view>
+		<view v-if="online" class="online" title="用户当前在线" />
+		<slot />
+	</view>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+	id?: number;
+	size?: number | string;
+	url?: string;
+	title?: string;
+	radius?: string;
+	online?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	size: 'default',
+	title: '',
+	radius: "50%",
+	online: false
+});
+
+interface Emits {
+	(e: 'click', id: number): void
+}
+const emit = defineEmits<Emits>()
+
+const colors = [
+	"#5daa31", "#c7515a", "#e03697", "#85029b",
+	"#c9b455", "#326eb6"
+];
+
+const showUserInfo = () => {
+	if (props.id && props.id > 0) {
+		// TODO:组件化
+		// uni.navigateTo({ url: "/pages/common/user-info?id=" + props.id });
+		emit('click', props.id)
+	}
+};
+
+const _size = computed(() => {
+	if (typeof props.size === 'number') {
+		return props.size;
+	} else if (typeof props.size === 'string') {
+		const sizeMap: Record<string, number> = {
+			'default': 96,
+			'small': 84,
+			'smaller': 72,
+			'mini': 60,
+			'minier': 48,
+			'lage': 108,
+			'lager': 120,
+		};
+		return sizeMap[props.size] || 96;
+	}
+	return 96;
+});
+
+const avatarImageStyle = computed(() => {
+	return `width:${_size.value}rpx;height:${_size.value}rpx;`;
+});
+
+const avatarTextStyle = computed(() => {
+	return `width: ${_size.value}rpx;
+          height:${_size.value}rpx;
+          background: linear-gradient(145deg,#ffffff20 25%,#00000060),${textColor.value};
+          font-size:${_size.value * 0.45}rpx;
+          border-radius: ${props.radius};`;
+});
+
+const textColor = computed(() => {
+	if (!props.title) {
+		return '#fff';
+	}
+	let hash = 0;
+	for (let i = 0; i < props.title.length; i++) {
+		hash += props.title.charCodeAt(i);
+	}
+	return colors[hash % colors.length];
+});
+</script>
+
+<style scoped lang="scss">
+.avatar {
+	position: relative;
+	cursor: pointer;
+
+	.avatar-image {
+		position: relative;
+		overflow: hidden;
+		border-radius: 50%;
+		vertical-align: bottom;
+	}
+
+	.avatar-text {
+		color: white;
+		border-radius: 50%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.online {
+		position: absolute;
+		right: -10%;
+		bottom: 0;
+		width: 24rpx;
+		height: 24rpx;
+		background: rgb(108, 198, 108);
+		border-radius: 50%;
+		border: 6rpx solid white;
+	}
+}
+</style>

package/components/im-chat-item/im-chat-item.vue

@@ -3,7 +3,7 @@
 		<!--rich-text中的表情包会屏蔽事件，所以这里用一个遮罩层捕获点击事件 -->
 		<view class="mask" @tap="showChatBox()"></view>
 		<view class="left">
-			<im-avatar :url="chat.avatar" :title="chat.displayName" :online="online" />
+			<im-avatar :url="chat.avatar" :title="chat.displayName" :status="online ? 'online' : 'offline'" :show-status="online" />
 		</view>
 		<view class="chat-right">
 			<view class="chat-name">

package/components/im-friend-item/im-friend-item.vue

@@ -1,6 +1,7 @@
 <template>
 	<view class="friend-item" @click="onClick()">
-		<im-avatar :title="friend.nickName" :online="friend.online" :url="friend.avatar" size="small" />
+		<im-avatar :title="friend.nickName" :url="friend.avatar" size="small"
+			:status="friend.online ? 'online' : 'offline'" :show-status="friend.online" />
 		<view class="friend-info">
 			<view class="friend-name">{{ friend.nickName }}</view>
 			<view class="friend-online">

package/components/im-loading/im-loading.vue

@@ -2,7 +2,7 @@
 	<view class="loading" :style="loadingStyle">
 		<view :style="icontStyle">
 			<im-icon name="loading" :color="iconColor" :size="size" spin :spin-speed="2" />
-			<text class="loading-text">{{ text }}</text>
+			<text v-if="text" class="loading-text">{{ text }}</text>
 		</view>
 		<slot></slot>
 	</view>

package/components/im-mention-picker/im-mention-picker.vue

@@ -21,8 +21,8 @@
 				<im-virtual-list :data="memberItems">
 					<template v-slot="{ item }">
 						<view class="member-item" @click="onSwitchChecked(item)">
-							<im-avatar :title="item.showNickName" :online="item.online" :url="item.avatar"
-								size="small" />
+							<im-avatar :title="item.showNickName" :url="item.avatar" size="small"
+								:status="item.online ? 'online' : 'offline'" :show-status="item.online" />
 							<view class="member-name">{{ item.showNickName }}</view>
 							<radio :checked="item.checked" :disabled="item.locked"
 								@click.stop="onSwitchChecked(item)" />

package/components/im-read-receipt/im-read-receipt.vue

@@ -2,15 +2,15 @@
 	<im-popup ref="popup" position="bottom">
 		<view class="read-receipt">
 			<view class="uni-padding-wrap uni-common-mt">
-				<im-tabs v-model="current" :items="items"  @change="onClickItem" />
+				<im-tabs v-model="current" :items="items" @change="onClickItem" />
 			</view>
 			<view class="content">
 				<view v-if="current === 0">
 					<im-virtual-list :data="readedMembers">
 						<template v-slot="{ item }">
 							<view class="member-item">
-								<im-avatar :title="item.showNickName" :online="item.online" :url="item.avatar"
-									:size="90" />
+								<im-avatar :title="item.showNickName" :url="item.avatar" :size="90"
+									:status="item.online ? 'online' : 'offline'" :show-status="item.online" />
 								<view class="member-name">{{ item.showNickName }}</view>
 							</view>
 						</template>
@@ -20,8 +20,8 @@
 					<im-virtual-list :data="unreadMembers">
 						<template v-slot="{ item }">
 							<view class="member-item">
-								<im-avatar :title="item.showNickName" :online="item.online" :url="item.avatar"
-									:size="90" />
+								<im-avatar :title="item.showNickName" :url="item.avatar" :size="90"
+									:status="item.online ? 'online' : 'offline'" :show-status="item.online" />
 								<view class="member-name">{{ item.showNickName }}</view>
 							</view>
 						</template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "im-ui-mobile",
-  "version": "0.1.34",
+  "version": "0.1.35",
   "description": "A Vue3.0 + Typescript instant messaging component library for Uniapp",
   "type": "module",
   "main": "index.js",

package/types/components/avatar.d.ts

@@ -1,17 +1,72 @@
 import { AllowedComponentProps, VNodeProps } from '../common'
 
 declare interface AvatarProps {
-    id?: number
-    size?: number | string
+    // 基础属性
+    id?: string | number
+    size?: 'mini' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | number | string
+    shape?: 'circle' | 'square' | 'rounded'
+
+    // 头像内容
     url?: string
-    name?: string
-    radius?: string
-    online?: boolean
+    title?: string
+    name?: string  // 兼容 name 属性
+    icon?: string
+
+    // 样式控制
+    bgColor?: string
+    textColor?: string
+    fontSize?: number | string
+    fontWeight?: number | string
+    iconColor?: string
+    iconSize?: number | string
+
+    // 边框
+    border?: boolean
+    borderColor?: string
+    radius?: string | number  // 兼容 radius 属性
+
+    // 状态指示
+    status?: 'online' | 'offline' | 'busy' | 'away'
+    showStatus?: boolean
+    online?: boolean  // 兼容 online 属性
+
+    // 角标
+    badge?: string | number
+    badgeDot?: boolean
+    badgeMax?: number
+    badgeColor?: string
+    badgeTextColor?: string
+
+    // 交互
+    clickable?: boolean
+    loading?: boolean
+    showMenuByLongpress?: boolean
+
+    // 图片设置
+    imageMode?: 'scaleToFill' | 'aspectFit' | 'aspectFill' | 'widthFix' | 'heightFix' |
+    'top' | 'bottom' | 'center' | 'left' | 'right' |
+    'top left' | 'top right' | 'bottom left' | 'bottom right'
+
+    // 自定义样式
+    customStyle?: Record<string, string | number> | string
+}
+
+declare interface AvatarSlots {
+    default?: never
+    // 未来可能支持插槽
+}
+
+declare interface AvatarEmits {
+    (e: 'click', id?: string | number): void
+    (e: 'longpress', id?: string | number): void
+    (e: 'error', error: Error): void
 }
 
 declare interface _Avatar {
     new(): {
         $props: AllowedComponentProps & VNodeProps & AvatarProps
+        $slots: AvatarSlots
+        $emit: AvatarEmits
     }
 }
 
@@ -20,5 +75,7 @@ export declare const Avatar: _Avatar
 export default Avatar
 
 export type {
-    AvatarProps
+    AvatarProps,
+    AvatarEmits,
+    AvatarSlots
 }

package/types/components/avatar1.d.ts

@@ -0,0 +1,24 @@
+import { AllowedComponentProps, VNodeProps } from '../common'
+
+declare interface AvatarProps {
+    id?: number
+    size?: number | string
+    url?: string
+    name?: string
+    radius?: string
+    online?: boolean
+}
+
+declare interface _Avatar {
+    new(): {
+        $props: AllowedComponentProps & VNodeProps & AvatarProps
+    }
+}
+
+export declare const Avatar: _Avatar
+
+export default Avatar
+
+export type {
+    AvatarProps
+}

package/types/components.d.ts

@@ -1,7 +1,6 @@
 declare module 'vue' {
     export interface GlobalComponents {
         ['im-cell']: typeof import('./components/cell')['Cell']
-        ['im-cell-switch']: typeof import('./components/cell-switch')['CellSwitch']
         ['im-cell-group']: typeof import('./components/cell-group')['CellGroup']
         ['im-button']: typeof import('./components/button')['Button']
         ['im-badge']: typeof import('./components/badge')['Badge']

package/components/im-cell-switch/im-cell-switch.vue

@@ -1,225 +0,0 @@
-<template>
-    <ImCell :type="type" :size="size" :disabled="disabled || switchDisabled" :border="border" :hover="hover"
-        :clickable="clickable" :icon="icon" :iconPosition="iconPosition" :avatar="avatar" :title="title"
-        :titleSize="titleSize" :description="description" :descriptionSize="descriptionSize" :value="value"
-        :label="label" :badge="badge" :padding="padding" :margin="margin" :bgColor="bgColor" :textColor="textColor"
-        @click="handleCellClick" @longpress="handleLongPress">
-        <!-- 传递所有插槽 -->
-        <!-- <template v-if="icon || $slots.icon" #icon>
-            <slot name="icon" />
-        </template>
-
-        <template v-if="avatar || $slots.avatar" #avatar>
-            <slot name="avatar" />
-        </template>
-
-        <template v-if="title || $slots.title" #title>
-            <slot name="title" />
-        </template>
-
-        <template v-if="description || $slots.description" #description>
-            <slot name="description" />
-        </template>
-
-        <template v-if="arrow || $slots.arrow" #arrow>
-            <slot name="arrow" />
-        </template>
-
-        <template v-if="label || $slots.label" #label>
-            <slot name="label" />
-        </template>
-
-        <template v-if="badge || $slots.badge" #badge>
-            <slot name="badge" />
-        </template> -->
-
-        <!-- 自定义右侧内容，添加 Switch -->
-        <template #value>
-            <view class="im-cell-switch__wrapper">
-                <switch v-if="showSwitch" :checked="checked" :disabled="disabled || switchDisabled" :color="switchColor"
-                    :backgroundColor="switchBackgroundColor" @change="handleSwitchChange" />
-                <text v-else class="im-cell-switch__loading">加载中...</text>
-            </view>
-        </template>
-    </ImCell>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, watch } from 'vue'
-import ImCell from '../im-cell/im-cell.vue'
-
-// 定义 Props 接口
-interface Props {
-    // 继承自 ImCell 的 Props
-    type?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info'
-    size?: 'small' | 'medium' | 'large'
-    disabled?: boolean
-    border?: boolean
-    hover?: boolean
-    clickable?: boolean
-    icon?: string
-    iconPosition?: 'left' | 'right'
-    avatar?: string
-    title?: string
-    titleSize?: 'small' | 'medium' | 'large'
-    description?: string
-    descriptionSize?: 'small' | 'medium' | 'large'
-    value?: string
-    label?: string
-    badge?: boolean | number | string
-    padding?: string
-    margin?: string
-    bgColor?: string
-    textColor?: string
-    arrow?: boolean
-
-    // Switch 特有 Props
-    checked?: boolean
-    switchDisabled?: boolean
-    switchColor?: string
-    switchBackgroundColor?: string
-    loading?: boolean
-    async?: boolean
-    beforeChange?: (newValue: boolean) => Promise<boolean> | boolean
-}
-
-// 定义 Emits 接口
-interface Emits {
-    (e: 'update:checked', value: boolean): void
-    (e: 'change', value: boolean): void
-    (e: 'click', event: PointerEvent): void
-    (e: 'longpress', event: TouchEvent): void
-}
-
-// Props 和 Emits
-const props = withDefaults(defineProps<Props>(), {
-    type: 'default',
-    size: 'medium',
-    disabled: false,
-    border: true,
-    hover: true,
-    clickable: true,
-    iconPosition: 'left',
-    titleSize: 'medium',
-    descriptionSize: 'small',
-    switchDisabled: false,
-    switchColor: '#409EFF',
-    switchBackgroundColor: '#DCDFE6',
-    loading: false,
-    async: false,
-    arrow: false
-})
-
-const emit = defineEmits<Emits>()
-
-// 响应式数据
-const isLoading = ref(false)
-const internalValue = ref(props.checked)
-
-// 计算属性
-const showSwitch = computed(() => {
-    return !props.loading && !isLoading.value
-})
-
-// 监听外部值变化
-watch(() => props.checked, (newValue) => {
-    internalValue.value = newValue
-})
-
-// 事件处理
-const handleSwitchChange = async (event: any) => {
-    const newValue = event.detail.value
-
-    // 如果设置了异步切换
-    if (props.async || props.beforeChange) {
-        await handleAsyncChange(newValue)
-    } else {
-        updateValue(newValue)
-    }
-}
-
-const handleAsyncChange = async (newValue: boolean) => {
-    isLoading.value = true
-
-    try {
-        let canChange = true
-
-        // 执行 beforeChange 回调
-        if (props.beforeChange) {
-            const result = props.beforeChange(newValue)
-            if (result instanceof Promise) {
-                canChange = await result
-            } else {
-                canChange = result
-            }
-        }
-
-        if (canChange) {
-            updateValue(newValue)
-        } else {
-            // 恢复原值
-            internalValue.value = !newValue
-        }
-    } catch (error) {
-        console.error('切换失败:', error)
-        // 恢复原值
-        internalValue.value = !newValue
-    } finally {
-        isLoading.value = false
-    }
-}
-
-const updateValue = (value: boolean) => {
-    internalValue.value = value
-    emit('update:checked', value)
-    emit('change', value)
-}
-
-const handleCellClick = (event: PointerEvent) => {
-    if (props.disabled || props.switchDisabled) return
-    emit('click', event)
-}
-
-const handleLongPress = (event: TouchEvent) => {
-    if (props.disabled || props.switchDisabled) return
-    emit('longpress', event)
-}
-</script>
-
-<style lang="scss" scoped>
-.im-cell-switch {
-    &__wrapper {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        min-width: 80rpx;
-        margin-left: 8rpx;
-    }
-
-    &__loading {
-        font-size: 24rpx;
-        color: #909399;
-    }
-}
-
-// 覆盖 Switch 样式
-:deep(switch) {
-    transform: scale(0.8);
-    transform-origin: center;
-
-    &.wx-switch-input {
-        width: 80rpx;
-        height: 40rpx;
-
-        &::before {
-            width: 76rpx;
-            height: 36rpx;
-        }
-
-        &::after {
-            width: 34rpx;
-            height: 34rpx;
-        }
-    }
-}
-</style>

package/types/components/cell-switch.d.ts

@@ -1,38 +0,0 @@
-import { AllowedComponentProps, VNodeProps } from 'vue'
-import { ImCellProps } from './im-cell'
-
-export interface CellSwitchProps extends Omit<ImCellProps, 'arrow'> {
-    // 必须的属性
-    checked?: boolean
-
-    // Switch 特有属性
-    switchDisabled?: boolean
-    switchColor?: string
-    switchBackgroundColor?: string
-    loading?: boolean
-    async?: boolean
-    beforeChange?: (newValue: boolean) => Promise<boolean> | boolean
-}
-
-export interface CellSwitchEmits {
-    (e: 'update:checked', value: boolean): void
-    (e: 'change', value: boolean): void
-    (e: 'click', event: TouchEvent): void
-    (e: 'longpress', event: TouchEvent): void
-}
-
-declare interface _CellSwitch {
-    new(): {
-        $props: AllowedComponentProps & VNodeProps & CellSwitchProps
-        $emit: CellSwitchEmits
-    }
-}
-
-export declare const CellSwitch: _CellSwitch
-
-export default CellSwitch
-
-export type {
-    CellSwitchProps,
-    CellSwitchEmits
-}