im-ui-mobile 0.0.81 → 0.0.83

package/components/{im-head-image/im-head-image.vue → im-avatar/im-avatar.vue}

@@ -1,5 +1,5 @@
 <template>
-	<view class="head-image  none-pointer-events" @click="showUserInfo" :title="name">
+	<view class="avatar  none-pointer-events" @click="showUserInfo" :title="name">
 		<image v-if="url" class="avatar-image" :src="url" :style="avatarImageStyle" lazy-load="true"
 			mode="aspectFill" />
 		<view v-else class="avatar-text" :style="avatarTextStyle">
@@ -89,7 +89,7 @@ const textColor = computed(() => {
 </script>
 
 <style scoped lang="scss">
-.head-image {
+.avatar {
 	position: relative;
 	cursor: pointer;
 

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

@@ -1,62 +1,627 @@
 <template>
-	<view class="button" :style="style">
-		<text v-if="icon" class="icon iconfont" :class="icon"></text>
-		<text class="title">{{ title }}</text>
-	</view>
+	<button class="im-button" :class="[
+		`im-button--${type}`,
+		`im-button--${size}`,
+		`im-button--${shape}`,
+		{
+			'im-button--disabled': disabled,
+			'im-button--loading': loading,
+			'im-button--block': block,
+			'im-button--plain': plain,
+			'im-button--hairline': hairline,
+			'im-button--native': native
+		}
+	]" :style="buttonStyles" :disabled="disabled || loading" :loading="loading && showLoading" :form-type="formType"
+		:open-type="openType" :hover-class="disabled || loading ? '' : hoverClass" :hover-start-time="hoverStartTime"
+		:hover-stay-time="hoverStayTime" :app-parameter="appParameter" :lang="lang" :session-from="sessionFrom"
+		:send-message-title="sendMessageTitle" :send-message-path="sendMessagePath" :send-message-img="sendMessageImg"
+		:show-message-card="showMessageCard" @click="handleClick" @getuserinfo="onGetUserInfo" @contact="onContact"
+		@getphonenumber="onGetPhoneNumber" @error="onError" @launchapp="onLaunchApp" @opensetting="onOpenSetting"
+		@chooseavatar="onChooseAvatar">
+		<!-- 加载状态 -->
+		<view v-if="loading && showLoading" class="im-button__loading">
+			<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>
+			<text v-if="loadingText" class="im-button__loading-text">
+				{{ loadingText }}
+			</text>
+		</view>
+
+		<!-- 图标 -->
+		<view v-if="(icon || $slots.icon) && !loading" class="im-button__icon">
+			<slot name="icon">
+				<image v-if="icon" :src="icon" class="im-button__icon-image"
+					:class="[`im-button__icon--${iconPosition}`]" mode="aspectFit" />
+			</slot>
+		</view>
+
+		<!-- 文本内容 -->
+		<text v-if="!loading || !hideTextWhenLoading" class="im-button__text" :class="[`im-button__text--${textSize}`]"
+			:style="textStyles">
+			<slot>{{ text }}</slot>
+		</text>
+
+		<!-- 角标 -->
+		<view v-if="badge || $slots.badge" class="im-button__badge">
+			<slot name="badge">
+				<view v-if="badge" class="im-button__badge-content" :class="{
+					'im-button__badge--dot': badge === true,
+					'im-button__badge--text': badge !== true
+				}">
+					<text v-if="badge !== true" class="im-button__badge-text">
+						{{ formatBadge(badge) }}
+					</text>
+				</view>
+			</slot>
+		</view>
+	</button>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, withDefaults } from 'vue'
+
+// 定义类型
+type ButtonType = 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info'
+type ButtonSize = 'mini' | 'small' | 'medium' | 'large'
+type ButtonShape = 'square' | 'round' | 'circle'
+type ButtonFormType = 'submit' | 'reset'
+type ButtonOpenType =
+	| 'contact'
+	| 'share'
+	| 'getPhoneNumber'
+	| 'getUserInfo'
+	| 'launchApp'
+	| 'openSetting'
+	| 'feedback'
+	| 'chooseAvatar'
+type IconPosition = 'left' | 'right'
+type TextSize = 'small' | 'medium' | 'large'
 
 interface Props {
-	title: string;
-	icon?: string;
-	type?: 'normal' | 'danger' | 'primary';
-	color?: string;
+	// 基础属性
+	text?: string
+	type?: ButtonType
+	size?: ButtonSize
+	shape?: ButtonShape
+	disabled?: boolean
+	loading?: boolean
+	loadingText?: string
+	loadingColor?: string
+	showLoading?: boolean
+	hideTextWhenLoading?: boolean
+	block?: boolean
+	plain?: boolean
+	hairline?: boolean
+	native?: boolean
+
+	// 图标
+	icon?: string
+	iconPosition?: IconPosition
+	iconSize?: string | number
+
+	// 样式
+	color?: string
+	bgColor?: string
+	borderColor?: string
+	textColor?: string
+	textSize?: TextSize
+	width?: string
+	height?: string
+	padding?: string
+	margin?: string
+	radius?: string
+	shadow?: string
+
+	// 角标
+	badge?: boolean | number | string
+
+	// 表单相关
+	formType?: ButtonFormType
+
+	// 开放能力
+	openType?: ButtonOpenType
+	appParameter?: string
+	lang?: 'en' | 'zh_CN' | 'zh_TW'
+	sessionFrom?: string
+	sendMessageTitle?: string
+	sendMessagePath?: string
+	sendMessageImg?: string
+	showMessageCard?: boolean
+
+	// 交互效果
+	hoverClass?: string
+	hoverStartTime?: number
+	hoverStayTime?: number
+}
+
+// 定义 Emits
+interface Emits {
+	(e: 'click', event: PointerEvent): void
+	(e: 'getuserinfo', detail: any): void
+	(e: 'contact', detail: any): void
+	(e: 'getphonenumber', detail: any): void
+	(e: 'error', detail: any): void
+	(e: 'launchapp', detail: any): void
+	(e: 'opensetting', detail: any): void
+	(e: 'chooseavatar', detail: any): void
 }
 
+// Props 和 Emits
 const props = withDefaults(defineProps<Props>(), {
-	icon: '',
-	type: 'normal',
-	color: '#000'
-});
+	type: 'default',
+	size: 'medium',
+	shape: 'round',
+	disabled: false,
+	loading: false,
+	loadingColor: '#ffffff',
+	showLoading: true,
+	hideTextWhenLoading: false,
+	block: false,
+	plain: false,
+	hairline: false,
+	native: false,
+	iconPosition: 'left',
+	iconSize: '32rpx',
+	textSize: 'medium',
+	color: '',
+	bgColor: '',
+	borderColor: '',
+	textColor: '',
+	width: '',
+	height: '',
+	padding: '',
+	margin: '',
+	radius: '',
+	shadow: '',
+	hoverClass: 'im-button--hover',
+	hoverStartTime: 20,
+	hoverStayTime: 70,
+	lang: 'zh_CN'
+})
+
+const emit = defineEmits<Emits>()
 
