code/IM
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

前端：

Browse Source 
1、完善创建群聊逻辑
后端：
1、完善群聊相关接口
This commit is contained in:
nanxun
2026-02-11 22:44:28 +08:00
parent dc6ecf224d
commit 77db20dc38
55 changed files with 1986 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/web/src/App.vue
+5 -2
View File
@@ -20,8 +20,7 @@ onMounted(async () => {
}
})
</script>
<style scoped>
<style>
#app {
width: 100vw;
height: 100vh;
@@ -29,4 +28,8 @@ onMounted(async () => {
padding: 0;
overflow: hidden;
}
body {
overflow: hidden;
}
</style>
frontend/web/src/components/ContextMenu.vue
+98
View File
@@ -0,0 +1,98 @@
<template>
<teleport to="body">
<div
v-if="visible"
class="context-menu"
:style="{ top: style.top, left: style.left }"
@click="hide"
>
<div
v-for="item in menuItems"
:key="item.label"
class="menu-item"
:class="{ danger: item.type === 'danger' }"
@click="item.action"
>
<span class="icon">{{ item.icon }}</span>
{{ item.label }}
</div>
</div>
</teleport>
</template>
<script setup>
import { ref, reactive, onMounted, onUnmounted } from 'vue';
const visible = ref(false);
const menuItems = ref([]);
const style = reactive({
top: '0px',
left: '0px'
});
// 打开菜单：传入原生事件 e 和菜单配置
const show = (e, items) => {
e.preventDefault(); // 再次确保拦截
menuItems.value = items;
// 核心：使用 client 坐标定位
style.top = `${e.clientY}px`;
style.left = `${e.clientX}px`;
visible.value = true;
};
const hide = () => {
visible.value = false;
};
// 点击外部自动关闭
onMounted(() => {
window.addEventListener('click', hide);
window.addEventListener('contextmenu', hide); // 再次右键也关闭旧的
});
onUnmounted(() => {
window.removeEventListener('click', hide);
window.removeEventListener('contextmenu', hide);
});
defineExpose({ show, hide });
</script>
<style scoped>
.context-menu {
position: fixed;
z-index: 10000;
min-width: 140px;
background: #fff;
border-radius: 4px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
border: 1px solid #eee;
padding: 5px 0;
font-family: sans-serif;
}
.menu-item {
padding: 8px 16px;
font-size: 13px;
color: #333;
cursor: pointer;
display: flex;
align-items: center;
transition: background 0.2s;
}
.menu-item:hover {
background-color: #f5f5f5;
}
.menu-item.danger {
color: #ff4d4f;
}
.menu-item .icon {
margin-right: 8px;
font-size: 14px;
}
</style>
frontend/web/src/components/groups/CreateGroup.vue
+29 -14
View File
@@ -1,14 +1,16 @@
<script setup>
import { ref, computed } from 'vue';
import { ref, computed, onMounted } from 'vue';
import { useContactStore } from '@/stores/contact';
import { groupService } from '@/services/group';
import { SYSTEM_BASE_STATUS } from '@/constants/systemBaseStatus';
import { useMessage } from '../messages/useAlert';
const contactStore = useContactStore();
const message = useMessage();
const props = defineProps({ modelValue: Boolean });
const emit = defineEmits(['update:modelValue', 'create']);
const friends = ref([
{ id: 1, name: '张三', avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=1' },
{ id: 2, name: '李四', avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=2' },
{ id: 3, name: '王五', avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=3' },
]);
const friends = ref([])
const groupName = ref('');
const selected = ref(new Set()); // 使用 Set 处理选中逻辑更简洁
@@ -17,10 +19,23 @@ const toggle = (id) => {
selected.value.has(id) ? selected.value.delete(id) : selected.value.add(id);
};
const submit = () => {
emit('create', { name: groupName.value, members: Array.from(selected.value) });
emit('update:modelValue', false);
const submit = async () => {
const res = await groupService.createGroup({
name: groupName.value,
avatar: "https://baidu.com",
userIDs: [...selected.value]
});
if(res.code == SYSTEM_BASE_STATUS.SUCCESS){
message.show('群聊创建成功。');
}else{
message.error(res.message);
}
};
onMounted(async () =>{
friends.value = contactStore.contacts;
})
</script>
<template>
@@ -36,10 +51,10 @@ const submit = () => {
<input v-model="groupName" placeholder="群组名称..." class="mini-input" />
<div class="list">
<div v-for="f in friends" :key="f.id" @click="toggle(f.id)" class="item">
<img :src="f.avatar" class="avatar" />
<span class="name">{{ f.name }}</span>
<input type="checkbox" :checked="selected.has(f.id)" />
<div v-for="f in friends" :key="f.friendId" @click="toggle(f.friendId)" class="item">
<img :src="f.userInfo.avatar" class="avatar" />
<span class="name">{{ f.remarkName }}</span>
<input type="checkbox" :checked="selected.has(f.friendId)" />
</div>
</div>
</main>
frontend/web/src/router/index.js
+1 -1
View File
@@ -30,7 +30,7 @@ const routes = [
{
path: '/messages/chat/:id',
name: '/msgChat',
component: () => import('@/views/messages/MessageContent.vue'),
component: () => import('@/views/messages/messageContent/MessageContent.vue'),
props: true
}
]
frontend/web/src/services/group.js
+10
View File
@@ -0,0 +1,10 @@
import { request } from "./api"
export const groupService = {
/**
* 创建群聊
* @param {*} data
* @returns
*/
createGroup: (data) => request.post('/Group/CreateGroup', data)
}
frontend/web/src/views/Main.vue
+3 -3
View File
@@ -49,9 +49,9 @@ function handleStartChat(contact) {
/* 1. 基础容器：锁定宽高，禁止抖动 */
.im-container {
display: flex;
width: 1000px;
height: 650px;
margin: 40px auto;
width: 100%;
height: 100vh;
margin: 0 auto;
background: #fff;
border-radius: 4px;
overflow: hidden;
frontend/web/src/views/messages/MessageContent.vue → frontend/web/src/views/messages/messageContent/MessageContent.vue
+42 -5
View File
@@ -3,20 +3,21 @@
<header class="chat-header">
<span class="title">{{ conversationInfo?.targetName || '未选择会话' }}</span>
<div class="actions">
<button @click="startCall('video')" v-html="feather.icons['video'].toSvg({width:16, height: 16})"></button>
<button @click="startCall('voice')" v-html="feather.icons['phone'].toSvg({width:16, height: 16})"></button>
<button class="tool-btn" @click="startCall('video')" v-html="feather.icons['video'].toSvg({width:20, height: 20})"></button>
<button class="tool-btn" @click="startCall('voice')" v-html="feather.icons['phone-call'].toSvg({width:20, height: 20})"></button>
</div>
</header>
<div class="chat-history" ref="historyRef">
<HistoryLoading ref="loadingRef" :loading="isLoading" :finished="isFinished" :error="hasError" @retry="loadHistoryMsg"/>
<UserHoverCard ref="userHoverCardRef"/>
<ContextMenu ref="menuRef"/>
<div v-for="m in chatStore.messages" :key="m.id" :class="['msg', m.senderId == myInfo.id ? 'mine' : 'other']">
<img @mouseenter="(e) => handleHoverCard(e,m)" @mouseleave="closeHoverCard" :src="m.senderId == myInfo.id ? (myInfo?.avatar || defaultAvatar) : m.senderAvatar ?? defaultAvatar" class="avatar-chat" />
<div class="msg-content">
<div class="group-sendername" v-if="m.chatType == MESSAGE_TYPE.GROUP && m.senderId != myInfo.id">{{ m.senderName }}</div>
<div class="bubble">
<div class="bubble" @contextmenu.prevent="(e) => handleRightClick(e, m)">
<div v-if="m.type === 'Text'">{{ m.content }}</div>
<div v-else-if="m.type === 'emoji'" class="emoji-msg">{{ m.content }}</div>
<div class="status" v-if="m.senderId == myInfo.id">
@@ -69,6 +70,7 @@ import HistoryLoading from '@/components/messages/HistoryLoading.vue';
import { useMessage } from '@/components/messages/useAlert';
import { SYSTEM_BASE_STATUS } from '@/constants/systemBaseStatus';
import UserHoverCard from '@/components/user/UserHoverCard.vue';
import ContextMenu from '@/components/ContextMenu.vue';
const props = defineProps({
id:{
@@ -85,6 +87,7 @@ const input = ref(''); // 输入框内容
const historyRef = ref(null); // 绑定 DOM 用于滚动
const loadingRef = ref(null)
const userHoverCardRef = ref(null);
const menuRef = ref(null);
const myInfo = useAuthStore().userInfo;
const conversationInfo = ref(null)
@@ -139,6 +142,38 @@ const closeHoverCard = () => {
userHoverCardRef.value.hide();
}
const handleRightClick = (e, m) => {
e.stopPropagation();
const items = [
{
label: '复制',
action: () => console.log('打开之前的悬浮卡片', user)
},
{
label: '转发',
action: () => console.log('进入私聊', user.id)
},
{
label: '多选',
action: () => {}
},
{
label: '翻译',
action: () => {}
},
{
label: '引用',
action: () => {}
},
{
label: '删除',
type: 'danger',
action: () => alert('删除成功')
}
];
menuRef.value.show(e, items);
}
watch(
() => chatStore.messages,
async (newVal) => {
@@ -366,9 +401,11 @@ onUnmounted(() => {
}
.tool-btn {
border: 0;
background-color: white;
border: none;
background: none;
}
/* 历史区域：自动撑开并处理滚动 */
.chat-history {
flex: 1;
frontend/web/src/views/messages/messageContent/hooks/useRightClickHandler.js
+21
View File
@@ -0,0 +1,21 @@
export function useRightClickHandler() {
const items = [
{
label: '查看资料',
action: () => console.log('打开之前的悬浮卡片', user)
},
{
label: '发送消息',
action: () => console.log('进入私聊', user.id)
},
{
label: '修改备注',
action: () => { }
},
{
label: '删除好友',
type: 'danger',
action: () => alert('删除成功')
}
];
}