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

add

Browse Source
This commit is contained in:
nanxun
2026-04-07 20:12:56 +08:00
parent feed24f378
commit cf8be0bff5
35 changed files with 722 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/pc/IM/.vscode/launch.json
Vendored
+1
View File
@@ -11,6 +11,7 @@
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron-vite.cmd"
},
"runtimeArgs": ["--sourcemap"],
"console": "integratedTerminal",
"env": {
"REMOTE_DEBUGGING_PORT": "9222"
}
frontend/pc/IM/.vscode/settings.json
Vendored
+1 -1
View File
@@ -3,7 +3,7 @@
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
frontend/pc/IM/electron.vite.config.mjs
+3
View File
@@ -7,6 +7,9 @@ export default defineConfig({
main: {},
preload: {},
renderer: {
server: {
host: true
},
resolve: {
alias: {
'@': resolve('src/renderer/src')
frontend/pc/IM/src/renderer/src/components/Dropdown.vue
+252
View File
@@ -0,0 +1,252 @@
<template>
<div class="v-ui-dropdown" ref="dropdownRef">
<button
type="button"
class="v-ui-dropdown-toggle"
:class="{ 'is-open': isOpen }"
@click.stop="toggleDropdown"
role="button"
aria-haspopup="listbox"
:aria-expanded="isOpen"
:disabled="disable"
>
<span class="v-ui-selected-text">{{ selectedLabel }}</span>
<span class="v-ui-arrow-icon" :class="{ 'v-ui-arrow-up': isOpen }">
<svg viewBox="0 0 1024 1024" width="1em" height="1em">
<path d="M831.872 340.864L512 652.672 192.128 340.864a31.936 31.936 0 0 0-45.248 0 32 32 0 0 0 0 45.248l342.144 333.76a31.936 31.936 0 0 0 45.248 0l342.144-333.76a32 32 0 0 0-45.248-45.248z" fill="currentColor"></path>
</svg>
</span>
</button>
<transition name="v-ui-dropdown-grow">
<ul
v-show="isOpen"
class="v-ui-dropdown-menu"
role="listbox"
:aria-activedescendant="modelValue"
>
<li
v-for="option in options"
:key="option.value"
class="v-ui-dropdown-item"
:class="{ 'is-selected': option.value === modelValue }"
@click.stop="selectOption(option)"
role="option"
:aria-selected="option.value === modelValue"
>
<span class="v-ui-item-label">{{ option.label }}</span>
<span v-if="option.value === modelValue" class="v-ui-check-icon">
<svg viewBox="0 0 1024 1024" width="1em" height="1em">
<path d="M358.4 716.8l-204.8-204.8-51.2 51.2 256 256 512-512-51.2-51.2-460.8 460.8z" fill="currentColor"></path>
</svg>
</span>
</li>
</ul>
</transition>
</div>
</template>
<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
// 定义 Props (逻辑未变)
const props = defineProps({
modelValue: {
type: [String, Number],
default: ''
},
options: {
type: Array,
required: true,
// 期望格式: [{ label: '选项一', value: 1 }, { label: '选项二', value: 2 }]
},
placeholder: {
type: String,
default: '请选择...'
},
disable: {
type: Boolean,
default: false
}
})
// 定义 Emits (支持 v-model, 逻辑未变)
const emit = defineEmits(['update:modelValue', 'change'])
const isOpen = ref(false)
const dropdownRef = ref(null)
// 计算当前选中的文本 (逻辑未变)
const selectedLabel = computed(() => {
const selected = props.options.find(opt => opt.value === props.modelValue)
return selected ? selected.label : props.placeholder
})
// 切换下拉菜单状态 (逻辑未变)
const toggleDropdown = () => {
isOpen.value = !isOpen.value
}
// 选中选项 (逻辑未变)
const selectOption = (option) => {
emit('update:modelValue', option.value)
emit('change', option)
isOpen.value = false
}
// 点击组件外部区域关闭菜单 (逻辑未变)
const handleClickOutside = (event) => {
if (dropdownRef.value && !dropdownRef.value.contains(event.target)) {
isOpen.value = false
}
}
// 挂载和卸载全局点击事件监听 (逻辑未变)
onMounted(() => {
document.addEventListener('click', handleClickOutside)
})
onUnmounted(() => {
document.removeEventListener('click', handleClickOutside)
})
</script>
<style scoped>
/* 使用加强型前缀和特异性选择器防止污染 */
.v-ui-dropdown {
position: relative; /* 强制相对定位 */
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 14px;
display: inline-block; /* 防止父容器布局冲突 */
}
/* 针对 ul 和 li 进行强制 reset，防止全局样式干扰 */
.v-ui-dropdown ul {
list-style: none;
padding: 0;
margin: 0;
}
.v-ui-dropdown li {
list-style: none;
}
/* 触发按钮：白底、靛蓝色边框的现代 Filled 风格 */
.v-ui-dropdown-toggle {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 10px 16px;
background-color: #007aff; /* 强制微灰底色，与纯白背景区分 */
border: 1px solid #e4e4e7; /* 浅灰边框，避免融合 */
border-radius: 12px;
color: #000000; /* 极深灰 */
font-weight: 500;
cursor: pointer;
user-select: none;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.v-ui-dropdown-toggle:hover {
background-color: #cacaff;
border-color: #d1d5db;
}
/* 展开状态下 */
.v-ui-dropdown-toggle.is-open {
background-color: #cacaff;
border-color: #4f46e5; /* 靛蓝色主色 */
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15); /* Focus 环 */
}
.v-ui-selected-text {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-right: 10px;
text-align: left;
}
.v-ui-arrow-icon {
display: flex;
font-size: 12px;
color: #000000;
transition: transform 0.3s ease, color 0.2s ease;
}
.v-ui-arrow-up {
transform: rotate(180deg);
color: #4f46e5;
}
/* 下拉菜单：纯白底色，强化悬浮阴影 */
.v-ui-dropdown .v-ui-dropdown-menu {
position: absolute;
top: 100%;
left: 0;
width: 100%;
margin-top: 8px;
padding: 6px;
background-color: #ffffff;
border: 1px solid #e4e4e7;
border-radius: 12px;
/* 强阴影是白色背景上脱颖而出的秘诀 */
box-shadow: 0 12px 32px -4px rgba(0, 0, 0, 0.12), 0 4px 12px -4px rgba(0, 0, 0, 0.08);
z-index: 1000; /* 确保在最上层 */
max-height: 240px;
overflow-y: auto;
}
/* 菜单项样式 */
.v-ui-dropdown-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 12px;
border-radius: 8px;
cursor: pointer;
color: #18181b;
transition: all 0.2s ease;
margin-bottom: 2px; /* Item 呼吸感 */
}
.v-ui-dropdown-item:hover {
background-color: #f4f4f5;
}
/* 选中项的样式 */
.v-ui-dropdown-item.is-selected {
background-color: #eef2ff; /* 极淡的靛蓝色 */
color: #4f46e5;
font-weight: 600;
}
.v-ui-item-label {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-right: 10px;
}
.v-ui-check-icon {
display: flex;
font-size: 14px;
color: #4f46e5;
}
/* 过渡动画 */
.v-ui-dropdown-grow-enter-active,
.v-ui-dropdown-grow-leave-active {
transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.2, 0, 0, 1);
transform-origin: top center;
}
.v-ui-dropdown-grow-enter-from,
.v-ui-dropdown-grow-leave-to {
opacity: 0;
transform: scaleY(0.95) translateY(-8px);
}
</style>
frontend/pc/IM/src/renderer/src/components/groups/CreateGroup.vue
+3 -2
View File
@@ -4,6 +4,7 @@ import { friendService } from '../../services/friend';
import { groupService } from '@/services/group';
import { SYSTEM_BASE_STATUS } from '@/constants/systemBaseStatus';
import { useMessage } from '../messages/useAlert';
import AsyncImage from '../AsyncImage.vue';
const message = useMessage();
@@ -62,7 +63,7 @@ onMounted(async () =>{
<div class="list">
<div v-for="f in friends" :key="f.friendId" @click="toggle(f.friendId)" class="item">
<img :src="f.userInfo.avatar" class="avatar" />
<AsyncImage :raw-url="f.userInfo.avatar" class="avatar" />
<span class="name">{{ f.remarkName }}</span>
<input type="checkbox" :checked="selected.has(f.friendId)" />
</div>
@@ -111,7 +112,7 @@ main { padding: 12px; }
}
.item:hover { background: #f5f5f5; }
.avatar { width: 32px; height: 32px; border-radius: 4px; margin-right: 10px; }
:deep(.avatar) { width: 32px; height: 32px; border-radius: 4px; margin-right: 10px; }
.name { flex: 1; font-size: 14px; }
footer { padding: 12px; }
frontend/pc/IM/src/renderer/src/components/messages/InfoSidebar.vue
+3 -2
View File
@@ -43,7 +43,7 @@
class="member-item"
>
<div class="member-avatar-box">
<img :src="member.avatar" class="member-img" />
<async-image :raw-url="member.avatar" class="member-img"/>
<span v-if="member.role === GROUP_MEMBER_ROLE.ADMIN || member.role === GROUP_MEMBER_ROLE.MASTER" class="role-badge"></span>
</div>
<span class="member-nick">{{ member.nickname }}</span>
@@ -85,6 +85,7 @@ import { SYSTEM_BASE_STATUS } from '../../constants/systemBaseStatus';
import { useMessage } from './useAlert';
import { getFileHash } from '../../utils/uploadTools';
import CreateGroup from '../groups/CreateGroup.vue';
import AsyncImage from '../AsyncImage.vue';
const props = defineProps({
chatType: {
@@ -339,7 +340,7 @@ onMounted(async () => {
height: 48px;
}
.member-img {
:deep(.member-img) {
width: 100%;
height: 100%;
border-radius: 12px;
frontend/pc/IM/src/renderer/src/constants/GroupDefine.js
+8 -2
View File
@@ -18,7 +18,12 @@ export const GROUP_REQUEST_STATUS = Object.freeze({
TARGET_PENDING: 'TargetPending',
/** 对方拒绝 */
TARGET_DECLINED: 'TargetDeclined'
});
})
export const GROUP_REQUEST_ACTION = Object.freeze({
ACCEPT: 'Accept',
REJECT: 'Reject'
})
export const getGroupRequestStatusTxt = (status) => {
@@ -36,4 +41,5 @@ export const getGroupRequestStatusTxt = (status) => {
default:
return '未知状态';
}
};
}
frontend/pc/IM/src/renderer/src/handler/messageHandler.js
+17 -4
View File
@@ -3,10 +3,23 @@ import { MESSAGE_TYPE } from "../constants/MessageType";
export const messageHandler = (msg) => {
const conversationStore = useConversationStore();
const conversation = conversationStore.conversations.find(x =>
((x.targetId == msg.senderId || x.targetId == msg.receiverId) && msg.chatType == MESSAGE_TYPE.PRIVATE) ||
(x.targetId == msg.receiverId && msg.chatType == MESSAGE_TYPE.GROUP)
);
const conversation = conversationStore.conversations.find(x => {
// 1. 如果是私聊：目标 ID 必须是对方（可能是发送者，也可能是接收者）
if (msg.chatType === MESSAGE_TYPE.PRIVATE) {
return x.chatType === MESSAGE_TYPE.PRIVATE &&
(x.targetId === msg.senderId || x.targetId === msg.receiverId);
}
// 2. 如果是群聊：目标 ID 必须是群 ID（即消息的 receiverId）
if (msg.chatType === MESSAGE_TYPE.GROUP) {
return x.chatType === MESSAGE_TYPE.GROUP &&
x.targetId === msg.receiverId;
}
return false;
});
if (!conversation) return; // 容错处理：如果没找到会话，不执行后续逻辑
conversation.lastMessage = msg.content;
if (conversation.targetId == msg.receiverId) {
conversation.unreadCount = 0;
frontend/pc/IM/src/renderer/src/services/group.js
+17 -1
View File
@@ -42,5 +42,21 @@ export const groupService = {
* 获取群聊通知
* @returns
*/
getGroupNotification: () => request.get('/Group/GetGroupNotification')
getGroupNotification: () => request.get('/Group/GetGroupNotification'),
/**
* 处理入群邀请
* @param {*} inviteId
* @param {*} action
* @returns
*/
handleGroupInvite: (inviteId, action) =>
request.post('/Group/HandleGroupInvite', { inviteId: inviteId, action: action }),
/**
* 处理入群请求
* @param {*} requestId
* @param {*} action
* @returns
*/
handleGroupRequest: (requestId, action) =>
request.post('/Group/HandleGroupRequest', { requestId: requestId, action: action })
}
frontend/pc/IM/src/renderer/src/stores/chat.js
-1
View File
@@ -50,7 +50,6 @@ export const useChatStore = defineStore('chat', {
this.isEnded = false;
//先从浏览器缓存加载一部分消息列表
const localHistory = await messagesDb.getLatestMessages(sessionId, this.pageSize);
console.log(localHistory)
if (localHistory.length > 0) {
this.messages = localHistory;
this.maxSequenceId = this.messages.reduce((max, m) =>
frontend/pc/IM/src/renderer/src/utils/sessionIdTools.js
+1 -1
View File
@@ -10,5 +10,5 @@ export const generateSessionId = (id1, id2, isGroup = false) => {
if (isGroup) {
return `g:${id2}`;
}
return [String(id1), String(id2)].sort().join('_');
return 'p:' + [String(id1), String(id2)].sort().join('_');
};
frontend/pc/IM/src/renderer/src/views/Test.vue
+3 -1
View File
@@ -1,6 +1,7 @@
<template>
<AsyncImage raw-url="http://192.168.5.116:7070/uploads/files/IM/2026/03/2/e6c407f60c68.jpg" :type="FILE_TYPE.Image"/>
<!-- <AsyncImage raw-url="http://192.168.5.116:7070/uploads/files/IM/2026/03/2/e6c407f60c68.jpg" :type="FILE_TYPE.Image"/> -->
<Dropdown :options="[{label:'测试1',value:'测试1'},{label:'测试2',value:'测试2'}]" placeholder="测试下拉框"/>
<button @click="test">click</button>
</template>
@@ -9,6 +10,7 @@ import { ref } from 'vue';
import { useCacheStore } from '../stores/cache';
import { FILE_TYPE } from '../constants/fileTypeDefine';
import AsyncImage from '../components/AsyncImage.vue';
import Dropdown from '../components/Dropdown.vue';
const url = ref('')
frontend/pc/IM/src/renderer/src/views/contact/GroupRequest.vue
+59 -31
View File
@@ -9,30 +9,25 @@
<div v-for="item in groupRequest" :key="item.requestId" class="minimal-item">
<div class="avatar-wrapper">
<img
:src="avatarHandle(item)"
:class="[
'avatar',
item.type === GROUP_REQUEST_STATUS.IS_GROUP ||
<img :src="avatarHandle(item)" :class="[
'avatar',
item.type === GROUP_REQUEST_STATUS.IS_GROUP ||
item.type === GROUP_REQUEST_STATUS.IS_USER
? 'is-group'
: 'is-user'
]"
/>
? 'is-group'
: 'is-user'
]" />
</div>
<div class="info">
<div class="title-row">
<span class="name">{{ item.name }}</span>
<span
:class="[
'type-tag',
item.type === GROUP_REQUEST_TYPE.INVITE ||
<span :class="[
'type-tag',
item.type === GROUP_REQUEST_TYPE.INVITE ||
item.type === GROUP_REQUEST_TYPE.IS_USER
? 'tag-orange'
: 'tag-green'
]"
>
? 'tag-orange'
: 'tag-green'
]">
{{ getTypeText(item.type) }}
</span>
<span class="date">14:20</span>
@@ -42,25 +37,23 @@
<span class="label">目标群聊：</span>
<span class="group-name">{{ item.groupName }}</span>
</div>
<div
v-if="[GROUP_REQUEST_TYPE.INVITE, GROUP_REQUEST_TYPE.INVITED].includes(item.type)"
class="group-info"
>
<div v-if="[GROUP_REQUEST_TYPE.INVITE, GROUP_REQUEST_TYPE.INVITED].includes(item.type)"
class="group-info">
<span class="label">目标用户：</span>
<span class="group-name">{{
myInfo.id === item.userId ? item.inviteUserNickname : item.nickName
}}</span>
}}</span>
</div>
<p class="sub-text">入群描述：{{ item.description }}</p>
</div>
<div
v-if="![GROUP_REQUEST_TYPE.INVITE, GROUP_REQUEST_TYPE.IS_USER].includes(item.type)"
class="actions"
>
<div v-if="[GROUP_REQUEST_TYPE.INVITED, GROUP_REQUEST_TYPE.IS_GROUP].includes(item.type)" class="actions">
<button class="btn-text btn-reject">忽略</button>
<button class="btn-text btn-accept">去处理</button>
<Dropdown :disable="handleDropDownDisable" class="handleDropDown" v-model="handleValue" :options="[
{ label: '同意', value: GROUP_REQUEST_ACTION.ACCEPT },
{ label: '拒绝', value: GROUP_REQUEST_ACTION.REJECT }
]" placeholder="处理" @change="groupRequestHandler(item, handleValue)" />
</div>
<div class="actions" v-else>
@@ -78,18 +71,26 @@
</template>
<script setup>
import { onMounted, computed } from 'vue';
import { onMounted, computed, ref, watch } from 'vue';
import WindowControls from '../../components/WindowControls.vue';
import { useGroupRequestStore } from '../../stores/groupRequest';
import { useAuthStore } from '../../stores/auth';
import { GROUP_REQUEST_TYPE, getTypeText } from '../../constants/groupRequestTypeDefine';
import { GROUP_REQUEST_STATUS, getGroupRequestStatusTxt } from '../../constants/GroupDefine';
import { GROUP_REQUEST_ACTION, GROUP_REQUEST_STATUS, getGroupRequestStatusTxt } from '../../constants/GroupDefine';
import Dropdown from '../../components/Dropdown.vue';
import { groupService } from '../../services/group';
import { useMessage } from '../../components/messages/useAlert';
import { SYSTEM_BASE_STATUS } from '../../constants/systemBaseStatus';
const groupRequestStore = useGroupRequestStore()
const myInfo = useAuthStore().userInfo
const handleValue = ref(null)
const handleDropDownDisable = ref(false)
const message = useMessage()
const groupRequest = computed(() => {
if(!groupRequestStore.groupRequest){
if (!groupRequestStore.groupRequest) {
return [];
}
return groupRequestStore.groupRequest.map((item) => {
@@ -109,7 +110,7 @@ const getGroupRequestStatusClass = (status) => {
};
const avatarHandle = (request) => {
switch(request.type){
switch (request.type) {
case GROUP_REQUEST_STATUS.IS_GROUP:
case GROUP_REQUEST_STATUS.IS_USER:
return request.groupAvatar;
@@ -154,6 +155,31 @@ const getRequestType = (request) => {
}
}
//入群请求处理
const groupRequestHandler = async (request, action) => {
if (!request || !request.type) return
let requestAction = GROUP_REQUEST_STATUS.PASSED
let result = null
switch (request.type) {
case GROUP_REQUEST_TYPE.INVITED:
requestAction = action == GROUP_REQUEST_ACTION.ACCEPT ? GROUP_REQUEST_STATUS.TARGET_PENDING : GROUP_REQUEST_STATUS.TARGET_DECLINED;
result = await groupService.handleGroupInvite(request.id ,requestAction)
break
case GROUP_REQUEST_TYPE.IS_GROUP:
requestAction = action == GROUP_REQUEST_ACTION.ACCEPT ? GROUP_REQUEST_STATUS.PASSED : GROUP_REQUEST_STATUS.DECLINED;
result = await groupService.handleGroupRequest(request.id, requestAction)
break
default:
return
}
if(result.code == SYSTEM_BASE_STATUS.SUCCESS){
message.success('操作成功')
}else{
message.error(result.message)
}
}
onMounted(async () => {
await groupRequestStore.loadGroupRequest()
console.log(groupRequestStore.groupRequest)
@@ -390,4 +416,6 @@ onMounted(async () => {
opacity: 0.8;
cursor: not-allowed;
}
.handleDropDown {}
</style>
frontend/pc/IM/src/renderer/src/views/contact/UserInfoContent.vue
+2 -3
View File
@@ -68,13 +68,12 @@ const currentContact = ref(null)
function handleGoToChat() {
if (currentContact.value) {
const cid = conversationStore.conversations.find(x => x.targetId == currentContact.value.userInfo.id).id;
console.log(cid)
router.push(`/messages/chat/${cid}`);
}
}
onBeforeRouteUpdate(() => {
currentContact.value = contactStore.contacts.find(x => x.id == props.id);
onBeforeRouteUpdate((to, from) => {
currentContact.value = contactStore.contacts.find(x => x.id == to.params.id);
})
onMounted(() => {
currentContact.value = contactStore.contacts.find(x => x.id == props.id);