im-ui-mobile 0.1.0 → 0.1.1

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

@@ -1,9 +1,9 @@
 <template>
-	<view class="avatar  none-pointer-events" @click="showUserInfo" :title="name">
+	<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 class="avatar-text" :style="avatarTextStyle">
-			{{ name?.substring(0, 1).toUpperCase() }}
+			{{ title?.substring(0, 1).toUpperCase() }}
 		</view>
 		<view v-if="online" class="online" title="用户当前在线" />
 	</view>
@@ -16,14 +16,14 @@ interface Props {
 	id?: number;
 	size?: number | string;
 	url?: string;
-	name?: string;
+	title?: string;
 	radius?: string;
 	online?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
 	size: 'default',
-	name: '',
+	title: '',
 	radius: "50%",
 	online: false
 });
@@ -77,12 +77,12 @@ const avatarTextStyle = computed(() => {
 });
 
 const textColor = computed(() => {
-	if (!props.name) {
+	if (!props.title) {
 		return '#fff';
 	}
 	let hash = 0;
-	for (let i = 0; i < props.name.length; i++) {
-		hash += props.name.charCodeAt(i);
+	for (let i = 0; i < props.title.length; i++) {
+		hash += props.title.charCodeAt(i);
 	}
 	return colors[hash % colors.length];
 });

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

@@ -0,0 +1,326 @@
+<template>
+    <view class="im-badge" :class="[
+        typeClass,
+        sizeClass,
+        shapeClass,
+        showBadge ? '' : 'im-badge--hidden',
+        dot ? 'im-badge--dot' : '',
+        !childrenSlot && !isAbsolute ? 'im-badge--standalone' : '',
+        isAbsolute ? 'im-badge--absolute' : ''
+    ]" :style="{
+        '--badge-bg-color': bgColor || undefined,
+        '--badge-text-color': textColor || undefined,
+        '--badge-offset-x': offset[0] + 'px',
+        '--badge-offset-y': offset[1] + 'px'
+    }" @click="handleClick">
+        <!-- 包裹内容区域 -->
+        <view v-if="childrenSlot" class="im-badge__wrapper">
+            <slot />
+            <view v-if="showBadge" class="im-badge__content">
+                <template v-if="!dot">
+                    <text class="im-badge__text">{{ displayValue }}</text>
+                </template>
+            </view>
+        </view>
+
+        <!-- 独立显示时 -->
+        <template v-else>
+            <view v-if="showBadge" class="im-badge__content im-badge__content--standalone">
+                <template v-if="!dot">
+                    <text class="im-badge__text">{{ displayValue }}</text>
+                </template>
+            </view>
+        </template>
+    </view>
+</template>
+
+<script setup lang="ts">
+import { computed, useSlots } from 'vue'
+
+// 定义Props
+interface BadgeProps {
+    /** 徽标显示的值 */
+    value?: string | number
+    /** 最大值，超过会显示 {max}+，为0时不做限制 */
+    max?: number
+    /** 是否显示为小圆点 */
+    dot?: boolean
+    /** 是否隐藏徽标 */
+    hidden?: boolean
+    /** 徽标类型 */
+    type?: 'primary' | 'success' | 'warning' | 'danger' | 'info'
+    /** 自定义背景色 */
+    bgColor?: string
+    /** 自定义文字颜色 */
+    textColor?: string
+    /** 徽标尺寸 */
+    size?: 'small' | 'medium' | 'large'
+    /** 徽标形状 */
+    shape?: 'circle' | 'square' | 'rounded'
+    /** 是否绝对定位（需要子元素时生效） */
+    absolute?: boolean
+    /** 绝对定位的偏移量 [x, y] */
+    offset?: [number, number]
+    /** 当value为0时是否显示徽标 */
+    showZero?: boolean
+}
+
+const props = withDefaults(defineProps<BadgeProps>(), {
+    value: '',
+    max: 99,
+    dot: false,
+    hidden: false,
+    type: 'danger',
+    size: 'medium',
+    shape: 'circle',
+    absolute: true,
+    offset: () => [0, 0],
+    showZero: false
+})
+
+// 定义Emits
+const emit = defineEmits<{
+    click: [event: MouseEvent]
+}>()
+
+// 使用Slots
+const slots = useSlots()
+const childrenSlot = computed(() => !!slots.default)
+
+// 计算属性
+const displayValue = computed(() => {
+    const { value, max, showZero } = props
+
+    if (props.dot) return ''
+
+    // 处理数字
+    if (typeof value === 'number') {
+        if (value === 0 && !showZero) return ''
+        if (max > 0 && value > max) return `${max}+`
+        return String(value)
+    }
+
+    // 处理字符串
+    if (typeof value === 'string') {
+        return value.length > 3 ? `${value.slice(0, 3)}...` : value
+    }
+
+    return ''
+})
+
+const showBadge = computed(() => {
+    if (props.hidden) return false
+    if (props.dot) return true
+    if (props.value === 0 && !props.showZero) return false
+    return !!(props.value || props.value === 0)
+})
+
+// CSS类名
+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 handleClick = (event: MouseEvent) => {
+    emit('click', event)
+}
+
+// 暴露给ref的方法
+defineExpose({
+    getValue: () => props.value
+})
+</script>
+
+<style lang="scss" scoped>
+.im-badge {
+    display: inline-flex;
+    position: relative;
+    box-sizing: border-box;
+
+    &--hidden {
+        display: none;
+    }
+
+    &--standalone {
+        position: relative;
+        // transform: none;
+        // top: auto;
+        // right: auto;
+    }
+
+    &--absolute {
+        position: relative;
+        display: inline-block;
+    }
+
+    &__wrapper {
+        position: relative;
+        display: inline-block;
+    }
+
+    &__content {
+        position: absolute;
+        top: calc(-1 * var(--badge-offset-y, 0px));
+        right: calc(-1 * var(--badge-offset-x, 0px));
+        transform: translate(50%, -50%);
+        z-index: 10;
+        box-sizing: border-box;
+
+        // 确保徽标在内容之上
+        pointer-events: auto;
+    }
+
+    &__text {
+        display: block;
+        font-size: 12px;
+        font-weight: 500;
+        line-height: 1;
+        color: var(--badge-text-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 {
+        .im-badge__content {
+            min-width: 20rpx;
+            height: 20rpx;
+            padding: 0 6rpx;
+
+            .im-badge__text {
+                font-size: 16rpx;
+            }
+        }
+
+        &.im-badge--dot .im-badge__content {
+            width: 13rpx;
+            height: 13rpx;
+            min-width: 13rpx;
+            padding: 0;
+        }
+    }
+
+    &--medium {
+        .im-badge__content {
+            min-width: 30rpx;
+            height: 30rpx;
+            padding: 0 10rpx;
+
+            .im-badge__text {
+                font-size: 20rpx;
+            }
+        }
+
+        &.im-badge--dot .im-badge__content {
+            width: 18rpx;
+            height: 18rpx;
+            min-width: 18rpx;
+            padding: 0;
+        }
+    }
+
+    &--large {
+        .im-badge__content {
+            min-width: 38rpx;
+            height: 38rpx;
+            padding: 0 12rpx;
+
+            .im-badge__text {
+                font-size: 28rpx;
+            }
+        }
+
+        &.im-badge--dot .im-badge__content {
+            width: 22rpx;
+            height: 22rpx;
+            min-width: 22rpx;
+            padding: 0;
+        }
+    }
+
+    // 形状样式
+    &--circle {
+        .im-badge__content {
+            border-radius: 100px;
+        }
+
+        &.im-badge--dot .im-badge__content {
+            border-radius: 50%;
+        }
+    }
+
+    &--rounded {
+        .im-badge__content {
+            border-radius: 4px;
+        }
+
+        &.im-badge--dot .im-badge__content {
+            border-radius: 50%;
+        }
+    }
+
+    &--square {
+        .im-badge__content {
+            border-radius: 0;
+        }
+
+        &.im-badge--dot .im-badge__content {
+            border-radius: 0;
+        }
+    }
+
+    // 徽标内容样式
+    .im-badge__content {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        background-color: var(--badge-bg-color);
+        color: var(--badge-text-color);
+
+        // 添加阴影增强视觉效果
+        box-shadow: 0 0 0 1px #fff;
+    }
+
+    // 独立显示的徽标
+    &.im-badge--standalone {
+
+        .im-badge__content {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            background-color: var(--badge-bg-color);
+            color: var(--badge-text-color);
+
+            // 添加阴影增强视觉效果
+            box-shadow: 0 0 0 1px #fff;
+        }
+    }
+}
+</style>

package/components/im-button/im-button.vue

@@ -1,8 +1,8 @@
 <template>
 	<button class="im-button" :class="[
 		`im-button--${type}`,
-		`im-button--${size}`,
-		`im-button--${shape}`,
+		`im-button--${size} `,
+		`im-button--${size}--${shape}`,
 		{
 			'im-button--disabled': disabled,
 			'im-button--loading': loading,
@@ -20,12 +20,12 @@
 		@chooseavatar="onChooseAvatar">
 		<!-- 加载状态 -->
 		<view v-if="loading && showLoading" class="im-button__loading">
-			<view class="im-button__loading-spinner" :style="loadingStyle">
+			<!-- <view class="im-button__loading-spinner" :style="loadingStyle">
 				<view v-for="n in loadingDotCount" :key="n" class="im-button__loading-dot" :style="{
 					animationDelay: `${(n - 1) * 0.15}s`,
 					backgroundColor: loadingColor
 				}" />
-			</view>
+			</view> -->
 			<text v-if="loadingText" class="im-button__loading-text">
 				{{ loadingText }}
 			</text>
@@ -33,10 +33,11 @@
 
 		<!-- 图标 -->
 		<view v-if="(icon || $slots.icon) && !loading" class="im-button__icon">
-			<slot name="icon">
+			<slot v-if="$slots.icon" name="icon">
 				<image v-if="icon" :src="icon" class="im-button__icon-image"
 					:class="[`im-button__icon--${iconPosition}`]" mode="aspectFit" />
 			</slot>
+			<im-icon v-else-if="icon" :name="icon"></im-icon>
 		</view>
 
 		<!-- 文本内容 -->
@@ -63,6 +64,7 @@
 
 <script setup lang="ts">
 import { computed, withDefaults } from 'vue'
+import { validator } from '../../index'
 
 // 定义类型
 type ButtonType = 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info'
@@ -107,6 +109,7 @@ interface Props {
 	color?: string
 	bgColor?: string
 	borderColor?: string
+	border: boolean
 	textColor?: string
 	textSize?: TextSize
 	width?: string
@@ -170,6 +173,7 @@ const props = withDefaults(defineProps<Props>(), {
 	color: '',
 	bgColor: '',
 	borderColor: '',
+	border: true,
 	textColor: '',
 	width: '',
 	height: '',
@@ -196,13 +200,17 @@ const buttonStyles = computed(() => {
 	}
 
 	if (props.bgColor) {
-		styles.backgroundColor = props.bgColor
+		styles.background = props.bgColor
 	}
 
 	if (props.borderColor) {
 		styles.borderColor = props.borderColor
 	}
 
+	if (!props.border) {
+		styles.border = '0 solid transparent'
+	}
+
 	if (props.textColor) {
 		styles.color = props.textColor
 	}
@@ -269,10 +277,11 @@ const loadingDotCount = computed(() => {
 // 方法
 const formatBadge = (badge: boolean | number | string): string => {
 	if (typeof badge === 'boolean') return ''
-	if (typeof badge === 'number') {
-		return badge > 99 ? '99+' : badge.toString()
+	if (validator.isNumber(badge)) {
+		return Number(badge) > 99 ? '99+' : badge.toString()
 	}
-	return badge
+	badge = String(badge)
+	return badge.length > 2 ? `${badge.slice(0, 2)}...` : badge
 }
 
 // 事件处理
@@ -313,12 +322,16 @@ const onChooseAvatar = (detail: any) => {
 </script>
 
 <style lang="scss" scoped>
+uni-button:after {
+	border: 0;
+}
+
 .im-button {
 	position: relative;
 	display: inline-flex;
 	align-items: center;
 	justify-content: center;
-	border: 2rpx solid transparent;
+	border: 1rpx solid transparent;
 	font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
 	font-weight: 500;
 	text-align: center;
@@ -355,7 +368,7 @@ const onChooseAvatar = (detail: any) => {
 	// 细边框
 	&--hairline {
 		position: relative;
-		border-width: 0;
+		// border-width: 1rpx;
 
 		&::after {
 			content: '';
@@ -364,7 +377,7 @@ const onChooseAvatar = (detail: any) => {
 			left: 0;
 			right: 0;
 			bottom: 0;
-			border: 2rpx solid currentColor;
+			border: 1rpx solid currentColor;//
 			border-radius: inherit;
 			pointer-events: none;
 			transform: scale(0.5);
@@ -396,6 +409,16 @@ const onChooseAvatar = (detail: any) => {
 		padding: 0 16rpx;
 		font-size: $im-font-size-mini;
 		border-radius: 20rpx;
+
+		// 形状
+		&--square {
+			border-radius: 8rpx;
+		}
+
+		&--circle {
+			border-radius: 50%;
+			padding: 0 8rpx;
+		}
 	}
 
 	&--small {
@@ -403,6 +426,16 @@ const onChooseAvatar = (detail: any) => {
 		padding: 0 24rpx;
 		font-size: $im-font-size-small;
 		border-radius: 32rpx;
+
+		// 形状
+		&--square {
+			border-radius: 8rpx;
+		}
+
+		&--circle {
+			border-radius: 50%;
+			padding: 0 12rpx;
+		}
 	}
 
 	&--medium {
@@ -410,6 +443,16 @@ const onChooseAvatar = (detail: any) => {
 		padding: 0 32rpx;
 		font-size: $im-font-size;
 		border-radius: 40rpx;
+
+		// 形状
+		&--square {
+			border-radius: 8rpx;
+		}
+
+		&--circle {
+			border-radius: 50%;
+			padding: 0 16rpx;
+		}
 	}
 
 	&--large {
@@ -417,22 +460,16 @@ const onChooseAvatar = (detail: any) => {
 		padding: 0 40rpx;
 		font-size: $im-font-size-large;
 		border-radius: 48rpx;
-	}
-
-	// 形状
-	&--square {
-		border-radius: 8rpx;
-	}
 
-	&--round {
-		// 圆角已经在尺寸中定义
-	}
+		// 形状
+		&--square {
+			border-radius: 8rpx;
+		}
 
-	&--circle {
-		border-radius: 50%;
-		padding: 0;
-		width: var(--button-height);
-		min-width: var(--button-height);
+		&--circle {
+			border-radius: 50%;
+			padding: 0 20rpx;
+		}
 	}
 
 	// 类型
@@ -593,8 +630,8 @@ const onChooseAvatar = (detail: any) => {
 
 	&__badge {
 		position: absolute;
-		top: -10rpx;
-		right: -10rpx;
+		top: 6rpx;
+		right: 6rpx;
 		z-index: 1;
 
 		&-content {
@@ -604,17 +641,17 @@ const onChooseAvatar = (detail: any) => {
 		}
 
 		&--dot {
-			width: 16rpx;
-			height: 16rpx;
+			width: 12rpx;
+			height: 12rpx;
 			background-color: #fa3534;
 			border-radius: 50%;
 			border: 2rpx solid #ffffff;
 		}
 
 		&--text {
-			min-width: 32rpx;
-			height: 32rpx;
-			padding: 0 8rpx;
+			min-width: 16rpx;
+			height: 16rpx;
+			padding: 4rpx;
 			background-color: #fa3534;
 			border-radius: 16rpx;
 			border: 2rpx solid #ffffff;
@@ -622,7 +659,7 @@ const onChooseAvatar = (detail: any) => {
 
 		&-text {
 			color: #ffffff;
-			font-size: 20rpx;
+			font-size: 16rpx;
 			font-weight: bold;
 			line-height: 1;
 		}