feat:聊天记录

2025-11-26 14:14:00 +08:00
1 parent 94ee3201e2
commit 6ee9a5692b
@@ -113,6 +113,10 @@ export enum DICT_TYPE {
  TERMINAL = 'terminal', // 终端
  DATE_INTERVAL = 'date_interval', // 数据间隔

+  // ========== CHAT 模块 ==========
+  // 聊天消息状态
+  CHAT_MSG_STATUS = 'chat_msg_status', 
+
  // ========== SYSTEM 模块 ==========
  SYSTEM_USER_SEX = 'system_user_sex',
  SYSTEM_MENU_TYPE = 'system_menu_type',
@@ -0,0 +1,11 @@
+export const html2Escape = (strText: any) => {
+	if (!strText) return ''
+	return strText.replace(/[<>&"]/g, function(c) {
+		return {
+			'<': '&lt;',
+			'>': '&gt;',
+			'&': '&amp;',
+			'"': '&quot;'
+		} [c];
+	});
+}
@@ -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>`;
+	});
+}
@@ -0,0 +1,47 @@
+<template>
+  <div class="h-[50px] flex justify-center items-center">
+    <div v-if="props.message.type == 1">
+      <preview-image :src="JSON.parse(props.message.content).thumbUrl"
+        :full-src="JSON.parse(props.message.content).originUrl" :width="80" :height="80" />
+    </div>
+    <div v-else-if="props.message.type == 2">
+      <el-link type="primary" :href="JSON.parse(props.message.content).url"
+        :download="JSON.parse(props.message.content).name" target="_blank">
+        {{ JSON.parse(props.message.content).name }}
+      </el-link>
+    </div>
+    <div v-else-if="props.message.type == 3">
+      <audio style="height: 30px;" controls :src="JSON.parse(props.message.content).url"></audio>
+    </div>
+    <div v-else-if="props.message.type == 4">
+      <video style="height: 50px;" controls :poster="JSON.parse(props.message.content).coverUrl"
+        :src="JSON.parse(props.message.content).videoUrl"></video>
+    </div>
+    <div v-else class="message-text" v-html="transform(replaceURLWithHTMLLinks(html2Escape(props.message.content)))">
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" name="ImMessageContent">
+import { transform } from "../tool/emotion"
+import { replaceURLWithHTMLLinks } from "@/utils/url"
+import { html2Escape } from "@/utils/str"
+
+const props = defineProps<{
+  message: any
+}>()
+</script>
+
+<style scoped>
+.link {
+  color: inherit;
+  text-decoration: none;
+}
+
+.message-text {
+  display: inline-flex;
+  align-items: center;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+</style>
@@ -1,24 +1,50 @@
 <template>
  <ContentWrap>
    <!-- 搜索工作栏 -->
-    <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
-      <el-button v-if="false" type="primary" plain @click="openForm('create')" v-hasPermi="['member:recent:create']">
-        <Icon icon="ep:plus" class="mr-5px" /> 新增
-      </el-button>
+    <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" label-width="70px">
+      <el-form-item label="发送用户" prop="sendUserName">
+        <el-input class="!w-160px" v-model="queryParams.sendUserName" placeholder="请输入发送用户" clearable
+          @keyup.enter="handleQuery" />
+      </el-form-item>
+      <el-form-item label="接收用户" prop="recvUserName">
+        <el-input class="!w-160px" v-model="queryParams.recvUserName" placeholder="请输入接收用户" clearable
+          @keyup.enter="handleQuery" />
+      </el-form-item>
+      <el-form-item label="发送内容" prop="center">
+        <el-input class="!w-160px" v-model="queryParams.center" placeholder="请输入发送内容" clearable
+          @keyup.enter="handleQuery" />
+      </el-form-item>
+      <el-form-item label="发送时间" prop="sendTimeList">
+        <el-date-picker v-model="queryParams.sendTimeList" type="daterange" value-format="YYYY-MM-DD" />
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery">
+          <Icon icon="ep:search" class="mr-5px" /> 搜索
+        </el-button>
+        <el-button @click="resetQuery">
+          <Icon icon="ep:refresh" class="mr-5px" /> 重置
+        </el-button>
+      </el-form-item>
    </el-form>
  </ContentWrap>
  <ContentWrap>
-    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
-      <el-table-column label="操作" align="center" min-width="80px">
+    <el-table v-loading="loading" :data="list" :stripe="true">
+      <el-table-column label="发送用户" align="center" width="150" prop="sendUserName" />
+      <el-table-column label="接收用户" align="center" width="150" prop="recvUserName" />
+      <el-table-column label="发送内容" align="center">
        <template #default="{ row }">
-          <el-button link type="primary" @click="openDetail(row.id)">
-            详情
-          </el-button>
+          <message-content :message="row" />
        </template>
      </el-table-column>
+      <el-table-column label="状态" align="center" prop="status">
+        <template #default="{ row }">
+          <dict-tag size="" :type="DICT_TYPE.CHAT_MSG_STATUS" :value="row.status" />
+        </template>
+      </el-table-column>
+      <el-table-column label="发送时间" align="center" prop="sendTime" :formatter="dateFormatter" width="180px" />
    </el-table>
    <!-- 分页 -->
-    <Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
+    <Pagination :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
      @pagination="getList" />
  </ContentWrap>
 </template>
@@ -26,29 +52,27 @@
 <script setup lang="ts">
 import { DICT_TYPE } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
-import download from '@/utils/download'
-import { RecentApi, RecentVO } from '@/api/member/recent'

-const message = useMessage()
-const { t } = useI18n()
+import * as privateMsgApi from '@/api/chat/private-msg'
+
+import MessageContent from './cmp/msg-content.vue'

 const loading = ref(true)
-const list = ref<RecentVO[]>([])
+const list = ref([])
 const total = ref(0)

-const queryParams = reactive({
-  pageNo: 1,
+const queryParams = reactive<any>({
+  pageNum: 1,
  pageSize: 10,
 })

 const queryFormRef = ref()
-const exportLoading = ref(false)

 /** 查询列表 */
 const getList = async () => {
  loading.value = true
  try {
-    const data = await RecentApi.getRecentPage(queryParams)
+    const data = await privateMsgApi.page(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
@@ -62,12 +86,6 @@ const openForm = (type: string, id?: number) => {
  formRef.value.open(type, id)
 }

-/** 打开会员详情 */
-const { push } = useRouter()
-const openDetail = (id: number) => {
-  push({ name: 'MemberRecentDetail', params: { id } })
-}
-
 /** 搜索按钮操作 */
 const handleQuery = () => {
  queryParams.pageNo = 1
@@ -80,16 +98,7 @@ const resetQuery = () => {
  handleQuery()
 }

-/** 删除按钮操作 */
-const handleDelete = async (id: number) => {
-  try {
-    // 删除的二次确认
-    await message.delConfirm()
-    // 发起删除
-    await RecentApi.deleteRecent(id)
-    message.success(t('common.delSuccess'))
-    // 刷新列表
-    await getList()
-  } catch { }
-}
+onMounted(() => {
+  getList()
+})
 </script>
@@ -0,0 +1,41 @@
+const emoTextList = ['憨笑', '媚眼', '开心', '坏笑', '可怜', '爱心', '笑哭', '拍手', '惊喜', '打气',
+	'大哭', '流泪', '饥饿', '难受', '健身', '示爱', '色色', '眨眼', '暴怒', '惊恐',
+	'思考', '头晕', '大吐', '酷笑', '翻滚', '享受', '鼻涕', '快乐', '雀跃', '微笑',
+	'贪婪', '红心', '粉心', '星星', '大火', '眼睛', '音符', "叹号", "问号", "绿叶",
+	"燃烧", "喇叭", "警告", "信封", "房子", "礼物", "点赞", "举手", "喝彩", "点头",
+	"摇头", "偷瞄", "庆祝", "疾跑", "打滚", "惊吓", "起跳"
+];
+
+
+// 预加载所有表情资源为 URL 映射（按文件名中的索引构建）
+const emojiModules = import.meta.glob('../../../../assets/emoji/*.gif', {
+  eager: true,
+  import: 'default'
+}) as Record<string, string>
+
+const emojiUrlMap: Record<number, string> = {}
+Object.entries(emojiModules).forEach(([path, url]) => {
+  const m = path.match(/\/(\d+)\.gif$/)
+  if (m) {
+    emojiUrlMap[Number(m[1])] = url
+  }
+})
+
+// 将匹配结果替换表情图片
+const textToImg = (emoText: string) => {
+  const word = emoText.replace(/\#|\;/gi, '')
+  const idx = emoTextList.indexOf(word)
+  if (idx === -1) {
+    return emoText
+  }
+  const src = emojiUrlMap[idx]
+  if (!src) {
+    return emoText
+  }
+  return `<img src="${src}" style="width:20px;height:20px;" />`
+}
+
+
+export const transform = (content: string) => {
+  return content.replace(/\#[\u4E00-\u9FA5]{1,3}\;/gi, (text) => textToImg(text))
+}
@@ -3,8 +3,14 @@
    <!-- 搜索工作栏 -->
    <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
      <el-form-item label="敏感词" prop="content">
-        <el-input v-model="queryParams.content" placeholder="请输入敏感词" clearable @keyup.enter="handleQuery"
-          class="!w-240px" />
+        <el-input class="!w-240px" v-model="queryParams.content" placeholder="请输入敏感词" clearable
+          @keyup.enter="handleQuery" />
+      </el-form-item>
+      <el-form-item label="状态" prop="enabled">
+        <el-select class="!w-240px" v-model="queryParams.enabled" placeholder="请选择状态">
+          <el-option label="启用" :value="true" />
+          <el-option label="停用" :value="false" />
+        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="handleQuery">
@@ -60,7 +66,7 @@ const loading = ref(true)
 const list = ref([])
 const total = ref(0)

-const queryParams = reactive({
+const queryParams = reactive<any>({
  content: '',
  enabled: null,
  pageNum: 1,