im-ui-mobile 0.0.43 → 0.0.45

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

@@ -0,0 +1,303 @@
+<template>
+	<view class="chat-record">
+		<view class="chat-record-bar" :class="{ recording: recording }" id="chat-record-bar" @click.stop=""
+			@touchstart.prevent="onStartRecord" @touchmove.prevent="onTouchMove" @touchend.prevent="onEndRecord">
+			{{ recording ? '正在录音' : '长按 说话' }}
+		</view>
+		<view v-if="recording" class="chat-record-window" :style="recordWindowStyle">
+			<view class="rc-wave">
+				<text class="note" style="--d: 0"></text>
+				<text class="note" style="--d: 1"></text>
+				<text class="note" style="--d: 2"></text>
+				<text class="note" style="--d: 3"></text>
+				<text class="note" style="--d: 4"></text>
+				<text class="note" style="--d: 5"></text>
+				<text class="note" style="--d: 6"></text>
+			</view>
+			<view class="rc-tip">{{ recordTip }}</view>
+			<view class="cancel-btn" @click="onCancel">
+				<u-icon name="close" :color="moveToCancel ? 'red' : 'black'" :size="moveToCancel ? 45 : 40"></u-icon>
+			</view>
+			<view class="opt-tip" :class="moveToCancel ? 'red' : 'black'">{{ moveToCancel ? '松手取消' : '松手发送,上划取消' }}
+			</view>
+		</view>
+
+	</view>
+</template>
+
+<script setup lang="ts">
+import recorderApp from '../../utils/recorderApp';
+import recorderH5 from '../../utils/recorderH5';
+
+const recording = ref(false);
+const moveToCancel = ref(false);
+const recordBarTop = ref(0);
+const druation = ref(0);
+const rcTimer = ref<number | null>(null);
+
+const getRecorder = () => {
+	// #ifdef H5
+	return recorderH5
+	// #endif
+
+	// #ifndef H5
+	return recorderApp
+	// #endif
+}
+
+let rc = getRecorder()
+
+
+interface Emits {
+	(e: 'send', data: any): void;
+}
+const emit = defineEmits<Emits>();
+
+const onTouchMove = (e: any) => {
+	const moveY = e.touches[0].clientY;
+	moveToCancel.value = moveY < recordBarTop.value - 40;
+};
+
+const onCancel = () => {
+	if (recording.value) {
+		moveToCancel.value = true;
+		onEndRecord();
+	}
+};
+
+const onStartRecord = async () => {
+	/* 用户第一次使用语音会唤醒录音权限请求，此时会导致@touchend失效，
+	   一直处于录音状态，这里允许用户再次点击发送语音并结束录音 */
+	if (recording.value) {
+		return;
+	}
+	console.log("开始录音");
+	moveToCancel.value = false;
+	// await initRecordBar();
+
+	// if (!rc.checkIsEnable()) {
+	// 	return;
+	// }
+
+	rc.start().then(() => {
+		recording.value = true;
+		console.log("开始录音成功");
+		// 开始计时
+		startTimer();
+	}).catch((e) => {
+		console.log("录音失败" + JSON.stringify(e));
+		uni.showToast({
+			title: "录音失败",
+			icon: "none"
+		});
+	});
+};
+
+const onEndRecord = () => {
+	if (!recording.value) {
+		return;
+	}
+	recording.value = false;
+	// 停止计时
+	stopTimer();
+	// 停止录音
+	rc.close();
+	// 触屏位置是否移动到了取消区域
+	if (moveToCancel.value) {
+		console.log("录音取消");
+		return;
+	}
+	// 大于1秒才发送
+	if (druation.value <= 1) {
+		uni.showToast({
+			title: "说话时间太短",
+			icon: 'none'
+		});
+		return;
+	}
+
+	rc.upload().then((data) => {
+		emit("send", data);
+	}).catch((e) => {
+		uni.showToast({
+			title: e,
+			icon: 'none'
+		});
+	});
+};
+
+const startTimer = () => {
+	druation.value = 0;
+	stopTimer();
+	rcTimer.value = Number(setInterval(() => {
+		druation.value++;
+		// 大于60s,直接结束
+		if (druation.value >= 60) {
+			onEndRecord();
+		}
+	}, 1000));
+};
+
+const stopTimer = () => {
+	if (rcTimer.value) {
+		clearInterval(rcTimer.value);
+		rcTimer.value = null;
+	}
+};
+
+// const initRecordBar = () => {
+// 	const query = uni.createSelectorQuery().in(getCurrentInstance());
+// 	query.select('#chat-record-bar').boundingClientRect((rect: any) => {
+// 		// 顶部高度位置
+// 		recordBarTop.value = rect.top;
+// 	}).exec();
+// };
+
+/**
+ * 初始化录音条位置信息
+ * 兼容微信小程序和H5环境
+ */
+const initRecordBar = (): Promise<{ top: number; height: number; width: number }> => {
+	return new Promise((resolve, reject) => {
+		// 获取组件实例
+		const instance = getCurrentInstance()
+		if (!instance) {
+			reject(new Error('无法获取组件实例'))
+			return
+		}
+
+		// 创建选择器查询
+		const query = uni.createSelectorQuery().in(instance)
+
+		query.select('#chat-record-bar').boundingClientRect((rect: any) => {
+			if (rect) {
+				const positionInfo = {
+					top: rect.top || 0,
+					height: rect.height || 0,
+					width: rect.width || 0,
+					left: rect.left || 0,
+					right: rect.right || 0,
+					bottom: rect.bottom || 0
+				}
+				resolve(positionInfo)
+			} else {
+				reject(new Error('无法获取录音条位置信息'))
+			}
+		}).exec()
+	})
+}
+
+const recordWindowStyle = computed(() => {
+	const windowHeight = uni.getWindowInfo().windowHeight;
+	const bottom = windowHeight - recordBarTop.value + 12;
+	return `bottom:${bottom}px;`;
+});
+
+const recordTip = computed(() => {
+	if (druation.value > 50) {
+		return `${60 - druation.value}s后将停止录音`;
+	}
+	return `录音时长:${druation.value}s`;
+});
+
+onUnmounted(() => {
+	stopTimer();
+	recording.value = false;
+});
+</script>
+
+<style lang="scss" scoped>
+.chat-record {
+	.rc-wave {
+		display: flex;
+		align-items: flex-end;
+		justify-content: center;
+		position: relative;
+		height: 80rpx;
+
+		.note {
+			background: linear-gradient(to top, $im-color-primary-light-1 0%, $im-color-primary-light-6 100%);
+			width: 4px;
+			height: 50%;
+			border-radius: 5rpx;
+			margin-right: 4px;
+			animation: loading 0.5s infinite linear;
+			animation-delay: calc(0.1s * var(--d));
+
+			@keyframes loading {
+				0% {
+					background-image: linear-gradient(to right, $im-color-primary-light-1 0%, $im-color-primary-light-6 100%);
+					height: 20%;
+					border-radius: 5rpx;
+				}
+
+				50% {
+					background-image: linear-gradient(to top, $im-color-primary-light-1 0%, $im-color-primary-light-6 100%);
+					height: 80%;
+					border-radius: 5rpx;
+				}
+
+				100% {
+					background-image: linear-gradient(to top, $im-color-primary-light-1 0%, $im-color-primary-light-6 100%);
+					height: 20%;
+					border-radius: 5rpx;
+				}
+			}
+		}
+	}
+
+	.chat-record-bar {
+		padding: 10rpx;
+		margin: 10rpx;
+		border-radius: 10rpx;
+		text-align: center;
+		box-shadow: $im-box-shadow;
+
+		&.recording {
+			background-color: $im-color-primary;
+			color: #fff;
+		}
+	}
+
+	.chat-record-window {
+		position: fixed;
+		left: 0;
+		right: 0;
+		height: 360rpx;
+		background-color: rgba(255, 255, 255, 0.95);
+		padding: 30rpx;
+
+		.icon-microphone {
+			text-align: center;
+			font-size: 80rpx;
+			padding: 10rpx;
+
+		}
+
+		.rc-tip {
+			text-align: center;
+			font-size: $im-font-size-small;
+			color: $im-text-color-light;
+			margin-top: 20rpx;
+		}
+
+		.cancel-btn {
+			text-align: center;
+			margin-top: 40rpx;
+			height: 80rpx;
+
+		}
+
+		.opt-tip {
+			text-align: center;
+			font-size: 30rpx;
+			padding: 20rpx;
+		}
+
+		.red {
+			color: $im-color-danger !important;
+		}
+
+	}
+}
+</style>

package/components/im-file-upload/im-file-upload.vue

@@ -0,0 +1,300 @@
+<template>
+	<view v-if="visible" class="u-upload-wrapper">
+		<u-upload ref="uploadRef" :max-count="props.maxCount" :max-size="props.maxSize" :size-type="props.sizeType"
+			:source-type="props.sourceType" :deletable="props.deletable" :preview-full-image="props.previewFullImage"
+			:multiple="props.multiple" :disabled="props.disabled" :custom-btn="props.customBtn"
+			:show-progress="props.showProgress" :upload-text="props.uploadText" :width="props.width"
+			:height="props.height" @after-read="onAfterRead" @delete="onDelete" @oversize="onOversize">
+			<!-- 自定义上传按钮 -->
+			<slot></slot>
+		</u-upload>
+	</view>
+</template>
+
+<script setup lang="ts">
+// 定义类型
+interface UploadFile {
+	url: string
+	name?: string
+	size?: number
+	type?: string
+	progress?: number
+	status?: 'uploading' | 'success' | 'error'
+	response?: any
+}
+
+interface AfterReadFile {
+	name: string
+	size: number
+	thumb: string
+	type: string
+	url: string
+}
+
+interface UploadProps {
+	// 文件列表
+	modelValue?: UploadFile[]
+	// 最大上传数量
+	maxCount?: number
+	// 单个文件大小限制（字节）
+	maxSize?: number
+	// 文件大小选择 ['original', 'compressed']
+	sizeType?: string[]
+	// 文件来源 ['album', 'camera']
+	sourceType?: string[]
+	// 是否显示删除按钮
+	deletable?: boolean
+	// 是否预览完整图片
+	previewFullImage?: boolean
+	// 是否多选
+	multiple?: boolean
+	// 是否禁用
+	disabled?: boolean
+	// 是否使用自定义按钮
+	customBtn?: boolean
+	// 是否显示进度条
+	showProgress?: boolean
+	// 上传文字提示
+	uploadText?: string
+	// 图片宽度
+	width?: number | string
+	// 图片高度
+	height?: number | string
+	// 上传地址
+	action?: string
+	// 上传字段名
+	name?: string
+	// 请求头
+	headers?: Record<string, string>
+	// 附加数据
+	data?: Record<string, any>
+	// 是否自动上传
+	autoUpload?: boolean,
+	// 令牌
+	token?: string
+}
+
+interface UploadEmits {
+	(e: 'update:modelValue', files: UploadFile[]): void
+	(e: 'change', files: UploadFile[]): void
+	(e: 'before', file: UploadFile): void
+	(e: 'success', file: UploadFile, response: any): void
+	(e: 'fail', file: UploadFile, error: any): void
+	(e: 'progress', file: UploadFile, progress: number): void
+	(e: 'delete', file: UploadFile, index: number): void
+	(e: 'oversize', file: UploadFile): void
+}
+
+// Props 和 Emits
+const props = withDefaults(defineProps<UploadProps>(), {
+	modelValue: () => [],
+	maxCount: 9,
+	maxSize: 10 * 1024 * 1024, // 10MB
+	sizeType: () => ['original', 'compressed'],
+	sourceType: () => ['album', 'camera'],
+	deletable: true,
+	previewFullImage: true,
+	multiple: true,
+	disabled: false,
+	customBtn: false,
+	showProgress: true,
+	uploadText: '',
+	width: 50,
+	height: 50,
+	action: '/file/upload',
+	name: 'file',
+	headers: () => ({
+		'Authorization': `Bearer xxx`,
+		'AccessToken': 'xxx',
+		'Content-Type': 'multipart/form-data'
+	}),
+	data: () => ({}),
+	autoUpload: true,
+	token: ''
+})
+
+const emit = defineEmits<UploadEmits>()
+
+// 响应式数据
+const uploadRef = ref()
+const fileList = ref<UploadFile[]>([])
+const uploadingFiles = reactive(new Map<string, UploadFile>())
+const fileMap = ref(new Map<string, any>());
+const visible = ref(true)
+
+// 监听 modelValue 变化
+watch(() => props.modelValue, (newVal) => {
+	fileList.value = [...newVal]
+}, { immediate: true, deep: true })
+
+// 文件选择后读取
+const onAfterRead = async ({ file }: any) => {
+	const files: AfterReadFile[] = file
+
+	for (const item of files) {
+		// before
+		if (!fileMap.value.has(item.name)) {
+			emit('before', item)
+			fileMap.value.set(item.name, item);
+		}
+
+		const uploadFile: UploadFile = {
+			url: item.url,
+			name: item.name,
+			size: item.size,
+			type: item.type,
+			progress: 0,
+			status: 'uploading'
+		}
+
+		const fileId = generateFileId()
+		uploadingFiles.set(fileId, uploadFile)
+
+		// 添加到文件列表
+		fileList.value.push(uploadFile)
+		emitFileChange()
+
+		if (props.autoUpload) {
+			await uploadFileToServer(item, uploadFile, fileId)
+		} else {
+			uploadFile.status = 'success'
+			uploadingFiles.delete(fileId)
+		}
+	}
+}
+
+// 上传文件到服务器
+const uploadFileToServer = (file: AfterReadFile, uploadFile: UploadFile, fileId: string): Promise<void> => {
+	return new Promise((resolve) => {
+		if (!props.action) {
+			// 如果没有上传地址，直接标记为成功
+			uploadFile.status = 'success'
+			uploadFile.response = { message: 'No upload action provided' }
+			uploadingFiles.delete(fileId)
+			emit('success', file, uploadFile)
+			resolve()
+			return
+		}
+
+		const headers = {
+			'Authorization': `Bearer ${props.token}`,
+			'AccessToken': props.token,
+			'Content-Type': 'multipart/form-data'
+		}
+
+		uni.uploadFile({
+			url: props.action,
+			filePath: file.url,
+			name: props.name,
+			header: headers,
+			// formData: props.data,
+			success: (res) => {
+				uploadFile.response = res
+
+				try {
+					uploadFile.status = 'success'
+					uploadFile.progress = 100
+
+
+					fileList.value.splice(fileList.value.length - 1, 1, {
+						...file,
+						...res,
+						status: 'success'
+					})
+					emit('success', file, JSON.parse(res.data).data)
+				} catch (error) {
+					uploadFile.status = 'error'
+					console.error(error)
+					emit('fail', file, error)
+				}
+
+				uploadingFiles.delete(fileId)
+				resolve()
+			},
+			fail: (error) => {
+				uploadFile.status = 'error'
+				console.error(error)
+				uploadingFiles.delete(fileId)
+				emit('fail', file, error)
+				resolve()
+			}
+		})
+	})
+}
+
+// 删除文件
+const onDelete = (event: any) => {
+	const { index } = event
+	const deletedFile = fileList.value[index]
+
+	fileList.value.splice(index, 1)
+	emitFileChange()
+	emit('delete', deletedFile, index)
+}
+
+// 文件大小超出限制
+const onOversize = (event: any) => {
+	const file = event
+	emit('oversize', file)
+	uni.showToast({
+		title: `文件大小不能超过 ${props.maxSize / 1024 / 1024}MB`,
+		icon: 'none'
+	})
+}
+
+// 生成文件ID
+const generateFileId = (): string => {
+	return Date.now() + '-' + Math.random().toString(36).substr(2, 9)
+}
+
+// 触发文件变化事件
+const emitFileChange = () => {
+	emit('update:modelValue', fileList.value)
+	emit('change', fileList.value)
+}
+
+// 手动上传
+const submit = (): Promise<UploadFile[]> => {
+	return new Promise((resolve) => {
+		const pendingFiles = fileList.value.filter(file => file.status !== 'success')
+
+		if (pendingFiles.length === 0) {
+			resolve(fileList.value)
+			return
+		}
+
+		// 这里可以实现批量上传逻辑
+		Promise.all(pendingFiles.map(file => {
+			// 重新上传逻辑
+			return Promise.resolve(file)
+		})).then(() => {
+			resolve(fileList.value)
+		})
+	})
+}
+
+// 清空文件列表
+const clearFiles = () => {
+	fileList.value = []
+	uploadingFiles.clear()
+	emitFileChange()
+}
+
+// 获取文件列表
+const getFiles = (): UploadFile[] => {
+	return fileList.value
+}
+
+// 隐藏
+const hide = () => {
+	visible.value = false
+}
+
+// 暴露方法给父组件
+defineExpose({
+	submit,
+	clearFiles,
+	getFiles,
+	hide
+})
+</script>

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

