161 lines
8.3 KiB
HTML
161 lines
8.3 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}个人中心 - 联考平台{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="max-w-6xl mx-auto space-y-6">
|
|
<!-- 个人信息卡片 -->
|
|
<div class="bg-white shadow-sm rounded-lg p-6 border border-slate-200">
|
|
<div class="flex items-center space-x-4">
|
|
<div class="w-16 h-16 bg-primary rounded-full flex items-center justify-center text-white text-2xl font-bold">
|
|
{{ user.name[0] | upper }}
|
|
</div>
|
|
<div class="flex-1">
|
|
<h1 class="text-2xl font-bold text-slate-900">{{ user.name }}</h1>
|
|
<p class="text-sm text-slate-500">{{ user.email }} · {{ user.role | capitalize }}</p>
|
|
<p class="text-sm text-slate-400 mt-1">注册时间：{{ user.created_at if user.created_at else '2025-01-01' }}</p> <!-- 实际可从数据库获取真实时间 -->
|
|
</div>
|
|
<div class="flex space-x-2">
|
|
<a href="/profile/edit" class="px-4 py-2 border border-slate-300 rounded-md text-sm font-medium text-slate-700 hover:bg-slate-50">编辑资料</a>
|
|
<a href="{{ url_for('logout') }}" class="px-4 py-2 bg-red-500 text-white rounded-md text-sm font-medium hover:bg-red-600">退出登录</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 切换账户提示 -->
|
|
<div class="bg-blue-50 border border-blue-200 rounded-lg p-4 flex items-center justify-between">
|
|
<span class="text-sm text-blue-700">如需切换账户，请先退出当前登录，然后重新登录其他账号。</span>
|
|
<a href="{{ url_for('logout') }}" class="px-4 py-2 bg-blue-500 text-white rounded-md text-sm font-medium hover:bg-blue-600">切换账户</a>
|
|
</div>
|
|
|
|
<!-- 三列布局：好友、帖子、收藏 -->
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<!-- 好友列表 -->
|
|
<div class="bg-white shadow-sm rounded-lg p-6 border border-slate-200">
|
|
<h2 class="text-lg font-semibold text-slate-900 mb-4 flex items-center">
|
|
<svg class="w-5 h-5 mr-2 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
|
|
好友列表
|
|
</h2>
|
|
<div id="friends-list" class="space-y-3">
|
|
<div class="text-center py-4 text-slate-400">加载中...</div>
|
|
</div>
|
|
<div class="mt-4 text-center">
|
|
<a href="/friends" class="text-sm text-primary hover:text-blue-700">查看全部好友</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 我的帖子 -->
|
|
<div class="bg-white shadow-sm rounded-lg p-6 border border-slate-200">
|
|
<h2 class="text-lg font-semibold text-slate-900 mb-4 flex items-center">
|
|
<svg class="w-5 h-5 mr-2 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/></svg>
|
|
我的帖子
|
|
</h2>
|
|
<div id="my-posts" class="space-y-3">
|
|
<div class="text-center py-4 text-slate-400">加载中...</div>
|
|
</div>
|
|
<div class="mt-4 text-center">
|
|
<a href="/forum?author=me" class="text-sm text-primary hover:text-blue-700">查看更多帖子</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 收藏的试卷 -->
|
|
<div class="bg-white shadow-sm rounded-lg p-6 border border-slate-200">
|
|
<h2 class="text-lg font-semibold text-slate-900 mb-4 flex items-center">
|
|
<svg class="w-5 h-5 mr-2 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"/></svg>
|
|
收藏的试卷
|
|
</h2>
|
|
<div id="bookmarked-exams" class="space-y-3">
|
|
<div class="text-center py-4 text-slate-400">加载中...</div>
|
|
</div>
|
|
<div class="mt-4 text-center">
|
|
<a href="/exams?bookmarked=true" class="text-sm text-primary hover:text-blue-700">查看全部收藏</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script>
|
|
async function loadFriends() {
|
|
const container = document.getElementById('friends-list');
|
|
try {
|
|
const res = await fetch('/api/user/friends');
|
|
const data = await res.json();
|
|
if (!data.success) throw new Error(data.message);
|
|
if (data.friends.length === 0) {
|
|
container.innerHTML = '<div class="text-center py-4 text-slate-400">暂无好友</div>';
|
|
return;
|
|
}
|
|
let html = '';
|
|
data.friends.slice(0, 5).forEach(f => {
|
|
html += `
|
|
<div class="flex items-center space-x-3 p-2 border border-slate-100 rounded-lg">
|
|
<div class="w-8 h-8 bg-slate-200 rounded-full flex items-center justify-center text-slate-600 text-xs font-bold">
|
|
${f.name.charAt(0).toUpperCase()}
|
|
</div>
|
|
<div class="flex-1">
|
|
<div class="text-sm font-medium text-slate-900">${f.name}</div>
|
|
<div class="text-xs text-slate-400">成为好友于 ${f.created_at}</div>
|
|
</div>
|
|
</div>`;
|
|
});
|
|
container.innerHTML = html;
|
|
} catch (e) {
|
|
container.innerHTML = '<div class="text-center py-4 text-red-500">加载失败</div>';
|
|
}
|
|
}
|
|
|
|
async function loadPosts() {
|
|
const container = document.getElementById('my-posts');
|
|
try {
|
|
const res = await fetch('/api/user/posts');
|
|
const data = await res.json();
|
|
if (!data.success) throw new Error(data.message);
|
|
if (data.posts.length === 0) {
|
|
container.innerHTML = '<div class="text-center py-4 text-slate-400">暂无帖子</div>';
|
|
return;
|
|
}
|
|
let html = '';
|
|
data.posts.slice(0, 5).forEach(p => {
|
|
html += `
|
|
<div class="p-3 border border-slate-100 rounded-lg hover:bg-slate-50 cursor-pointer" onclick="location.href='/forum#post-${p.id}'">
|
|
<div class="text-sm font-medium text-slate-900 truncate">${p.title}</div>
|
|
<div class="text-xs text-slate-500 mt-1">${p.created_at} · 💬 ${p.replies} · ❤️ ${p.likes}</div>
|
|
</div>`;
|
|
});
|
|
container.innerHTML = html;
|
|
} catch (e) {
|
|
container.innerHTML = '<div class="text-center py-4 text-red-500">加载失败</div>';
|
|
}
|
|
}
|
|
|
|
async function loadBookmarks() {
|
|
const container = document.getElementById('bookmarked-exams');
|
|
try {
|
|
const res = await fetch('/api/user/exam-bookmarks');
|
|
const data = await res.json();
|
|
if (!data.success) throw new Error(data.message);
|
|
if (data.bookmarks.length === 0) {
|
|
container.innerHTML = '<div class="text-center py-4 text-slate-400">暂无收藏试卷</div>';
|
|
return;
|
|
}
|
|
let html = '';
|
|
data.bookmarks.slice(0, 5).forEach(e => {
|
|
html += `
|
|
<div class="p-3 border border-slate-100 rounded-lg hover:bg-slate-50 cursor-pointer" onclick="location.href='/exams/${e.id}'">
|
|
<div class="text-sm font-medium text-slate-900 truncate">${e.title}</div>
|
|
<div class="text-xs text-slate-500 mt-1">${e.subject} · 收藏于 ${e.bookmarked_at}</div>
|
|
</div>`;
|
|
});
|
|
container.innerHTML = html;
|
|
} catch (e) {
|
|
container.innerHTML = '<div class="text-center py-4 text-red-500">加载失败</div>';
|
|
}
|
|
}
|
|
|
|
loadFriends();
|
|
loadPosts();
|
|
loadBookmarks();
|
|
</script>
|
|
{% endblock %} |