From a0e0cecbc193c6e0943a4a58fbf08f419d22330c Mon Sep 17 00:00:00 2001
From: cbb <1055026847@qq.com>
Date: Wed, 4 Feb 2026 17:53:49 +0800
Subject: [PATCH] =?UTF-8?q?=E9=9F=B3=E8=A7=86=E9=A2=91=E9=80=9A=E8=AF=9D?=
 =?UTF-8?q?=E5=BC=80=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 TUIKit/assets/icon/telephone-icon.svg         |  1 +
 TUIKit/assets/icon/video-icon.svg             |  1 +
 TUIKit/components/TUIChat/index.vue           |  6 ---
 .../message-input-toolbar/call-view/index.vue | 51 +++++++++++++++++++
 .../call-view/style/index.scss                |  0
 .../TUIChat/message-input-toolbar/index.vue   | 10 +++-
 6 files changed, 61 insertions(+), 8 deletions(-)
 create mode 100644 TUIKit/assets/icon/telephone-icon.svg
 create mode 100644 TUIKit/assets/icon/video-icon.svg
 create mode 100644 TUIKit/components/TUIChat/message-input-toolbar/call-view/index.vue
 create mode 100644 TUIKit/components/TUIChat/message-input-toolbar/call-view/style/index.scss

diff --git a/TUIKit/assets/icon/telephone-icon.svg b/TUIKit/assets/icon/telephone-icon.svg
new file mode 100644
index 0000000..8ffbd79
--- /dev/null
+++ b/TUIKit/assets/icon/telephone-icon.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1770198199625" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11080" xmlns:xlink="http://www.w3.org/1999/xlink" width="80" height="80"><path d="M704.745199 914.322101c-53.991434 0-123.694545-35.966707-172.661656-66.147556-65.577374-40.409212-136.22303-96.314182-198.930101-157.408969l-0.226263-0.226263-19.909818-19.913697c-61.098667-62.700606-116.997172-133.351434-157.411556-198.928808-30.175677-48.967111-66.147556-118.670222-66.147555-172.661656 0-57.775838 41.315556-119.099475 59.079111-142.782061 13.858909-18.482424 62.285576-78.785939 103.429172-78.785939 16.896 0 35.091394 11.058424 59.004121 35.858101 21.149737 21.928081 41.446141 49.184323 54.745212 68.190383 17.864404 25.51596 34.382869 52.230465 46.520889 75.229091 19.655111 37.235071 21.928081 53.202747 21.928081 61.97398 0 17.702788-9.24703 33.057616-27.478627 45.635232-12.006141 8.279919-26.417131 14.514424-40.352323 20.54594-9.399596 4.06497-24.409212 10.554182-30.134303 15.119515 1.998869 8.458343 10.728727 28.887919 34.320808 63.525495 21.98497 32.274101 50.411313 67.250424 76.094061 93.624889 26.369293 25.678869 61.341737 54.109091 93.624889 76.09406 34.627232 23.58303 55.055515 32.318061 63.520323 34.315637 4.560162-5.723798 11.054545-20.730828 15.119515-30.129132 6.026343-13.937778 12.260848-28.348768 20.545939-40.356202 12.577616-18.231596 27.933737-27.473455 45.635233-27.473454 8.772525 0 24.736323 2.27297 61.979151 21.922909 22.994747 12.139313 49.713131 28.657778 75.226505 46.520889 19.003475 13.304242 46.26101 33.599354 68.194263 54.745212 24.794505 23.912727 35.852929 42.106828 35.852929 59.004121 0 41.143596-60.299636 89.570263-78.780767 103.430465-23.687758 17.763556-85.011394 59.077818-142.787233 59.077818M367.752229 655.485414z m316.783192-35.745616" fill="#707070" p-id="11081"></path><path d="M661.823825 478.178263c-8.622545 0-16.262465-6.181495-17.811393-14.96695-4.430869-25.13196-18.984081-46.968242-40.976809-61.482667-22.305616-14.722586-49.568323-20.190384-76.775434-15.393616-9.853414 1.73899-19.241374-4.839434-20.976485-14.687676-1.736404-9.849535 4.839434-19.241374 14.687677-20.979071 36.364929-6.411636 72.947071 0.987798 103.014141 20.83297 30.382545 20.053333 50.517333 50.389333 56.693657 85.421252 1.735111 9.848242-4.840727 19.241374-14.690263 20.976485-1.062788 0.188768-2.121697 0.279273-3.165091 0.279273zM770.839745 431.416889c-8.623838 0-16.263758-6.181495-17.812687-14.968243-8.599273-48.770586-36.77996-91.10497-79.349657-119.202909-42.885172-28.304808-95.238465-38.826667-147.415919-29.627474-9.852121 1.736404-19.241374-4.839434-20.976485-14.687677-1.736404-9.848242 4.838141-19.241374 14.687677-20.976485 61.336566-10.816646 123.008 1.636848 173.655919 35.065535 50.959515 33.635556 84.723071 84.470949 95.067798 143.141495 1.736404 9.848242-4.840727 19.241374-14.68897 20.977778-1.066667 0.186182-2.124283 0.27798-3.167676 0.27798z" fill="#707070" p-id="11082"></path><path d="M916.389967 417.914828c-8.623838 0-16.263758-6.181495-17.812687-14.968242-14.673455-83.229737-62.722586-155.446303-135.292121-203.344162-72.88501-48.10602-161.812687-65.99499-250.395152-50.376404-9.850828 1.737697-19.241374-4.839434-20.976485-14.687677-1.736404-9.849535 4.839434-19.241374 14.687677-20.97907 97.742869-17.232162 195.987394 2.587152 276.633859 55.815757 80.959354 53.435475 134.588768 134.151758 151.008969 227.282748 1.735111 9.848242-4.840727 19.240081-14.690262 20.976485-1.061495 0.190061-2.120404 0.280566-3.163798 0.280565z" fill="#707070" p-id="11083"></path></svg>
\ No newline at end of file
diff --git a/TUIKit/assets/icon/video-icon.svg b/TUIKit/assets/icon/video-icon.svg
new file mode 100644
index 0000000..dea71f0
--- /dev/null
+++ b/TUIKit/assets/icon/video-icon.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1770198302954" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14190" xmlns:xlink="http://www.w3.org/1999/xlink" width="80" height="80"><path d="M938.667 368.213L813.653 440.32v221.013l125.014 72.107a42.667 42.667 0 0 0 64.853-37.547V405.76a42.667 42.667 0 0 0-64.853-37.547zM650.24 206.933H147.2a128 128 0 0 0-125.867 125.44v405.334a128 128 0 0 0 128 125.866H650.24a128 128 0 0 0 128-125.866V332.373a128 128 0 0 0-128-125.44zM199.68 426.667a47.36 47.36 0 1 1 46.933-46.934 47.36 47.36 0 0 1-46.933 46.934z" p-id="14191" fill="#707070"></path></svg>
\ No newline at end of file
diff --git a/TUIKit/components/TUIChat/index.vue b/TUIKit/components/TUIChat/index.vue
index 58b7b70..69076cf 100644
--- a/TUIKit/components/TUIChat/index.vue
+++ b/TUIKit/components/TUIChat/index.vue
@@ -1,8 +1,5 @@
 <template>
   <div class="chat" :style="{ marginBottom: keywordHight + 'px' }">
