im-ui-mobile 0.0.96 → 0.0.99

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

@@ -1,99 +1,99 @@
-<template>
-	<view class="nav-bar">
-		<!-- #ifdef APP-PLUS -->
-		<view style="height: var(--status-bar-height)"></view>
-		<!-- #endif -->
-		<view class="nav-bar-content">
-			<!-- #ifndef MP-WEIXIN -->
-			<view class="back" @click="handleBackClick" v-if="back">
-				<u-icon name="arrow-left" :size="iconFontSize"></u-icon>
-			</view>
-			<!-- #endif -->
-			<view class="title" v-if="title">
-				<slot></slot>
-			</view>
-			<view class="btn">
-				<u-icon class="btn-item" v-if="search" name="search" :size="iconFontSize"
-					@click="$emit('search')"></u-icon>
-				<u-icon class="btn-item" v-if="add" name="plus" :size="iconFontSize" @click="$emit('add')"></u-icon>
-				<u-icon class="btn-item" v-if="more" name="more-dot-fill" :size="iconFontSize"
-					@click="$emit('more')"></u-icon>
-			</view>
-		</view>
-	</view>
-</template>
-
-<script setup lang="ts">
-interface Props {
-	back?: boolean;
-	title?: boolean;
-	search?: boolean;
-	add?: boolean;
-	more?: boolean;
-	iconFontSize?: number;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-	back: false,
-	title: true,
-	search: false,
-	add: false,
-	more: false,
-	iconFontSize: 24
-});
-
-const handleBackClick = () => {
-	uni.navigateBack({
-		delta: 1
-	});
-};
-</script>
-
-<style scoped lang="scss">
-.nav-bar {
-	background: $im-bg-linear;
-	position: fixed;
-	top: 0;
-	width: 100%;
-	color: $im-text-color;
-	border-bottom: 1px solid $im-border-light;
-	font-size: $im-font-size-large;
-	z-index: 99;
-
-	.nav-bar-content {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		box-sizing: border-box;
-		height: $im-nav-bar-height;
-
-		.title {}
-
-		.back {
-			position: absolute;
-			left: 0;
-			height: 100%;
-			display: flex;
-			align-items: center;
-			padding: 12px;
-			font-size: 22px;
-			box-sizing: border-box;
-		}
-
-		.btn {
-			position: absolute;
-			right: 0;
-			height: 100%;
-			display: flex;
-			padding: 12px;
-			align-items: center;
-			box-sizing: border-box;
-
-			.btn-item {
-				margin-left: 8px;
-			}
-		}
-	}
-
-}
+<template>
+	<view class="nav-bar">
+		<!-- #ifdef APP-PLUS -->
+		<view style="height: var(--status-bar-height)"></view>
+		<!-- #endif -->
+		<view class="nav-bar-content">
+			<!-- #ifndef MP-WEIXIN -->
+			<view class="back" @click="handleBackClick" v-if="back">
+				<u-icon name="arrow-left" :size="iconFontSize"></u-icon>
+			</view>
+			<!-- #endif -->
+			<view class="title" v-if="title">
+				<slot></slot>
+			</view>
+			<view class="btn">
+				<u-icon class="btn-item" v-if="search" name="search" :size="iconFontSize"
+					@click="$emit('search')"></u-icon>
+				<u-icon class="btn-item" v-if="add" name="plus" :size="iconFontSize" @click="$emit('add')"></u-icon>
+				<u-icon class="btn-item" v-if="more" name="more-dot-fill" :size="iconFontSize"
+					@click="$emit('more')"></u-icon>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup lang="ts">
+interface Props {
+	back?: boolean;
+	title?: boolean;
+	search?: boolean;
+	add?: boolean;
+	more?: boolean;
+	iconFontSize?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	back: false,
+	title: true,
+	search: false,
+	add: false,
+	more: false,
+	iconFontSize: 24
+});
+
+const handleBackClick = () => {
+	uni.navigateBack({
+		delta: 1
+	});
+};
+</script>
+
+<style scoped lang="scss">
+.nav-bar {
+	background: $im-bg-linear;
+	position: fixed;
+	top: 0;
+	width: 100%;
+	color: $im-text-color;
+	border-bottom: 1px solid $im-border-light;
+	font-size: $im-font-size-large;
+	z-index: 99;
+
+	.nav-bar-content {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		box-sizing: border-box;
+		height: $im-nav-bar-height;
+
+		.title {}
+
+		.back {
+			position: absolute;
+			left: 0;
+			height: 100%;
+			display: flex;
+			align-items: center;
+			padding: 12px;
+			font-size: 22px;
+			box-sizing: border-box;
+		}
+
+		.btn {
+			position: absolute;
+			right: 0;
+			height: 100%;
+			display: flex;
+			padding: 12px;
+			align-items: center;
+			box-sizing: border-box;
+
+			.btn-item {
+				margin-left: 8px;
+			}
+		}
+	}
+
+}
 </style>

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

@@ -1,175 +1,175 @@
-<template>
-	<u-popup ref="popup" mode="bottom">
-		<view class="read-receipt">
-			<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">
-					<im-virtual-scroller :items="readedMembers">
-						<template v-slot="{ item }">
-							<view class="member-item">
-								<im-avatar :name="item.showNickName" :online="item.online" :url="item.headImage"
-									:size="90" />
-								<view class="member-name">{{ item.showNickName }}</view>
-							</view>
-						</template>
-					</im-virtual-scroller>
-				</view>
-				<view v-if="current === 1">
-					<im-virtual-scroller :items="unreadMembers">
-						<template v-slot="{ item }">
-							<view class="member-item">
-								<im-avatar :name="item.showNickName" :online="item.online" :url="item.headImage"
-									:size="90" />
-								<view class="member-name">{{ item.showNickName }}</view>
-							</view>
-						</template>
-					</im-virtual-scroller>
-				</view>
-			</view>
-		</view>
-	</u-popup>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import ImAvatar from '../im-avatar/im-avatar.vue'
-import ImVirtualScroller from '../im-virtual-scroller/im-virtual-scroller.vue'
-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>
-.read-receipt {
-	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;
-		}
-	}
-
-
-}
+<template>
+	<u-popup ref="popup" mode="bottom">
+		<view class="read-receipt">
+			<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">
+					<im-virtual-list :data="readedMembers">
+						<template v-slot="{ item }">
+							<view class="member-item">
+								<im-avatar :name="item.showNickName" :online="item.online" :url="item.headImage"
+									:size="90" />
+								<view class="member-name">{{ item.showNickName }}</view>
+							</view>
+						</template>
+					</im-virtual-list>
+				</view>
+				<view v-if="current === 1">
+					<im-virtual-list :data="unreadMembers">
+						<template v-slot="{ item }">
+							<view class="member-item">
+								<im-avatar :name="item.showNickName" :online="item.online" :url="item.headImage"
+									:size="90" />
+								<view class="member-name">{{ item.showNickName }}</view>
+							</view>
+						</template>
+					</im-virtual-list>
+				</view>
+			</view>
+		</view>
+	</u-popup>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import ImAvatar from '../im-avatar/im-avatar.vue'
+import ImVirtualList from '../im-virtual-list/im-virtual-list.vue'
+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>
+.read-receipt {
+	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>