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

前端：

Browse Source 
修复了已知问题
后端：
修复了已知问题
This commit is contained in:
西街长安 2026-01-21 22:30:51 +08:00
parent 77744015de
commit a31735dbe2
25 changed files with 1418 additions and 433 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
backend/IM_API/Configs/MapperConfig.cs
View File

@ -30,12 +30,12 @@ namespace IM_API.Configs
.ForMember(dest => dest.UserInfo, opt => opt.MapFrom(src => src.FriendNavigation))
;
//好友请求通过后新增好友关系
CreateMap<FriendRequest, Friend>()
.ForMember(dest => dest.UserId , opt => opt.MapFrom(src => src.RequestUser))
.ForMember(dest => dest.FriendId , opt => opt.MapFrom(src => src.ResponseUser))
.ForMember(dest => dest.StatusEnum , opt =>opt.MapFrom(src => FriendStatus.Added))
.ForMember(dest => dest.RemarkName , opt => opt.MapFrom(src => src.ResponseUserNavigation.NickName))
.ForMember(dest => dest.Created , opt => opt.MapFrom(src => DateTime.Now))
CreateMap<FriendRequestDto, Friend>()
.ForMember(dest => dest.UserId , opt => opt.MapFrom(src => src.FromUserId))
.ForMember(dest => dest.FriendId , opt => opt.MapFrom(src => src.ToUserId))
.ForMember(dest => dest.StatusEnum , opt =>opt.MapFrom(src => FriendStatus.Pending))
.ForMember(dest => dest.RemarkName , opt => opt.MapFrom(src => src.RemarkName))
.ForMember(dest => dest.Created , opt => opt.MapFrom(src => DateTime.UtcNow))
;
//发起好友请求转换请求对象
CreateMap<FriendRequestDto, FriendRequest>()

6
backend/IM_API/Controllers/FriendController.cs
View File

@ -44,12 +44,12 @@ namespace IM_API.Controllers
/// <param name="desc"></param>
/// <returns></returns>
[HttpGet]
public async Task<IActionResult> Requests(bool isReceived,int page,int limit,bool desc)
public async Task<IActionResult> Requests(int page,int limit,bool desc)
{
var userIdStr = User.FindFirstValue(ClaimTypes.NameIdentifier);
int userId = int.Parse(userIdStr);
var list = await _friendService.GetFriendRequestListAsync(userId,isReceived,page,limit,desc);
var res = new BaseResponse<List<FriendRequest>>(list);
var list = await _friendService.GetFriendRequestListAsync(userId,page,limit,desc);
var res = new BaseResponse<List<FriendRequestResDto>>(list);
return Ok(res);
}
/// <summary>

6
backend/IM_API/Dtos/BaseResponse.cs
View File

@ -73,6 +73,10 @@ namespace IM_API.Dtos
this.Code = codeDefine.Code;
this.Message = codeDefine.Message;
}
public BaseResponse() { }
public BaseResponse()
{
this.Code = CodeDefine.SUCCESS.Code;
this.Message = CodeDefine.SUCCESS.Message;
}
}
}

2
backend/IM_API/Dtos/FriendRequestDto.cs
View File

