im-ui-mobile 0.0.42 → 0.0.44

package/components/im-arrow-bar/im-arrow-bar.vue

@@ -0,0 +1,59 @@
+<template>
+	<view class="arrow-bar">
+		<text class="icon iconfont" :class="icon" :style="{color: textColor}"></text>
+		<text class="title">{{ title }}</text>
+		<u-icon class="arrow" name="arrow-right" size="16"></u-icon>
+	</view>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+interface Props {
+  title: string;
+  icon?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  icon: ''
+});
+
+const colors = ref([
+  "#5daa31", "#c7515a", "#e03697", "#85029b",
+  "#c9b455", "#326eb6"
+]);
+
+const textColor = computed(() => {
+  let hash = 0;
+  for (let i = 0; i < props.title.length; i++) {
+    hash += props.title.charCodeAt(i);
+  }
+  return colors.value[hash % colors.value.length];
+});
+</script>
+
+<style lang="scss" scoped>
+.arrow-bar {
+	width: 100%;
+	height: 90rpx;
+	font-size: $im-font-size;
+	color: $im-text-color;
+	margin-top: 5rpx;
+	background-color: white;
+	line-height: 90rpx;
+	display: flex;
+	
+	.icon {
+		margin-left: 40rpx;
+	}
+	
+	.title {
+		flex: 1;
+		margin-left: 10rpx;
+	}
+
+	.arrow {
+		margin-right: 40rpx;
+	}
+}
+</style>

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

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

package/components/im-btn-bar/im-btn-bar.vue

@@ -0,0 +1,60 @@
+<template>
+	<view class="btn-bar" :style="style">
+		<text v-if="icon" class="icon iconfont" :class="icon"></text>
+		<text class="title">{{ title }}</text>
+	</view>
+</template>
+
+<script setup lang="ts">
+interface Props {
+	title: string;
+	icon?: string;
+	type?: 'normal' | 'danger' | 'primary';
+	color?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	icon: '',
+	type: 'normal',
+	color: '#000'
+});
+
+const style = computed(() => {
+	let color = props.color;
+
+	switch (props.type) {
+		case 'danger':
+			color = '#f14747';
+			break;
+		case 'primary':
+			color = '#35567f';
+			break;
+	}
+
+	return `color: ${color};`;
+});
+</script>
+
+<style lang="scss" scoped>
+.btn-bar {
+	width: 100%;
+	height: 100rpx;
+	margin-top: 5rpx;
+	background-color: white;
+	line-height: 100rpx;
+	text-align: center;
+	display: flex;
+	justify-content: center;
+
+	.icon {
+		font-size: 40rpx;
+		font-weight: 600;
+		margin-right: 10rpx;
+	}
+
+	.title {
+		font-size: 32rpx;
+		font-weight: 600;
+	}
+}
+</style>

package/components/im-chat-at-box/im-chat-at-box.vue

