更新

TUICallKit-Vue3/TUIKit/components/MessageInput/AttachmentPicker/AttachmentPicker.module.scss

@@ -0,0 +1,31 @@
+.panel-box {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    margin: 10px;
+}
+
+.panel-item {
+    background-color: #F9FAFC;
+    width: 64px;
+    height: 64px;
+    border-radius: 14px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 4px;
+}
+
+.panel-icon {
+    width: 30px;
+    height: 30px;
+}
+
+.panel-text {
+    font-family: PingFang SC;
+    font-weight: 400;
+    font-size: 12px;
+    color: #00000066;
+    opacity: 0.8;
+}

TUICallKit-Vue3/TUIKit/components/MessageInput/AttachmentPicker/CameraPicker.vue

@@ -0,0 +1,49 @@
+<template>
+    <div class="panel-box">
+        <div class="panel-item" @click="handleClick">
+            <image class="panel-icon" :src="CameraPickerIcon"></image>
+        </div>
+        <text class="panel-text">拍照</text>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { useMessageInputState } from '../../../index';
+import CameraPickerIcon from '../../../assets/chat/camera-picker.svg'
+import { MessageContentType } from '../../../constants/chat'
+
+const { sendMessage } = useMessageInputState();
+const emit = defineEmits(['closePanel']);
+
+const handleClick = () => {
+    uni.chooseMedia({
+        count: 1,
+        mediaType: ['image', 'video'],
+        sizeType: ['original', 'compressed'],
+        sourceType: ['camera'],
+        camera: 'back',
+        success: function (res: any) {
+            emit('closePanel');
+            if (res.type === MessageContentType.IMAGE) {
+                sendMessage({
+                    type: MessageContentType.IMAGE,
+                    content: res
+                })
+            }
+            if (res.type === MessageContentType.VIDEO) {
+                sendMessage({
+                    type: MessageContentType.VIDEO,
+                    content: res
+                })
+            }
+        },
+        fail: function (err: any) {
+            console.error('chooseMedia failed:', err);
+        }
+    });
+}
+</script>
+
+<style lang="scss" scoped>
+@import './AttachmentPicker.module.scss';
+</style>

TUICallKit-Vue3/TUIKit/components/MessageInput/AttachmentPicker/PhotoPicker.vue

@@ -0,0 +1,48 @@
+<template>
+    <div class="panel-box">
+        <div class="panel-item" @click="handleClick">
+            <image class="panel-icon" :src="PhotoPickerIcon"></image>
+        </div>
+        <text class="panel-text">图片</text>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { useMessageInputState } from '../../../states/MessageInputState';
+import PhotoPickerIcon from '../../../assets/chat/photo-picker.svg'
+import { MessageContentType } from '../../../constants/chat'
+
+const { sendMessage } = useMessageInputState();
+const emit = defineEmits(['closePanel']);
+
+const handleClick = () => {
+    uni.chooseMedia({
+        count: 1,
+        mediaType: ['image', 'video'],
+        sizeType: ['original', 'compressed'],
+        sourceType: ['album'],
+        success: function (res: any) {
+            emit('closePanel');
+            if (res.type === MessageContentType.IMAGE) {
+                sendMessage({
+                    type: MessageContentType.IMAGE,
+                    content: res
+                })
+            }
+            if (res.type === MessageContentType.VIDEO) {
+                sendMessage({
+                    type: MessageContentType.VIDEO,
+                    content: res
+                })
+            }
+        },
+        fail: function (err: any) {
+            console.error('chooseMedia failed:', err);
+        }
+    });
+}
+</script>
+
+<style lang="scss" scoped>
+@import './AttachmentPicker.module.scss';
+</style>

TUICallKit-Vue3/TUIKit/components/MessageInput/AttachmentPicker/VideoCallPicker.vue

@@ -0,0 +1,42 @@
+<template>
+    <div class="panel-box">
+        <div class="panel-item" @click="handleCall">
+            <image class="panel-icon" :src="CallVideoIcon"></image>
+        </div>
+        <text class="panel-text">视频通话</text>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { useConversationListState } from '../../../states/ConversationListState';
+import { removeC2C } from '../../../utils'
+import CallVideoIcon from '../../../assets/chat/call-video.svg'
+import { TUIBridge } from '../../../TUIBridge';
+import { EVENT } from '../../../constants/event';
+
+const emit = defineEmits(['closePanel', 'showUserPicker']);
+const { activeConversation } = useConversationListState();
+
+const handleCall = () => {
+    emit('closePanel');
+
+    if (activeConversation.value?.type === 'GROUP') {
+        // 群聊：触发显示用户选择器事件
+        emit('showUserPicker', { type: 2 });
+    } else {
+        // 单聊：直接呼叫
+        const userID = removeC2C(activeConversation.value.conversationID);
+        TUIBridge.notifyEvent({
+            eventName: EVENT.ON_CALLS,
+            params: {
+                userIDList: [userID],
+                type: 2,
+            },
+        });
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+@import './AttachmentPicker.module.scss';
+</style>

TUICallKit-Vue3/TUIKit/components/MessageInput/AttachmentPicker/VoiceCallPicker.vue

@@ -0,0 +1,43 @@
+<template>
+    <div class="panel-box">
+        <div class="panel-item" @click="handleCall">
+            <image class="panel-icon" :src="CallVoiceIcon"></image>
+        </div>
+        <text class="panel-text">语音通话</text>
+    </div>
+</template>
+
+
+<script lang="ts" setup>
+import { useConversationListState } from '../../../states/ConversationListState';
+import { removeC2C } from '../../../utils'
+import CallVoiceIcon from '../../../assets/chat/call-voice.svg'
+import { TUIBridge } from '../../../TUIBridge';
+import { EVENT } from '../../../constants/event';
+
+const emit = defineEmits(['closePanel', 'showUserPicker']);
+const { activeConversation } = useConversationListState();
+
+const handleCall = () => {
+    emit('closePanel');
+
+    if (activeConversation.value?.type === 'GROUP') {
+        // 群聊：触发显示用户选择器事件
+        emit('showUserPicker', { type: 1 });
+    } else {
+        // 单聊：直接呼叫
+        const userID = removeC2C(activeConversation.value.conversationID);
+        TUIBridge.notifyEvent({
+            eventName: EVENT.ON_CALLS,
+            params: {
+                userIDList: [userID],
+                type: 1,
+            },
+        });
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+@import './AttachmentPicker.module.scss';
+</style>