@ -4,7 +4,7 @@ namespace IM_API.Dtos
{
public class FriendRequestDto
{
public int FromUserId { get; set; }
public int? FromUserId { get; set; }
public int ToUserId { get; set; }
[Required(ErrorMessage = "备注名必填")]
[StringLength(20, ErrorMessage = "备注名不能超过20位字符")]

36
backend/IM_API/Dtos/FriendRequestResDto.cs Normal file
View File

@ -0,0 +1,36 @@
using IM_API.Models;
namespace IM_API.Dtos
{
public class FriendRequestResDto
{
public int Id { get; set; }
/// <summary>
/// 申请人
/// </summary>
public int RequestUser { get; set; }
/// <summary>
/// 被申请人
/// </summary>
public int ResponseUser { get; set; }
public string Avatar { get; set; }
public string NickName { get; set; }
/// <summary>
/// 申请时间
/// </summary>
public DateTime Created { get; set; }
/// <summary>
/// 申请附言
/// </summary>
public string? Description { get; set; }
/// <summary>
/// 申请状态（0：待通过,1:拒绝,2:同意,3：拉黑）
/// </summary>
public FriendRequestState State { get; set; }
}
}

2
backend/IM_API/Interface/Services/IFriendSerivce.cs
View File

@ -27,7 +27,7 @@ namespace IM_API.Interface.Services
/// <param name="page"></param>
/// <param name="limit"></param>
/// <returns></returns>
Task<List<FriendRequest>> GetFriendRequestListAsync(int userId,bool isReceived,int page,int limit, bool desc);
Task<List<FriendRequestResDto>> GetFriendRequestListAsync(int userId,int page,int limit, bool desc);
/// <summary>
/// 处理好友请求
/// </summary>

49
backend/IM_API/Services/FriendService.cs
View File

@ -73,23 +73,29 @@ namespace IM_API.Services
}
#endregion
#region 获取好友请求列表
public async Task<List<FriendRequest>> GetFriendRequestListAsync(int userId, bool isReceived, int page, int limit, bool desc)
public async Task<List<FriendRequestResDto>> GetFriendRequestListAsync(int userId, int page, int limit, bool desc)
{
var query = _context.FriendRequests.AsQueryable();
//是否为请求方
if (isReceived)
{
query = _context.FriendRequests.Where(x => x.ResponseUser == userId);
}
else
{
query = _context.FriendRequests.Where(x => x.RequestUser == userId);
}
if (desc)
{
query = query.OrderByDescending(x => x.Id);
}
var friendRequestList = await query.Skip((page - 1 * limit)).Take(limit).ToListAsync();
var query = _context.FriendRequests
.Include(x => x.ResponseUserNavigation)
.Include(x => x.RequestUserNavigation)
.Where(
x => (x.ResponseUser == userId) ||
x.RequestUser == userId
)
.Select(s => new FriendRequestResDto
{
Id = s.Id,
RequestUser = s.RequestUser,
ResponseUser = s.ResponseUser,
Avatar = s.RequestUser == userId ? s.ResponseUserNavigation.Avatar : s.RequestUserNavigation.Avatar,
Created = s.Created,
NickName = s.RequestUser == userId ? s.ResponseUserNavigation.NickName : s.RequestUserNavigation.NickName,
Description = s.Description,
State = (FriendRequestState)s.State
})
;
query = query.OrderByDescending(x => x.Id);
var friendRequestList = await query.Skip(((page - 1) * limit)).Take(limit).ToListAsync();
return friendRequestList;
}
#endregion
@ -154,16 +160,17 @@ namespace IM_API.Services
if (alreadyExists)
throw new BaseException(CodeDefine.FRIEND_REQUEST_EXISTS);
var friendShip = await _context.Friends.FirstOrDefaultAsync(x => x.UserId == dto.FromUserId && x.FriendId == dto.ToUserId);
//检查是否被对方拉黑
bool isBlocked = await _context.Friends.AnyAsync(x =>
x.UserId == dto.FromUserId && x.FriendId == dto.ToUserId && x.Status == (sbyte)FriendStatus.Blocked
);
bool isBlocked = friendShip != null && friendShip.StatusEnum == FriendStatus.Blocked;
if (isBlocked)
throw new BaseException(CodeDefine.FRIEND_REQUEST_REJECTED);
if (friendShip != null)
throw new BaseException(CodeDefine.ALREADY_FRIENDS);
//生成实体
var friendRequst = _mapper.Map<FriendRequest>(dto);
var friend = _mapper.Map<Friend>(friendRequst);
var friend = _mapper.Map<Friend>(dto);
_context.FriendRequests.Add(friendRequst);
_context.Friends.Add(friend);
await _context.SaveChangesAsync();

0
frontend/web/src/components/user/RequestFriend.vue Normal file
View File

399
frontend/web/src/components/user/SearchUser.vue Normal file
View File

@ -0,0 +1,399 @@
<template>
<transition name="fade">
<div v-if="modelValue" class="modal-mask" @click.self="close">
<div class="modal-container">
<div class="modal-header">
<div class="header-title">
<button v-if="step === 2" class="btn-back-icon" @click="step = 1">←</button>
<h2>{{ step === 1 ? '添加好友' : '验证信息' }}</h2>
</div>
<button class="icon-close" @click="close">×</button>
</div>
<div v-if="step === 1" class="step-wrapper">
<div class="search-box">
<input
v-model="keyword"
type="text"
placeholder="输入 ID / 手机号"
@keyup.enter="onSearch"
/>
<button class="search-btn" @click="onSearch" :disabled="loading">
<span v-if="!loading">搜索</span>
<span v-else class="spinner"></span>
</button>
</div>
<transition name="fade-slide">
<div v-if="userResult" class="user-card">
<div class="user-info">
<img :src="userResult.avatar || defaultAvatar" class="avatar" />
<div class="detail">
<span class="name">{{ userResult.nickName }}</span>
<span class="id">ID: {{ userResult.username }}</span>
</div>
</div>
<button class="add-action-btn" @click="goToAddForm">添加好友</button>
</div>
<div v-else-if="hasSearched && !userResult" class="empty-state">
未找到该用户，请检查输入
</div>
</transition>
</div>
<div v-if="step === 2" class="step-wrapper form-container">
<div class="form-item">
<label>备注名</label>
<input
v-model="form.remark"
placeholder="为好友起个备注吧"
class="form-input"
/>
</div>
<div class="form-item">
<label>验证信息</label>
<textarea
v-model="form.description"
placeholder="我是..."
rows="3"
class="form-textarea"
></textarea>
</div>
<button
class="btn-submit"
@click="submitAdd"
:disabled="submitting"
>
{{ submitting ? '发送中...' : '提交申请' }}
</button>
</div>
</div>
</div>
</transition>
</template>
<script setup>
import { ref, reactive } from 'vue';
import { friendService } from '@/services/friend';
import { useMessage } from '../messages/useAlert';
const props = defineProps({
modelValue: Boolean
});
const emit = defineEmits(['update:modelValue', 'success']);
const message = useMessage();
// 基础状态
const step = ref(1);
const loading = ref(false);
const submitting = ref(false);
const hasSearched = ref(false);
const defaultAvatar = 'https://api.dicebear.com/7.x/adventurer/svg?seed=Lucky';
// 数据
const keyword = ref('');
const userResult = ref(null);
const form = reactive({
remark: '',
description: '你好，想加你为好友'
});
const close = () => {
emit('update:modelValue', false);
// 延迟重置，避免动画没做完就变白
setTimeout(() => {
step.value = 1;
userResult.value = null;
hasSearched.value = false;
keyword.value = '';
form.remark = '';
form.description = '你好，想加你为好友';
}, 300);
};
// 搜索逻辑
const onSearch = async () => {
if (!keyword.value.trim()) return;
loading.value = true;
hasSearched.value = false;
try {
const res = await friendService.findUser(keyword.value);
userResult.value = res.data;
if (res.data) {
form.remark = res.data.nickName; // 默认备注为昵称
}
} catch (err) {
console.error(err);
} finally {
loading.value = false;
hasSearched.value = true;
}
};
const goToAddForm = () => {
step.value = 2;
};
// 提交逻辑
const submitAdd = async () => {
if (submitting.value) return;
submitting.value = true;
const res = await friendService.requestFriend({
toUserId: userResult.value.id, // 根据你后端字段调整
remarkName: form.remark,
description: form.description
});
if(res.code == 0){
message.success('已发送好友请求');
}else{
message.error(res.message);
}
submitting.value = false;
close();
};
</script>
<style scoped>
/* 1. 基础布局与遮罩 */
.modal-mask {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.2);
backdrop-filter: blur(10px);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
.modal-container {
background: #ffffff;
width: 380px;
border-radius: 28px;
padding: 28px;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
overflow: hidden;
}
/* 2. 头部样式 */
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
}
.header-title {
display: flex;
align-items: center;
gap: 12px;
}
.modal-header h2 {
font-size: 1.2rem;
font-weight: 700;
color: #1d1d1f;
margin: 0;
}
.btn-back-icon {
background: none;
border: none;
font-size: 1.2rem;
cursor: pointer;
color: #007aff;
padding: 0;
}
.icon-close {
background: #f5f5f7;
border: none;
width: 28px;
height: 28px;
border-radius: 50%;
color: #86868b;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}
.icon-close:hover {
background: #e8e8ed;
color: #1d1d1f;
}
/* 3. 搜索区域 */
.search-box {
display: flex;
background: #f5f5f7;
border-radius: 14px;
padding: 6px;
margin-bottom: 20px;
transition: all 0.3s;
border: 1px solid transparent;
}
.search-box:focus-within {
background: #fff;
border-color: #007aff;
box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1);
}
.search-box input {
flex: 1;
background: transparent;
border: none;
padding: 10px 14px;
outline: none;
font-size: 14px;
color: #1d1d1f;
}
.search-btn {
background: #007aff;
color: white;
border: none;
padding: 0 18px;
border-radius: 10px;
cursor: pointer;
font-weight: 600;
font-size: 13px;
}
.search-btn:disabled {
opacity: 0.7;
}
/* 4. 用户卡片 */
.user-card {
background: #f5f5f7;
border-radius: 20px;
padding: 20px;
text-align: center;
}
.user-info {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 20px;
}
.avatar {
width: 72px;
height: 72px;
border-radius: 50%;
margin-bottom: 12px;
background: #fff;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.name {
font-weight: 700;
font-size: 17px;
color: #1d1d1f;
}
.id {
font-size: 13px;
color: #86868b;
margin-top: 4px;
}
.add-action-btn {
width: 100%;
background: #007aff;
color: white;
border: none;
padding: 12px;
border-radius: 12px;
font-weight: 600;
cursor: pointer;
transition: transform 0.2s;
}
.add-action-btn:active {
transform: scale(0.98);
}
/* 5. 表单样式 */
.form-container {
display: flex;
flex-direction: column;
gap: 18px;
}
.form-item label {
font-size: 13px;
font-weight: 600;
color: #86868b;
margin-bottom: 8px;
display: block;
}
.form-input, .form-textarea {
width: 100%;
background: #f5f5f7;
border: 1px solid transparent;
border-radius: 12px;
padding: 12px 16px;
font-size: 14px;
outline: none;
box-sizing: border-box;
}
.form-input:focus, .form-textarea:focus {
background: #fff;
border-color: #007aff;
}
.btn-submit {
background: #007aff;
color: white;
border: none;
padding: 14px;
border-radius: 14px;
font-weight: 600;
cursor: pointer;
margin-top: 10px;
}
/* 6. 动画与反馈 */
.spinner {
width: 16px;
height: 16px;
border: 2px solid rgba(255,255,255,0.3);
border-top-color: #fff;
border-radius: 50%;
display: inline-block;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.fade-enter-active, .fade-leave-active { transition: opacity 0.3s; }
.fade-enter-from, .fade-leave-to { opacity: 0; }
.fade-slide-enter-active {
transition: all 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
.fade-slide-enter-from {
opacity: 0;
transform: translateY(20px);
}
.empty-state {
text-align: center;
color: #86868b;
font-size: 14px;
padding: 30px 0;
}
</style>

1
frontend/web/src/handler/messageHandler.js
View File

@ -9,7 +9,6 @@ export const messageHandler = (msg) => {
} else {
conversation.unreadCount += 1;
}
console.log(conversation)
conversation.dateTime = new Date().toISOString();
}

25
frontend/web/src/router/index.js
View File

@ -35,7 +35,30 @@ const routes = [
}
]
},
{ path: '/contacts', name: 'userContacts', component: () => import('@/views/contact/ContactList.vue') },
{
path: '/contacts',
name: 'userContacts',
redirect: '/contacts/index',
component: () => import('@/views/contact/ContactList.vue'),
children: [
{
path: '/contacts/index',
name: "contactDefault",
component: () => import('@/views/contact/ContactDefault.vue')
},
{
path: '/contacts/info/:id',
name: 'contactInfo',
component: () => import('@/views/contact/UserInfoContent.vue'),
props: true
},
{
path: '/contacts/requests',
name: 'friendRequests',
component: () => import('@/views/contact/FriendRequestList.vue')
}
]
},
{ path: '/settings', name: 'userSettings', component: () => import('@/views/settings/SettingMenu.vue') }
],
meta: {

22
frontend/web/src/services/friend.js
View File

@ -8,7 +8,25 @@ export const friendService = {
* @param {*} limit 页大小
* @returns
*/
getFriendList: (page = 1, limit = 100) => request.get(`/friend/list?page=${page}&limit=${limit}`)
getFriendList: (page = 1, limit = 100) => request.get(`/friend/list?page=${page}&limit=${limit}`),
/**
* 搜索好友
* @param {*} username
* @returns
*/
findUser: (username) => request.get(`/user/findbyusername?username=${username}`),
/**
* 申请添加好友
* @param {*} params
* @returns
*/
requestFriend: (params) => request.post('/friend/request', params),
/**
* 获取好友请求列表
* @param {*} page
* @param {*} limit
* @returns
*/
getFriendRequests: (page = 1, limit = 100) => request.get(`/friend/requests?page=${page}&limit=${limit}`)
}

21
frontend/web/src/services/useBrowserNotification.js Normal file
View File

@ -0,0 +1,21 @@
export function useBrowserNotification() {
const requestPermission = async () => {
if ("Notification" in window && Notification.permission === "default") {
await Notification.requestPermission();
}
};
const send = (title, options = {}) => {
if ("Notification" in window && Notification.permission === "granted") {
// 如果页面正处于激活状态，通常不需要弹窗提醒，以免干扰用户
/*
if (document.visibilityState === 'visible' && document.hasFocus()) {
return;
}
*/
return new Notification(title, options);
}
};
return { requestPermission, send };
}

1
frontend/web/src/stores/chat.js
View File

@ -36,6 +36,7 @@ export const useChatStore = defineStore('chat', {
this.messages = [];
//先从浏览器缓存加载一部分消息列表
const localHistory = await messagesDb.getPageMessages(sessionId, new Date().toISOString(), this.pageSize);
console.log(localHistory)
if (localHistory.length > 0) {
this.messages = localHistory;
} else {

45
frontend/web/src/stores/contact.js Normal file
View File

@ -0,0 +1,45 @@
import { defineStore } from "pinia";
import { contactDb } from "@/utils/db/contactDB";
import { friendService } from "@/services/friend";
import { useMessage } from "@/components/messages/useAlert";
export const useContactStore = defineStore('contact', {
state: () => ({
contacts: [],
}),
actions: {
async addContact(contact) {
this.contacts.push(contact);
await contactDb.save(contact);
},
async loadContactList() {
if (this.contacts.length == 0) {
this.contacts = await contactDb.getAll();
}
this.fetchContactFromServer();
},
async fetchContactFromServer() {
const message = useMessage();
const res = await friendService.getFriendList();
if (res.code == 0) {
const localMap = new Map(this.contacts.map(item => [item.id, item]));
res.data.forEach(item => {
const existingItem = localMap.get(item.id);
if (existingItem) {
// --- 局部更新 ---
// 使用 Object.assign 将新数据合并到旧对象上，保持响应式引用
Object.assign(existingItem, item);
} else {
// --- 插入新会话 ---
this.contacts.push(item);
}
// 同步到本地数据库
contactDb.save(item);
});
} else {
message.error(res.message);
}
}
}
})

12
frontend/web/src/stores/signalr.js
View File

@ -6,6 +6,8 @@ import { useChatStore } from "./chat";
import { authService } from "@/services/auth";
import { generateSessionId } from "@/utils/sessionIdTools";
import { messageHandler } from "@/handler/messageHandler";
import { useBrowserNotification } from "@/services/useBrowserNotification";
import { useConversationStore } from "./conversation";
export const useSignalRStore = defineStore('signalr', {
state: () => ({
@ -40,9 +42,17 @@ export const useSignalRStore = defineStore('signalr', {
},
registerHandlers() {
const chatStore = useChatStore()
const browserNotification = useBrowserNotification();
this.connection.on('ReceiveMessage', (msg) => {
const sessionId = generateSessionId(msg.senderId, msg.receiverId);
messageHandler(msg);
chatStore.addMessage(msg);
chatStore.addMessage(msg, sessionId);
const conversation = useConversationStore().conversations.find(x => x.targetId == msg.senderId);
browserNotification.send(`${conversation.targetName}发来一条消息`, {
body: msg.content,
icon: conversation.targetAvatar
});
});
this.connection.onclose(() => { this.isConnected = false });

9
frontend/web/src/utils/db/baseDb.js
View File

@ -3,17 +3,24 @@ import { openDB } from "idb";
const DBNAME = 'IM_DB';
const STORE_NAME = 'messages';
const CONVERSARION_STORE_NAME = 'conversations';
const CONTACT_STORE_NAME = 'contacts';
export const dbPromise = openDB(DBNAME, 2, {
export const dbPromise = openDB(DBNAME, 4, {
upgrade(db) {
if (!db.objectStoreNames.contains(STORE_NAME)) {
const store = db.createObjectStore(STORE_NAME, { keyPath: 'msgId' });
store.createIndex('by-sessionId', 'sessionId');
store.createIndex('by-time', 'timeStamp');
store.createIndex('by-session-time', ['sessionId', 'timeStamp']);
}
if (!db.objectStoreNames.contains(CONVERSARION_STORE_NAME)) {
const store = db.createObjectStore(CONVERSARION_STORE_NAME, { keyPath: 'id' });
store.createIndex('by-id', 'id');
}
if (!db.objectStoreNames.contains(CONTACT_STORE_NAME)) {
const store = db.createObjectStore(CONTACT_STORE_NAME, { keyPath: 'id' });
store.createIndex('by-id', 'id');
store.createIndex('by-username', 'username');
}
}
})

18
frontend/web/src/utils/db/contactDB.js Normal file
View File

@ -0,0 +1,18 @@
import { dbPromise } from "./baseDb"
const STORE_NAME = 'contacts';
export const contactDb = {
async save(contact) {
(await dbPromise).put(STORE_NAME, contact);
},
async getById(id) {
return (await dbPromise).getFromIndex(STORE_NAME, 'by-id', id);
},
async getByUsername(username) {
return (await dbPromise).getFromIndex(STORE_NAME, 'by-username', username);
},
async getAll() {
return (await dbPromise).getAll(STORE_NAME);
}
}

21
frontend/web/src/utils/db/messageDB.js
View File

@ -15,17 +15,26 @@ export const messagesDb = {
async getPageMessages(sessionId, beforeTimeStamp, limit = 20) {
const db = await dbPromise;
const tx = db.transaction(STORE_NAME, 'readonly');
const index = tx.store.index('by-sessionId');
const range = IDBKeyRange.only(sessionId);
const index = tx.store.index('by-session-time'); // 使用复合索引
// 定义范围：从 [sessionId, 最早时间] 到 [sessionId, beforeTimeStamp)
// 注意：IDBKeyRange.bound([sessionId, ""], [sessionId, beforeTimeStamp], false, true)
// 或者简单使用 upperbound 限制最大值
const range = IDBKeyRange.upperBound([sessionId, beforeTimeStamp], true);
// 'prev' 表示从最新的往回找（倒序）
let cursor = await index.openCursor(range, 'prev');
const results = [];
// 如果之前有消息，跳过已经加载的部分（这里简单演示，实际建议用 offset 或 ID）
while (cursor && results.length < limit) {
if (cursor.value.timeStamp < beforeTimeStamp) {
results.unshift(cursor.value); // 插到数组开头，保持时间正序
}
// 关键安全检查：因为 upperBound 可能会越界捞到其他 sessionId 的数据
//（复合索引的特性决定了 sessionId 不一致的数据会排在后面）
if (cursor.value.sessionId !== sessionId) break;
results.unshift(cursor.value); // 放入结果集开头，保证返回的是时间升序
cursor = await cursor.continue();
}
return results;
}
}

368
frontend/web/src/views/Test.vue
View File

@ -1,254 +1,232 @@
<template>
<div class="modal-overlay" @click.self="$emit('close')">
<div class="chat-modal">
<div v-if="true" class="modal-mask" @click.self="close">
<div class="modal-container">
<div class="modal-header">
<div class="header-top">
<h3>消息中心</h3>
<button class="close-btn" @click="$emit('close')">&times;</button>
</div>
<div class="search-bar">
<input
v-model="searchQuery"
type="text"
placeholder="搜索群组..."
/>
</div>
<h2>添加好友</h2>
<button class="icon-close" @click="close">×</button>
</div>
<div class="chat-list">
<TransitionGroup name="list">
<div
v-for="group in filteredGroups"
:key="group.id"
class="chat-item"
@click="handleSelect(group)"
>
<div
class="avatar"
:style="{ background: group.avatar ? `url(${group.avatar}) center/cover` : group.color }"
>
{{ group.avatar ? '' : group.name.charAt(0) }}
</div>
<div class="search-box">
<input
v-model="keyword"
type="text"
placeholder="搜索 ID / 手机号"
@keyup.enter="onSearch"
/>
<button class="search-btn" @click="onSearch" :loading="loading">
<span v-if="!loading">搜索</span>
<span v-else class="spinner"></span>
</button>
</div>
<div class="chat-info">
<div class="chat-name">{{ group.name }}</div>
<div class="chat-preview">{{ group.lastMsg }}</div>
</div>
<div class="chat-meta">
<span class="time">{{ group.time }}</span>
<span v-if="group.unread" class="unread">{{ group.unread }}</span>
<transition name="fade-slide">
<div v-if="userResult" class="user-card">
<div class="user-info">
<img :src="userResult.avatar" class="avatar" />
<div class="detail">
<span class="name">{{ userResult.nickname }}</span>
<span class="id">ID: {{ userResult.userId }}</span>
</div>
</div>
</TransitionGroup>
<div v-if="filteredGroups.length === 0" class="empty-state">
未找到相关群聊
<button class="add-action-btn" @click="handleAdd">添加好友</button>
</div>
</div>
<div v-else-if="hasSearched && !userResult" class="empty-state">
未找到该用户，请检查输入是否正确
</div>
</transition>
</div>
</div>
</template>
<script setup>
import { ref, computed, defineProps } from 'vue';
import { ref } from 'vue';
// 检查你的代码，确保 default 是一个返回数组的函数，且逗号、括号一一对应
const props = defineProps({
initialGroups: {
type: Array,
default: () => [
{ id: 1, name: '产品设计交流群', lastMsg: '张三: 确认一下原型图', time: '14:30', unread: 3, color: 'linear-gradient(45deg, #007AFF, #5AC8FA)' },
{ id: 2, name: '技术研发部', lastMsg: '王五: Bug已修复并上线', time: '12:05', unread: 0, color: 'linear-gradient(45deg, #4CD964, #5AC8FA)' },
{ id: 3, name: '周末户外徒步', lastMsg: '李四: 记得带雨伞', time: '昨天', unread: 12, color: 'linear-gradient(45deg, #FF9500, #FFCC00)' },
{ id: 4, name: 'Family 家族群', lastMsg: '[图片]', time: '周一', unread: 0, color: 'linear-gradient(45deg, #5856D6, #AF52DE)' }, // 确保这里没有多余或缺失的逗号
{ id: 5, name: 'Family 家族群', lastMsg: '[图片]', time: '周一', unread: 0, color: 'linear-gradient(45deg, #5856D6, #AF52DE)' },
{ id: 6, name: 'Family 家族群', lastMsg: '[图片]', time: '周一', unread: 0, color: 'linear-gradient(45deg, #5856D6, #AF52DE)' },
{ id: 7, name: 'Family 家族群', lastMsg: '[图片]', time: '周一', unread: 0, color: 'linear-gradient(45deg, #5856D6, #AF52DE)' },
{ id: 8, name: 'Family 家族群', lastMsg: '[图片]', time: '周一', unread: 0, color: 'linear-gradient(45deg, #5856D6, #AF52DE)' },
{ id: 9, name: 'Family 家族群', lastMsg: '[图片]', time: '周一', unread: 0, color: 'linear-gradient(45deg, #5856D6, #AF52DE)' }
]
}
}); // 检查这里是否漏掉了右括号 )
// 接收父组件的 v-model 用于控制显示隐藏
const props = defineProps(['modelValue']);
const emit = defineEmits(['update:modelValue', 'add-friend']);
const keyword = ref('');
const loading = ref(false);
const userResult = ref(null);
const hasSearched = ref(false);
const emit = defineEmits(['close', 'select']);
const searchQuery = ref('');
const close = () => {
emit('update:modelValue', false);
// 关闭时重置状态
userResult.value = null;
hasSearched.value = false;
keyword.value = '';
};
// 搜索过滤逻辑
const filteredGroups = computed(() => {
return props.initialGroups.filter(g =>
g.name.toLowerCase().includes(searchQuery.value.toLowerCase())
);
});
const onSearch = async () => {
if (!keyword.value) return;
loading.value = true;
hasSearched.value = false;
const handleSelect = (group) => {
emit('select', group);
// 模拟 API 请求延时
setTimeout(() => {
loading.value = false;
hasSearched.value = true;
// 模拟搜索结果
if (keyword.value === '12345') {
userResult.value = {
userId: '12345',
nickname: '极简猫',
avatar: 'https://api.dicebear.com/7.x/beta/svg?seed=Felix'
};
} else {
userResult.value = null;
}
}, 600);
};
const handleAdd = () => {
emit('add-friend', userResult.value);
// 通常这里会显示“已发送请求”提示
close();
};
</script>
<style scoped>
/* 遮罩层 */
.modal-overlay {
.modal-mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.2);
inset: 0;
background: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(8px);
display: flex;
justify-content: center;
align-items: center;
backdrop-filter: blur(4px);
z-index: 1000;
z-index: 999;
}
/* 弹出层主容器 */
.chat-modal {
/* 容器 */
.modal-container {
background: #ffffff;
width: 360px;
max-height: 80vh;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(20px);
border-radius: 28px;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 24px;
padding: 24px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}
/* 头部样式 */
.modal-header {
padding: 20px 20px 10px;
}
.header-top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
margin-bottom: 20px;
}
.header-top h3 {
margin: 0;
font-size: 20px;
color: #1d1d1f;
}
.close-btn {
background: #eee;
border: none;
width: 28px;
height: 28px;
border-radius: 50%;
cursor: pointer;
.modal-header h2 {
font-size: 18px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
color: #333;
}
.icon-close {
background: none;
border: none;
font-size: 24px;
color: #ccc;
cursor: pointer;
}
/* 搜索框 */
.search-bar input {
width: 100%;
padding: 10px 15px;
.search-box {
display: flex;
background: #f5f5f7;
border-radius: 12px;
padding: 4px;
margin-bottom: 16px;
}
.search-box input {
flex: 1;
background: transparent;
border: none;
background: rgba(0, 0, 0, 0.05);
padding: 10px 12px;
outline: none;
box-sizing: border-box;
font-size: 14px;
}
/* 列表滚动区 */
.chat-list {
flex: 1;
overflow-y: auto;
padding: 10px;
}
.chat-item {
display: flex;
align-items: center;
padding: 12px;
border-radius: 18px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
margin-bottom: 4px;
}
.chat-item:hover {
background: rgba(0, 122, 255, 0.08);
}
/* 头像 */
.avatar {
width: 50px;
height: 50px;
border-radius: 15px;
margin-right: 14px;
display: flex;
align-items: center;
justify-content: center;
.search-btn {
background: #007aff; /* 经典的克莱因蓝/苹果蓝 */
color: white;
font-weight: 600;
flex-shrink: 0;
}
.chat-info {
flex: 1;
min-width: 0;
}
.chat-name {
font-weight: 600;
font-size: 16px;
color: #1d1d1f;
margin-bottom: 4px;
}
.chat-preview {
font-size: 13px;
color: #86868b;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.chat-meta {
text-align: right;
margin-left: 10px;
}
.time {
font-size: 12px;
color: #86868b;
display: block;
margin-bottom: 5px;
}
.unread {
background: #007AFF;
color: white;
font-size: 11px;
padding: 2px 7px;
border: none;
padding: 8px 16px;
border-radius: 10px;
cursor: pointer;
font-weight: 500;
}
/* 列表过渡动画 */
.list-enter-active, .list-leave-active {
transition: all 0.3s ease;
/* 用户卡片 */
.user-card {
background: #fff;
border: 1px solid #f0f0f0;
border-radius: 16px;
padding: 16px;
margin-top: 10px;
}
.list-enter-from, .list-leave-to {
opacity: 0;
transform: translateX(-10px);
.user-info {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
}
.avatar {
width: 52px;
height: 52px;
border-radius: 50%;
object-fit: cover;
}
.detail {
display: flex;
flex-direction: column;
}
.name {
font-weight: 600;
font-size: 16px;
}
.id {
font-size: 12px;
color: #999;
}
.add-action-btn {
width: 100%;
background: #f0f7ff;
color: #007aff;
border: none;
padding: 10px;
border-radius: 10px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
}
.add-action-btn:hover {
background: #007aff;
color: #fff;
}
.empty-state {
text-align: center;
padding: 40px 0;
color: #86868b;
font-size: 14px;
color: #999;
font-size: 13px;
padding: 20px 0;
}
/* 动画效果 */
.fade-slide-enter-active, .fade-slide-leave-active {
transition: all 0.3s ease;
}
.fade-slide-enter-from, .fade-slide-leave-to {
opacity: 0;
transform: translateY(10px);
}
</style>

136
frontend/web/src/views/contact/ContactDefault.vue Normal file
View File

@ -0,0 +1,136 @@
<template>
<main class="profile-main">
<div class="empty-state">
<div class="empty-logo">👤</div>
<p>请在左侧选择联系人查看详情</p>
</div>
</main>
</template>
<style scoped>
/* --- 右侧名片区 --- */
.profile-main {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
background: #f5f5f5;
min-width: 0;
}
.profile-card {
width: 420px;
background: transparent;
padding: 20px;
}
.profile-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding-bottom: 30px;
border-bottom: 1px solid #e7e7e7;
margin-bottom: 30px;
}
.display-name {
font-size: 24px;
color: #000;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 8px;
}
.gender-tag { font-size: 16px; }
.gender-tag.m { color: #1890ff; }
.gender-tag.f { color: #ff4d4f; }
.sub-text {
font-size: 13px;
color: #888;
margin: 3px 0;
}
.big-avatar {
width: 70px;
height: 70px;
border-radius: 6px;
object-fit: cover;
}
.profile-body {
margin-bottom: 40px;
}
.info-row {
display: flex;
margin-bottom: 15px;
font-size: 14px;
}
.info-row .label {
width: 80px;
color: #999;
}
.info-row .value {
color: #333;
flex: 1;
}
.profile-footer {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.btn-primary {
width: 160px;
padding: 10px;
background: #07c160;
color: #fff;
border: none;
border-radius: 4px;
font-weight: bold;
cursor: pointer;
}
.btn-ghost {
width: 160px;
padding: 10px;
background: #fff;
border: 1px solid #e0e0e0;
color: #333;
border-radius: 4px;
cursor: pointer;
}
.btn-primary:hover, .btn-ghost:hover {
opacity: 0.8;
}
.empty-state {
text-align: center;
color: #ccc;
}
.empty-logo {
font-size: 80px;
margin-bottom: 10px;
opacity: 0.2;
}
/* 4. 定义组件进场和退场的动画 */
.fade-scale-enter-active,
.fade-scale-leave-active {
transition: all 0.3s ease;
}
.fade-scale-enter-from,
.fade-scale-leave-to {
opacity: 0;
transform: scale(0.9) translateY(10px);
}
</style>

219
frontend/web/src/views/contact/ContactList.vue
View File

@ -10,10 +10,10 @@
<div class="scroll-area">
<div class="fixed-entries">
<div class="list-item mini">
<RouterLink class="list-item mini" to="/contacts/requests">
<div class="icon-box orange" v-html="feather.icons['user-plus'].toSvg()"></div>
<div class="name">新的朋友</div>
</div>
</RouterLink>
<div class="list-item mini" @click="showGroupList">
<div class="icon-box green" v-html="feather.icons['users'].toSvg()"></div>
<div class="name">群聊</div>
@ -29,7 +29,7 @@
:key="c.id"
class="list-item"
:class="{active: activeContactId === c.id}"
@click="activeContactId = c.id">
@click="routeUserInfo(c.id)">
<img :src="c.userInfo.avatar" class="avatar-std" />
<div class="info">
<div class="name">{{ c.remarkName }}</div>
@ -37,49 +37,7 @@
</div>
</div>
</aside>
<main class="profile-main">
<div v-if="currentContact" class="profile-card">
<header class="profile-header">
<div class="text-info">
<h2 class="display-name">
{{ currentContact.remarkName }}
<span :class="['gender-tag', 'm']">
{{ '♂' }}
</span>
</h2>
<p class="sub-text">账号：{{ currentContact.userInfo.username }}</p>
<p class="sub-text">地区：{{ '未知' }}</p>
</div>
<img :src="currentContact.userInfo.avatar" class="big-avatar" />
</header>
<div class="profile-body">
<div class="info-row">
<span class="label">昵称</span>
<span class="value">{{ currentContact.userInfo.nickName }}</span>
</div>
<div class="info-row">
<span class="label">个性签名</span>
<span class="value">{{ currentContact.signature || '这个家伙很懒，什么都没留下' }}</span>
</div>
<div class="info-row">
<span class="label">来源</span>
<span class="value">通过搜索账号添加</span>
</div>
</div>
<footer class="profile-footer">
<button class="btn-primary" @click="handleGoToChat">发消息</button>
<button class="btn-ghost">音视频通话</button>
</footer>
</div>
<div v-else class="empty-state">
<div class="empty-logo">👤</div>
<p>请在左侧选择联系人查看详情</p>
</div>
</main>
<RouterView></RouterView>
</div>
<Transition>
<GroupChatModal
@ -92,15 +50,16 @@
<script setup>
import { ref, computed, onMounted } from 'vue'
import { friendService } from '@/services/friend'
import GroupChatModal from '@/components/groups/GroupChatModal.vue'
import feather from 'feather-icons';
import { useContactStore } from '@/stores/contact';
import { useRouter } from 'vue-router';
const router = useRouter();
const searchQuery = ref('')
const activeContactId = ref(null)
const contacts = ref([]);
const contactStore = useContactStore();
const groupModal = ref(false);
@ -108,11 +67,12 @@ const groupModal = ref(false);
const filteredContacts = computed(() => {
const searchKey = searchQuery.value.toString().trim();
if(!searchKey){
return contacts.value;
return contactStore.contacts;
}
return contacts.value.filter(c => {
return contactStore.contacts.filter(c => {
if (!c) return false
const remark = c.remarkName || ''
@ -122,22 +82,13 @@ const filteredContacts = computed(() => {
})
})
const currentContact = computed(() => {
return contacts.value.find(c => c.id === activeContactId.value)
})
const routeUserInfo = (id) => {
router.push(`/contacts/info/${id}`);
activeContactId.value = id;
}
// 发送事件给父组件（用于切换回聊天Tab并打开会话）
const emit = defineEmits(['start-chat'])
function handleGoToChat() {
if (currentContact.value) {
emit('start-chat', { ...currentContact.value })
}
}
const loadContactList = async (page = 1,limit = 100) => {
const res = await friendService.getFriendList(page,limit);
contacts.value = res.data;
}
const showGroupList = () => {
groupModal.value = true;
@ -145,7 +96,7 @@ const showGroupList = () => {
onMounted(async () => {
await loadContactList();
await contactStore.loadContactList();
})
</script>
@ -206,6 +157,19 @@ onMounted(async () => {
align-items: center;
cursor: pointer;
transition: background 0.2s;
text-decoration: none; /* 去除下划线 */
color: inherit; /* 继承父元素的文本颜色 */
outline: none; /* 去除点击时的蓝框 */
-webkit-tap-highlight-color: transparent; /* 移动端点击高亮 */
}
/* 去除 hover、active 等状态的效果 */
a:hover,
a:active,
a:focus {
text-decoration: none;
color: inherit; /* 保持颜色不变 */
cursor: pointer;
}
.list-item:hover { background: #e2e2e2; }
@ -231,129 +195,4 @@ onMounted(async () => {
.icon-box.orange { background: #faad14; }
.icon-box.green { background: #52c41a; }
.icon-box.blue { background: #1890ff; }
/* --- 右侧名片区 --- */
.profile-main {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
background: #f5f5f5;
min-width: 0;
}
.profile-card {
width: 420px;
background: transparent;
padding: 20px;
}
.profile-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding-bottom: 30px;
border-bottom: 1px solid #e7e7e7;
margin-bottom: 30px;
}
.display-name {
font-size: 24px;
color: #000;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 8px;
}
.gender-tag { font-size: 16px; }
.gender-tag.m { color: #1890ff; }
.gender-tag.f { color: #ff4d4f; }
.sub-text {
font-size: 13px;
color: #888;
margin: 3px 0;
}
.big-avatar {
width: 70px;
height: 70px;
border-radius: 6px;
object-fit: cover;
}
.profile-body {
margin-bottom: 40px;
}
.info-row {
display: flex;
margin-bottom: 15px;
font-size: 14px;
}
.info-row .label {
width: 80px;
color: #999;
}
.info-row .value {
color: #333;
flex: 1;
}
.profile-footer {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.btn-primary {
width: 160px;
padding: 10px;
background: #07c160;
color: #fff;
border: none;
border-radius: 4px;
font-weight: bold;
cursor: pointer;
}
.btn-ghost {
width: 160px;
padding: 10px;
background: #fff;
border: 1px solid #e0e0e0;
color: #333;
border-radius: 4px;
cursor: pointer;
}
.btn-primary:hover, .btn-ghost:hover {
opacity: 0.8;
}
.empty-state {
text-align: center;
color: #ccc;
}
.empty-logo {
font-size: 80px;
margin-bottom: 10px;
opacity: 0.2;
}
/* 4. 定义组件进场和退场的动画 */
.fade-scale-enter-active,
.fade-scale-leave-active {
transition: all 0.3s ease;
}
.fade-scale-enter-from,
.fade-scale-leave-to {
opacity: 0;
transform: scale(0.9) translateY(10px);
}
</style>

200
frontend/web/src/views/contact/FriendRequestList.vue Normal file
View File

@ -0,0 +1,200 @@
<template>
<div class="minimal-page">
<div class="content-limit">
<div class="section-title">申请列表</div>
<div class="request-group">
<div v-for="item in requests" :key="item.id" class="minimal-item">
<img :src="item.avatar" class="avatar" />
<div class="info">
<div class="title-row">
<span class="name">{{ item.nickName }}</span>
<span class="date">{{ formatDate(item.created) }}</span>
</div>
<p class="sub-text">{{ item.description }}</p>
<p v-if="item.remark" class="remark-text">{{ item.remark }}</p>
</div>
<div class="actions">
<template v-if="item.state === 0 && item.requestUser != authStore.userInfo.id">
<button class="btn-text btn-reject" @click="item.status = 2">拒绝</button>
<button class="btn-text btn-accept" @click="item.status = 1">接受</button>
</template>
<span v-else-if="item.state === 0" class="status-label">
待对方同意
</span>
<span v-else-if="item.state === 1" class="status-label">
{{item.requestUser != authStore.userInfo.id ? '已拒绝' : '对方拒绝'}}
</span>
<span v-else-if="item.state === 2" class="status-label">
已添加
</span>
<span v-else-if="item.state === 3 && item.requestUser != authStore.userInfo.id" class="status-label">
已拉黑
</span>
<span v-else class="status-label">
已忽略
</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import { friendService } from '@/services/friend';
import { useMessage } from '@/components/messages/useAlert';
import { formatDate } from '@/utils/formatDate';
import { useAuthStore } from '@/stores/auth';
const message = useMessage();
const authStore = useAuthStore();
const requests = ref([]);
const loadFriendRequests = async () => {
const res = await friendService.getFriendRequests();
if(res.code != 0){
message.error(res.message);
return;
}
requests.value = res.data;
}
onMounted(async () => {
await loadFriendRequests();
})
</script>
<style scoped>
/* 1. 基础环境：纯净背景 */
.minimal-page {
width: 100%;
height: 100%;
background-color: #f5f5f5; /* 极致白 */
display: flex;
justify-content: center;
overflow-y: auto;
}
.content-limit {
width: 100%;
max-width: 640px; /* 进一步收窄，视线更集中 */
padding: 60px 24px;
}
/* 2. 标题：极简，不带副标题 */
.section-title {
font-size: 13px;
font-weight: 600;
color: #86868b;
letter-spacing: 0.05em;
text-transform: uppercase;
margin-bottom: 32px;
padding-left: 4px;
}
/* 3. 列表项：去掉外框和投影，靠间距呼吸 */
.minimal-item {
display: flex;
align-items: flex-start;
padding: 16px 4px;
margin-bottom: 8px;
transition: opacity 0.2s;
}
/* 4. 头像：小而圆润 */
.avatar {
width: 44px;
height: 44px;
border-radius: 50%; /* 纯圆更简洁 */
background-color: #f5f5f7;
flex-shrink: 0;
}
/* 5. 信息区：对齐与行高 */
.info {
flex: 1;
margin-left: 16px;
padding-top: 2px;
}
.title-row {
display: flex;
align-items: baseline;
gap: 8px;
margin-bottom: 4px;
}
.name {
font-size: 15px;
font-weight: 500;
color: #1d1d1f;
}
.date {
font-size: 11px;
color: #c1c1c6;
}
.sub-text {
font-size: 13px;
color: #86868b;
margin: 0;
line-height: 1.5;
}
.remark-text {
font-size: 12px;
color: #007aff;
margin: 4px 0 0 0;
}
/* 6. 按钮：完全去掉色块，仅保留文字或超淡背景 */
.actions {
display: flex;
gap: 4px;
align-self: center;
}
.btn-text {
padding: 6px 12px;
border-radius: 6px;
font-size: 13px;
font-weight: 500;
border: none;
background: transparent;
cursor: pointer;
transition: background 0.2s, color 0.2s;
}
/* “接受”只使用淡蓝色背景，不使用深色块 */
.btn-accept {
color: #007aff;
background: rgba(0, 122, 255, 0.08);
}
.btn-accept:hover {
background: rgba(0, 122, 255, 0.15);
}
/* “拒绝”使用最淡的灰色 */
.btn-reject {
color: #86868b;
}
.btn-reject:hover {
background: #f5f5f7;
color: #1d1d1f;
}
.status-label {
font-size: 12px;
color: #d2d2d7;
padding: 0 12px;
}
</style>

200
frontend/web/src/views/contact/UserInfoContent.vue
View File

@ -1 +1,199 @@
<template></template>
<template>
<main class="profile-main">
<div v-if="currentContact" class="profile-card">
<header class="profile-header">
<div class="text-info">
<h2 class="display-name">
{{ currentContact.remarkName }}
<span :class="['gender-tag', 'm']">
{{ '♂' }}
</span>
</h2>
<p class="sub-text">账号：{{ currentContact.userInfo.username }}</p>
<p class="sub-text">地区：{{ '未知' }}</p>
</div>
<img :src="currentContact.userInfo.avatar" class="big-avatar" />
</header>
<div class="profile-body">
<div class="info-row">
<span class="label">昵称</span>
<span class="value">{{ currentContact.userInfo.nickName }}</span>
</div>
<div class="info-row">
<span class="label">个性签名</span>
<span class="value">{{ currentContact.signature || '这个家伙很懒，什么都没留下' }}</span>
</div>
<div class="info-row">
<span class="label">来源</span>
<span class="value">通过搜索账号添加</span>
</div>
</div>
<footer class="profile-footer">
<button class="btn-primary" @click="handleGoToChat">发消息</button>
<button class="btn-ghost">音视频通话</button>
</footer>
</div>
</main>
</template>
<script setup>
import { defineProps, onMounted, ref } from 'vue';
import { useContactStore } from '@/stores/contact';
import { useRouter } from 'vue-router';
import { useConversationStore } from '@/stores/conversation';
const contactStore = useContactStore();
const router = useRouter();
const conversationStore = useConversationStore();
const props = defineProps({
id: {
type: String,
required: true
}
})
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}`);
}
}
onMounted(() => {
currentContact.value = contactStore.contacts.find(x => x.id == props.id);
})
</script>
<style scoped>
/* --- 右侧名片区 --- */
.profile-main {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
background: #f5f5f5;
min-width: 0;
}
.profile-card {
width: 420px;
background: transparent;
padding: 20px;
}
.profile-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding-bottom: 30px;
border-bottom: 1px solid #e7e7e7;
margin-bottom: 30px;
}
.display-name {
font-size: 24px;
color: #000;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 8px;
}
.gender-tag { font-size: 16px; }
.gender-tag.m { color: #1890ff; }
.gender-tag.f { color: #ff4d4f; }
.sub-text {
font-size: 13px;
color: #888;
margin: 3px 0;
}
.big-avatar {
width: 70px;
height: 70px;
border-radius: 6px;
object-fit: cover;
}
.profile-body {
margin-bottom: 40px;
}
.info-row {
display: flex;
margin-bottom: 15px;
font-size: 14px;
}
.info-row .label {
width: 80px;
color: #999;
}
.info-row .value {
color: #333;
flex: 1;
}
.profile-footer {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.btn-primary {
width: 160px;
padding: 10px;
background: #07c160;
color: #fff;
border: none;
border-radius: 4px;
font-weight: bold;
cursor: pointer;
}
.btn-ghost {
width: 160px;
padding: 10px;
background: #fff;
border: 1px solid #e0e0e0;
color: #333;
border-radius: 4px;
cursor: pointer;
}
.btn-primary:hover, .btn-ghost:hover {
opacity: 0.8;
}
.empty-state {
text-align: center;
color: #ccc;
}
.empty-logo {
font-size: 80px;
margin-bottom: 10px;
opacity: 0.2;
}
/* 4. 定义组件进场和退场的动画 */
.fade-scale-enter-active,
.fade-scale-leave-active {
transition: all 0.3s ease;
}
.fade-scale-enter-from,
.fade-scale-leave-to {
opacity: 0;
transform: scale(0.9) translateY(10px);
}
</style>

41
frontend/web/src/views/messages/MessageList.vue
View File

@ -10,6 +10,10 @@
<AddMenu :menu-list="addMenuList" @action-active="actionHandler"/>
</div>
</div>
<div v-if="msgTitleShow" class="showMsg" @click="requestNotificationPermission">
<i style="color: red;line-height:0;" v-html="feather.icons['alert-circle'].toSvg({width:14})"></i>
<span>新消息无法通知，点我授予通知权限</span>
</div>
<div class="scroll-area">
<div v-for="s in filteredSessions" :key="s.id"
@ -30,11 +34,12 @@
</aside>
<RouterView></RouterView>
<SearchUser v-model="searchUserModal"/>
</div>
</template>
<script setup>
import router from '@/router'
import { useRouter } from 'vue-router'
import { ref, computed, nextTick, onMounted } from 'vue'
import { messageService } from '@/services/message'
import defaultAvatar from '@/assets/default_avatar.png'
@ -42,12 +47,18 @@ import { formatDate } from '@/utils/formatDate'
import { useConversationStore } from '@/stores/conversation'
import AddMenu from '@/components/addMenu.vue'
import feather from 'feather-icons'
import SearchUser from '@/components/user/SearchUser.vue'
import { useBrowserNotification } from '@/services/useBrowserNotification'
const conversationStore = useConversationStore();
const router = useRouter();
const browserNotification = useBrowserNotification();
const searchQuery = ref('')
const activeId = ref(1)
const conversations = ref([]);
const searchUserModal = ref(false);
const msgTitleShow = ref(false);
const addMenuList = [
{
text: '发起群聊',
@ -77,7 +88,18 @@ function selectSession(s) {
}
function actionHandler(type){
console.log(type)
switch(type){
case 'addFriend':
searchUserModal.value = true;
break;
default:
break;
}
}
async function requestNotificationPermission(){
await browserNotification.requestPermission();
if(Notification.permission === "granted") msgTitleShow.value = false;
}
async function loadConversation() {
@ -87,6 +109,7 @@ async function loadConversation() {
onMounted(async () => {
await conversationStore.loadUserConversations();
if(Notification.permission != "granted") msgTitleShow.value = true;
})
@ -108,6 +131,20 @@ onMounted(async () => {
display: flex;
flex-direction: column;
}
.showMsg {
/* width: 10px; */
height: 20px;
background: #e3f98d;
font-size: 12px;
display: flex;
/* text-align: center; */
flex-wrap: nowrap;
align-content: center;
justify-content: center;
align-items: center;
color: red;
cursor: pointer;
}
/* 修复：搜索框美化 */