@@ -0,0 +1,74 @@
+<template>
+	<view class="friend-item" @click="showFriendInfo()">
+		<head-image :name="friend.nickName" :online="friend.online" :url="friend.headImage" size="small"></head-image>
+		<view class="friend-info">
+			<view class="friend-name">{{ friend.nickName }}</view>
+			<view class="friend-online">
+				<image v-show="friend.onlineWeb" class="online" src="/static/image/online_web.png" title="电脑设备在线" />
+				<image v-show="friend.onlineApp" class="online" src="/static/image/online_app.png" title="移动设备在线" />
+			</view>
+			<slot></slot>
+		</view>
+	</view>
+</template>
+
+<script setup lang="ts">
+interface Props {
+	friend?: any;
+	detail?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	detail: true
+});
+
+const showFriendInfo = () => {
+	if (props.detail) {
+		uni.navigateTo({
+			url: "/pages/common/user-info?id=" + props.friend.id
+		});
+	}
+};
+</script>
+
+<style scope lang="scss">
+.friend-item {
+	height: 90rpx;
+	display: flex;
+	margin-bottom: 1rpx;
+	position: relative;
+	padding: 10rpx;
+	padding-left: 20rpx;
+	align-items: center;
+	background-color: white;
+	white-space: nowrap;
+
+	&:hover {
+		background-color: $im-bg;
+	}
+
+	.friend-info {
+		flex: 1;
+		display: flex;
+		padding-left: 20rpx;
+		text-align: left;
+
+		.friend-name {
+			flex: 1;
+			font-size: $im-font-size;
+			white-space: nowrap;
+			overflow: hidden;
+		}
+
+		.friend-online {
+			margin-top: 4rpx;
+
+			.online {
+				padding-right: 4rpx;
+				width: 24rpx;
+				height: 24rpx;
+			}
+		}
+	}
+}
+</style>