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

功能模块: - 技术交流: 发帖、评论回复、点赞收藏、标签分类 - 工具分享: 创建主题、子主题分支、问题追问、关注功能 - 用户系统: 用户名+邮箱(必填)+手机(可选)+密码确认页面: - 首页: 帖子列表、热门标签、工具分享主题 - 登录/注册页 - 发帖页 - 帖子详情页 - 主题详情页 - 用户主页技术栈: - Flask + Tailwind CSS - JSON文件存储 - JWT认证 - 响应式设计端口: 19004
2026-04-08 12:35:09 +08:00
commit 7f8fbc9605
12 changed files with 2490 additions and 0 deletions
--- a/frontend/user.html
+++ b/frontend/user.html
@@ -0,0 +1,101 @@
+<!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%); }
+    </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>