diff --git a/src/componets/CommonChatFrame/ChatContent/Call/index.jsx b/src/componets/CommonChatFrame/ChatContent/Call/index.jsx
new file mode 100644
index 0000000..c84d333
--- /dev/null
+++ b/src/componets/CommonChatFrame/ChatContent/Call/index.jsx
@@ -0,0 +1,30 @@
+import "./index.less"
+import {memo, useEffect, useState} from "react";
+import {formatTimingTime} from "../../../../utils/date.js";
+
+const Call = memo(({value, right = false}) => {
+    let [msgContent, setMsgContent] = useState(null)
+
+    useEffect(() => {
+        let content = JSON.parse(value.msgContent?.content)
+        console.log(content)
+        setMsgContent(content)
+    }, [value])
+
+    return (
+        <>
+            <div className={"chat-content-call"}>
+                <div className={`content  ${right ? "right" : ""}`}>
+                    <i className={`iconfont icon ${msgContent?.type === "audio" ? "icon-dianhua" : "icon-shipin"}`}
+                       style={{fontSize: 20, margin: "0 4px"}}/>
+                    <div>
+                        {
+                            msgContent?.time > 0 ? `通话时长 ${formatTimingTime(msgContent.time)}` : "通话未接通"
+                        }
+                    </div>
+                </div>
+            </div>
+        </>
+    )
+})
+export default Call;
\ No newline at end of file
diff --git a/src/componets/CommonChatFrame/ChatContent/Call/index.less b/src/componets/CommonChatFrame/ChatContent/Call/index.less
new file mode 100644
index 0000000..c6b5237
--- /dev/null
+++ b/src/componets/CommonChatFrame/ChatContent/Call/index.less
@@ -0,0 +1,26 @@
+.chat-content-call {
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 10px;
+  white-space: pre-wrap;
+  word-break: break-all;
+  word-wrap: break-word;
+  height: 34px;
+
+  .content {
+    background-color: #ffffff;
+    width: 150px;
+    height: 32px;
+    border-radius: 5px;
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    user-select: none;
+  }
+
+  .content.right {
+    color: #FFFFFF;
+    background-color: #4C9BFF;
+    margin-left: auto;
+  }
+}
\ No newline at end of file
diff --git a/src/componets/CommonChatFrame/index.jsx b/src/componets/CommonChatFrame/index.jsx
index 82e1996..c84f1ca 100644
--- a/src/componets/CommonChatFrame/index.jsx
+++ b/src/componets/CommonChatFrame/index.jsx
@@ -32,6 +32,7 @@ import Voice from "./ChatContent/Voice/index.jsx";
 import {getItem, setItem} from "../../utils/storage.js";
 import CustomTooltip from "../CustomTooltip/index.jsx";
 import CreateImageViewer from "../../pages/ImageViewer/window.jsx";
+import Call from "./ChatContent/Call/index.jsx";
 
 function CommonChatFrame({userInfo}) {
 
@@ -138,12 +139,23 @@ function CommonChatFrame({userInfo}) {
             if (!currentToId.current) return
             onSendFile(e.payload.paths[0])
         });
+        //监听音视频挂断
+        let unHangUp = listen("on-hang-up", (e) => {
+            let msg = e.payload
+            console.log("e.payload", e.payload)
+            if (msg.toUserId === currentToId.current) {
+                messagesRef.current.push(msg.data)
+                setMessages(() => [...messagesRef.current])
+                emit("on-send-msg", {})
+            }
+        });
         return async () => {
             (await unListen)();
             (await unScreenshotListen)();
             (await unScreenshot)();
             (await unDrop)();
             (await unCloseMsgWindow)();
+            (await unHangUp)();
             if (unFocus) (await unFocus)();
         }
     }, [])
