im-ui-mobile 0.0.98 → 0.1.0

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

@@ -35,7 +35,7 @@
             <view class="im-cell__content">
                 <view class="im-cell__title">
                     <slot name="title">
-                        <text v-if="title" class="im-cell__title-text" :class="[`im-cell__title--${titleSize}`]">
+                        <text v-if="title" class="im-cell__title-text" :class="[`im-cell__title-text--${titleSize}`]">
                             {{ title }}
                         </text>
                     </slot>
@@ -349,25 +349,22 @@ const handleLongPress = (event: TouchEvent) => {
     }
 
     &__title {
-        margin-bottom: 4rpx;
-
         &-text {
-            font-size: 32rpx;
             color: #303133;
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
 
             &--small {
-                font-size: 28rpx;
+                font-size: $im-font-size-small;
             }
 
             &--medium {
-                font-size: 32rpx;
+                font-size: $im-font-size;
             }
 
             &--large {
-                font-size: 36rpx;
+                font-size: $im-font-size-large;
             }
         }
     }
@@ -381,15 +378,15 @@ const handleLongPress = (event: TouchEvent) => {
             white-space: nowrap;
 
             &--small {
-                font-size: 20rpx;
+                font-size: $im-font-size-small;
             }
 
             &--medium {
-                font-size: 24rpx;
+                font-size: $im-font-size;
             }
 
             &--large {
-                font-size: 28rpx;
+                font-size: $im-font-size-large;
             }
         }
     }
@@ -406,7 +403,7 @@ const handleLongPress = (event: TouchEvent) => {
         margin-right: 8rpx;
 
         &-text {
-            font-size: 28rpx;
+            font-size: $im-font-size;
             color: #606266;
             white-space: nowrap;
         }
@@ -423,7 +420,7 @@ const handleLongPress = (event: TouchEvent) => {
         }
 
         &-text {
-            font-size: 20rpx;
+            font-size: $im-font-size-small;
             color: #67c23a;
         }
     }