@@ -0,0 +1,189 @@
+<template>
+	<u-popup ref="popup" mode="bottom" @open="onChange" @close="onChange">
+		<view class="chat-at-box">
+			<view class="chat-at-top">
+				<view class="chat-at-tip"> 选择要提醒的人</view>
+				<button class="chat-at-btn" size="mini" @click="onClean()">清空 </button>
+				<button class="chat-at-btn" size="mini" @click="onOk()">确定({{ atUserIds.length }})
+				</button>
+			</view>
+			<scroll-view v-show="atUserIds.length > 0" scroll-x="true" scroll-left="120">
+				<view class="at-user-items">
+					<view v-for="m in checkedMembers" class="at-user-item" :key="m.userId">
+						<head-image :name="m.showNickName" :url="m.headImage" size="mini"></head-image>
+					</view>
+				</view>
+			</scroll-view>
+			<view class="search-bar">
+				<u-search v-model="searchText" :show-action="false" shape="round" placeholder="搜索"></u-search>
+			</view>
+			<view class="member-items">
+				<virtual-scroller :items="memberItems">
+					<template v-slot="{ item }">
+						<view class="member-item" @click="onSwitchChecked(item)">
+							<head-image :name="item.showNickName" :online="item.online" :url="item.headImage"
+								size="small"></head-image>
+							<view class="member-name">{{ item.showNickName }}</view>
+							<radio :checked="item.checked" :disabled="item.locked"
+								@click.stop="onSwitchChecked(item)" />
+						</view>
+					</template>
+				</virtual-scroller>
+			</view>
+		</view>
+	</u-popup>
+</template>
+
+<script setup lang="ts">
+import { GroupMember } from '../../libs';
+
+interface Props {
+	ownerId?: number;
+	members?: any[];
+}
+
+interface Emits {
+	(e: 'complete', userIds: number[]): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	ownerId: 0,
+	members: () => []
+});
+
+const emit = defineEmits<Emits>();
+
+const searchText = ref("");
+const showMembers = ref<GroupMember[]>([]);
+const popup = ref()
+
+const init = (userId: number, atUserIds: number[]) => {
+	showMembers.value = [];
+	// const userId = useUserStore().userInfo.id;
+
+	if (props.ownerId === userId) {
+		showMembers.value.push({
+			userId: -1,
+			showNickName: "全体成员"
+		});
+	}
+
+	props.members.forEach((m: GroupMember) => {
+		if (!m.quit && m.userId !== userId) {
+			m.checked = atUserIds.includes(m.userId);
+			showMembers.value.push(m);
+		}
+	});
+};
+
+const open = () => {
+	// 需要根据实际的 popup 引用调整
+	popup.value.open();
+};
+
+const onSwitchChecked = (member: GroupMember) => {
+	member.checked = !member.checked;
+};
+
+const onClean = () => {
+	showMembers.value.forEach((m) => {
+		m.checked = false;
+	});
+};
+
+const onOk = () => {
+	popup.value.close();
+};
+
+const onChange = (e: any) => {
+	if (!e.show) {
+		emit("complete", atUserIds.value);
+	}
+};
+
+const atUserIds = computed(() => {
+	return showMembers.value.filter(m => m.checked).map(m => m.userId);
+});
+
+const checkedMembers = computed(() => {
+	return showMembers.value.filter(m => m.checked);
+});
+
+const memberItems = computed(() => {
+	return showMembers.value.filter(m => m.showNickName.includes(searchText.value));
+});
+
+defineExpose({
+	init,
+	open
+})
+</script>
+
+<style lang="scss" scoped>
+.chat-at-box {
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	background-color: white;
+	padding: 10rpx;
+	//border-radius: 15rpx;
+
+	.chat-at-top {
+		display: flex;
+		align-items: center;
+		height: 70rpx;
+		padding: 10rpx;
+
+		.chat-at-tip {
+			flex: 1;
+		}
+
+		.chat-at-btn {
+			margin-left: 10rpx;
+		}
+	}
+
+
+	.at-user-items {
+		display: flex;
+		align-items: center;
+		height: 90rpx;
+
+		.at-user-item {
+			padding: 3rpx;
+		}
+	}
+
+
+
+	.member-items {
+		position: relative;
+		flex: 1;
+		overflow: hidden;
+
+		.member-item {
+			height: 110rpx;
+			display: flex;
+			position: relative;
+			padding: 0 30rpx;
+			align-items: center;
+			background-color: white;
+			white-space: nowrap;
+			margin-bottom: 1px;
+
+			&:hover {
+				background-color: $im-bg-active;
+			}
+
+			.member-name {
+				flex: 1;
+				padding-left: 20rpx;
+				font-size: $im-font-size;
+				line-height: 60rpx;
+				white-space: nowrap;
+				overflow: hidden;
+			}
+		}
+	}
+}
+</style>

package/components/im-chat-group-readed/im-chat-group-readed.vue

@@ -0,0 +1,172 @@
+<template>
+	<u-popup ref="popup" mode="bottom">
+		<view class="chat-group-readed">
+			<view class="uni-padding-wrap uni-common-mt">
+				<u-tabs :current="current" :list="items" :show-bar="false" @change="onClickItem"></u-tabs>
+			</view>
+			<view class="content">
+				<view v-if="current === 0">
+					<virtual-scroller :items="readedMembers">
+						<template v-slot="{ item }">
+							<view class="member-item">
+								<head-image :name="item.showNickName" :online="item.online" :url="item.headImage"
+									:size="90"></head-image>
+								<view class="member-name">{{ item.showNickName }}</view>
+							</view>
+						</template>
+					</virtual-scroller>
+				</view>
+				<view v-if="current === 1">
+					<virtual-scroller :items="unreadMembers">
+						<template v-slot="{ item }">
+							<view class="member-item">
+								<head-image :name="item.showNickName" :online="item.online" :url="item.headImage"
+									:size="90"></head-image>
+								<view class="member-name">{{ item.showNickName }}</view>
+							</view>
+						</template>
+					</virtual-scroller>
+				</view>
+			</view>
+		</view>
+	</u-popup>
+</template>
+
+<script setup lang="ts">
+import { Chat, Message } from '../../libs';
+
+interface Props {
+	msgInfo: {
+		groupId: number;
+		id: number;
+		sendId: number;
+	};
+	groupMembers: any[];
+}
+
+interface Member {
+	userId: number;
+	quit?: boolean;
+}
+
+const props = defineProps<Props>();
+
+const items = ref([{ name: '已读' }, { name: '未读' }]);
+const current = ref(0);
+const readedMembers = ref<Member[]>([]);
+const unreadMembers = ref<Member[]>([]);
+const popup = ref()
+
+interface Emits {
+	(e: 'loaded', chatInfo: Chat, msgInfo: Message): void
+}
+
+const emit = defineEmits<Emits>()
+
+/**
+ * @param userIds 已读用户IDs
+*/
+const open = (userIds: number[]) => {
+	popup.value.open();
+	loadReadedUser(userIds);
+};
+
+const loadReadedUser = async (userIds: number[]) => {
+	readedMembers.value = [];
+	unreadMembers.value = [];
+
+	try {
+		// TODO:组件化
+		// const response = await requestx.get<number[]>(`/message/group/findReadedUsers?groupId=${props.msgInfo.groupId}&messageId=${props.msgInfo.id}`);
+		// const userIds = response.data;
+
+		props.groupMembers.forEach((member: Member) => {
+			// 发送者和已退群的不显示
+			if (member.userId === props.msgInfo.sendId || member.quit) {
+				return;
+			}
+			// 区分已读还是未读
+			if (userIds.find((userId: number) => member.userId === userId)) {
+				readedMembers.value.push(member);
+			} else {
+				unreadMembers.value.push(member);
+			}
+		});
+
+		items.value[0] = { name: `已读(${readedMembers.value.length})` };
+		items.value[1] = { name: `未读(${unreadMembers.value.length})` };
+
+		const chatInfo: Chat = {
+			type: 'GROUP',
+			targetId: props.msgInfo.groupId,
+			showName: '',
+			headImage: '',
+			isDnd: false,
+			lastContent: '',
+			unreadCount: 0,
+			hotMinIdx: 0,
+			readedMessageIdx: 0,
+			messages: [],
+			atMe: false,
+			atAll: false,
+			stored: false,
+			delete: false
+		};
+
+		const msgInfo: Message = {
+			id: props.msgInfo.id,
+			groupId: props.msgInfo.groupId,
+			readedCount: readedMembers.value.length,
+			type: 0,
+			content: ''
+		};
+
+		// TODO:组件化
+		// 更新已读人数
+		// chatStore.updateMessage(msgInfo, chatInfo);
+		emit('loaded', chatInfo, msgInfo)
+	} catch (error) {
+		console.error('加载已读用户失败:', error);
+	}
+};
+
+const onClickItem = (e: any) => {
+	current.value = e.currentIndex;
+};
+
+defineExpose({
+	open
+})
+</script>
+
+<style lang="scss" scoped>
+.chat-group-readed {
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	background-color: white;
+	padding: 10rpx;
+
+	.member-item {
+		height: 120rpx;
+		display: flex;
+		position: relative;
+		padding: 0 30rpx;
+		align-items: center;
+		background-color: white;
+		white-space: nowrap;
+
+		.member-name {
+			flex: 1;
+			padding-left: 20rpx;
+			font-size: 30rpx;
+			font-weight: 600;
+			line-height: 60rpx;
+			white-space: nowrap;
+			overflow: hidden;
+		}
+	}
+
+
+}
+</style>

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

@@ -0,0 +1,215 @@
+<template>
+	<view class="chat-item" :class="active ? 'active' : ''">
+		<!--rich-text中的表情包会屏蔽事件，所以这里用一个遮罩层捕获点击事件 -->
+		<view class="mask" @tap="showChatBox()"></view>
+		<view class="left">
+			<head-image :url="chat.headImage" :name="chat.showName" :online="online"></head-image>
+		</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 datetime from '../../utils/datetime'
+import dom from '../../utils/dom'
+import messageType from '../../utils/messageType'
+import { MESSAGE_TYPE } from '../../utils/enums'
+import emoji from '../../utils/emoji';
+
+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;
+			}
+		}
+	}
+}
+</style>