@@ -520,36 +532,43 @@ function CommonChatFrame({userInfo}) {
     }
 
     const handleMsgContent = (msg) => {
+        let isRight = msg.fromId === currentUserId.current
         switch (msg.msgContent?.type) {
             case "text": {
                 return <Text
                     value={msg.msgContent?.content}
-                    right={msg.fromId === currentUserId.current}
+                    right={isRight}
                 />
             }
             case "file": {
                 return <FileContent
                     value={msg}
-                    right={msg.fromId === currentUserId.current}
+                    right={isRight}
                 />
             }
             case "img": {
                 return <Img
                     value={msg}
-                    right={msg.fromId === currentUserId.current}
+                    right={isRight}
                 />
             }
             case "retraction": {
                 return <Retraction
                     value={msg}
                     onReedit={onReedit}
-                    right={msg.fromId === currentUserId.current}
+                    right={isRight}
                 />
             }
             case "voice": {
                 return <Voice
                     value={msg}
-                    right={msg.fromId === currentUserId.current}
+                    right={isRight}
+                />
+            }
+            case "call": {
+                return <Call
+                    value={msg}
+                    right={isRight}
                 />
             }
         }
diff --git a/src/componets/MsgContentShow/index.jsx b/src/componets/MsgContentShow/index.jsx
index d7f6a23..2f15558 100644
--- a/src/componets/MsgContentShow/index.jsx
+++ b/src/componets/MsgContentShow/index.jsx
@@ -1,3 +1,5 @@
+import {formatTimingTime} from "../../utils/date.js";
+
 export default function MsgContentShow({msgContent}) {
     if (!msgContent) return
     switch (msgContent.type) {
@@ -18,5 +20,9 @@ export default function MsgContentShow({msgContent}) {
             let content = JSON.parse(msgContent.content)
             return <div>[语音] {content.time}"</div>
         }
+        case "call": {
+            let content = JSON.parse(msgContent.content)
+            return <div>[通话] {content?.time > 0 ? formatTimingTime(content?.time) : "未接通"}</div>
+        }
     }
 }
\ No newline at end of file
diff --git a/src/componets/QuillRichTextEditor/index.jsx b/src/componets/QuillRichTextEditor/index.jsx
index d71a932..98c0c58 100644
--- a/src/componets/QuillRichTextEditor/index.jsx
+++ b/src/componets/QuillRichTextEditor/index.jsx
@@ -45,7 +45,7 @@ const QuillRichTextEditor = React.forwardRef(({value, onChange, onKeyDown}, ref)
         const quill = quillRef.current.getEditor();
 
         quill.clipboard.addMatcher(Node.ELEMENT_NODE, (node, delta) => {
-            if (node.tagName === 'IMG') {
+            if (node.tagName === 'IMG' || node.tagName === 'img') {
                 return delta;
             }
             let plaintext = node.innerText;
diff --git a/src/pages/VideoChat/index.jsx b/src/pages/VideoChat/index.jsx
index 9e95b28..e00147d 100644
--- a/src/pages/VideoChat/index.jsx
+++ b/src/pages/VideoChat/index.jsx
@@ -1,7 +1,7 @@
 import {useEffect, useRef, useState} from "react";
 import "./index.less"
 import VideoApi from "../../api/video.js";
-import {listen} from "@tauri-apps/api/event";
+import {emit, listen} from "@tauri-apps/api/event";
 import {WebviewWindow} from "@tauri-apps/api/WebviewWindow";
 import WindowOperation from "../../componets/WindowOperation/index.jsx";
 import CustomDragDiv from "../../componets/CustomDragDiv/index.jsx";
@@ -10,6 +10,7 @@ import {useToast} from "../../componets/CustomToast/index.jsx";
 import {getItem} from "../../utils/storage.js";
 import {formatTimingTime} from "../../utils/date.js";
 import {invoke} from "@tauri-apps/api/core";
+import MessageApi from "../../api/message.js";
 
 export default function VideoChat() {
     const toUserId = useRef()
@@ -158,8 +159,30 @@ export default function VideoChat() {
 
     const onHangup = () => {
         handlerDestroyTime()
-        VideoApi.hangup({userId: toUserId.current}).then(res => {
-            WebviewWindow.getCurrent().close()
+        //发送挂断消息
+        let msg = {
+            toUserId: toUserId.current,
+            msgContent: {
+                type: "call",
+                content: JSON.stringify({
+                    time: time,
+                    type: isOnlyAudio ? "audio" : "video"
+                })
+            }
+        }
+        MessageApi.sendMsg(msg).then(res => {
+            if (res.code === 0) {
+                if (res.data) {
+                    emit("on-hang-up", {
+                        toUserId: toUserId.current,
+                        data: res.data
+                    })
+                }
+            }
+        }).finally(() => {
+            VideoApi.hangup({userId: toUserId.current}).then(res => {
+                WebviewWindow.getCurrent().close()
+            })
         })
     }