@@ -434,8 +431,6 @@ const handleLongPress = (event: TouchEvent) => {
         &-dot {
             background-color: #fa3534;
             border-radius: 50%;
-            // min-width: 32rpx;
-            // height: 32rpx;
             display: flex;
             align-items: center;
             justify-content: center;
@@ -444,7 +439,7 @@ const handleLongPress = (event: TouchEvent) => {
 
         &-text {
             color: white;
-            font-size: 16rpx;
+            font-size: $im-font-size-mini;
             font-weight: bold;
         }
     }

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

@@ -1,17 +1,17 @@
-<template>
-	<view class="cell-group">
-		<slot></slot>
-	</view>
-</template>
-
-<script setup lang="ts">
-defineOptions({
-  name: "cell-group"
-});
-</script>
-
-<style lang="scss" scoped>
-.cell-group {
-	margin-bottom: 20rpx;
-}
+<template>
+	<view class="cell-group">
+		<slot></slot>
+	</view>
+</template>
+
+<script setup lang="ts">
+defineOptions({
+  name: "cell-group"
+});
+</script>
+
+<style lang="scss" scoped>
+.cell-group {
+	margin-bottom: 20rpx;
+}
 </style>

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

@@ -1,214 +1,214 @@
-<template>
-	<view class="chat-item" :class="active ? 'active' : ''">
-		<!--rich-text中的表情包会屏蔽事件，所以这里用一个遮罩层捕获点击事件 -->
-		<view class="mask" @tap="showChatBox()"></view>
-		<view class="left">
-			<im-avatar :url="chat.headImage" :name="chat.showName" :online="online" />
-		</view>
-		<view class="chat-right">
-			<view class="chat-name">
-				<view class="chat-name-text">
-					<view>{{ chat.showName }}</view>
-				</view>
-				<view class="chat-time">{{ $datetime.toTimeText(chat.lastSendTime, true) }}</view>
-			</view>
-			<view class="chat-content">
-				<view class="chat-at-text">{{ atText }}</view>
-				<view class="chat-send-name" v-if="isShowSendName">{{ chat.sendNickName + ':&nbsp;' }}</view>
-				<view v-if="!isTextMessage" class="chat-content-text">{{ chat.lastContent }}</view>
-				<rich-text v-else class="chat-content-text" :nodes="nodesText"></rich-text>
-				<view v-if="chat.isDnd" class="icon iconfont icon-dnd"></view>
-				<u-badge v-else-if="chat.unreadCount > 0" :max="99" :value="chat.unreadCount" />
-			</view>
-		</view>
-	</view>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import ImAvatar from '../im-avatar/im-avatar.vue'
-import { datetime, dom, messageType, emoji } from '../../index'
-import { MESSAGE_TYPE } from '../../index'
-
-interface Props {
-	chat?: any;
-	index?: number;
-	active?: boolean;
-	online: boolean;
-}
-
-const $datetime = datetime
-
-const props = withDefaults(defineProps<Props>(), {
-	active: false
-});
-
-interface Emits {
-	(e: 'click', targetId: number): void
-}
-
-const emit = defineEmits<Emits>()
-
-const isShowSendName = computed(() => {
-	if (!props.chat?.sendNickName) {
-		return false;
-	}
-	const size = props.chat.messages.length;
-	if (size === 0) {
-		return false;
-	}
-	// 只有群聊的普通消息需要显示名称
-	const lastMsg = props.chat.messages[size - 1];
-	return messageType.isNormal(lastMsg.type);
-});
-
-const atText = computed(() => {
-	if (props.chat?.atMe) {
-		return "[有人@我]";
-	} else if (props.chat?.atAll) {
-		return "[@全体成员]";
-	}
-	return "";
-});
-
-const isTextMessage = computed(() => {
-	if (!props.chat?.messages.length) {
-		return false;
-	}
-	const idx = props.chat.messages.length - 1;
-	const messageType = props.chat.messages[idx].type;
-	return messageType === MESSAGE_TYPE.TEXT;
-});
-
-const nodesText = computed(() => {
-	const text = dom.html2Escape(props.chat?.lastContent || '');
-	return emoji.transform(text, 'emoji-small');
-});
-
-// TODO:组件化（换为props.online）
-// const online = computed(() => {
-// 	if (props.chat?.type === 'PRIVATE') {
-// 		const friend = useFriendStore().findFriend(props.chat.targetId);
-// 		return friend && friend.online;
-// 	}
-// 	return false;
-// });
-
-
-// 方法
-
-const showChatBox = () => {
-	// TODO:组件化
-	// 初始化期间进入会话会导致消息不刷新
-	// if (!useConfigStore().appInit || useChatStore().loading) {
-	// 	uni.showToast({
-	// 		title: "正在初始化页面,请稍后...",
-	// 		icon: 'none'
-	// 	});
-	// 	return;
-	// }
-	// uni.navigateTo({
-	// 	url: "/pages-chat/pages/chat/chat-box?targetId=" + props.chat.targetId
-	// });
-
-	emit('click', props.chat.targetId)
-};
-</script>
-
-<style scoped lang="scss">
-.chat-item {
-	height: 96rpx;
-	display: flex;
-	margin-bottom: 2rpx;
-	position: relative;
-	padding: 18rpx 20rpx;
-	align-items: center;
-	background-color: white;
-	white-space: nowrap;
-
-	&:hover {
-		background-color: $im-bg-active;
-	}
-
-	&.active {
-		background-color: $im-bg-active;
-	}
-
-	.mask {
-		position: absolute;
-		width: 100%;
-		height: 100%;
-		left: 0;
-		right: 0;
-		z-index: 99;
-	}
-
-	.left {
-		position: relative;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		width: 100rpx;
-		height: 100rpx;
-	}
-
-	.chat-right {
-		height: 100%;
-		flex: 1;
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		padding-left: 20rpx;
-		text-align: left;
-		overflow: hidden;
-
-		.chat-name {
-			display: flex;
-
-			.chat-name-text {
-				flex: 1;
-				font-size: $im-font-size-large;
-				white-space: nowrap;
-				overflow: hidden;
-				display: flex;
-				align-items: center;
-			}
-
-			.chat-time {
-				font-size: $im-font-size-smaller-extra;
-				color: $im-text-color-lighter;
-				text-align: right;
-				white-space: nowrap;
-				overflow: hidden;
-			}
-		}
-
-		.chat-content {
-			display: flex;
-			font-size: $im-font-size-smaller;
-			color: $im-text-color-lighter;
-			padding-top: 8rpx;
-			align-items: center;
-
-			.chat-at-text {
-				color: $im-color-danger;
-			}
-
-			.chat-send-name {
-				font-size: $im-font-size-smaller;
-			}
-
-			.chat-content-text {
-				flex: 1;
-				white-space: nowrap;
-				overflow: hidden;
-				text-overflow: ellipsis;
-			}
-
-			.icon {
-				font-size: $im-font-size;
-			}
-		}
-	}
-}
+<template>
+	<view class="chat-item" :class="active ? 'active' : ''">
+		<!--rich-text中的表情包会屏蔽事件，所以这里用一个遮罩层捕获点击事件 -->
+		<view class="mask" @tap="showChatBox()"></view>
+		<view class="left">
+			<im-avatar :url="chat.headImage" :name="chat.showName" :online="online" />
+		</view>
+		<view class="chat-right">
+			<view class="chat-name">
+				<view class="chat-name-text">
+					<view>{{ chat.showName }}</view>
+				</view>
+				<view class="chat-time">{{ $datetime.toTimeText(chat.lastSendTime, true) }}</view>
+			</view>
+			<view class="chat-content">
+				<view class="chat-at-text">{{ atText }}</view>
+				<view class="chat-send-name" v-if="isShowSendName">{{ chat.sendNickName + ':&nbsp;' }}</view>
+				<view v-if="!isTextMessage" class="chat-content-text">{{ chat.lastContent }}</view>
+				<rich-text v-else class="chat-content-text" :nodes="nodesText"></rich-text>
+				<view v-if="chat.isDnd" class="icon iconfont icon-dnd"></view>
+				<u-badge v-else-if="chat.unreadCount > 0" :max="99" :value="chat.unreadCount" />
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import ImAvatar from '../im-avatar/im-avatar.vue'
+import { datetime, dom, messageType, emoji } from '../../index'
+import { MESSAGE_TYPE } from '../../index'
+
+interface Props {
+	chat?: any;
+	index?: number;
+	active?: boolean;
+	online: boolean;
+}
+
+const $datetime = datetime
+
+const props = withDefaults(defineProps<Props>(), {
+	active: false
+});
+
+interface Emits {
+	(e: 'click', targetId: number): void
+}
+
+const emit = defineEmits<Emits>()
+
+const isShowSendName = computed(() => {
+	if (!props.chat?.sendNickName) {
+		return false;
+	}
+	const size = props.chat.messages.length;
+	if (size === 0) {
+		return false;
+	}
+	// 只有群聊的普通消息需要显示名称
+	const lastMsg = props.chat.messages[size - 1];
+	return messageType.isNormal(lastMsg.type);
+});
+
+const atText = computed(() => {
+	if (props.chat?.atMe) {
+		return "[有人@我]";
+	} else if (props.chat?.atAll) {
+		return "[@全体成员]";
+	}
+	return "";
+});
+
+const isTextMessage = computed(() => {
+	if (!props.chat?.messages.length) {
+		return false;
+	}
+	const idx = props.chat.messages.length - 1;
+	const messageType = props.chat.messages[idx].type;
+	return messageType === MESSAGE_TYPE.TEXT;
+});
+
+const nodesText = computed(() => {
+	const text = dom.html2Escape(props.chat?.lastContent || '');
+	return emoji.transform(text, 'emoji-small');
+});
+
+// TODO:组件化（换为props.online）
+// const online = computed(() => {
+// 	if (props.chat?.type === 'PRIVATE') {
+// 		const friend = useFriendStore().findFriend(props.chat.targetId);
+// 		return friend && friend.online;
+// 	}
+// 	return false;
+// });
+
+
+// 方法
+
+const showChatBox = () => {
+	// TODO:组件化
+	// 初始化期间进入会话会导致消息不刷新
+	// if (!useConfigStore().appInit || useChatStore().loading) {
+	// 	uni.showToast({
+	// 		title: "正在初始化页面,请稍后...",
+	// 		icon: 'none'
+	// 	});
+	// 	return;
+	// }
+	// uni.navigateTo({
+	// 	url: "/pages-chat/pages/chat/chat-box?targetId=" + props.chat.targetId
+	// });
+
+	emit('click', props.chat.targetId)
+};
+</script>
+
+<style scoped lang="scss">
+.chat-item {
+	height: 96rpx;
+	display: flex;
+	margin-bottom: 2rpx;
+	position: relative;
+	padding: 18rpx 20rpx;
+	align-items: center;
+	background-color: white;
+	white-space: nowrap;
+
+	&:hover {
+		background-color: $im-bg-active;
+	}
+
+	&.active {
+		background-color: $im-bg-active;
+	}
+
+	.mask {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		left: 0;
+		right: 0;
+		z-index: 99;
+	}
+
+	.left {
+		position: relative;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: 100rpx;
+		height: 100rpx;
+	}
+
+	.chat-right {
+		height: 100%;
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		padding-left: 20rpx;
+		text-align: left;
+		overflow: hidden;
+
+		.chat-name {
+			display: flex;
+
+			.chat-name-text {
+				flex: 1;
+				font-size: $im-font-size-large;
+				white-space: nowrap;
+				overflow: hidden;
+				display: flex;
+				align-items: center;
+			}
+
+			.chat-time {
+				font-size: $im-font-size-mini;
+				color: $im-text-color-lighter;
+				text-align: right;
+				white-space: nowrap;
+				overflow: hidden;
+			}
+		}
+
+		.chat-content {
+			display: flex;
+			font-size: $im-font-size-small;
+			color: $im-text-color-lighter;
+			padding-top: 8rpx;
+			align-items: center;
+
+			.chat-at-text {
+				color: $im-color-danger;
+			}
+
+			.chat-send-name {
+				font-size: $im-font-size-small;
+			}
+
+			.chat-content-text {
+				flex: 1;
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+			}
+
+			.icon {
+				font-size: $im-font-size;
+			}
+		}
+	}
+}
 </style>