-const style = computed(() => {
-	let color = props.color;
+// 计算属性
+const buttonStyles = computed(() => {
+	const styles: Record<string, string> = {}
+
+	// 自定义颜色
+	if (props.color && !props.plain) {
+		styles.backgroundColor = props.color
+		styles.borderColor = props.color
+	}
+
+	if (props.bgColor) {
+		styles.backgroundColor = props.bgColor
+	}
+
+	if (props.borderColor) {
+		styles.borderColor = props.borderColor
+	}
+
+	if (props.textColor) {
+		styles.color = props.textColor
+	}
+
+	// 尺寸和布局
+	if (props.width) {
+		styles.width = props.width
+	}
+
+	if (props.height) {
+		styles.height = props.height
+	}
+
+	if (props.padding) {
+		styles.padding = props.padding
+	}
+
+	if (props.margin) {
+		styles.margin = props.margin
+	}
+
+	if (props.radius) {
+		styles.borderRadius = props.radius
+	}
+
+	if (props.shadow) {
+		styles.boxShadow = props.shadow
+	}
 
-	switch (props.type) {
-		case 'danger':
-			color = '#f14747';
-			break;
-		case 'primary':
-			color = '#35567f';
-			break;
+	if (props.block) {
+		styles.width = '100%'
 	}
 
-	return `color: ${color};`;
-});
+	return styles
+})
+
+const textStyles = computed(() => {
+	const styles: Record<string, string> = {}
+
+	if (props.textColor) {
+		styles.color = props.textColor
+	}
+
+	return styles
+})
+
+const loadingStyle = computed(() => {
+	return {
+		color: props.loadingColor
+	}
+})
+
+const loadingDotCount = computed(() => {
+	// 根据按钮大小决定点数
+	switch (props.size) {
+		case 'mini': return 3
+		case 'small': return 4
+		case 'medium': return 5
+		case 'large': return 6
+		default: return 5
+	}
+})
+
+// 方法
+const formatBadge = (badge: boolean | number | string): string => {
+	if (typeof badge === 'boolean') return ''
+	if (typeof badge === 'number') {
+		return badge > 99 ? '99+' : badge.toString()
+	}
+	return badge
+}
+
+// 事件处理
+const handleClick = (event: PointerEvent) => {
+	if (props.disabled || props.loading) {
+		return
+	}
+	emit('click', event)
+}
+
+const onGetUserInfo = (detail: any) => {
+	emit('getuserinfo', detail)
+}
+
+const onContact = (detail: any) => {
+	emit('contact', detail)
+}
+
+const onGetPhoneNumber = (detail: any) => {
+	emit('getphonenumber', detail)
+}
+
+const onError = (detail: any) => {
+	emit('error', detail)
+}
+
+const onLaunchApp = (detail: any) => {
+	emit('launchapp', detail)
+}
+
+const onOpenSetting = (detail: any) => {
+	emit('opensetting', detail)
+}
+
+const onChooseAvatar = (detail: any) => {
+	emit('chooseavatar', detail)
+}
 </script>
 
 <style lang="scss" scoped>
-.button {
-	width: 100%;
-	height: 100rpx;
-	margin-top: 5rpx;
-	background-color: white;
-	line-height: 100rpx;
-	text-align: center;
-	display: flex;
+.im-button {
+	position: relative;
+	display: inline-flex;
+	align-items: center;
 	justify-content: center;
+	border: 2rpx solid transparent;
+	font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
+	font-weight: 500;
+	text-align: center;
+	white-space: nowrap;
+	vertical-align: middle;
+	user-select: none;
+	cursor: pointer;
+	transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+	outline: none;
+	box-sizing: border-box;
+
+	// 禁用状态
+	&--disabled {
+		opacity: 0.6;
+		cursor: not-allowed;
+	}
 
-	.icon {
-		font-size: 40rpx;
-		font-weight: 600;
-		margin-right: 10rpx;
+	// 加载状态
+	&--loading {
+		cursor: not-allowed;
 	}
 
-	.title {
+	// 块级按钮
+	&--block {
+		display: flex;
+		width: 100%;
+	}
+
+	// 朴素按钮
+	&--plain {
+		background-color: transparent !important;
+	}
+
+	// 细边框
+	&--hairline {
+		position: relative;
+		border-width: 0;
+
+		&::after {
+			content: '';
+			position: absolute;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			border: 2rpx solid currentColor;
+			border-radius: inherit;
+			pointer-events: none;
+			transform: scale(0.5);
+			transform-origin: center;
+		}
+	}
+
+	// 原生按钮
+	&--native {
+		padding: 0;
+		background-color: transparent;
+		border: none;
+		line-height: normal;
+
+		&::after {
+			display: none;
+		}
+	}
+
+	// 悬停效果
+	&--hover {
+		opacity: 0.8;
+		transform: translateY(-1rpx);
+	}
+
+	// 尺寸
+	&--mini {
+		height: 48rpx;
+		padding: 0 16rpx;
+		font-size: 24rpx;
+		border-radius: 20rpx;
+	}
+
+	&--small {
+		height: 64rpx;
+		padding: 0 24rpx;
+		font-size: 28rpx;
+		border-radius: 32rpx;
+	}
+
+	&--medium {
+		height: 80rpx;
+		padding: 0 32rpx;
 		font-size: 32rpx;
-		font-weight: 600;
+		border-radius: 40rpx;
+	}
+
+	&--large {
+		height: 96rpx;
+		padding: 0 40rpx;
+		font-size: 36rpx;
+		border-radius: 48rpx;
+	}
+
+	// 形状
+	&--square {
+		border-radius: 8rpx;
+	}
+
+	&--round {
+		// 圆角已经在尺寸中定义
+	}
+
+	&--circle {
+		border-radius: 50%;
+		padding: 0;
+		width: var(--button-height);
+		min-width: var(--button-height);
+	}
+
+	// 类型
+	&--default {
+		color: #606266;
+		background-color: #ffffff;
+		border-color: #dcdfe6;
+
+		&.im-button--plain {
+			color: #606266;
+			border-color: #dcdfe6;
+		}
+	}
+
+	&--primary {
+		color: #ffffff;
+		background-color: #409eff;
+		border-color: #409eff;
+
+		&.im-button--plain {
+			color: #409eff;
+			background-color: transparent;
+			border-color: #409eff;
+		}
+	}
+
+	&--success {
+		color: #ffffff;
+		background-color: #67c23a;
+		border-color: #67c23a;
+
+		&.im-button--plain {
+			color: #67c23a;
+			background-color: transparent;
+			border-color: #67c23a;
+		}
+	}
+
+	&--warning {
+		color: #ffffff;
+		background-color: #e6a23c;
+		border-color: #e6a23c;
+
+		&.im-button--plain {
+			color: #e6a23c;
+			background-color: transparent;
+			border-color: #e6a23c;
+		}
+	}
+
+	&--danger {
+		color: #ffffff;
+		background-color: #f56c6c;
+		border-color: #f56c6c;
+
+		&.im-button--plain {
+			color: #f56c6c;
+			background-color: transparent;
+			border-color: #f56c6c;
+		}
+	}
+
+	&--info {
+		color: #ffffff;
+		background-color: #909399;
+		border-color: #909399;
+
+		&.im-button--plain {
+			color: #909399;
+			background-color: transparent;
+			border-color: #909399;
+		}
+	}
+
+	// 内部元素
+	&__loading {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
+		&-spinner {
+			display: inline-flex;
+			align-items: center;
+			justify-content: center;
+			margin-right: 8rpx;
+		}
+
+		&-dot {
+			width: 6rpx;
+			height: 6rpx;
+			border-radius: 50%;
+			margin: 0 2rpx;
+			animation: button-loading 1.4s infinite ease-in-out both;
+
+			@keyframes button-loading {
+
+				0%,
+				80%,
+				100% {
+					transform: scale(0.6);
+					opacity: 0.6;
+				}
+
+				40% {
+					transform: scale(1);
+					opacity: 1;
+				}
+			}
+		}
+
+		&-text {
+			font-size: inherit;
+			color: inherit;
+		}
+	}
+
+	&__icon {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		margin-right: 8rpx;
+
+		&--right {
+			margin-right: 0;
+			margin-left: 8rpx;
+			order: 1;
+		}
+
+		&-image {
+			width: v-bind(iconSize);
+			height: v-bind(iconSize);
+		}
+	}
+
+	&__text {
+		display: inline-block;
+		line-height: 1;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+
+		&--small {
+			font-size: 24rpx;
+		}
+
+		&--medium {
+			font-size: 32rpx;
+		}
+
+		&--large {
+			font-size: 36rpx !important;
+		}
+	}
+
+	&__badge {
+		position: absolute;
+		top: -10rpx;
+		right: -10rpx;
+		z-index: 1;
+
+		&-content {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+
+		&--dot {
+			width: 16rpx;
+			height: 16rpx;
+			background-color: #fa3534;
+			border-radius: 50%;
+			border: 2rpx solid #ffffff;
+		}
+
+		&--text {
+			min-width: 32rpx;
+			height: 32rpx;
+			padding: 0 8rpx;
+			background-color: #fa3534;
+			border-radius: 16rpx;
+			border: 2rpx solid #ffffff;
+		}
+
+		&-text {
+			color: #ffffff;
+			font-size: 20rpx;
+			font-weight: bold;
+			line-height: 1;
+		}
 	}
 }
 </style>