新增通用聊天图片预览组件

- ImagePreview / ChatImage:全屏预览、ESC 关闭、下载
- 接入工作台、访客 Widget、对话记录
This commit is contained in:
yml2213
2026-07-15 12:44:37 +08:00
parent 32d88f42e7
commit cd28796440
4 changed files with 128 additions and 4 deletions
+3 -2
View File
@@ -4,6 +4,7 @@ import {
StarFilled, MinusOutlined, PictureOutlined, CustomerServiceOutlined,
} from '@ant-design/icons'
import EmojiPicker, { insertAtCursor } from '@/components/common/EmojiPicker'
import { ChatImage } from '@/components/common/ImagePreview'
interface Message {
id: number
@@ -468,7 +469,7 @@ const VisitorChat = ({
<div key={msg.id} className="flex justify-end max-w-[85%] ml-auto">
<div className={`rounded-xl bg-[#2563eb] text-white text-[13px] leading-normal ${msg.type === 'image' ? 'p-1.5' : 'px-4 py-3'}`}>
{msg.type === 'image' ? (
<img src={msg.content} alt="图片" className="max-w-[180px] rounded-lg block" />
<ChatImage src={msg.content} alt="图片" className="max-w-[180px] max-h-[180px]" />
) : (
<p className="m-0 whitespace-pre-wrap break-words">{msg.content}</p>
)}
@@ -481,7 +482,7 @@ const VisitorChat = ({
</div>
<div className={`rounded-xl bg-white border border-neutral-200 text-[13px] text-neutral-800 leading-normal ${msg.type === 'image' ? 'p-1.5' : 'px-4 py-3'}`}>
{msg.type === 'image' ? (
<img src={msg.content} alt="图片" className="max-w-[180px] rounded-lg block" />
<ChatImage src={msg.content} alt="图片" className="max-w-[180px] max-h-[180px]" />
) : (
<p className="m-0 whitespace-pre-wrap break-words">{msg.content}</p>
)}