yudao
/
admin-vue3
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vue3.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

✨ feat(im): 初始化表情包 v0.1：第二把 review

im
YunaiV 2026-05-06 20:50:55 +08:00
parent 1ed5dc7e6a
commit 8eebfd4744
14 changed files with 314 additions and 353 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
src/api/im/face/index.ts
View File

@ -1,70 +1,3 @@
import request from '@/config/axios'
// TODO @AI：分拆下文件！
/** 用户端表情包项（精简版） */
export interface ImFacePackUserItemVO {
id: number
url: string
name?: string
width: number
height: number
}
/** 用户端表情包 + 嵌套 items */
export interface ImFacePackUserVO {
id: number
name: string
iconUrl?: string
items: ImFacePackUserItemVO[]
}
/** 个人表情 */
export interface ImFaceUserItemVO {
id: number
url: string
name?: string
width: number
height: number
}
/** 添加个人表情请求 */
export interface ImFaceUserItemSaveReqVO {
url: string
name?: string
width: number
height: number
/** 来源消息编号（从消息「添加到表情」时传，自己上传不传） */
sourceMessageId?: number
}
// ==================== 系统表情包 ====================
/** 拉取所有启用的系统表情包（含表情列表） */
export const getFacePackList = () => {
return request.get<ImFacePackUserVO[]>({ url: '/im/face-pack/list' })
}
// ==================== 个人表情 ====================
/** 获取我的个人表情列表 */
export const getMyFaceUserItemList = () => {
return request.get<ImFaceUserItemVO[]>({ url: '/im/face-user-item/list' })
}
/** 添加个人表情；服务端对同 URL 幂等（直接返回旧 id） */
export const createFaceUserItem = (data: ImFaceUserItemSaveReqVO) => {
return request.post<number>({ url: '/im/face-user-item/create', data })
}
/** 删除个人表情 */
export const deleteFaceUserItem = (id: number) => {
return request.delete({ url: '/im/face-user-item/delete?id=' + id })
}
/** 批量删除个人表情 */
export const deleteFaceUserItemList = (ids: number[]) => {
return request.delete({
url: '/im/face-user-item/delete-list',
params: { ids: ids.join(',') }
})
}
// 用户端 IM 表情 API barrel 出口；按子目录（pack / userItem）二次拆分，调用方可用 `from '@/api/im/face'` 一次拿全
export * from './pack'
export * from './userItem'

23
src/api/im/face/pack/index.ts Normal file
View File

@ -0,0 +1,23 @@
import request from '@/config/axios'
/** 用户端表情包项（精简版） */
export interface ImFacePackUserItemVO {
id: number
url: string
name?: string
width: number
height: number
}
/** 用户端表情包 + 嵌套 items */
export interface ImFacePackUserVO {
id: number
name: string
iconUrl?: string
items: ImFacePackUserItemVO[]
}
/** 拉取所有启用的系统表情包（含表情列表） */
export const getFacePackList = () => {
return request.get<ImFacePackUserVO[]>({ url: '/im/face-pack/list' })
}

34
src/api/im/face/userItem/index.ts Normal file
View File

@ -0,0 +1,34 @@
import request from '@/config/axios'
/** 个人表情 */
export interface ImFaceUserItemVO {
id: number
url: string
name?: string
width: number
height: number
}
/** 添加个人表情请求 */
export interface ImFaceUserItemSaveReqVO {
url: string
name?: string
width: number
height: number
sourceMessageId?: number // 来源消息编号（从消息「添加到表情」时传，自己上传不传）
}
/** 获取我的个人表情列表 */
export const getFaceUserItemList = () => {
return request.get<ImFaceUserItemVO[]>({ url: '/im/face-user-item/list' })
}
/** 添加个人表情；同 URL 重复添加服务端抛 FACE_USER_ITEM_DUPLICATED，调用方按 catch 提示「已添加过」 */
export const createFaceUserItem = (data: ImFaceUserItemSaveReqVO) => {
return request.post<number>({ url: '/im/face-user-item/create', data })
}
/** 删除个人表情 */
export const deleteFaceUserItem = (id: number) => {
return request.delete({ url: '/im/face-user-item/delete?id=' + id })
}

1
src/api/im/manager/face/item.ts → src/api/im/manager/face/item/index.ts
View File

@ -1,6 +1,5 @@
import request from '@/config/axios'
// TODO @AI：face/item/index.ts
export interface ImManagerFacePackItemVO {
id: number
packId: number

1
src/api/im/manager/face/pack.ts → src/api/im/manager/face/pack/index.ts
View File

@ -1,6 +1,5 @@
import request from '@/config/axios'
// TODO @AI：face/pack/index.ts
export interface ImManagerFacePackVO {
id: number
name: string

8
src/views/im/home/index.vue
View File

@ -33,6 +33,7 @@ import { useFriendStore } from './store/friendStore'
import { useGroupStore } from './store/groupStore'
import { useGroupRequestStore } from './store/groupRequestStore'
import { useDraftStore } from './store/draftStore'
import { useFaceStore } from './store/faceStore'
import { useMessagePuller } from './composables/useMessagePuller'
import { useMessageSender } from './composables/useMessageSender'
import { ImConversationType } from '../utils/constants'
@ -50,6 +51,7 @@ const friendStore = useFriendStore()
const groupStore = useGroupStore()
const groupRequestStore = useGroupRequestStore()
const draftStore = useDraftStore()
const faceStore = useFaceStore()
const { pullOnce } = useMessagePuller()
const { readActive, syncPrivateReadStatus } = useMessageSender()
@ -92,6 +94,9 @@ onMounted(async () => {
void groupRequestStore.fetchUnhandledList().catch((e) =>
console.warn('[IM] 拉取未处理加群申请失败', e)
)
// 3.2 系统表情包后台预拉，消除表情面板首次展开的白屏；个人表情保持「点开 tab 才拉」
// TODO @AI：同上；
void faceStore.ensureFacePacks().catch((e) => console.warn('[IM] 后台预拉表情包失败', e))
// 4. 默认选中第一个会话；若置顶分组处于折叠态，需跳过被折叠隐藏的置顶项，避免自动展开折叠
const sorted = conversationStore.getSortedConversations
@ -129,10 +134,11 @@ function onBeforeUnload() {
}
window.addEventListener('beforeunload', onBeforeUnload)
/** 离开 IM 主壳：主动断 WebSocket（disconnect 内部已清掉 onclose 防自动重连）+ flush 草稿 + 解绑 unload */
/** 离开 IM 主壳：主动断 WebSocket（disconnect 内部已清掉 onclose 防自动重连）+ flush 草稿 + 表情缓存 reset + 解绑 unload */
onUnmounted(() => {
webSocketStore.disconnect()
draftStore.flushPersist()
faceStore.reset()
window.removeEventListener('beforeunload', onBeforeUnload)
})

113
src/views/im/home/pages/conversation/components/input/EmojiPicker.vue
View File

@ -1,113 +0,0 @@
<template>
<!--
简版 emoji 选择器：只渲染 Unicode emoji，所选直接拼到调用方文本
- 给「留言 / 表单」这类轻量场景用，避免把 FacePicker 整套（个人 + 系统包）塞进单行输入框边
- 调用方通过 v-model:visible 控制显隐，通过 @select 接收选中的 emoji 字符
- 主聊天输入框场景请用 FacePicker.vue（多 tab）
-->
<div
v-if="visible"
ref="rootRef"
class="im-popover-arrow absolute z-100 w-80 p-2 rounded-md bg-[var(--el-bg-color)] shadow-[0_4px_16px_rgba(0,0,0,0.12)]"
@click.stop
>
<el-scrollbar max-height="240px">
<div class="grid grid-cols-10 gap-0.5">
<button
v-for="emoji in EMOJI_LIST"
:key="emoji"
class="p-1 text-xl leading-none bg-transparent border-none rounded cursor-pointer transition-colors hover:bg-[var(--el-fill-color)]"
type="button"
@click="handleSelect(emoji)"
>
{{ emoji }}
</button>
</div>
</el-scrollbar>
</div>
</template>
<script lang="ts" setup>
import { onMounted, onUnmounted, useTemplateRef, watch } from 'vue'
defineOptions({ name: 'ImEmojiPicker' })
const props = defineProps<{
visible: boolean
}>()
const emit = defineEmits<{
'update:visible': [value: boolean]
select: [emoji: string]
}>()
const rootRef = useTemplateRef<HTMLDivElement>('rootRef')
/** 常用 emoji 列表（Unicode 表情，所见即所得；不依赖图片资源） */
const EMOJI_LIST = [
'😀', '😁', '😂', '🤣', '😃', '😄', '😅', '😆', '😉', '😊',
'😋', '😎', '😍', '😘', '😗', '😙', '😚', '🙂', '🤗', '🤩',
'🤔', '🤨', '😐', '😑', '😶', '🙄', '😏', '😣', '😥', '😮',
'🤐', '😯', '😪', '😫', '😴', '😌', '😛', '😜', '😝', '🤤',
'😒', '😓', '😔', '😕', '🙃', '🤑', '😲', '☹️', '🙁', '😖',
'😞', '😟', '😤', '😢', '😭', '😦', '😧', '😨', '😩', '🤯',
'😬', '😰', '😱', '🥵', '🥶', '😳', '🤪', '😵', '😡', '😠',
'🤬', '😷', '🤒', '🤕', '🤢', '🤮', '🤧', '😇', '🤠', '🥳',
'👍', '👎', '👌', '✌️', '🤞', '🤟', '🤘', '🤙', '👈', '👉',
'👆', '👇', '✋', '🤚', '🖐', '🖖', '👋', '🤝', '🙏', '💪',
'❤️', '🧡', '💛', '💚', '💙', '💜', '🖤', '💔', '💕', '💖',
'🎉', '🎊', '🎁', '🎂', '🍰', '🌹', '🌷', '🌸', '🎵', '🎶',
'⭐', '🌟', '✨', '💫', '🔥', '💯', '✅', '❌', '⚠️', '❓'
]
function handleSelect(emoji: string) {
emit('select', emoji)
emit('update:visible', false)
}
/** 点击面板外部关闭：组件根节点已经 @click.stop，所以面板内点击不会触发 */
function handleDocumentClick(e: MouseEvent) {
if (!props.visible || !rootRef.value) {
return
}
if (!rootRef.value.contains(e.target as Node)) {
emit('update:visible', false)
}
}
/** 仅在面板可见时监听，避免长期占用全局事件 */
watch(
() => props.visible,
(visible) => {
if (visible) {
document.addEventListener('click', handleDocumentClick)
} else {
document.removeEventListener('click', handleDocumentClick)
}
}
)
onMounted(() => {
if (props.visible) {
document.addEventListener('click', handleDocumentClick)
}
})
onUnmounted(() => {
document.removeEventListener('click', handleDocumentClick)
})
</script>
<style scoped>
/* 底部小三角：指向触发图标，仿微信 PC 气泡指针；left 偏移对应表情按钮（工具栏 1st icon） */
.im-popover-arrow::after {
content: '';
position: absolute;
top: calc(100% - 1px);
left: 10px;
border-style: solid;
border-width: 6px 6px 0 6px;
border-color: var(--el-bg-color) transparent transparent transparent;
filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.08));
}
</style>

194
src/views/im/home/pages/conversation/components/input/FacePicker.vue
View File

@ -2,7 +2,8 @@
<!--
表情面板（多 tab）：emoji / 个人表情 / N 个系统表情包
- 对齐微信 PC：底部 tab 栏切换面板内容；emoji 保持 Unicode（仍由 TEXT 通道发送）
- 个人表情 / 系统表情走 FACE 消息类型，通过 select-face 事件由 MessageInput 走 sendRaw 发送
- 个人表情 / 系统表情走 FACE 消息类型，通过 select-face 事件由调用方走 sendRaw 发送
- mode='emoji-only' 时只显示 emoji tab + 隐藏底部 tab 栏，给留言 / 评论这类只发文本的场景用
- 定位由调用方决定（通常浮在表情按钮上方）
-->
<div
@ -14,10 +15,10 @@
<!-- 主内容区：高度固定 + 各 tab 用 v-show 切换，避免每次切 tab 重建 scrollbar 造成滚动位置丢失 -->
<div class="relative h-[300px] overflow-hidden">
<!-- emoji 网格 -->
<el-scrollbar v-show="activeTab === 'emoji'" height="300px">
<el-scrollbar v-show="activeTab === FACE_TAB.EMOJI" height="300px">
<div class="grid grid-cols-10 gap-0.5 p-2">
<button
v-for="emoji in EMOJI_LIST"
v-for="emoji in IM_EMOJI_LIST"
:key="emoji"
class="p-1 text-xl leading-none bg-transparent border-none rounded cursor-pointer transition-colors hover:bg-[var(--el-fill-color)]"
type="button"
@ -29,7 +30,7 @@
</el-scrollbar>
<!-- 个人表情：5 列方格，无名字标签；末尾「+」上传 -->
<el-scrollbar v-show="activeTab === 'mine'" height="300px">
<el-scrollbar v-if="isFullMode" v-show="activeTab === FACE_TAB.MINE" height="300px">
<div class="grid grid-cols-5 gap-2 p-3">
<!-- 上传入口固定放第一格，对齐微信 -->
<button
@ -68,56 +69,59 @@
</el-scrollbar>
<!-- 系统表情包：5 列方格 + 下方表情名（无 name 时不显示标签，保持高度一致） -->
<el-scrollbar
v-for="pack in faceStore.facePacks"
v-show="activeTab === `pack:${pack.id}`"
:key="pack.id"
height="300px"
>
<div class="grid grid-cols-5 gap-2 p-3">
<div
v-for="item in pack.items"
:key="item.id"
class="im-face-grid-cell flex flex-col items-center gap-1 cursor-pointer rounded-md p-1 transition-colors hover:bg-[var(--el-fill-color)]"
:title="item.name || ''"
@click="handleSelectPackItem(item)"
>
<template v-if="isFullMode">
<el-scrollbar
v-for="pack in faceStore.facePacks"
v-show="activeTab === packTabKey(pack.id)"
:key="pack.id"
height="300px"
>
<div class="grid grid-cols-5 gap-2 p-3">
<div
class="aspect-square w-full flex items-center justify-center bg-[var(--el-fill-color-lighter)] rounded"
v-for="item in pack.items"
:key="item.id"
class="im-face-grid-cell flex flex-col items-center gap-1 cursor-pointer rounded-md p-1 transition-colors hover:bg-[var(--el-fill-color)]"
:title="item.name || ''"
@click="handleSelectPackItem(item)"
>
<img
:src="item.url"
:alt="item.name || '表情'"
class="max-w-full max-h-full object-contain"
draggable="false"
/>
<div
class="aspect-square w-full flex items-center justify-center bg-[var(--el-fill-color-lighter)] rounded"
>
<img
:src="item.url"
:alt="item.name || '表情'"
class="max-w-full max-h-full object-contain"
draggable="false"
/>
</div>
<div
class="h-4 text-xs text-[var(--el-text-color-secondary)] truncate w-full text-center leading-4"
>
{{ item.name || '' }}
</div>
</div>
<div
class="h-4 text-xs text-[var(--el-text-color-secondary)] truncate w-full text-center leading-4"
v-if="!pack.items.length"
class="col-span-5 flex items-center justify-center py-12 text-sm text-[var(--el-text-color-placeholder)]"
>
{{ item.name || '' }}
该表情包暂无表情
</div>
</div>
<div
v-if="!pack.items.length"
class="col-span-5 flex items-center justify-center py-12 text-sm text-[var(--el-text-color-placeholder)]"
>
该表情包暂无表情
</div>
</div>
</el-scrollbar>
</el-scrollbar>
</template>
</div>
<!-- 底部 tab 栏：[ emoji / 个人 / 系统包 1..N ] -->
<!-- 底部 tab 栏：[ emoji / 个人 / 系统包 1..N ]；emoji-only 模式下隐藏 -->
<div
v-if="isFullMode"
class="flex flex-shrink-0 items-center gap-1 px-2 py-1.5 border-t border-[var(--el-border-color-lighter)]"
>
<el-tooltip content="Emoji 表情" placement="top" :show-after="300">
<button
class="im-face-tab"
:class="{ 'im-face-tab--active': activeTab === 'emoji' }"
:class="{ 'im-face-tab--active': activeTab === FACE_TAB.EMOJI }"
type="button"
@click="activeTab = 'emoji'"
@click="activeTab = FACE_TAB.EMOJI"
>
<Icon icon="ant-design:smile-outlined" :size="18" />
</button>
@ -125,9 +129,9 @@
<el-tooltip content="个人表情" placement="top" :show-after="300">
<button
class="im-face-tab"
:class="{ 'im-face-tab--active': activeTab === 'mine' }"
:class="{ 'im-face-tab--active': activeTab === FACE_TAB.MINE }"
type="button"
@click="activeTab = 'mine'"
@click="activeTab = FACE_TAB.MINE"
>
<Icon icon="ant-design:heart-outlined" :size="18" />
</button>
@ -141,9 +145,9 @@
>
<button
class="im-face-tab"
:class="{ 'im-face-tab--active': activeTab === `pack:${pack.id}` }"
:class="{ 'im-face-tab--active': activeTab === packTabKey(pack.id) }"
type="button"
@click="activeTab = `pack:${pack.id}`"
@click="activeTab = packTabKey(pack.id)"
>
<img
v-if="pack.iconUrl"
@ -158,24 +162,41 @@
</div>
<!-- 隐藏的文件选择器（点 + 时触发） -->
<input ref="uploadInputRef" type="file" accept="image/*" hidden @change="onUploadPicked" />
<input
v-if="isFullMode"
ref="uploadInputRef"
type="file"
accept="image/*"
hidden
@change="onUploadPicked"
/>
</div>
</template>
<script lang="ts" setup>
import { onMounted, onUnmounted, ref, useTemplateRef, watch } from 'vue'
import { computed, onUnmounted, ref, useTemplateRef, watch } from 'vue'
import { ElMessage } from 'element-plus'
import Icon from '@/components/Icon/src/Icon.vue'
import { updateFile } from '@/api/infra/file'
import { useFaceStore } from '@/views/im/home/store/faceStore'
import { IM_EMOJI_LIST } from '@/views/im/utils/emoji'
import { probeImageSize } from '@/views/im/utils/image'
import type { ImFacePackUserItemVO, ImFaceUserItemVO } from '@/api/im/face'
defineOptions({ name: 'ImFacePicker' })
const props = defineProps<{
visible: boolean
}>()
/** 面板模式 */
type FacePickerMode = 'full' | 'emoji-only'
const props = withDefaults(
defineProps<{
visible: boolean
/** full：emoji + 个人表情 + 系统包（聊天主输入用）；emoji-only：仅 emoji（留言 / 评论场景） */
mode?: FacePickerMode
}>(),
{ mode: 'full' }
)
const emit = defineEmits<{
'update:visible': [value: boolean]
@ -185,36 +206,27 @@ const emit = defineEmits<{
'select-face': [face: { url: string; width: number; height: number; name?: string }]
}>()
// TODO @AI：emoji 和 facepicker 可以做一个融合么？不然代码有点冗余。
const rootRef = useTemplateRef<HTMLDivElement>('rootRef')
const uploadInputRef = useTemplateRef<HTMLInputElement>('uploadInputRef')
const faceStore = useFaceStore()
/** 当前激活的 tab：emoji / mine / pack:{id} */
const activeTab = ref<string>('emoji')
/** tab 标识常量；pack:N 类用 packTabKey() 拼出，避免散落字符串字面量 */
const FACE_TAB = {
EMOJI: 'emoji',
MINE: 'mine'
} as const
const packTabKey = (packId: number) => `pack:${packId}`
/** 上传中标记，避免连续点击 + 触发并发上传 */
/** 当前激活的 tab */
const activeTab = ref<string>(FACE_TAB.EMOJI)
/** 是否完整模式（含个人 / 系统包 tab） */
const isFullMode = computed(() => props.mode === 'full')
/** 上传中标记，避免连续点击触发并发上传 */
const uploading = ref(false)
/** 常用 Unicode emoji 列表（所见即所得，不依赖图片资源） */
const EMOJI_LIST = [
'😀', '😁', '😂', '🤣', '😃', '😄', '😅', '😆', '😉', '😊',
'😋', '😎', '😍', '😘', '😗', '😙', '😚', '🙂', '🤗', '🤩',
'🤔', '🤨', '😐', '😑', '😶', '🙄', '😏', '😣', '😥', '😮',
'🤐', '😯', '😪', '😫', '😴', '😌', '😛', '😜', '😝', '🤤',
'😒', '😓', '😔', '😕', '🙃', '🤑', '😲', '☹️', '🙁', '😖',
'😞', '😟', '😤', '😢', '😭', '😦', '😧', '😨', '😩', '🤯',
'😬', '😰', '😱', '🥵', '🥶', '😳', '🤪', '😵', '😡', '😠',
'🤬', '😷', '🤒', '🤕', '🤢', '🤮', '🤧', '😇', '🤠', '🥳',
'👍', '👎', '👌', '✌️', '🤞', '🤟', '🤘', '🤙', '👈', '👉',
'👆', '👇', '✋', '🤚', '🖐', '🖖', '👋', '🤝', '🙏', '💪',
'❤️', '🧡', '💛', '💚', '💙', '💜', '🖤', '💔', '💕', '💖',
'🎉', '🎊', '🎁', '🎂', '🍰', '🌹', '🌷', '🌸', '🎵', '🎶',
'⭐', '🌟', '✨', '💫', '🔥', '💯', '✅', '❌', '⚠️', '❓'
]
/** 选 emoji 字符：插到输入框；选完不关面板，方便用户连发多个 */
function handleSelectEmoji(emoji: string) {
emit('select-emoji', emoji)
@ -234,7 +246,7 @@ function handleSelectPackItem(item: ImFacePackUserItemVO) {
/** 长按 / 右键删除个人表情 */
async function handleDeleteUserItem(item: ImFaceUserItemVO) {
if (!confirm(`确认删除该表情？`)) {
if (!confirm('确认删除该表情？')) {
return
}
await faceStore.removeFaceUserItem(item.id)
@ -245,23 +257,6 @@ function onUploadClick() {
uploadInputRef.value?.click()
}
/** 加载图片元信息（宽高），失败回退 200×200 */
function probeImageSize(file: File): Promise<{ width: number; height: number }> {
return new Promise((resolve) => {
const objectUrl = URL.createObjectURL(file)
const img = new Image()
img.onload = () => {
URL.revokeObjectURL(objectUrl)
resolve({ width: img.naturalWidth || 200, height: img.naturalHeight || 200 })
}
img.onerror = () => {
URL.revokeObjectURL(objectUrl)
resolve({ width: 200, height: 200 })
}
img.src = objectUrl
})
}
/** 文件选完即上传，成功后写入 faceStore 个人表情列表 */
async function onUploadPicked(e: Event) {
const input = e.target as HTMLInputElement
@ -284,7 +279,10 @@ async function onUploadPicked(e: Event) {
ElMessage.error('上传失败')
return
}
await faceStore.addFaceUserItem({ url, width: size.width, height: size.height })
const ok = await faceStore.addFaceUserItem({ url, width: size.width, height: size.height })
if (!ok) {
ElMessage.error('添加失败，可能已添加过')
}
} catch (err) {
console.warn('[IM] 上传个人表情失败', err)
ElMessage.error('上传失败')
@ -293,18 +291,22 @@ async function onUploadPicked(e: Event) {
}
}
/** 面板首次展开时拉数据；emoji tab 直接渲染本地常量，不需要预拉 */
/** 面板展开时拉数据 + 挂全局 click；emoji-only 模式下不拉系统包 / 个人表情 */
watch(
() => props.visible,
async (visible) => {
(visible) => {
if (visible) {
document.addEventListener('click', handleDocumentClick)
// 系统包 + 个人表情都按需拉，避免没打开过面板的用户白白请求
await Promise.all([faceStore.ensureFacePacks(), faceStore.ensureFaceUserItems()])
if (isFullMode.value) {
// 系统包通常已被 home onMounted 预拉过；ensureXxx 内部 promise 缓存避免重复请求
void faceStore.ensureFacePacks()
void faceStore.ensureFaceUserItems()
}
} else {
document.removeEventListener('click', handleDocumentClick)
}
}
},
{ immediate: true }
)
/** 点击面板外部关闭 */
@ -317,12 +319,6 @@ function handleDocumentClick(e: MouseEvent) {
}
}
onMounted(() => {
if (props.visible) {
document.addEventListener('click', handleDocumentClick)
}
})
onUnmounted(() => {
document.removeEventListener('click', handleDocumentClick)
})

106
src/views/im/home/store/faceStore.ts
View File

@ -4,7 +4,7 @@ import { store } from '@/store'
import {
getFacePackList as apiGetFacePackList,
getMyFaceUserItemList as apiGetMyFaceUserItemList,
getFaceUserItemList as apiGetFaceUserItemList,
createFaceUserItem as apiCreateFaceUserItem,
deleteFaceUserItem as apiDeleteFaceUserItem,
type ImFacePackUserVO,
@ -15,8 +15,9 @@ import {
/**
* IM 表情面板数据 store（系统表情包 + 个人表情）
*
* 不持久化：数据小、低频；每次进 IM 第一次打开表情面板时按需拉，关 tab 即丢弃。
* 系统包面板在面板首次展开时 ensureFacePacks；个人表情在切到「收藏」tab 或要发送 / 添加时 ensureFaceUserItems。
* 不持久化：数据小、低频；每次进 IM 第一次打开表情面板时按需拉，关 tab 即丢弃
* - 系统包：IM 主页 onMounted 后台预拉（不阻塞首屏），消除面板首次展开的白屏
* - 个人表情：切到「收藏」tab / 长按消息「添加到表情」时按需拉
*/
export const useFaceStore = defineStore('imFace', () => {
@ -25,69 +26,60 @@ export const useFaceStore = defineStore('imFace', () => {
/** 个人表情包列表（用户长按「添加到表情」/ 上传产生） */
const faceUserItems = ref<ImFaceUserItemVO[]>([])
/** 已成功拉取过系统包；后续切 tab 不再重复请求 */
const facePacksLoaded = ref(false)
/** 已成功拉取过个人表情 */
const faceUserItemsLoaded = ref(false)
/** 拉取系统表情包；同 promise 去重，并发调用共用一个请求 */
let facePacksFetching: Promise<void> | null = null
/** 按需拉取系统表情包（已拉过则直接复用） */
/**
* 系统表情包拉取 promise；ensureFacePacks 内 cache：
* - null = 还没拉过，下次调用真发请求
* - resolve 后保留对象 = 后续调用 await 立即返回，不再发请求
* - reject 后置回 null，让调用方下次重试
*/
let facePacksPromise: Promise<void> | null = null
/** 按需拉取系统表情包（已拉过则直接复用 cached promise） */
async function ensureFacePacks(): Promise<void> {
if (facePacksLoaded.value) {
return
if (!facePacksPromise) {
facePacksPromise = apiGetFacePackList()
.then((data) => {
facePacks.value = data || []
})
.catch((e) => {
console.warn('[IM] 拉取表情包失败', e)
facePacksPromise = null
throw e
})
}
if (facePacksFetching) {
return facePacksFetching
}
facePacksFetching = (async () => {
try {
facePacks.value = (await apiGetFacePackList()) || []
facePacksLoaded.value = true
} catch (e) {
console.warn('[IM] 拉取表情包失败', e)
} finally {
facePacksFetching = null
}
})()
return facePacksFetching
return facePacksPromise
}
// TODO @AI：是不是也要注释下，风格一致；
let faceUserItemsFetching: Promise<void> | null = null
/** 按需拉取个人表情 */
/** 个人表情拉取 promise；语义同上 */
let faceUserItemsPromise: Promise<void> | null = null
/** 按需拉取个人表情（已拉过则直接复用 cached promise） */
async function ensureFaceUserItems(): Promise<void> {
if (faceUserItemsLoaded.value) {
return
if (!faceUserItemsPromise) {
faceUserItemsPromise = apiGetFaceUserItemList()
.then((data) => {
faceUserItems.value = data || []
})
.catch((e) => {
console.warn('[IM] 拉取个人表情失败', e)
faceUserItemsPromise = null
throw e
})
}
if (faceUserItemsFetching) {
return faceUserItemsFetching
}
faceUserItemsFetching = (async () => {
try {
faceUserItems.value = (await apiGetMyFaceUserItemList()) || []
faceUserItemsLoaded.value = true
} catch (e) {
console.warn('[IM] 拉取个人表情失败', e)
} finally {
faceUserItemsFetching = null
}
})()
return faceUserItemsFetching
return faceUserItemsPromise
}
/**
* 添加个人表情；服务端对同 URL 幂等返回旧 id，本地缓存按 id 去重
* 添加个人表情；服务端对同 URL 抛 FACE_USER_ITEM_DUPLICATED 错误
*
* 来源：1. 用户在表情面板「+」上传图片 2. 长按消息「添加到表情」（带 sourceMessageId）
* 返回 true / false 与 removeFaceUserItem 风格对齐；调用方按 boolean 决定是否提示
*/
async function addFaceUserItem(reqVO: ImFaceUserItemSaveReqVO): Promise<number | undefined> {
async function addFaceUserItem(reqVO: ImFaceUserItemSaveReqVO): Promise<boolean> {
try {
const id = await apiCreateFaceUserItem(reqVO)
if (!id) {
return undefined
return false
}
// id 不在缓存里才插入，避免重复添加同张图触发列表里出现两条
// id 不在缓存里才插入；服务端唯一约束兜底了 race，本地理论上不会拿到重复 id
if (!faceUserItems.value.some((item) => item.id === id)) {
faceUserItems.value.unshift({
id,
@ -97,11 +89,10 @@ export const useFaceStore = defineStore('imFace', () => {
height: reqVO.height
})
}
return id
return true
} catch (e) {
console.warn('[IM] 添加个人表情失败', e)
// TODO @AI：应该把参数打印出来，reqVO；
return undefined
console.warn('[IM] 添加个人表情失败', { reqVO }, e)
return false
}
}
@ -112,8 +103,7 @@ export const useFaceStore = defineStore('imFace', () => {
faceUserItems.value = faceUserItems.value.filter((item) => item.id !== id)
return true
} catch (e) {
// TODO @AI：应该把参数打印出来，id；
console.warn('[IM] 删除个人表情失败', e)
console.warn('[IM] 删除个人表情失败', { id }, e)
return false
}
}
@ -122,8 +112,8 @@ export const useFaceStore = defineStore('imFace', () => {
function reset(): void {
facePacks.value = []
faceUserItems.value = []
facePacksLoaded.value = false
faceUserItemsLoaded.value = false
facePacksPromise = null
faceUserItemsPromise = null
}
return {

3
src/views/im/manager/message/MessageContentPreview.vue
View File

@ -71,7 +71,7 @@
class="w-30px h-30px rounded object-contain align-middle"
draggable="false"
/>
<span>{{ facePayload.name ? `[表情] ${facePayload.name}` : '[表情]' }}</span>
<span>{{ buildFacePreviewText(facePayload) }}</span>
</span>
<!-- 控制类消息：撤回 / 已读 / 回执 -->
@ -138,6 +138,7 @@ import {
resolveFriendNotificationText,
resolveGroupNotificationText
} from '@/views/im/utils/user'
import { buildFacePreviewText } from '@/views/im/utils/conversation'
defineOptions({ name: 'ImMessageContentPreview' })

16
src/views/im/utils/conversation.ts
View File

@ -7,7 +7,7 @@
// ====================================================================
import { ImMessageType, isFriendChatTip, isGroupNotification } from './constants'
import { parseMessage, type TextMessage } from './message'
import { parseMessage, type FaceMessage, type TextMessage } from './message'
import {
getSenderDisplayName,
resolveFriendNotificationText,
@ -32,6 +32,14 @@ export function filterConversationsByKeyword<T extends { name?: string }>(
return list.filter((c) => (c.name || '').toLowerCase().includes(trimmed))
}
/**
* 表情消息的统一文本预览：摘要 / 历史搜索 / 引用块 / 管理后台预览共用一份
* 有 name 时走 `[表情] name`（系统包），无 name 时走 `[表情]`（个人表情通常无 name）
*/
export function buildFacePreviewText(facePayload: { name?: string } | null | undefined): string {
return facePayload?.name ? `[表情] ${facePayload.name}` : '[表情]'
}
/** 撤回提示文案：自己撤回固定文案，对方撤回带 sender 名（实时算 + fallbackName 兜底） */
export function buildRecallTip(
senderId: number,
@ -70,10 +78,8 @@ export function resolveConversationLastContent(
return '[视频]'
case ImMessageType.CARD:
return '[个人名片]'
case ImMessageType.FACE: {
const facePayload = parseMessage<{ name?: string }>(message.content)
return facePayload?.name ? `[表情] ${facePayload.name}` : '[表情]'
}
case ImMessageType.FACE:
return buildFacePreviewText(parseMessage<FaceMessage>(message.content))
case ImMessageType.RECALL:
return buildRecallTip(
message.senderId,

21
src/views/im/utils/emoji.ts Normal file
View File

@ -0,0 +1,21 @@
/**
* IM 常用 Unicode emoji 列表
*
* 所见即所得（不依赖图片资源），由表情面板（FacePicker 的 emoji tab）使用；
* Unicode emoji 选中后由调用方插入到输入框走 TEXT 通道，不走 FACE 消息类型
*/
export const IM_EMOJI_LIST: string[] = [
'😀', '😁', '😂', '🤣', '😃', '😄', '😅', '😆', '😉', '😊',
'😋', '😎', '😍', '😘', '😗', '😙', '😚', '🙂', '🤗', '🤩',
'🤔', '🤨', '😐', '😑', '😶', '🙄', '😏', '😣', '😥', '😮',
'🤐', '😯', '😪', '😫', '😴', '😌', '😛', '😜', '😝', '🤤',
'😒', '😓', '😔', '😕', '🙃', '🤑', '😲', '☹️', '🙁', '😖',
'😞', '😟', '😤', '😢', '😭', '😦', '😧', '😨', '😩', '🤯',
'😬', '😰', '😱', '🥵', '🥶', '😳', '🤪', '😵', '😡', '😠',
'🤬', '😷', '🤒', '🤕', '🤢', '🤮', '🤧', '😇', '🤠', '🥳',
'👍', '👎', '👌', '✌️', '🤞', '🤟', '🤘', '🤙', '👈', '👉',
'👆', '👇', '✋', '🤚', '🖐', '🖖', '👋', '🤝', '🙏', '💪',
'❤️', '🧡', '💛', '💚', '💙', '💜', '🖤', '💔', '💕', '💖',
'🎉', '🎊', '🎁', '🎂', '🍰', '🌹', '🌷', '🌸', '🎵', '🎶',
'⭐', '🌟', '✨', '💫', '🔥', '💯', '✅', '❌', '⚠️', '❓'
]

34
src/views/im/utils/image.ts Normal file
View File

@ -0,0 +1,34 @@
// ====================================================================
// IM 图片本地探针 utility
// ====================================================================
// 仅做「读 File 的宽高」一类纯前端 probe；不涉及上传 / 网络
// ====================================================================
/** 默认占位尺寸：probe 失败 / 解码异常时兜底，避免 width/height 为 0 让消息渲染塌掉 */
const DEFAULT_FALLBACK_SIZE = { width: 200, height: 200 } as const
/**
* 加载本地图片 File，解出 naturalWidth / naturalHeight
*
* - 成功：返回真实尺寸
* - 解码失败 / 不是图片：返回 200×200 兜底；调用方按 nullable 看待数值
* - 内部 revokeObjectURL 释放 blob URL，避免内存累积
*/
export function probeImageSize(file: File): Promise<{ width: number; height: number }> {
return new Promise((resolve) => {
const objectUrl = URL.createObjectURL(file)
const img = new Image()
img.onload = () => {
URL.revokeObjectURL(objectUrl)
resolve({
width: img.naturalWidth || DEFAULT_FALLBACK_SIZE.width,
height: img.naturalHeight || DEFAULT_FALLBACK_SIZE.height
})
}
img.onerror = () => {
URL.revokeObjectURL(objectUrl)
resolve({ ...DEFAULT_FALLBACK_SIZE })
}
img.src = objectUrl
})
}

40
src/views/im/utils/message.ts
View File

@ -1,4 +1,5 @@
import { generateUUID } from '@/utils'
import { ImMessageType } from './constants'
import type { Message } from '../home/types'
// ====================================================================
@ -97,14 +98,45 @@ export interface CardMessage extends Quotable {
export interface FaceMessage extends Quotable {
/** 表情图 URL */
url: string
/** 渲染宽度（像素），避免布局抖动 */
width: number
/** 渲染高度（像素） */
height: number
/** 渲染宽度（像素），避免布局抖动；可选，缺失时调用方走 CSS max-w 兜底 */
width?: number
/** 渲染高度（像素），可选 */
height?: number
/** 表情名（系统包通常有，个人表情包通常无） */
name?: string
}
/** 「添加到表情」的可发起源：FACE / IMAGE 都允许（GIF 图片也常被收藏） */
export interface AddableFacePayload {
url: string
width: number
height: number
name?: string
}
/**
* 从消息抽取「添加到表情」的 payload；当前消息类型不可添加返回 null
*
* 调用方（MessageItem 的右键菜单）按 nullable 决定是否展示「添加到表情」入口
*/
export function extractAddableFace(message: Message): AddableFacePayload | null {
if (message.type === ImMessageType.FACE) {
const face = parseMessage<FaceMessage>(message.content)
if (!face?.url) {
return null
}
return { url: face.url, width: face.width || 200, height: face.height || 200, name: face.name }
}
if (message.type === ImMessageType.IMAGE) {
const image = parseMessage<ImageMessage>(message.content)
if (!image?.url) {
return null
}
return { url: image.url, width: image.width || 200, height: image.height || 200 }
}
return null
}
/** 解析消息 content（JSON 字符串）为指定 payload，非法 JSON 返回 null */
export const parseMessage = <T>(content: string): T | null => {
try {