mom-pro2-before.git

¶Ô±ÈÐÂÎÄ¼þ
			@@ -0,0 +1,54 @@
			<!--
			æ¶æ¯ææ¬çæ®µæ¸²æï¼tip ææ¡ + TEXT æ°æ³¡å±ç¨
			- mention æ®µæç¹å» â openMentionUserInfoCardAtEvent
			- link æ®µæ¸²æ <a target="_blank">ï¼æµè§å¨é»è®¤è¡ä¸ºæå¼æ°æ ç¾
			- text æ®µåæ ·è¾åº
			-->
			<script lang="ts" setup>
			import type { TipSegment } from '#/views/im/utils/message'

			import { IM_AT_ALL_USER_ID } from '#/views/im/utils/constants'
			import { openMentionUserInfoCardAtEvent } from '#/views/im/utils/user'

			defineOptions({ name: 'ImTipSegments' })

			defineProps<{
			segments: TipSegment[]
			}>()

			/** @å¨ä½æåæ¯å¹¿æ mentionï¼ä»é«äº®éè²ï¼ä¸æå¯ç¹å»äº¤äº */
			function isClickableMention(segment: { userId: number }): boolean {
			return segment.userId !== IM_AT_ALL_USER_ID
			}

			/** mention æ®µç¹å»ï¼fallbackName å segment ææ¬ï¼é¿å friend / member é½æ¥ä¸å°æ¶å¼¹ç©º */
			function handleMentionClick(
			segment: { text: string; type: 'mention'; userId: number; },
			event: MouseEvent
			) {
			if (!isClickableMention(segment)) {
			return
			}
			openMentionUserInfoCardAtEvent(segment.userId, event, segment.text)
			}
			</script>

			<template>
			<template v-for="(segment, _index) in segments" :key="_index">
			<span
			v-if="segment.type === 'mention'"
			class="text-[#576b95]"
			:class="{ 'cursor-pointer hover:underline': isClickableMention(segment) }"
			@click.stop="handleMentionClick(segment, $event)"
			>{{ segment.text }}</span>
			<a
			v-else-if="segment.type === 'link'"
			:href="segment.href"
			target="_blank"
			rel="noopener noreferrer"
			class="text-[#576b95] hover:underline break-all"
			@click.stop
			>{{ segment.text }}</a>
			<span v-else>{{ segment.text }}</span>
			</template>
			</template>