846 行
33 KiB
PHP
846 行
33 KiB
PHP
<?php // include 'minify.php'; ?>
|
|
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>个人主页</title>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
|
<link rel="stylesheet" href="style.css">
|
|
<style>
|
|
:root {
|
|
--bg-primary: #f5f5f5;
|
|
--bg-secondary: #ffffff;
|
|
--bg-tertiary: #f9f9f9;
|
|
--bg-hover: #f0f0f0;
|
|
--text-primary: #333333;
|
|
--text-secondary: #666666;
|
|
--text-tertiary: #999999;
|
|
--border-color: #e0e0e0;
|
|
--accent-color: #07c160;
|
|
--accent-hover: #00a86b;
|
|
--shadow-color: rgba(0, 0, 0, 0.1);
|
|
--shadow-hover: rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
body.dark-mode {
|
|
--bg-primary: #1a1a1a;
|
|
--bg-secondary: #2d2d2d;
|
|
--bg-tertiary: #3d3d3d;
|
|
--bg-hover: #4d4d4d;
|
|
--text-primary: #ffffff;
|
|
--text-secondary: #b8b8b8;
|
|
--text-tertiary: #888888;
|
|
--border-color: #3d3d3d;
|
|
--accent-color: #4caf50;
|
|
--accent-hover: #66bb6a;
|
|
--shadow-color: rgba(0, 0, 0, 0.3);
|
|
--shadow-hover: rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
background-color: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
line-height: 1.6;
|
|
transition: background-color 0.3s ease, color 0.3s ease;
|
|
}
|
|
|
|
.profile-container {
|
|
max-width: 600px;
|
|
margin: 50px auto;
|
|
background: var(--bg-secondary);
|
|
border-radius: 12px;
|
|
box-shadow: 0 2px 20px var(--shadow-color);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.profile-header {
|
|
background: linear-gradient(135deg, var(--accent-color), var(--accent-hover));
|
|
color: white;
|
|
padding: 30px;
|
|
text-align: center;
|
|
}
|
|
|
|
.profile-avatar {
|
|
width: 150px;
|
|
height: 150px;
|
|
border-radius: 50%;
|
|
background: white;
|
|
margin: 0 auto 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.profile-avatar i {
|
|
font-size: 80px;
|
|
color: var(--accent-color);
|
|
}
|
|
|
|
.profile-username {
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.profile-status {
|
|
font-size: 16px;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.profile-body {
|
|
padding: 30px;
|
|
}
|
|
|
|
.profile-info {
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.info-item {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 15px;
|
|
padding: 10px;
|
|
background: var(--bg-tertiary);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.info-item i {
|
|
width: 30px;
|
|
color: var(--accent-color);
|
|
margin-right: 15px;
|
|
}
|
|
|
|
.info-label {
|
|
font-weight: 500;
|
|
margin-right: 10px;
|
|
min-width: 80px;
|
|
}
|
|
|
|
.info-value {
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.profile-actions {
|
|
display: flex;
|
|
gap: 15px;
|
|
justify-content: center;
|
|
}
|
|
|
|
.btn {
|
|
padding: 12px 24px;
|
|
border: none;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: var(--accent-color);
|
|
color: white;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: var(--accent-hover);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: var(--bg-tertiary);
|
|
color: var(--text-primary);
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background: var(--bg-hover);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.back-link {
|
|
display: block;
|
|
text-align: center;
|
|
margin-top: 20px;
|
|
color: #1890ff;
|
|
text-decoration: none;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.back-link:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* 主题切换按钮 */
|
|
.theme-toggle-btn {
|
|
position: fixed;
|
|
top: 20px;
|
|
right: 20px;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
color: var(--text-primary);
|
|
font-size: 18px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 2px 8px var(--shadow-color);
|
|
transition: all 0.3s ease;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.theme-toggle-btn:hover {
|
|
transform: scale(1.1);
|
|
box-shadow: 0 4px 12px var(--shadow-hover);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.profile-container {
|
|
margin: 20px;
|
|
}
|
|
|
|
.profile-header {
|
|
padding: 20px;
|
|
}
|
|
|
|
.profile-body {
|
|
padding: 20px;
|
|
}
|
|
|
|
.profile-avatar {
|
|
width: 120px;
|
|
height: 120px;
|
|
}
|
|
|
|
.profile-avatar i {
|
|
font-size: 60px;
|
|
}
|
|
|
|
.profile-username {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.profile-actions {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.btn {
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<button class="theme-toggle-btn" id="theme-toggle-btn">
|
|
<i class="fas fa-moon"></i>
|
|
</button>
|
|
|
|
<div class="profile-container">
|
|
<div class="profile-header">
|
|
<div class="profile-avatar">
|
|
<img id="profile-avatar-img" src="" alt="用户头像" style="width: 100%; height: 100%; border-radius: 50%; object-fit: cover;">
|
|
<i id="profile-avatar-icon" class="fas fa-user-circle" style="display: none; font-size: 80px; color: #07c160;"></i>
|
|
</div>
|
|
<div class="profile-username" id="profile-username"></div>
|
|
<div class="profile-status" id="profile-status">在线</div>
|
|
</div>
|
|
<div class="profile-body">
|
|
<div class="profile-info">
|
|
<div class="info-item">
|
|
<i class="fas fa-id-card"></i>
|
|
<span class="info-label">用户ID:</span>
|
|
<span class="info-value" id="profile-id"></span>
|
|
</div>
|
|
<div class="info-item">
|
|
<i class="fas fa-clock"></i>
|
|
<span class="info-label">注册时间:</span>
|
|
<span class="info-value" id="profile-regtime"></span>
|
|
</div>
|
|
<div class="info-item">
|
|
<i class="fas fa-map-marker-alt"></i>
|
|
<span class="info-label">位置:</span>
|
|
<span class="info-value" id="profile-location">未知</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<i class="fas fa-align-left"></i>
|
|
<span class="info-label">简介:</span>
|
|
<span class="info-value" id="profile-bio">未设置</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<i class="fas fa-sticky-note"></i>
|
|
<span class="info-label">备注:</span>
|
|
<span class="info-value" id="profile-note">无</span>
|
|
</div>
|
|
</div>
|
|
<div class="profile-actions">
|
|
<button class="btn btn-primary" id="add-friend-btn">加好友</button>
|
|
<button class="btn btn-secondary" id="message-btn">发消息</button>
|
|
<button class="btn btn-secondary" id="set-note-btn">设置备注</button>
|
|
</div>
|
|
<a href="index.php" class="back-link">返回聊天首页</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 备注编辑弹窗 -->
|
|
<div class="modal" id="set-note-modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3>设置备注</h3>
|
|
<button class="close-btn" id="cancel-note-btn">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="input-group">
|
|
<i class="fas fa-sticky-note"></i>
|
|
<input type="text" id="note-input" placeholder="输入备注名称" maxlength="50">
|
|
</div>
|
|
<div style="font-size: 12px; color: var(--text-secondary); margin-top: 8px;">
|
|
当前名称: <span id="current-name"></span>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-cancel" id="cancel-note-btn-footer">取消</button>
|
|
<button class="btn btn-primary" id="save-note-btn">保存</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 自定义提示弹窗 -->
|
|
<div class="modal" id="alert-modal">
|
|
<div class="modal-content" style="max-width: 300px;">
|
|
<div class="modal-body" style="text-align: center; padding: 20px;">
|
|
<div id="alert-icon" style="font-size: 48px; margin-bottom: 15px;"></div>
|
|
<p id="alert-message" style="color: var(--text-primary); font-size: 14px;"></p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-primary" id="alert-confirm-btn">确定</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// 获取URL参数
|
|
function getUrlParam(name) {
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
return urlParams.get(name);
|
|
}
|
|
|
|
// 加载用户信息
|
|
function loadUserInfo() {
|
|
const username = getUrlParam('name');
|
|
if (!username) {
|
|
document.getElementById('profile-username').textContent = '用户不存在';
|
|
document.getElementById('profile-id').textContent = '未知';
|
|
document.getElementById('add-friend-btn').disabled = true;
|
|
document.getElementById('message-btn').disabled = true;
|
|
return;
|
|
}
|
|
|
|
// 获取当前登录用户信息
|
|
fetch('api.php?action=getCurrentUser')
|
|
.then(response => response.json())
|
|
.then(currentUserData => {
|
|
// 首先获取用户ID
|
|
fetch('api.php?action=getUserInfo', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/x-www-form-urlencoded',
|
|
},
|
|
body: 'username=' + encodeURIComponent(username)
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success && data.user) {
|
|
// 更新用户信息
|
|
document.getElementById('profile-username').textContent = data.user.username;
|
|
document.getElementById('profile-id').textContent = data.user.id;
|
|
document.getElementById('profile-regtime').textContent = new Date(data.user.created_at * 1000).toLocaleDateString();
|
|
|
|
// 更新用户简介
|
|
if (data.user.bio) {
|
|
document.getElementById('profile-bio').textContent = data.user.bio;
|
|
} else {
|
|
document.getElementById('profile-bio').textContent = '未设置';
|
|
}
|
|
|
|
// 更新用户IP地址
|
|
if (data.user.last_ip) {
|
|
let locationText = '';
|
|
if (data.user.country) {
|
|
locationText += data.user.country;
|
|
}
|
|
if (data.user.province) {
|
|
if (locationText) {
|
|
locationText += ' ';
|
|
}
|
|
locationText += data.user.province;
|
|
}
|
|
if (data.user.city) {
|
|
if (locationText) {
|
|
locationText += ' ';
|
|
}
|
|
locationText += data.user.city;
|
|
}
|
|
if (!locationText) {
|
|
locationText = data.user.last_ip;
|
|
}
|
|
document.getElementById('profile-location').textContent = locationText || '未知';
|
|
} else {
|
|
document.getElementById('profile-location').textContent = '未知';
|
|
}
|
|
|
|
// 更新头像
|
|
const avatarImg = document.getElementById('profile-avatar-img');
|
|
const avatarIcon = document.getElementById('profile-avatar-icon');
|
|
if (data.user.avatar) {
|
|
avatarImg.src = data.user.avatar;
|
|
avatarImg.style.display = 'block';
|
|
avatarIcon.style.display = 'none';
|
|
} else {
|
|
// 如果用户没有头像，显示Font Awesome图标
|
|
avatarImg.style.display = 'none';
|
|
avatarIcon.style.display = 'block';
|
|
}
|
|
|
|
// 加载备注信息
|
|
loadNote(data.user.id);
|
|
|
|
// 检查是否是当前登录用户自己
|
|
const addFriendBtn = document.getElementById('add-friend-btn');
|
|
const messageBtn = document.getElementById('message-btn');
|
|
if (currentUserData.success && currentUserData.user && currentUserData.user.username === data.user.username) {
|
|
// 是自己，隐藏加好友按钮，显示发消息按钮
|
|
addFriendBtn.style.display = 'none';
|
|
messageBtn.style.display = 'none';
|
|
} else {
|
|
// 不是自己，检查好友关系
|
|
checkFriendship(data.user.id);
|
|
}
|
|
} else {
|
|
document.getElementById('profile-username').textContent = '用户不存在';
|
|
document.getElementById('profile-id').textContent = '未知';
|
|
document.getElementById('add-friend-btn').disabled = true;
|
|
document.getElementById('message-btn').disabled = true;
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('获取用户信息失败:', error);
|
|
document.getElementById('profile-username').textContent = '加载失败';
|
|
document.getElementById('profile-id').textContent = '未知';
|
|
document.getElementById('add-friend-btn').disabled = true;
|
|
document.getElementById('message-btn').disabled = true;
|
|
});
|
|
})
|
|
.catch(error => {
|
|
console.error('获取当前用户信息失败:', error);
|
|
// 继续加载用户信息，即使获取当前用户信息失败
|
|
fetch('api.php?action=getUserInfo', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/x-www-form-urlencoded',
|
|
},
|
|
body: 'username=' + encodeURIComponent(username)
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success && data.user) {
|
|
// 更新用户信息
|
|
document.getElementById('profile-username').textContent = data.user.username;
|
|
document.getElementById('profile-id').textContent = data.user.id;
|
|
document.getElementById('profile-regtime').textContent = new Date(data.user.created_at * 1000).toLocaleDateString();
|
|
|
|
// 更新用户简介
|
|
if (data.user.bio) {
|
|
document.getElementById('profile-bio').textContent = data.user.bio;
|
|
} else {
|
|
document.getElementById('profile-bio').textContent = '未设置';
|
|
}
|
|
|
|
// 更新用户IP地址
|
|
if (data.user.last_ip) {
|
|
let locationText = '';
|
|
if (data.user.country) {
|
|
locationText += data.user.country;
|
|
}
|
|
if (data.user.province) {
|
|
if (locationText) {
|
|
locationText += ' ';
|
|
}
|
|
locationText += data.user.province;
|
|
}
|
|
if (data.user.city) {
|
|
if (locationText) {
|
|
locationText += ' ';
|
|
}
|
|
locationText += data.user.city;
|
|
}
|
|
if (!locationText) {
|
|
locationText = data.user.last_ip;
|
|
}
|
|
document.getElementById('profile-location').textContent = locationText || '未知';
|
|
} else {
|
|
document.getElementById('profile-location').textContent = '未知';
|
|
}
|
|
|
|
// 更新头像
|
|
const avatarImg = document.getElementById('profile-avatar-img');
|
|
const avatarIcon = document.getElementById('profile-avatar-icon');
|
|
if (data.user.avatar) {
|
|
avatarImg.src = data.user.avatar;
|
|
avatarImg.style.display = 'block';
|
|
avatarIcon.style.display = 'none';
|
|
} else {
|
|
// 如果用户没有头像，显示Font Awesome图标
|
|
avatarImg.style.display = 'none';
|
|
avatarIcon.style.display = 'block';
|
|
}
|
|
|
|
// 检查是否是好友
|
|
checkFriendship(data.user.id);
|
|
} else {
|
|
document.getElementById('profile-username').textContent = '用户不存在';
|
|
document.getElementById('profile-id').textContent = '未知';
|
|
document.getElementById('add-friend-btn').disabled = true;
|
|
document.getElementById('message-btn').disabled = true;
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('获取用户信息失败:', error);
|
|
document.getElementById('profile-username').textContent = '加载失败';
|
|
document.getElementById('profile-id').textContent = '未知';
|
|
document.getElementById('add-friend-btn').disabled = true;
|
|
document.getElementById('message-btn').disabled = true;
|
|
});
|
|
});
|
|
}
|
|
|
|
// 检查好友关系
|
|
function checkFriendship(userId) {
|
|
fetch('api.php?action=checkFriendship', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/x-www-form-urlencoded',
|
|
},
|
|
body: 'friendId=' + encodeURIComponent(userId)
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
const addFriendBtn = document.getElementById('add-friend-btn');
|
|
const messageBtn = document.getElementById('message-btn');
|
|
|
|
if (data.success && data.isFriend) {
|
|
// 是好友，显示发消息按钮，隐藏加好友按钮
|
|
addFriendBtn.style.display = 'none';
|
|
messageBtn.style.display = 'block';
|
|
} else {
|
|
// 不是好友，显示加好友按钮，隐藏发消息按钮
|
|
addFriendBtn.style.display = 'block';
|
|
messageBtn.style.display = 'none';
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('检查好友关系失败:', error);
|
|
});
|
|
}
|
|
|
|
// 发送好友请求
|
|
function sendFriendRequest() {
|
|
const username = getUrlParam('name');
|
|
if (!username) return;
|
|
|
|
// 调用API发送好友请求
|
|
fetch('api.php?action=addFriend', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/x-www-form-urlencoded',
|
|
},
|
|
body: 'username=' + encodeURIComponent(username)
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
alert(`已向 ${username} 发送好友请求`);
|
|
} else {
|
|
alert('发送好友请求失败: ' + data.message);
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('发送好友请求失败:', error);
|
|
alert('发送好友请求失败，请稍后重试');
|
|
});
|
|
}
|
|
|
|
// 初始化
|
|
function init() {
|
|
loadUserInfo();
|
|
initThemeToggle();
|
|
|
|
// 绑定事件
|
|
document.getElementById('add-friend-btn').addEventListener('click', sendFriendRequest);
|
|
|
|
document.getElementById('message-btn').addEventListener('click', function() {
|
|
const username = getUrlParam('name');
|
|
if (username) {
|
|
// 首先获取用户ID
|
|
fetch('api.php?action=getUserInfo', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/x-www-form-urlencoded',
|
|
},
|
|
body: 'username=' + encodeURIComponent(username)
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success && data.user) {
|
|
// 跳转到聊天页面并打开与该用户的聊天窗口
|
|
window.location.href = `index.php?chatid=${data.user.id}&chattype=friend`;
|
|
} else {
|
|
alert('获取用户信息失败，无法打开聊天窗口');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('获取用户信息失败:', error);
|
|
alert('获取用户信息失败，请稍后重试');
|
|
});
|
|
}
|
|
});
|
|
|
|
// 设置备注按钮事件
|
|
document.getElementById('set-note-btn').addEventListener('click', openSetNoteModal);
|
|
document.getElementById('cancel-note-btn').addEventListener('click', closeSetNoteModal);
|
|
document.getElementById('cancel-note-btn-footer').addEventListener('click', closeSetNoteModal);
|
|
document.getElementById('save-note-btn').addEventListener('click', saveNote);
|
|
|
|
// 自定义提示弹窗按钮事件
|
|
document.getElementById('alert-confirm-btn').addEventListener('click', closeAlert);
|
|
|
|
// 检查是否是好友，如果不是好友则隐藏设置备注按钮
|
|
checkIfFriendForNote();
|
|
}
|
|
|
|
// 加载备注信息
|
|
function loadNote(userId) {
|
|
fetch(`api.php?action=getNote&target_id=${encodeURIComponent(userId)}&target_type=friend`)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success && data.note) {
|
|
document.getElementById('profile-note').textContent = data.note;
|
|
} else {
|
|
document.getElementById('profile-note').textContent = '无';
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('加载备注失败:', error);
|
|
document.getElementById('profile-note').textContent = '无';
|
|
});
|
|
}
|
|
|
|
// 显示自定义提示弹窗
|
|
function showAlert(message, type = 'success') {
|
|
const alertModal = document.getElementById('alert-modal');
|
|
const alertIcon = document.getElementById('alert-icon');
|
|
const alertMessage = document.getElementById('alert-message');
|
|
|
|
if (type === 'success') {
|
|
alertIcon.innerHTML = '<i class="fas fa-check-circle" style="color: #07c160;"></i>';
|
|
} else if (type === 'error') {
|
|
alertIcon.innerHTML = '<i class="fas fa-times-circle" style="color: #ff4d4f;"></i>';
|
|
} else if (type === 'warning') {
|
|
alertIcon.innerHTML = '<i class="fas fa-exclamation-circle" style="color: #faad14;"></i>';
|
|
}
|
|
|
|
alertMessage.textContent = message;
|
|
alertModal.classList.add('active');
|
|
}
|
|
|
|
// 关闭自定义提示弹窗
|
|
function closeAlert() {
|
|
const alertModal = document.getElementById('alert-modal');
|
|
alertModal.classList.remove('active');
|
|
}
|
|
|
|
// 检查是否为好友，决定是否显示设置备注按钮
|
|
function checkIfFriendForNote() {
|
|
const username = getUrlParam('name');
|
|
if (!username) return;
|
|
|
|
fetch('api.php?action=getUserInfo', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/x-www-form-urlencoded',
|
|
},
|
|
body: 'username=' + encodeURIComponent(username)
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success && data.user) {
|
|
// 检查好友关系
|
|
fetch('api.php?action=checkFriendship', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/x-www-form-urlencoded',
|
|
},
|
|
body: 'friendId=' + encodeURIComponent(data.user.id)
|
|
})
|
|
.then(response => response.json())
|
|
.then(friendData => {
|
|
const setNoteBtn = document.getElementById('set-note-btn');
|
|
if (friendData.success && friendData.isFriend) {
|
|
setNoteBtn.style.display = 'block';
|
|
} else {
|
|
setNoteBtn.style.display = 'none';
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
// 打开设置备注弹窗
|
|
function openSetNoteModal() {
|
|
const username = getUrlParam('name');
|
|
if (!username) return;
|
|
|
|
const setNoteModal = document.getElementById('set-note-modal');
|
|
const currentNameSpan = document.getElementById('current-name');
|
|
const noteInput = document.getElementById('note-input');
|
|
|
|
// 设置当前名称
|
|
currentNameSpan.textContent = username;
|
|
|
|
// 清空输入框
|
|
noteInput.value = '';
|
|
|
|
// 获取现有备注
|
|
fetch('api.php?action=getUserInfo', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/x-www-form-urlencoded',
|
|
},
|
|
body: 'username=' + encodeURIComponent(username)
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success && data.user) {
|
|
return fetch(`api.php?action=getNote&target_id=${encodeURIComponent(data.user.id)}&target_type=friend`);
|
|
}
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success && data.note) {
|
|
noteInput.value = data.note;
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('获取备注失败:', error);
|
|
});
|
|
|
|
// 显示弹窗
|
|
setNoteModal.classList.add('active');
|
|
}
|
|
|
|
// 关闭设置备注弹窗
|
|
function closeSetNoteModal() {
|
|
const setNoteModal = document.getElementById('set-note-modal');
|
|
setNoteModal.classList.remove('active');
|
|
}
|
|
|
|
// 保存备注
|
|
function saveNote() {
|
|
const username = getUrlParam('name');
|
|
if (!username) return;
|
|
|
|
const noteInput = document.getElementById('note-input');
|
|
const note = noteInput.value.trim();
|
|
|
|
// 先获取用户ID
|
|
fetch('api.php?action=getUserInfo', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/x-www-form-urlencoded',
|
|
},
|
|
body: 'username=' + encodeURIComponent(username)
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success && data.user) {
|
|
const userId = data.user.id;
|
|
|
|
// 保存备注
|
|
fetch('api.php', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/x-www-form-urlencoded',
|
|
},
|
|
body: `action=setNote&target_id=${encodeURIComponent(userId)}&target_type=friend¬e=${encodeURIComponent(note)}`
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
closeSetNoteModal();
|
|
showAlert('备注设置成功', 'success');
|
|
// 刷新备注显示
|
|
loadNote(userId);
|
|
} else {
|
|
showAlert('设置备注失败: ' + (data.message || '未知错误'), 'error');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('设置备注失败:', error);
|
|
showAlert('设置备注失败，请稍后重试', 'error');
|
|
});
|
|
} else {
|
|
showAlert('获取用户信息失败', 'error');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('获取用户信息失败:', error);
|
|
showAlert('获取用户信息失败，请稍后重试', 'error');
|
|
});
|
|
}
|
|
|
|
// 主题切换功能
|
|
function initThemeToggle() {
|
|
const themeToggleBtn = document.getElementById('theme-toggle-btn');
|
|
const themeIcon = themeToggleBtn.querySelector('i');
|
|
|
|
// 从localStorage读取主题设置
|
|
const savedTheme = localStorage.getItem('theme');
|
|
if (savedTheme === 'dark') {
|
|
document.body.classList.add('dark-mode');
|
|
themeIcon.classList.remove('fa-moon');
|
|
themeIcon.classList.add('fa-sun');
|
|
}
|
|
|
|
// 点击切换主题
|
|
themeToggleBtn.addEventListener('click', function() {
|
|
document.body.classList.toggle('dark-mode');
|
|
const isDark = document.body.classList.contains('dark-mode');
|
|
|
|
if (isDark) {
|
|
themeIcon.classList.remove('fa-moon');
|
|
themeIcon.classList.add('fa-sun');
|
|
localStorage.setItem('theme', 'dark');
|
|
} else {
|
|
themeIcon.classList.remove('fa-sun');
|
|
themeIcon.classList.add('fa-moon');
|
|
localStorage.setItem('theme', 'light');
|
|
}
|
|
});
|
|
}
|
|
|
|
// 页面加载完成后初始化
|
|
window.addEventListener('DOMContentLoaded', init);
|
|
</script>
|
|
</body>
|
|
</html> |