upload project
This commit is contained in:
commit
06961cae04
422 changed files with 110626 additions and 0 deletions
726
pages/social/friends/friends.js
Normal file
726
pages/social/friends/friends.js
Normal file
|
|
@ -0,0 +1,726 @@
|
|||
// 好友列表页面
|
||||
const app = getApp();
|
||||
const apiClient = require('../../../utils/api-client.js');
|
||||
const friendAPI = require('../../../utils/friend-api.js');
|
||||
const notificationManager = require('../../../utils/notification-manager.js');
|
||||
const wsManager = require('../../../utils/websocket-manager-v2.js');
|
||||
const nimPresenceManager = require('../../../utils/nim-presence-manager.js');
|
||||
const { modernSystemInfo, initPageSystemInfo } = require('../../../utils/system-info-modern.js');
|
||||
|
||||
Page({
|
||||
data: {
|
||||
// 好友数据
|
||||
friends: [],
|
||||
filteredFriends: [],
|
||||
|
||||
// UI状态
|
||||
loading: true,
|
||||
refreshing: false,
|
||||
searchKeyword: '',
|
||||
searching: false,
|
||||
searchResultCount: 0,
|
||||
showSearchBar: false,
|
||||
|
||||
// 统计数据
|
||||
newFriendRequests: 0,
|
||||
totalFriendsCount: 0,
|
||||
onlineFriendsCount: 0,
|
||||
recentActiveCount: 0,
|
||||
mutualFriendsCount: 0,
|
||||
|
||||
// 系统适配信息
|
||||
systemInfo: {},
|
||||
statusBarHeight: 0,
|
||||
menuButtonHeight: 0,
|
||||
menuButtonTop: 0,
|
||||
navBarHeight: 0,
|
||||
windowHeight: 0,
|
||||
safeAreaBottom: 0,
|
||||
|
||||
// 添加好友提示
|
||||
showAddTip: false,
|
||||
userInfo: {},
|
||||
|
||||
// 事件处理状态
|
||||
eventHandlingState: {
|
||||
lastEventTime: 0,
|
||||
eventThrottleMs: 300
|
||||
}
|
||||
},
|
||||
|
||||
onLoad: function (options) {
|
||||
this.initSystemInfo();
|
||||
this.checkAuthAndLoad();
|
||||
|
||||
// 注册在线状态变化监听
|
||||
this.registerPresenceListener();
|
||||
},
|
||||
|
||||
onShow: function () {
|
||||
// 设置tabBar选中状态为"我的"（索引3）
|
||||
try {
|
||||
if (typeof this.getTabBar === 'function' && this.getTabBar()) {
|
||||
this.getTabBar().setData({ selected: 3 });
|
||||
}
|
||||
} catch (_) {}
|
||||
|
||||
// 检查是否需要刷新好友请求数量
|
||||
const app = getApp();
|
||||
if (app.globalData && app.globalData.needRefreshFriendRequests) {
|
||||
app.globalData.needRefreshFriendRequests = false;
|
||||
// 立即刷新好友请求数量
|
||||
this.loadFriendRequestsCount();
|
||||
}
|
||||
|
||||
// 刷新数据前先检查认证状态
|
||||
this.checkAuthAndLoad();
|
||||
},
|
||||
|
||||
// 初始化系统信息
|
||||
initSystemInfo() {
|
||||
const pageSystemInfo = initPageSystemInfo();
|
||||
|
||||
this.setData({
|
||||
systemInfo: pageSystemInfo.systemInfo,
|
||||
statusBarHeight: pageSystemInfo.statusBarHeight,
|
||||
menuButtonHeight: pageSystemInfo.menuButtonHeight,
|
||||
menuButtonTop: pageSystemInfo.menuButtonTop,
|
||||
navBarHeight: pageSystemInfo.navBarHeight,
|
||||
windowHeight: pageSystemInfo.windowHeight,
|
||||
safeAreaBottom: pageSystemInfo.safeAreaBottom
|
||||
});
|
||||
},
|
||||
|
||||
// 检查认证状态并加载数据
|
||||
async checkAuthAndLoad() {
|
||||
try {
|
||||
// 确保API客户端能获取到token
|
||||
const currentToken = apiClient.getToken();
|
||||
if (!currentToken) {
|
||||
console.error('用户未登录，跳转到登录页');
|
||||
wx.reLaunch({
|
||||
url: '/pages/login/login'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// 获取用户信息 - 确保有完整的用户数据
|
||||
await this.loadUserInfo();
|
||||
|
||||
// 🔥 初始化WebSocket好友功能（用于实时接收好友请求通知）
|
||||
this.initWebSocketFriendFeatures();
|
||||
|
||||
// 开始加载数据
|
||||
this.loadFriends();
|
||||
this.loadFriendRequestsCount();
|
||||
|
||||
} catch (error) {
|
||||
console.error('认证检查失败:', error);
|
||||
wx.reLaunch({
|
||||
url: '/pages/login/login'
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 加载用户信息
|
||||
async loadUserInfo() {
|
||||
try {
|
||||
// 先从全局数据获取
|
||||
let userInfo = getApp().globalData.userInfo;
|
||||
|
||||
// 如果全局没有完整信息，从API获取
|
||||
if (!userInfo || !userInfo.user || !userInfo.user.customId) {
|
||||
const response = await apiClient.getUserInfo();
|
||||
if (response && response.code === 0) {
|
||||
userInfo = {
|
||||
...userInfo,
|
||||
user: response.data
|
||||
};
|
||||
// 更新全局数据
|
||||
getApp().globalData.userInfo = userInfo;
|
||||
}
|
||||
}
|
||||
|
||||
this.setData({
|
||||
userInfo: userInfo
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error('❌ 获取用户信息失败:', error);
|
||||
// 不影响主要功能，继续加载好友列表
|
||||
}
|
||||
},
|
||||
|
||||
// 加载好友列表 - 参考Flutter app的实现
|
||||
async loadFriends() {
|
||||
try {
|
||||
this.setData({ loading: true });
|
||||
|
||||
const response = await friendAPI.getFriendList();
|
||||
|
||||
if (response && response.code === 0) {
|
||||
const friends = response.data || [];
|
||||
|
||||
// 处理好友数据，参考Flutter app的数据结构
|
||||
const processedFriends = this.processFriendsData(friends);
|
||||
|
||||
this.setData({
|
||||
friends: processedFriends,
|
||||
filteredFriends: processedFriends,
|
||||
totalFriendsCount: processedFriends.length,
|
||||
loading: false
|
||||
});
|
||||
|
||||
// 计算在线好友数和其他统计
|
||||
this.calculateFriendStats(processedFriends);
|
||||
|
||||
// 🔥 订阅好友的在线状态（通过NIM实现）
|
||||
this.subscribeFriendsPresence(processedFriends);
|
||||
|
||||
} else {
|
||||
throw new Error(response?.message || '获取好友列表失败');
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('❌ 加载好友列表失败:', error);
|
||||
this.setData({ loading: false });
|
||||
|
||||
// 未登录用户静默跳转到登录页
|
||||
const app = getApp();
|
||||
if (!app.globalData.isLoggedIn) {
|
||||
setTimeout(() => {
|
||||
wx.reLaunch({ url: '/pages/login/login' });
|
||||
}, 500);
|
||||
return;
|
||||
}
|
||||
|
||||
// 已登录用户显示错误提示
|
||||
wx.showToast({
|
||||
title: '加载好友失败',
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 处理好友数据 - 参考Flutter app的数据结构
|
||||
processFriendsData(friends) {
|
||||
return friends.map(friend => {
|
||||
// 适配不同的字段名，参考Flutter app的FriendModel
|
||||
const nickname = friend.nickname || friend.username || friend.name || '未知用户';
|
||||
const customId = friend.customId || friend.customID || friend.id;
|
||||
|
||||
return {
|
||||
id: customId,
|
||||
customId: customId,
|
||||
name: nickname,
|
||||
nickname: nickname,
|
||||
avatar: friend.avatar || '', // 头像URL
|
||||
personalSignature: friend.signature || friend.bio || friend.personalSignature || '',
|
||||
isOnline: friend.isOnline || false,
|
||||
isVip: friend.isVip || false,
|
||||
gender: friend.gender || null, // male, female, null
|
||||
remark: friend.remark || '',
|
||||
relation: friend.relation || '好友',
|
||||
location: friend.location || '',
|
||||
distance: friend.distance || 0,
|
||||
lastActiveTime: friend.lastActiveTime || '',
|
||||
tags: friend.tags || [],
|
||||
hasMutualFriends: friend.mutualFriends > 0,
|
||||
isBirthdayToday: false, // 可以根据实际情况计算
|
||||
isNewFriend: friend.isNewFriend || false
|
||||
};
|
||||
});
|
||||
},
|
||||
|
||||
// 计算好友统计数据
|
||||
calculateFriendStats(friends) {
|
||||
const onlineCount = friends.filter(f => f.isOnline).length;
|
||||
const recentActiveCount = friends.filter(f => {
|
||||
if (!f.lastActiveTime) return false;
|
||||
const oneHourAgo = Date.now() - (60 * 60 * 1000);
|
||||
return new Date(f.lastActiveTime).getTime() > oneHourAgo;
|
||||
}).length;
|
||||
const mutualCount = friends.filter(f => f.hasMutualFriends).length;
|
||||
|
||||
this.setData({
|
||||
onlineFriendsCount: onlineCount,
|
||||
recentActiveCount: recentActiveCount,
|
||||
mutualFriendsCount: mutualCount
|
||||
});
|
||||
},
|
||||
|
||||
// 注册在线状态变化监听
|
||||
registerPresenceListener() {
|
||||
try {
|
||||
// 移除旧的监听器（如果存在）
|
||||
nimPresenceManager.off('presence_changed', this.handlePresenceChanged);
|
||||
|
||||
// 注册新的监听器（通过NIM实现在线状态）
|
||||
nimPresenceManager.on('presence_changed', this.handlePresenceChanged.bind(this));
|
||||
} catch (error) {
|
||||
console.error('注册在线状态监听失败:', error);
|
||||
}
|
||||
},
|
||||
|
||||
// 订阅好友的在线状态
|
||||
async subscribeFriendsPresence(friends) {
|
||||
try {
|
||||
if (!friends || friends.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 提取所有好友的customId
|
||||
const userIds = friends
|
||||
.map(f => f.customId || f.id)
|
||||
.filter(Boolean);
|
||||
|
||||
if (userIds.length > 0) {
|
||||
// 通过NIM订阅在线状态，immediateSync=true 确保首次订阅时立即返回在线状态
|
||||
await nimPresenceManager.subscribe(userIds, 7 * 24 * 3600, true);
|
||||
|
||||
// 订阅后立即从缓存更新在线状态
|
||||
this.updateFriendsPresenceFromCache();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('订阅好友在线状态失败:', error);
|
||||
}
|
||||
},
|
||||
|
||||
// 从缓存更新好友的在线状态
|
||||
updateFriendsPresenceFromCache() {
|
||||
try {
|
||||
let friends = [...this.data.friends];
|
||||
let hasChanges = false;
|
||||
|
||||
friends.forEach(friend => {
|
||||
const userId = friend.customId || friend.id;
|
||||
if (!userId) return;
|
||||
|
||||
const presence = nimPresenceManager.getUserPresence(userId);
|
||||
if (presence) {
|
||||
friend.isOnline = presence.online;
|
||||
hasChanges = true;
|
||||
}
|
||||
});
|
||||
|
||||
if (hasChanges) {
|
||||
this.setData({
|
||||
friends: friends,
|
||||
filteredFriends: this.data.searchKeyword ?
|
||||
this.filterFriendsByKeyword(friends, this.data.searchKeyword) : friends
|
||||
});
|
||||
|
||||
// 重新计算统计数据
|
||||
this.calculateFriendStats(friends);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('更新好友在线状态失败:', error);
|
||||
}
|
||||
},
|
||||
|
||||
// 处理在线状态变化
|
||||
handlePresenceChanged(data) {
|
||||
try {
|
||||
const { userId, isOnline } = data;
|
||||
|
||||
let friends = [...this.data.friends];
|
||||
let hasChanges = false;
|
||||
|
||||
friends.forEach(friend => {
|
||||
const friendId = friend.customId || friend.id;
|
||||
if (friendId === userId) {
|
||||
friend.isOnline = isOnline;
|
||||
hasChanges = true;
|
||||
}
|
||||
});
|
||||
|
||||
if (hasChanges) {
|
||||
this.setData({
|
||||
friends: friends,
|
||||
filteredFriends: this.data.searchKeyword ?
|
||||
this.filterFriendsByKeyword(friends, this.data.searchKeyword) : friends
|
||||
});
|
||||
|
||||
// 重新计算统计数据
|
||||
this.calculateFriendStats(friends);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('处理在线状态变化失败:', error);
|
||||
}
|
||||
},
|
||||
|
||||
// 辅助方法：根据关键词过滤好友（增强版）
|
||||
filterFriendsByKeyword(friends, keyword) {
|
||||
if (!keyword || !keyword.trim()) {
|
||||
return friends;
|
||||
}
|
||||
|
||||
const searchText = keyword.toLowerCase().trim();
|
||||
|
||||
return friends.filter(friend => {
|
||||
// 1. 匹配备注名（优先级最高）
|
||||
const remark = (friend.remark || '').toLowerCase();
|
||||
if (remark.includes(searchText)) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// 2. 匹配昵称
|
||||
const nickname = (friend.nickname || '').toLowerCase();
|
||||
if (nickname.includes(searchText)) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// 3. 匹配自定义ID
|
||||
const customId = (friend.customId || '').toLowerCase();
|
||||
if (customId.includes(searchText)) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// 4. 匹配个性签名
|
||||
const signature = (friend.personalSignature || friend.bio || '').toLowerCase();
|
||||
if (signature.includes(searchText)) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// 5. 匹配手机号（如果有）
|
||||
const phone = (friend.phone || '').toLowerCase();
|
||||
if (phone.includes(searchText)) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
});
|
||||
},
|
||||
|
||||
// 获取好友请求数量 - 参考Flutter app的实现
|
||||
async loadFriendRequestsCount() {
|
||||
try {
|
||||
const response = await friendAPI.getFriendRequestCount();
|
||||
|
||||
if (response && response.code === 0) {
|
||||
const count = response.data?.count || 0;
|
||||
|
||||
this.setData({
|
||||
newFriendRequests: count
|
||||
});
|
||||
|
||||
// 同步自定义TabBar角标（好友）
|
||||
try {
|
||||
if (typeof this.getTabBar === 'function' && this.getTabBar()) {
|
||||
this.getTabBar().setFriendsBadge(count);
|
||||
}
|
||||
} catch (_) {}
|
||||
|
||||
// 同步通知管理器的未读计数
|
||||
try { notificationManager.setFriendsUnreadCount(count); } catch (_) {}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('❌ 获取好友请求数量失败:', error);
|
||||
// 不影响主要功能，只是数量显示为0
|
||||
this.setData({
|
||||
newFriendRequests: 0
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 搜索输入（实时搜索）
|
||||
onSearchInput(e) {
|
||||
const keyword = e.detail.value;
|
||||
this.setData({
|
||||
searchKeyword: keyword,
|
||||
searching: true
|
||||
});
|
||||
|
||||
// 防抖处理
|
||||
if (this.searchTimer) {
|
||||
clearTimeout(this.searchTimer);
|
||||
}
|
||||
|
||||
this.searchTimer = setTimeout(() => {
|
||||
this.filterFriends(keyword);
|
||||
}, 300);
|
||||
},
|
||||
|
||||
// 过滤好友
|
||||
filterFriends(keyword) {
|
||||
const filtered = this.filterFriendsByKeyword(this.data.friends, keyword);
|
||||
|
||||
this.setData({
|
||||
filteredFriends: filtered,
|
||||
searchResultCount: filtered.length,
|
||||
searching: false
|
||||
});
|
||||
|
||||
// 记录搜索历史（非空且有结果）
|
||||
if (keyword && keyword.trim() && filtered.length > 0) {
|
||||
this.saveSearchHistory(keyword.trim());
|
||||
}
|
||||
},
|
||||
|
||||
// 清除搜索
|
||||
clearSearch() {
|
||||
this.setData({
|
||||
searchKeyword: '',
|
||||
searchResultCount: 0,
|
||||
searching: false
|
||||
});
|
||||
this.filterFriends('');
|
||||
},
|
||||
|
||||
// 显示搜索栏
|
||||
showSearch() {
|
||||
this.setData({ showSearchBar: true });
|
||||
},
|
||||
|
||||
// 隐藏搜索栏
|
||||
hideSearch() {
|
||||
this.clearSearch();
|
||||
this.setData({ showSearchBar: false });
|
||||
},
|
||||
|
||||
// 保存搜索历史
|
||||
saveSearchHistory(keyword) {
|
||||
try {
|
||||
let history = wx.getStorageSync('friendSearchHistory') || [];
|
||||
|
||||
// 移除重复项
|
||||
history = history.filter(item => item !== keyword);
|
||||
|
||||
// 添加到开头
|
||||
history.unshift(keyword);
|
||||
|
||||
// 最多保存10条
|
||||
history = history.slice(0, 10);
|
||||
|
||||
wx.setStorageSync('friendSearchHistory', history);
|
||||
} catch (error) {
|
||||
console.error('保存搜索历史失败:', error);
|
||||
}
|
||||
},
|
||||
|
||||
// 获取搜索历史
|
||||
getSearchHistory() {
|
||||
try {
|
||||
return wx.getStorageSync('friendSearchHistory') || [];
|
||||
} catch (error) {
|
||||
console.error('获取搜索历史失败:', error);
|
||||
return [];
|
||||
}
|
||||
},
|
||||
|
||||
// 清除搜索历史
|
||||
clearSearchHistory() {
|
||||
try {
|
||||
wx.removeStorageSync('friendSearchHistory');
|
||||
wx.showToast({
|
||||
title: '已清除搜索历史',
|
||||
icon: 'success'
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('清除搜索历史失败:', error);
|
||||
}
|
||||
},
|
||||
|
||||
// 下拉刷新
|
||||
async onRefresh() {
|
||||
this.setData({ refreshing: true });
|
||||
|
||||
try {
|
||||
await this.loadFriends();
|
||||
await this.loadFriendRequestsCount();
|
||||
|
||||
wx.showToast({
|
||||
title: '刷新成功',
|
||||
icon: 'success',
|
||||
duration: 1000
|
||||
});
|
||||
} catch (error) {
|
||||
wx.showToast({
|
||||
title: '刷新失败',
|
||||
icon: 'none'
|
||||
});
|
||||
} finally {
|
||||
this.setData({ refreshing: false });
|
||||
}
|
||||
},
|
||||
|
||||
// 打开好友资料
|
||||
openFriendProfile(e) {
|
||||
const friend = e.currentTarget.dataset.friend;
|
||||
|
||||
wx.navigateTo({
|
||||
url: `/subpackages/social/friend-detail/friend-detail?customId=${friend.customId}`
|
||||
});
|
||||
},
|
||||
|
||||
// 好友请求 - 修改后的名称
|
||||
openNewFriends() {
|
||||
// 进入前刷新一次，确保角标与列表同步
|
||||
try { this.loadFriendRequestsCount(); } catch (_) {}
|
||||
wx.navigateTo({
|
||||
url: '/subpackages/social/friend-requests/friend-requests'
|
||||
});
|
||||
},
|
||||
|
||||
// 建群 - 修改后的功能
|
||||
openGroupChats() {
|
||||
wx.navigateTo({
|
||||
url: '/subpackages/group/create-group/create-group'
|
||||
});
|
||||
},
|
||||
|
||||
// 添加好友 - 跳转到搜索页面
|
||||
addFriend() {
|
||||
wx.navigateTo({
|
||||
url: '/subpackages/social/search/search'
|
||||
});
|
||||
},
|
||||
|
||||
// 🔥 初始化WebSocket好友功能（监听好友请求实时通知）
|
||||
initWebSocketFriendFeatures() {
|
||||
try {
|
||||
if (this._wsFriendInited) return;
|
||||
this._wsFriendInited = true;
|
||||
|
||||
console.log('🔌 初始化WebSocket好友事件监听器');
|
||||
|
||||
// 绑定处理函数到 this，方便后续移除
|
||||
this.handleNotificationMessage = this.handleNotificationMessage.bind(this);
|
||||
|
||||
// 监听通知消息（包含好友请求）
|
||||
wsManager.on('notification', this.handleNotificationMessage);
|
||||
|
||||
} catch (error) {
|
||||
console.error('初始化WebSocket好友功能失败:', error);
|
||||
}
|
||||
},
|
||||
|
||||
// 处理通知消息
|
||||
handleNotificationMessage(msg) {
|
||||
try {
|
||||
console.log('🔔 收到通知消息:', msg);
|
||||
const data = msg?.data || msg;
|
||||
|
||||
// 判断是否为好友通知
|
||||
if (data?.type === 'friend_notification') {
|
||||
this.handleFriendNotification(data);
|
||||
} else if (data?.type === 'friend_request_notification') {
|
||||
this.handleFriendRequestNotification(data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('处理通知消息失败:', error);
|
||||
}
|
||||
},
|
||||
|
||||
// 处理好友通知（包含request/accepted/rejected/count_update）
|
||||
handleFriendNotification(data) {
|
||||
try {
|
||||
console.log('🆕 处理好友通知:', data);
|
||||
|
||||
const subType = data?.subType;
|
||||
const senderName = data?.senderName || '用户';
|
||||
const pendingCount = data?.pendingCount || 0;
|
||||
|
||||
switch (subType) {
|
||||
case 'request':
|
||||
// 新好友请求
|
||||
wx.showToast({
|
||||
title: `${senderName} 请求添加您为好友`,
|
||||
icon: 'none',
|
||||
duration: 3000
|
||||
});
|
||||
this.updateBadge(pendingCount);
|
||||
break;
|
||||
|
||||
case 'accepted':
|
||||
// 好友请求被接受
|
||||
wx.showToast({
|
||||
title: `${senderName} 已接受您的好友申请`,
|
||||
icon: 'success',
|
||||
duration: 2000
|
||||
});
|
||||
this.updateBadge(pendingCount);
|
||||
// 刷新好友列表
|
||||
this.loadFriends();
|
||||
break;
|
||||
|
||||
case 'rejected':
|
||||
// 好友请求被拒绝
|
||||
wx.showToast({
|
||||
title: `${senderName} 已拒绝您的好友申请`,
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
});
|
||||
this.updateBadge(pendingCount);
|
||||
break;
|
||||
|
||||
case 'count_update':
|
||||
// 待处理数量更新
|
||||
this.updateBadge(pendingCount);
|
||||
break;
|
||||
|
||||
default:
|
||||
console.warn('未知的好友通知子类型:', subType);
|
||||
// 默认刷新数量
|
||||
this.loadFriendRequestsCount();
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('处理好友通知失败:', error);
|
||||
}
|
||||
},
|
||||
|
||||
// 处理连接时的待处理好友请求通知
|
||||
handleFriendRequestNotification(data) {
|
||||
try {
|
||||
console.log('📋 处理待处理好友请求通知:', data);
|
||||
const pendingCount = data?.pendingCount || 0;
|
||||
this.updateBadge(pendingCount);
|
||||
} catch (error) {
|
||||
console.error('处理待处理好友请求通知失败:', error);
|
||||
}
|
||||
},
|
||||
|
||||
// 更新小红点角标
|
||||
updateBadge(count) {
|
||||
try {
|
||||
// 更新页面数据
|
||||
this.setData({
|
||||
newFriendRequests: count
|
||||
});
|
||||
|
||||
// 同步自定义TabBar角标
|
||||
if (typeof this.getTabBar === 'function' && this.getTabBar()) {
|
||||
this.getTabBar().setFriendsBadge(count);
|
||||
}
|
||||
|
||||
// 同步通知管理器的未读计数
|
||||
notificationManager.setFriendsUnreadCount(count);
|
||||
|
||||
console.log('✅ 已更新好友请求角标:', count);
|
||||
} catch (error) {
|
||||
console.error('更新角标失败:', error);
|
||||
}
|
||||
},
|
||||
|
||||
// 页面卸载
|
||||
onUnload() {
|
||||
// 移除在线状态监听器
|
||||
try {
|
||||
nimPresenceManager.off('presence_changed', this.handlePresenceChanged);
|
||||
} catch (error) {
|
||||
console.error('移除在线状态监听器失败:', error);
|
||||
}
|
||||
|
||||
// 移除 WebSocket 通知监听器
|
||||
try {
|
||||
if (this.handleNotificationMessage) {
|
||||
wsManager.off('notification', this.handleNotificationMessage);
|
||||
console.log('✅ 已移除 WebSocket 通知监听器');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('移除 WebSocket 通知监听器失败:', error);
|
||||
}
|
||||
}
|
||||
});
|
||||
7
pages/social/friends/friends.json
Normal file
7
pages/social/friends/friends.json
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"navigationBarTitleText": "好友",
|
||||
"navigationBarBackgroundColor": "#000000",
|
||||
"navigationBarTextStyle": "white",
|
||||
"backgroundColor": "#f8f9fa",
|
||||
"disableScroll": true
|
||||
}
|
||||
131
pages/social/friends/friends.wxml
Normal file
131
pages/social/friends/friends.wxml
Normal file
|
|
@ -0,0 +1,131 @@
|
|||
<!-- 好友页面 - 简洁现代设计 -->
|
||||
<view class="friends-container">
|
||||
|
||||
<!-- 导航栏 -->
|
||||
<view class="nav-bar" style="padding-top: {{statusBarHeight -statusBarHeight}}px;">
|
||||
<view class="nav-content">
|
||||
<view class="nav-left">
|
||||
<view class="search-container">
|
||||
<input class="search-input"
|
||||
type="text"
|
||||
placeholder="搜索好友"
|
||||
value="{{searchKeyword}}"
|
||||
bindinput="onSearchInput"
|
||||
bindconfirm="filterFriends"
|
||||
placeholder-class="search-placeholder"/>
|
||||
<!-- 搜索图标：空白时显示 -->
|
||||
<image class="search-icon" wx:if="{{!searchKeyword}}" src="../../../images/group/Search.svg" mode=""/>
|
||||
<!-- 清除按钮：输入内容时显示 -->
|
||||
<view class="search-clear" wx:if="{{searchKeyword}}" bindtap="clearSearch">
|
||||
<text class="clear-text">✕</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="nav-actions">
|
||||
<view class="nav-btn" bindtap="addFriend">
|
||||
<image src="../../../images/AddFriend.svg" class="nav-icon" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 搜索结果提示 -->
|
||||
<view class="search-hint" wx:if="{{searchKeyword}}">
|
||||
<text class="hint-text">
|
||||
{{searching ? '搜索中...' : '找到 ' + searchResultCount + ' 位好友'}}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<scroll-view class="content-area" scroll-y="true" style="top: {{navBarHeight-navBarHeight+40}}px;">
|
||||
|
||||
<!-- 功能入口 -->
|
||||
<view class="function-section">
|
||||
<view class="function-item" bindtap="openNewFriends">
|
||||
<!-- class="function-icon new-friends" -->
|
||||
<view class="function-icon" >
|
||||
<image src="../../../images/AddFriend.svg" class="nav-icon" />
|
||||
<view class="badge" wx:if="{{newFriendRequests > 0}}">{{newFriendRequests}}</view>
|
||||
</view>
|
||||
<view class="function-info">
|
||||
<text class="function-title">好友申请</text>
|
||||
<text class="function-desc" wx:if="{{newFriendRequests > 0}}">{{newFriendRequests}} 个新请求</text>
|
||||
<text class="function-desc" wx:else>查看所有好友申请</text>
|
||||
</view>
|
||||
<view class="function-arrow">
|
||||
<image src="../../../images/emoji/r-Return.svg" class="nav-icon" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="function-item" bindtap="openGroupChats" wx:if="{{false}}">
|
||||
<view class="function-icon groups">
|
||||
<text class="icon-text">👨👩👧👦</text>
|
||||
</view>
|
||||
<view class="function-info">
|
||||
<text class="function-title">群聊</text>
|
||||
<text class="function-desc">查看群聊列表</text>
|
||||
</view>
|
||||
<text class="function-arrow">›</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 好友列表 -->
|
||||
<view class="friends-section-list" wx:if="{{filteredFriends.length > 0}}">
|
||||
<!-- <view class="section-header">
|
||||
<text class="section-title">联系人</text>
|
||||
</view> -->
|
||||
|
||||
<view class="friends-list">
|
||||
<view class="friend-item"
|
||||
wx:for="{{filteredFriends}}"
|
||||
wx:key="customId"
|
||||
bindtap="openFriendProfile"
|
||||
data-friend="{{item}}">
|
||||
|
||||
<!-- 头像 -->
|
||||
<view class="friend-avatar">
|
||||
<image wx:if="{{item.avatar}}"
|
||||
src="{{item.avatar}}"
|
||||
class="avatar-img"
|
||||
mode="aspectFill" />
|
||||
<view wx:else class="avatar-placeholder">
|
||||
<text class="avatar-text">{{item.nickname.charAt(0)}}</text>
|
||||
</view>
|
||||
<view class="online-dot {{item.isOnline ? 'online' : 'offline'}}"></view>
|
||||
</view>
|
||||
|
||||
<!-- 信息 -->
|
||||
<view class="friend-info">
|
||||
<text class="friend-name">{{item.remark || item.nickname}}</text>
|
||||
<!-- 显示个性签名或ID -->
|
||||
<text class="friend-desc" wx:if="{{!searchKeyword && item.personalSignature}}">
|
||||
{{item.personalSignature}}
|
||||
</text>
|
||||
<!-- 搜索时显示customId -->
|
||||
<text class="friend-desc" wx:if="{{searchKeyword && item.customId}}">
|
||||
ID: {{item.customId}}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<view class="empty-state" wx:if="{{!loading && filteredFriends.length === 0}}">
|
||||
<image class="action-icon empty-icon " src="../../../images/index/friend.svg" mode=""/>
|
||||
<!-- <view class="empty-icon">👥</view> -->
|
||||
<text class="empty-title">还没有好友</text>
|
||||
<text class="empty-desc">点击右上角 ➕ 添加好友</text>
|
||||
<view class="empty-btn" bindtap="addFriend">
|
||||
<text class="btn-text">添加好友</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 加载状态 -->
|
||||
<view class="loading-state" wx:if="{{loading}}">
|
||||
<view class="loading-spinner"></view>
|
||||
<text class="loading-text">加载中...</text>
|
||||
</view>
|
||||
|
||||
</scroll-view>
|
||||
</view>
|
||||
730
pages/social/friends/friends.wxss
Normal file
730
pages/social/friends/friends.wxss
Normal file
|
|
@ -0,0 +1,730 @@
|
|||
/* 好友页面 - 简洁现代设计 */
|
||||
|
||||
.friends-container {
|
||||
height: 100vh;
|
||||
/* 深色页面背景 */
|
||||
background-color: #121212;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* 导航栏 */
|
||||
.nav-bar {
|
||||
/* background-color: #fff; */
|
||||
/* border-bottom: 1px solid #e5e5e5; */
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
/* border: 1px solid white; */
|
||||
box-sizing: border-box;
|
||||
height: 120rpx;
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
|
||||
.nav-content {
|
||||
/* border: 1px solid rgb(74, 4, 235); */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
/* padding: 12px 16px; */
|
||||
/* height: 44px; */
|
||||
}
|
||||
|
||||
.nav-left {
|
||||
/* flex: 1; */
|
||||
/* border: 1px solid red; */
|
||||
height: 80rpx;
|
||||
width: 580rpx;
|
||||
border-radius: 40rpx;
|
||||
background: white;
|
||||
display: flex;
|
||||
align-items:center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.search-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.search-input{
|
||||
flex: 1;
|
||||
padding-left: 30rpx;
|
||||
padding-right: 80rpx;
|
||||
color: #333;
|
||||
font-size: 28rpx;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.search-placeholder {
|
||||
color: #B3B3B3;
|
||||
}
|
||||
|
||||
.search-icon{
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
opacity: 0.6;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.search-clear {
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: rgba(0, 0, 0, 0.15);
|
||||
border-radius: 50%;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.search-clear:active {
|
||||
transform: scale(0.9);
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.clear-text {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 搜索结果提示 */
|
||||
.search-hint {
|
||||
padding: 16rpx 32rpx;
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.hint-text {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.nav-subtitle {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
margin-top: 2rpx;
|
||||
margin-left: 24rpx;
|
||||
}
|
||||
|
||||
.nav-icon{
|
||||
width: 30px;
|
||||
height: 24px;
|
||||
/* background-color: #1E1E1E; */
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
|
||||
/* 内容区域 */
|
||||
.content-area {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
/* 深色页面背景 */
|
||||
/* background-color: #121212; */
|
||||
background-color: black;
|
||||
|
||||
}
|
||||
|
||||
/* 搜索栏 */
|
||||
.search-section {
|
||||
padding: 12px 16px;
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
position: relative;
|
||||
background-color: #f0f0f0;
|
||||
border-radius: 20px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
height: 36px;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.search-clear {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 10px;
|
||||
background-color: #ccc;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.clear-icon {
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 功能入口 */
|
||||
.function-section {
|
||||
background-color: #fff;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.function-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
transition: all 0.2s ease;
|
||||
/* background-color: red; */
|
||||
position: relative;
|
||||
background-color:#1C1C1C;
|
||||
}
|
||||
|
||||
.function-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.function-item:active {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
.function-icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 12px;
|
||||
position: relative;
|
||||
background-color: #252525;
|
||||
|
||||
}
|
||||
|
||||
.function-icon.new-friends {
|
||||
background-color: #4CAF50;
|
||||
}
|
||||
|
||||
.function-icon.groups {
|
||||
background-color: #2196F3;
|
||||
}
|
||||
|
||||
.icon-text {
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.badge {
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
right: -4px;
|
||||
min-width: 18px;
|
||||
height: 18px;
|
||||
background-color: #ff4444;
|
||||
border-radius: 9px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 10px;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
border: 2px solid #fff;
|
||||
}
|
||||
|
||||
.function-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: start;
|
||||
align-items: stretch;
|
||||
/* background-color: #191919; */
|
||||
|
||||
|
||||
}
|
||||
|
||||
.function-title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.function-desc {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
|
||||
}
|
||||
|
||||
.function-arrow {
|
||||
|
||||
font-size: 18px;
|
||||
color: #ccc;
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
/* 好友列表 */
|
||||
.friends-section {
|
||||
/* background-color: #fff; */
|
||||
background-color: #13212A;
|
||||
|
||||
|
||||
|
||||
}
|
||||
.friends-section-list{
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #132029;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
padding: 12px 16px 8px 16px;
|
||||
/* background-color: #f8f8f8; */
|
||||
background-color: red;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.friends-list {
|
||||
border-radius: 12px;
|
||||
width: 90%;
|
||||
right: 0;
|
||||
left: 0;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
margin-bottom: 30%;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
|
||||
.friend-item {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: all 0.2s ease;
|
||||
background-color: #26333C;
|
||||
border-radius: 12px;
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
right: 0;
|
||||
left: 0;
|
||||
margin: 0 auto;
|
||||
margin-top: 10px;
|
||||
padding-left: 10px;
|
||||
|
||||
}
|
||||
|
||||
.friend-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
|
||||
/* 头像 */
|
||||
.friend-avatar {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 12rpx;
|
||||
margin-right: 12rpx;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
z-index: 1; /* 建立更高层级，配合在线状态点覆盖显示 */
|
||||
}
|
||||
|
||||
.avatar-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.avatar-placeholder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.avatar-text {
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* 在线状态角标 —— 与消息页保持一致 */
|
||||
.online-dot {
|
||||
position: absolute;
|
||||
right: 2rpx;
|
||||
bottom: 2rpx;
|
||||
width: 22rpx;
|
||||
height: 22rpx;
|
||||
border-radius: 50%;
|
||||
border: 4rpx solid #1e1e1e;
|
||||
/* 与暗色卡片背景衔接，等效于 message 页的 var(--surface-color) */
|
||||
box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.35);
|
||||
z-index: 1000; /* 保持顶部，避免被列表或文本遮挡 */
|
||||
pointer-events: none; /* 不影响点击头像 */
|
||||
}
|
||||
|
||||
.online-dot.online {
|
||||
background: #2ECC71;
|
||||
}
|
||||
|
||||
.online-dot.offline {
|
||||
background: #9E9E9E;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/* 好友信息 */
|
||||
.friend-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.friend-name {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
margin-bottom: 2px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.friend-desc {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
line-height: 1.2;
|
||||
margin-top: 2rpx;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.friend-id {
|
||||
font-size: 22rpx;
|
||||
color: #666;
|
||||
margin-top: 4rpx;
|
||||
font-family: 'Monaco', 'Menlo', monospace;
|
||||
}
|
||||
|
||||
.friend-status {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
margin-left: 24rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 操作按钮 */
|
||||
.friend-actions {
|
||||
width: 60px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
/* background-color: red; */
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
/* border-radius: 16px; */
|
||||
/* background-color: #f0f0f0; */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.action-btn:active {
|
||||
transform: scale(0.9);
|
||||
/* background: #2c3b46; */
|
||||
}
|
||||
|
||||
.action-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
font-size: 14px;
|
||||
/* background-color: red; */
|
||||
margin-right:10px ;
|
||||
}
|
||||
.action-icon:active{
|
||||
border-radius: 50px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* 空状态 */
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
/* padding: 80px 32px; */
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
/* font-size: 64px; */
|
||||
/* margin-bottom: 16px; */
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.empty-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.empty-desc {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.empty-btn {
|
||||
background: linear-gradient(35deg, #667eea, #764ba2);
|
||||
color: #fff;
|
||||
padding: 12px 24px;
|
||||
border-radius: 20px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.empty-btn:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 加载状态 */
|
||||
.loading-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 3px solid #f0f0f0;
|
||||
border-top: 3px solid #667eea;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* ================== 暗色主题覆盖（社交-好友列表） ================== */
|
||||
.friends-container .nav-bar {
|
||||
background:black;
|
||||
/* border-bottom: 1px solid #2a2a2a; */
|
||||
}
|
||||
|
||||
.friends-container .nav-title {
|
||||
color: #f5f5f5;
|
||||
}
|
||||
|
||||
.friends-container .nav-subtitle {
|
||||
color: #b0b0b0;
|
||||
}
|
||||
|
||||
|
||||
.friends-container .nav-btn{
|
||||
width: 40px;
|
||||
height: 35px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.friends-container .nav-btn:active {
|
||||
background: #333;
|
||||
border-radius: 12px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.friends-container .search-section {
|
||||
background: #1e1e1e;
|
||||
border-bottom: 1px solid #2a2a2a;
|
||||
|
||||
}
|
||||
|
||||
.friends-container .search-bar {
|
||||
background: #2a2a2a;
|
||||
}
|
||||
|
||||
.friends-container .search-input {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.friends-container .search-clear {
|
||||
background: #444;
|
||||
}
|
||||
|
||||
/* .friends-container .function-section,
|
||||
.friends-container .friends-section,
|
||||
.friends-container .friends-list {
|
||||
background: #1e1e1e;
|
||||
} */
|
||||
|
||||
.friends-container .function-item {
|
||||
border-bottom: 1px solid #2a2a2a;
|
||||
}
|
||||
|
||||
.friends-container .function-item:active {
|
||||
background: #252525;
|
||||
}
|
||||
|
||||
.friends-container .section-header {
|
||||
background: #181818;
|
||||
border-bottom: 1px solid #2a2a2a;
|
||||
}
|
||||
|
||||
.friends-container .function-title,
|
||||
.friends-container .friend-name {
|
||||
color: #f0f0f0;
|
||||
}
|
||||
|
||||
.friends-container .function-desc,
|
||||
.friends-container .friend-status,
|
||||
.friends-container .nav-subtitle {
|
||||
color: #b0b0b0;
|
||||
}
|
||||
|
||||
/* .friends-container .friend-item {
|
||||
border-bottom: 1px solid #262626;
|
||||
} */
|
||||
/*
|
||||
.friends-container .friend-item:active {
|
||||
|
||||
} */
|
||||
|
||||
/* .friends-container .action-btn {
|
||||
background: #2a2a2a;
|
||||
}
|
||||
|
||||
.friends-container .action-btn:active {
|
||||
background: #333;
|
||||
} */
|
||||
|
||||
/* 占位 */
|
||||
.friends-container .avatar-placeholder {
|
||||
background: linear-gradient(135deg, #2f3550, #1f2230);
|
||||
}
|
||||
|
||||
/* 空状态 */
|
||||
.friends-container .empty-title {
|
||||
color: #f5f5f5;
|
||||
}
|
||||
|
||||
.friends-container .empty-desc {
|
||||
color: #b0b0b0;
|
||||
}
|
||||
|
||||
.friends-container .empty-btn {
|
||||
background: linear-gradient(135deg, #4d7dff, #246bff);
|
||||
box-shadow: 0 4px 12px rgba(36, 107, 255, 0.35);
|
||||
}
|
||||
|
||||
/* 加载 */
|
||||
.friends-container .loading-text {
|
||||
color: #b0b0b0;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 375px) {
|
||||
.nav-content {
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.function-item,
|
||||
.friend-item {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.friend-avatar {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.avatar-text {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue