支持回显emoji表情

im-admin-ui/src/components/im/ImMessageContent/index.vue

@@ -1,10 +1,12 @@
 <template>
 	<div>
-		<div v-if="message.type == 1" >
+		<div v-if="message.type == 1">
-            <image-preview :src="JSON.parse(message.content).thumbUrl" :full-src="JSON.parse(message.content).originUrl" :width="40" :height="40" />
+			<image-preview :src="JSON.parse(message.content).thumbUrl" :full-src="JSON.parse(message.content).originUrl"
+				:width="40" :height="40" />
 		</div>
 		<div v-else-if="message.type == 2">
-			<el-link type="primary" :href="JSON.parse(message.content).url" :download="JSON.parse(message.content).name" target="_blank">
+			<el-link type="primary" :href="JSON.parse(message.content).url" :download="JSON.parse(message.content).name"
+				target="_blank">
 				{{ JSON.parse(message.content).name }}
 			</el-link>
 		</div>
@@ -12,16 +14,19 @@
 			<audio style="height: 40px;" controls :src="JSON.parse(message.content).url"></audio>
 		</div>
 		<div v-else-if="message.type == 4">
-			<video style="max-height: 120px;max-width: 200px;" controls :poster="JSON.parse(message.content).coverUrl" :src="JSON.parse(message.content).videoUrl"></video>
+			<video style="max-height: 120px;max-width: 200px;" controls :poster="JSON.parse(message.content).coverUrl"
+				:src="JSON.parse(message.content).videoUrl"></video>
 		</div>
-		<div  v-else>
+		<div v-else class="message-text" v-html="transform(replaceURLWithHTMLLinks(html2Escape(message.content)))">
-			{{ message.content }}
 		</div>
 	</div>
 </template>
 
 <script setup lang="ts" name="ImMessageContent">
-import { ref} from 'vue'
+import { ref } from 'vue'
+import { transform } from "@/utils/emotion"
+import { replaceURLWithHTMLLinks } from "@/utils/url"
+import { html2Escape } from "@/utils/str"
 
 const props = defineProps({
 	message: {
@@ -32,8 +37,8 @@ const props = defineProps({
 </script>
 
 <style scoped>
- .link {
+.link {
 	color: inherit;
 	text-decoration: none;
- }
+}
 </style>

im-admin-ui/src/utils/emotion.ts

@@ -0,0 +1,26 @@
+const emoTextList = ['憨笑', '媚眼', '开心', '坏笑', '可怜', '爱心', '笑哭', '拍手', '惊喜', '打气',
+	'大哭', '流泪', '饥饿', '难受', '健身', '示爱', '色色', '眨眼', '暴怒', '惊恐',
+	'思考', '头晕', '大吐', '酷笑', '翻滚', '享受', '鼻涕', '快乐', '雀跃', '微笑',
+	'贪婪', '红心', '粉心', '星星', '大火', '眼睛', '音符', "叹号", "问号", "绿叶",
+	"燃烧", "喇叭", "警告", "信封", "房子", "礼物", "点赞", "举手", "喝彩", "点头",
+	"摇头", "偷瞄", "庆祝", "疾跑", "打滚", "惊吓", "起跳"
+];
+
+
+// 将匹配结果替换表情图片
+let textToImg = (emoText) => {
+	let word = emoText.replace(/\#|\;/gi, '');
+
+	let idx = emoTextList.indexOf(word);
+	if (idx == -1) {
+		return emoText;
+	}
+
+	let url = new URL(`../assets/emoji/${idx}.gif`, import.meta.url).href;
+	return `<img src="${url}" style="width:20px;heigt:20px;" />`
+}
+
+
+export const transform = (content) => {
+	return content.replace(/\#[\u4E00-\u9FA5]{1,3}\;/gi, (text) => textToImg(text));
+}

im-admin-ui/src/utils/str.ts

@@ -0,0 +1,10 @@
+export const html2Escape = (strText) => {
+	return strText.replace(/[<>&"]/g, function(c) {
+		return {
+			'<': '&lt;',
+			'>': '&gt;',
+			'&': '&amp;',
+			'"': '&quot;'
+		} [c];
+	});
+}

im-admin-ui/src/utils/url.ts

@@ -0,0 +1,11 @@
+export const replaceURLWithHTMLLinks = (content) => {
+	// 使用正则表达式匹配更广泛的URL格式(此正则由deepseek生成)
+	const urlRegex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|]|\bwww\.[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
+	return content.replace(urlRegex, (url) => {
+		// 如果URL不以http(s)://开头，则添加http://前缀
+		if (!url.startsWith("http")) {
+			url = "http://" + url;
+		}
+		return `<a href="${url}" target="_blank" style="color: #5359dc;text-decoration: underline;">${url}</a>`;
+	});
+}