102 lines
4.5 KiB
HTML
102 lines
4.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
|
|
<title>用户主页 - 技术论坛</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
|
|
<style>
|
|
.gradient-bg { background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%); }
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-50 min-h-screen">
|
|
<!-- 导航栏 -->
|
|
<nav class="bg-white border-b border-gray-100 sticky top-0 z-50">
|
|
<div class="max-w-4xl mx-auto px-4">
|
|
<div class="flex items-center justify-between h-16">
|
|
<a href="/" class="text-gray-600 hover:text-gray-800 flex items-center gap-1">
|
|
<i class="ri-arrow-left-line"></i> 返回首页
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<main class="max-w-4xl mx-auto px-4 py-8">
|
|
<!-- 用户信息 -->
|
|
<div id="userProfile" class="bg-white rounded-lg border border-gray-100 p-6 mb-6">
|
|
<div class="text-center py-8 text-gray-500">加载中...</div>
|
|
</div>
|
|
|
|
<!-- 用户帖子 -->
|
|
<h3 class="font-medium text-gray-800 mb-4">发布的帖子</h3>
|
|
<div id="userPosts" class="space-y-4"></div>
|
|
</main>
|
|
|
|
<script>
|
|
const pathParts = window.location.pathname.split('/');
|
|
const userId = pathParts[2];
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
loadUserProfile();
|
|
});
|
|
|
|
async function loadUserProfile() {
|
|
const res = await fetch(`/api/user/${userId}`);
|
|
const data = await res.json();
|
|
|
|
if (data.error) {
|
|
document.getElementById('userProfile').innerHTML = `
|
|
<div class="p-6 text-center text-gray-500">${data.error}</div>
|
|
`;
|
|
return;
|
|
}
|
|
|
|
// 渲染用户信息
|
|
document.getElementById('userProfile').innerHTML = `
|
|
<div class="flex items-center gap-6">
|
|
<img src="${data.user.avatar}" class="w-24 h-24 rounded-full">
|
|
<div>
|
|
<h1 class="text-2xl font-bold text-gray-900">${data.user.username}</h1>
|
|
<p class="text-gray-500 mt-1">${data.user.bio || '这个人很懒，什么都没写'}</p>
|
|
<div class="flex items-center gap-6 mt-4 text-sm text-gray-500">
|
|
<span><i class="ri-file-text-line mr-1"></i> ${data.user.posts_count} 帖子</span>
|
|
<span><i class="ri-chat-3-line mr-1"></i> ${data.user.replies_count} 回复</span>
|
|
<span><i class="ri-calendar-line mr-1"></i> ${new Date(data.user.created_at).toLocaleDateString()} 加入</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
// 渲染帖子列表
|
|
renderPosts(data.posts);
|
|
}
|
|
|
|
function renderPosts(posts) {
|
|
const container = document.getElementById('userPosts');
|
|
|
|
if (!posts || posts.length === 0) {
|
|
container.innerHTML = '<p class="text-center text-gray-500 py-8">暂无帖子</p>';
|
|
return;
|
|
}
|
|
|
|
container.innerHTML = posts.map(post => `
|
|
<a href="/post/${post.id}" class="block bg-white rounded-lg border border-gray-100 p-4 hover:shadow-md transition-shadow">
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<span class="text-xs px-2 py-0.5 rounded ${post.type === 'discussion' ? 'bg-blue-100 text-blue-600' : 'bg-purple-100 text-purple-600'}">
|
|
${post.type === 'discussion' ? '技术交流' : '工具分享'}
|
|
</span>
|
|
</div>
|
|
<h4 class="font-medium text-gray-800 hover:text-blue-600">${post.title}</h4>
|
|
<div class="flex items-center gap-4 mt-2 text-xs text-gray-400">
|
|
<span><i class="ri-heart-line"></i> ${post.likes}</span>
|
|
<span><i class="ri-chat-3-line"></i> ${post.replies}</span>
|
|
<span>${new Date(post.created_at).toLocaleDateString()}</span>
|
|
</div>
|
|
</a>
|
|
`).join('');
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |