coder/tech-forum
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 修复前端页面问题

Browse Source 
1. 下拉菜单使用display:none隐藏，hover时显示
2. 清理文件末尾重复代码
3. 用户头像添加边框美化
This commit is contained in:
hubian
2026-04-12 18:29:17 +08:00
parent cd087e9931
commit 4c697d9829
1 changed files with 52 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
frontend/index.html
View File

@@ -9,6 +9,21 @@
<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%); }
.dropdown-menu {
position: absolute;
right: 0;
top: 100%;
width: 160px;
background: white;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
border: 1px solid #e5e7eb;
display: none;
z-index: 100;
}
.dropdown:hover .dropdown-menu {
display: block;
}
</style>
</head>
<body class="bg-gray-50 min-h-screen">
@@ -147,16 +162,17 @@
发布帖子
</a>
<div class="dropdown relative">
<button class="flex items-center gap-2 cursor-pointer">
<img src="${currentUser.avatar}" class="w-8 h-8 rounded-full">
<button class="flex items-center gap-2 cursor-pointer p-1">
<img src="${currentUser.avatar}" class="w-8 h-8 rounded-full border-2 border-gray-200">
<span class="hidden sm:inline text-gray-700">${currentUser.username}</span>
<i class="ri-arrow-down-s-line text-gray-400"></i>
</button>
<div class="dropdown-menu py-2">
<a href="/user/${currentUser.id}" class="flex items-center gap-2 px-4 py-2 text-gray-700 hover:bg-gray-50">
<div class="dropdown-menu py-1">
<a href="/user/${currentUser.id}" class="flex items-center gap-2 px-4 py-2 text-gray-700 hover:bg-gray-50 transition">
<i class="ri-user-line"></i> 个人主页
</a>
<button onclick="logout()" class="flex items-center gap-2 w-full text-left px-4 py-2 text-red-500 hover:bg-gray-50">
<hr class="my-1 border-gray-100">
<button onclick="logout()" class="flex items-center gap-2 w-full text-left px-4 py-2 text-red-500 hover:bg-gray-50 transition">
<i class="ri-logout-box-line"></i> 退出登录
</button>
</div>
@@ -188,10 +204,10 @@
tab.classList.remove('text-blue-600', 'border-b-2', 'border-blue-600', 'font-medium');
tab.classList.add('text-gray-500');
});
document.getElementById(`tab-${type}`).classList.remove('text-gray-500');
document.getElementById(`tab-${type}`).classList.add('text-blue-600', 'border-b-2', 'border-blue-600', 'font-medium');
document.getElementById('tab-' + type).classList.remove('text-gray-500');
document.getElementById('tab-' + type).classList.add('text-blue-600', 'border-b-2', 'border-blue-600', 'font-medium');
const url = type === 'all' ? '/api/posts' : `/api/posts?type=${type}`;
const url = type === 'all' ? '/api/posts' : '/api/posts?type=' + type;
const res = await fetch(url);
const data = await res.json();
@@ -232,7 +248,7 @@
<span><i class="ri-heart-line"></i> ${post.likes}</span>
<span><i class="ri-chat-3-line"></i> ${post.replies}</span>
</div>
${post.tags.length > 0 ? `
${post.tags && post.tags.length > 0 ? `
<div class="flex gap-2 mt-2">
${post.tags.slice(0, 3).map(tag => `
<span class="text-xs px-2 py-0.5 bg-gray-100 text-gray-600 rounded">${tag}</span>
@@ -251,6 +267,10 @@
const tags = await res.json();
const container = document.getElementById('tagList');
if (tags.length === 0) {
container.innerHTML = '<span class="text-gray-400 text-sm">暂无标签</span>';
return;
}
container.innerHTML = tags.slice(0, 10).map(tag => `
<a href="?tag=${tag.name}" class="px-3 py-1 bg-gray-100 hover:bg-blue-100 text-gray-700 hover:text-blue-700 rounded-full text-sm">
${tag.name} (${tag.count})
@@ -264,12 +284,16 @@
const topics = await res.json();
const container = document.getElementById('topicList');
if (topics.length === 0) {
container.innerHTML = '<span class="text-gray-400 text-sm">暂无主题</span>';
return;
}
container.innerHTML = topics.slice(0, 5).map(topic => `
<a href="/topic/${topic.id}" class="flex items-center gap-3 p-2 hover:bg-gray-50 rounded-lg">
<span class="text-2xl">${topic.icon}</span>
<span class="text-2xl">${topic.icon || '🔧'}</span>
<div class="flex-1 min-w-0">
<p class="font-medium text-gray-800 truncate">${topic.name}</p>
<p class="text-xs text-gray-500">${topic.questions_count} 问题 · ${topic.followers} 关注</p>
<p class="text-xs text-gray-500">${topic.questions_count || 0} 问题 · ${topic.followers || 0} 关注</p>
</div>
</a>
`).join('');
@@ -281,7 +305,7 @@
const query = e.target.value.trim();
if (!query) return;
const res = await fetch(`/api/search?q=${encodeURIComponent(query)}`);
const res = await fetch('/api/search?q=' + encodeURIComponent(query));
const data = await res.json();
const container = document.getElementById('searchResults');
@@ -289,34 +313,22 @@
if (data.posts.length === 0 && data.topics.length === 0) {
container.innerHTML = '<p class="text-center text-gray-500 py-8">未找到相关内容</p>';
} else {
container.innerHTML = `
${data.posts.length > 0 ? `
<div class="mb-6">
<h4 class="font-medium text-gray-700 mb-3">帖子 (${data.posts.length})</h4>
<div class="space-y-2">
${data.posts.map(p => `
<a href="/post/${p.id}" class="block p-3 hover:bg-gray-50 rounded-lg">
<p class="font-medium text-gray-800">${p.title}</p>
<p class="text-sm text-gray-500">${p.author} · ${new Date(p.created_at).toLocaleDateString()}</p>
</a>
`).join('')}
</div>
</div>
` : ''}
${data.topics.length > 0 ? `
<div>
<h4 class="font-medium text-gray-700 mb-3">工具分享 (${data.topics.length})</h4>
<div class="space-y-2">
${data.topics.map(t => `
<a href="/topic/${t.id}" class="flex items-center gap-2 p-3 hover:bg-gray-50 rounded-lg">
<span class="text-xl">${t.icon}</span>
<span class="font-medium text-gray-800">${t.name}</span>
</a>
`).join('')}
</div>
</div>
` : ''}
`;
let html = '';
if (data.posts.length > 0) {
html += '<div class="mb-6"><h4 class="font-medium text-gray-700 mb-3">帖子 (' + data.posts.length + ')</h4><div class="space-y-2">';
data.posts.forEach(p => {
html += '<a href="/post/' + p.id + '" class="block p-3 hover:bg-gray-50 rounded-lg"><p class="font-medium text-gray-800">' + p.title + '</p><p class="text-sm text-gray-500">' + p.author + ' · ' + new Date(p.created_at).toLocaleDateString() + '</p></a>';
});
html += '</div></div>';
}
if (data.topics.length > 0) {
html += '<div><h4 class="font-medium text-gray-700 mb-3">工具分享 (' + data.topics.length + ')</h4><div class="space-y-2">';
data.topics.forEach(t => {
html += '<a href="/topic/' + t.id + '" class="flex items-center gap-2 p-3 hover:bg-gray-50 rounded-lg"><span class="text-xl">' + (t.icon || '🔧') + '</span><span class="font-medium text-gray-800">' + t.name + '</span></a>';
});
html += '</div></div>';
}
container.innerHTML = html;
}
document.getElementById('searchModal').classList.remove('hidden');
@@ -330,15 +342,4 @@
}
</script>
</body>
</html>hModal').classList.remove('hidden');
document.getElementById('searchModal').classList.add('flex');
}
});
function closeSearchModal() {
document.getElementById('searchModal').classList.add('hidden');
document.getElementById('searchModal').classList.remove('flex');
}
</script>
</body>
</html>