-    <!-- #ifdef H5 -->
-    <!-- <TUICallKit></TUICallKit> -->
-    <!-- #endif -->
     <div :class="['tui-chat', !isPC && 'tui-chat-h5']">
       <div
         v-if="!currentConversationID"
@@ -105,9 +102,6 @@
     TUIConstants,
     ExtensionInfo
   } from '@tencentcloud/tui-core-lite'
-  //  #ifdef H5
-  // import { TUICallKit } from '@trtc/calls-uikit-vue'
-  // #endif
   import ChatHeader from './chat-header/index.vue'
   import MessageList from './message-list/index.vue'
   import MessageInput from './message-input/index.vue'
diff --git a/TUIKit/components/TUIChat/message-input-toolbar/call-view/index.vue b/TUIKit/components/TUIChat/message-input-toolbar/call-view/index.vue
new file mode 100644
index 0000000..23939bb
--- /dev/null
+++ b/TUIKit/components/TUIChat/message-input-toolbar/call-view/index.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+  import ToolbarItemContainer from '../toolbar-item-container/index.vue'
+  import custom from '../../../../assets/icon/telephone-icon.svg'
+  import videoIcon from '../../../../assets/icon/video-icon.svg'
+  import { isUniFrameWork } from '../../../../utils/env'
+  import { computed } from 'vue'
+
+  const props = withDefaults(
+    defineProps<{
+      /** 通话状态： 0 语音 1 视频 */
+      type?: '0' | '1'
+    }>(),
+    {
+      type: '0'
+    }
+  )
+
+  /** 语音通话状态 */
+  const isType = computed(() => props.type === '0')
+
+  const evaluateIcon = isType.value ? custom : videoIcon
+
+  const emits = defineEmits(['onDialogPopupShowOrHide'])
+
+  const onDialogShow = () => {
+    console.log('弹出窗口')
+    emits('onDialogPopupShowOrHide', true)
+  }
+
+  const onDialogClose = () => {
+    console.log('关闭窗口')
+    emits('onDialogPopupShowOrHide', false)
+  }
+</script>
+
+<template>
+  <ToolbarItemContainer
+    ref="container"
+    needBottomPopup
+    :iconFile="evaluateIcon"
+    :iconWidth="isUniFrameWork ? '34px' : '20px'"
+    :iconHeight="isUniFrameWork ? '34px' : '20px'"
+    :title="isType ? '语音通话' : '视频通话'"
+    @onDialogShow="onDialogShow"
+    @onDialogClose="onDialogClose"
+  >
+    测试通话
+  </ToolbarItemContainer>
+</template>
+
+<style scoped lang="scss" src="./style/index.scss"></style>
diff --git a/TUIKit/components/TUIChat/message-input-toolbar/call-view/style/index.scss b/TUIKit/components/TUIChat/message-input-toolbar/call-view/style/index.scss
new file mode 100644
index 0000000..e69de29
diff --git a/TUIKit/components/TUIChat/message-input-toolbar/index.vue b/TUIKit/components/TUIChat/message-input-toolbar/index.vue
index 8cc0ecf..499e5a3 100644
--- a/TUIKit/components/TUIChat/message-input-toolbar/index.vue
+++ b/TUIKit/components/TUIChat/message-input-toolbar/index.vue
@@ -65,9 +65,14 @@
           /> -->
           <!-- 红包 -->
           <RedEnvelope @onDialogPopupShowOrHide="handleSwiperDotShow" />
-
+          <!-- 语音通话 -->
+          <CallView @onDialogPopupShowOrHide="handleSwiperDotShow" />
+          <!-- 视频通话 -->
+          <CallView
+            type="1"
+            @onDialogPopupShowOrHide="handleSwiperDotShow"
+          />
           <!-- 直播按钮 -->
-
           <!-- #ifdef APP-PLUS -->
           <LiveStream
             v-if="
@@ -147,6 +152,7 @@
   import CameraUpload from './camera-upload/index.vue'
   import Evaluate from './evaluate/index.vue'
   import RedEnvelope from './red-envelope/index.vue'
+  import CallView from './call-view/index.vue'
   import LiveStream from './live-stream/index.vue'
   import Words from './words/index.vue'
   import ToolbarItemContainer from './toolbar-item-container/index.vue'