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

初始化技术论坛与技术分享网站

Browse Source 
功能模块:
- 技术交流: 发帖、评论回复、点赞收藏、标签分类
- 工具分享: 创建主题、子主题分支、问题追问、关注功能
- 用户系统: 用户名+邮箱(必填)+手机(可选)+密码确认

页面:
- 首页: 帖子列表、热门标签、工具分享主题
- 登录/注册页
- 发帖页
- 帖子详情页
- 主题详情页
- 用户主页

技术栈:
- Flask + Tailwind CSS
- JSON文件存储
- JWT认证
- 响应式设计

端口: 19004
This commit is contained in:
hubian
2026-04-08 12:35:09 +08:00
commit 7f8fbc9605
12 changed files with 2490 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

268
frontend/post.html Normal file
View File

@@ -0,0 +1,268 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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%); }
.prose { max-width: none; }
.prose pre { background: #1f2937; color: #f3f4f6; padding: 1rem; border-radius: 0.5rem; overflow-x: auto; }
.prose code { background: #f3f4f6; padding: 0.125rem 0.25rem; border-radius: 0.25rem; font-size: 0.875rem; }
</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 id="userArea"></div>
</div>
</div>
</nav>
<main class="max-w-4xl mx-auto px-4 py-8">
<!-- 帖子内容 -->
<article id="postContent" class="bg-white rounded-lg border border-gray-100">
<div class="p-6">
<div class="text-center py-12 text-gray-500">加载中...</div>
</div>
</article>
<!-- 回复区域 -->
<div id="replySection" class="mt-6 bg-white rounded-lg border border-gray-100 p-6">
<h3 class="font-medium text-gray-800 mb-4">发表回复</h3>
<div id="replyForm" class="hidden">
<textarea id="replyContent" rows="4" placeholder="输入你的回复..."
class="w-full px-4 py-3 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500 resize-none"></textarea>
<div class="flex justify-end mt-3">
<button onclick="submitReply()" class="px-4 py-2 gradient-bg text-white rounded-lg">
发送回复
</button>
</div>
</div>
<div id="loginHint" class="text-center py-4 text-gray-500">
<a href="/login" class="text-blue-500 hover:text-blue-600">登录</a> 后参与讨论
</div>
</div>
<!-- 回复列表 -->
<div id="repliesList" class="mt-6 space-y-4"></div>
</main>
<script>
let currentUser = null;
let currentPostId = null;
let postLiked = false;
// 获取帖子ID
const pathParts = window.location.pathname.split('/');
currentPostId = pathParts[2];
document.addEventListener('DOMContentLoaded', () => {
checkLogin();
loadPost();
});
async function checkLogin() {
const token = localStorage.getItem('token');
const user = localStorage.getItem('user');
if (token && user) {
currentUser = JSON.parse(user);
document.getElementById('replyForm').classList.remove('hidden');
document.getElementById('loginHint').classList.add('hidden');
}
}
async function loadPost() {
const res = await fetch(`/api/posts/${currentPostId}`);
const post = await res.json();
if (post.error) {
document.getElementById('postContent').innerHTML = `
<div class="p-6 text-center text-gray-500">${post.error}</div>
`;
return;
}
// 渲染帖子
document.getElementById('postContent').innerHTML = `
<div class="p-6">
<!-- 类型标签 -->
<div class="flex items-center gap-2 mb-3">
<span class="px-2 py-1 rounded text-xs ${post.type === 'discussion' ? 'bg-blue-100 text-blue-600' : 'bg-purple-100 text-purple-600'}">
${post.type === 'discussion' ? '技术交流' : '工具分享'}
</span>
</div>
<!-- 标题 -->
<h1 class="text-2xl font-bold text-gray-900 mb-4">${post.title}</h1>
<!-- 作者信息 -->
<div class="flex items-center gap-4 mb-6 pb-6 border-b border-gray-100">
<img src="${post.author.avatar}" class="w-12 h-12 rounded-full">
<div>
<p class="font-medium text-gray-800">${post.author.username}</p>
<p class="text-sm text-gray-500">${new Date(post.created_at).toLocaleString()}</p>
</div>
</div>
<!-- 内容 -->
<div class="prose text-gray-700 leading-relaxed mb-6 whitespace-pre-wrap">${post.content}</div>
<!-- 标签 -->
${post.tags.length > 0 ? `
<div class="flex flex-wrap gap-2 mb-6">
${post.tags.map(tag => `
<span class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm">${tag}</span>
`).join('')}
</div>
` : ''}
<!-- 统计和操作 -->
<div class="flex items-center justify-between pt-6 border-t border-gray-100">
<div class="flex items-center gap-6 text-sm text-gray-500">
<span><i class="ri-eye-line mr-1"></i> ${post.views} 浏览</span>
<span id="likesCount"><i class="ri-heart-line mr-1"></i> ${post.likes} 赞</span>
</div>
<div class="flex gap-3">
<button onclick="likePost()" id="likeBtn" class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 flex items-center gap-1">
<i class="ri-heart-line"></i> 赞
</button>
<button onclick="sharePost()" class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 flex items-center gap-1">
<i class="ri-share-line"></i> 分享
</button>
</div>
</div>
</div>
`;
// 渲染回复
renderReplies(post.replies);
}
function renderReplies(replies) {
const container = document.getElementById('repliesList');
if (!replies || replies.length === 0) {
container.innerHTML = '<p class="text-center text-gray-500 py-8">暂无回复</p>';
return;
}
container.innerHTML = replies.map(reply => `
<div class="bg-white rounded-lg border border-gray-100 p-4">
<div class="flex items-start gap-3">
<img src="${reply.author.avatar}" class="w-8 h-8 rounded-full">
<div class="flex-1">
<div class="flex items-center gap-2 mb-1">
<span class="font-medium text-gray-800">${reply.author.username}</span>
<span class="text-xs text-gray-400">${new Date(reply.created_at).toLocaleString()}</span>
</div>
<p class="text-gray-700 whitespace-pre-wrap">${reply.content}</p>
<div class="flex items-center gap-4 mt-2 text-sm text-gray-500">
<button onclick="likeReply('${reply.id}')" class="hover:text-blue-500">
<i class="ri-heart-line"></i> ${reply.likes}
</button>
<button onclick="replyTo('${reply.id}')" class="hover:text-blue-500">
<i class="ri-reply-line"></i> 回复
</button>
</div>
</div>
</div>
</div>
`).join('');
}
async function submitReply() {
if (!currentUser) {
alert('请先登录');
return;
}
const content = document.getElementById('replyContent').value.trim();
if (!content) {
alert('请输入回复内容');
return;
}
try {
const res = await fetch(`/api/posts/${currentPostId}/reply`, {
method: 'POST',
headers: {
'Authorization': `Bearer ${localStorage.getItem('token')}`,
'Content-Type': 'application/json'
},
body: JSON.stringify({ content })
});
const data = await res.json();
if (data.success) {
document.getElementById('replyContent').value = '';
loadPost();
} else {
alert(data.error || '回复失败');
}
} catch (err) {
alert('网络错误');
}
}
async function likePost() {
if (!currentUser) {
alert('请先登录');
return;
}
try {
const res = await fetch(`/api/posts/${currentPostId}/like`, {
method: 'POST',
headers: {
'Authorization': `Bearer ${localStorage.getItem('token')}`
}
});
const data = await res.json();
if (data.success) {
const btn = document.getElementById('likeBtn');
const countEl = document.getElementById('likesCount');
if (data.liked) {
btn.innerHTML = '<i class="ri-heart-fill text-red-500"></i> 已赞';
btn.classList.add('border-red-300', 'text-red-500');
} else {
btn.innerHTML = '<i class="ri-heart-line"></i> 赞';
btn.classList.remove('border-red-300', 'text-red-500');
}
countEl.innerHTML = `<i class="ri-heart-line mr-1"></i> ${data.likes_count} 赞`;
}
} catch (err) {
console.error(err);
}
}
function sharePost() {
const url = window.location.href;
navigator.clipboard.writeText(url).then(() => {
alert('链接已复制到剪贴板');
});
}
function replyTo(replyId) {
document.getElementById('replyContent').focus();
document.getElementById('replyContent').placeholder = '回复中...';
}
function likeReply(replyId) {
// TODO: 实现回复点赞
alert('功能开发中');
}
</script>
</body>
</html>