249 lines
18 KiB
HTML
249 lines
18 KiB
HTML
{% extends "base.html" %}
|
||
|
||
{% block title %}考试系统 - 智联青云{% endblock %}
|
||
|
||
{% block content %}
|
||
<div class="space-y-8">
|
||
<!-- 头部区域 -->
|
||
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 bg-white p-6 rounded-2xl shadow-sm border border-slate-100">
|
||
<div>
|
||
<h1 class="text-2xl font-bold text-slate-900 flex items-center">
|
||
<span class="w-10 h-10 bg-indigo-50 text-indigo-600 rounded-xl flex items-center justify-center mr-3 shadow-sm border border-indigo-100">📝</span>
|
||
考试中心
|
||
</h1>
|
||
<p class="text-slate-500 text-sm mt-1 ml-13">海量真题与模拟卷，随时随地进行练习与自测。</p>
|
||
</div>
|
||
<div class="flex flex-wrap items-center gap-3">
|
||
{% if user and (user.role == 'admin' or user.role == 'teacher') %}
|
||
<a href="/exams/create" class="inline-flex items-center px-4 py-2.5 bg-primary text-white rounded-xl hover:bg-blue-600 shadow-sm text-sm font-medium transition-all transform hover:-translate-y-0.5">
|
||
<svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
|
||
创建新试卷
|
||
</a>
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 搜索区域 -->
|
||
<div class="bg-white p-5 rounded-2xl shadow-sm border border-slate-100 flex flex-wrap gap-4 items-center justify-between sticky top-20 z-10 glass-panel">
|
||
<form method="GET" action="/exams" class="flex flex-wrap items-center gap-3 w-full">
|
||
<div class="relative w-full sm:w-auto flex-1">
|
||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||
<svg class="h-4 w-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
|
||
</div>
|
||
<input type="text" name="q" value="{{ search_query or '' }}" placeholder="搜索试卷名称..." class="w-full pl-10 pr-4 py-2.5 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary bg-slate-50 transition-all">
|
||
</div>
|
||
|
||
<div class="relative w-full sm:w-auto">
|
||
<select name="subject" class="w-full sm:w-32 appearance-none px-4 py-2.5 pl-10 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary bg-slate-50 hover:bg-slate-100 transition-colors cursor-pointer">
|
||
<option value="">所有科目</option>
|
||
{% for subject in all_subjects %}
|
||
<option value="{{ subject }}" {% if subject_filter == subject %}selected{% endif %}>{{ subject }}</option>
|
||
{% endfor %}
|
||
</select>
|
||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||
<svg class="h-4 w-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg>
|
||
</div>
|
||
<div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
|
||
<svg class="h-4 w-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
|
||
</div>
|
||
</div>
|
||
|
||
<button type="submit" class="w-full sm:w-auto px-5 py-2.5 bg-slate-800 text-white rounded-xl hover:bg-slate-700 text-sm font-medium transition-colors shadow-sm">
|
||
搜索
|
||
</button>
|
||
|
||
{% if search_query or subject_filter %}
|
||
<a href="/exams" class="w-full sm:w-auto px-5 py-2.5 bg-slate-100 text-slate-600 rounded-xl hover:bg-slate-200 text-sm font-medium transition-colors text-center border border-slate-200">
|
||
重置
|
||
</a>
|
||
{% endif %}
|
||
</form>
|
||
{% if search_query or subject_filter %}
|
||
<div class="mt-3 w-full text-xs text-slate-500 bg-slate-50 px-3 py-2 rounded-lg border border-slate-100 inline-block">
|
||
<span class="font-medium text-slate-700">筛选结果：</span>
|
||
{% if search_query %}包含 "<span class="text-primary">{{ search_query }}</span>"{% endif %}
|
||
{% if subject_filter %}{% if search_query %}，{% endif %}科目为 "<span class="text-primary">{{ subject_filter }}</span>"{% endif %}
|
||
<span class="ml-2 text-slate-400">共找到 {{ exams|length }} 份试卷</span>
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
|
||
<!-- 试卷列表 -->
|
||
{% if exams|length == 0 %}
|
||
<div class="col-span-full py-20 flex flex-col items-center justify-center text-slate-400 bg-white rounded-2xl border border-slate-100 border-dashed">
|
||
<svg class="w-16 h-16 mb-4 text-slate-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
|
||
<p>暂无符合条件的试卷</p>
|
||
{% if user and (user.role == 'admin' or user.role == 'teacher') %}
|
||
<p class="text-sm mt-2">点击上方"创建新试卷"按钮开始命题吧</p>
|
||
{% endif %}
|
||
</div>
|
||
{% else %}
|
||
<div class="grid gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
|
||
{% for exam in exams %}
|
||
{% set subjectColor = 'blue' %}
|
||
{% set subjectGradient = 'from-blue-500 to-cyan-400' %}
|
||
{% set subjectIcon = 'M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253' %}
|
||
|
||
{% if exam.subject == '数学' %}
|
||
{% set subjectColor = 'indigo' %}
|
||
{% set subjectGradient = 'from-indigo-500 to-purple-400' %}
|
||
{% set subjectIcon = 'M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z' %}
|
||
{% elif exam.subject == '英语' %}
|
||
{% set subjectColor = 'rose' %}
|
||
{% set subjectGradient = 'from-rose-500 to-pink-400' %}
|
||
{% set subjectIcon = 'M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129' %}
|
||
{% elif exam.subject in ['物理', '化学', '生物'] %}
|
||
{% set subjectColor = 'emerald' %}
|
||
{% set subjectGradient = 'from-emerald-500 to-teal-400' %}
|
||
{% set subjectIcon = 'M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z' %}
|
||
{% elif exam.subject in ['历史', '地理', '政治'] %}
|
||
{% set subjectColor = 'amber' %}
|
||
{% set subjectGradient = 'from-amber-500 to-orange-400' %}
|
||
{% set subjectIcon = 'M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z' %}
|
||
{% endif %}
|
||
|
||
<div class="group bg-white rounded-3xl shadow-sm border border-slate-100 overflow-hidden hover-card-up flex flex-col relative">
|
||
<!-- 卡片封面海报 -->
|
||
<div class="relative h-28 bg-gradient-to-r {{ subjectGradient }} overflow-hidden">
|
||
<div class="absolute inset-0 bg-grid-pattern opacity-10"></div>
|
||
<div class="absolute -bottom-10 -right-10 w-32 h-32 bg-white/20 blur-2xl rounded-full"></div>
|
||
|
||
{% if exam.status == 'closed' %}
|
||
<span class="absolute top-4 right-4 bg-slate-900/50 backdrop-blur-md text-white text-xs font-medium px-3 py-1 rounded-full shadow-sm border border-white/10">已关闭</span>
|
||
{% else %}
|
||
<span class="absolute top-4 right-4 bg-white/90 backdrop-blur-md text-{{subjectColor}}-600 text-xs font-bold px-3 py-1 rounded-full shadow-sm flex items-center">
|
||
<span class="w-1.5 h-1.5 rounded-full bg-{{subjectColor}}-500 mr-1.5 animate-pulse"></span>进行中
|
||
</span>
|
||
{% endif %}
|
||
</div>
|
||
|
||
<!-- 悬浮图标 -->
|
||
<div class="absolute top-[4.5rem] left-6">
|
||
<div class="w-14 h-14 bg-white rounded-2xl flex items-center justify-center text-{{subjectColor}}-500 shadow-md border-4 border-white group-hover:scale-110 transition-transform duration-300">
|
||
<svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="{{subjectIcon}}"/></svg>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="p-6 pt-12 flex-1 flex flex-col">
|
||
<div class="flex items-start mb-3">
|
||
<span class="inline-flex items-center px-2.5 py-1 rounded-lg bg-slate-100 text-slate-600 text-xs font-medium border border-slate-200">
|
||
{{ exam.subject }}
|
||
</span>
|
||
</div>
|
||
|
||
<h3 class="text-lg font-bold text-slate-900 mb-3 line-clamp-2 group-hover:text-{{subjectColor}}-600 transition-colors flex-1">{{ exam.title }}</h3>
|
||
|
||
<div class="grid grid-cols-2 gap-3 mb-5 bg-slate-50 p-3 rounded-xl border border-slate-100">
|
||
<div>
|
||
<span class="text-[10px] text-slate-400 block mb-0.5">满分 / 题目</span>
|
||
<span class="text-xs font-semibold text-slate-700">{{ exam.total_score }}分 / {{ exam.questions|fromjson|length }}题</span>
|
||
</div>
|
||
<div>
|
||
<span class="text-[10px] text-slate-400 block mb-0.5">考试时长</span>
|
||
<span class="text-xs font-semibold text-slate-700">{{ exam.duration }} 分钟</span>
|
||
</div>
|
||
</div>
|
||
|
||
{% if exam.scheduled_start or exam.scheduled_end %}
|
||
<div class="mb-4 text-xs text-slate-500 flex flex-col gap-1 border-l-2 border-{{subjectColor}}-200 pl-2">
|
||
{% if exam.scheduled_start %}
|
||
<div class="flex items-center">
|
||
<svg class="w-3.5 h-3.5 mr-1 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||
开始：{{ exam.scheduled_start.strftime('%m-%d %H:%M') }}
|
||
</div>
|
||
{% endif %}
|
||
{% if exam.scheduled_end %}
|
||
<div class="flex items-center">
|
||
<svg class="w-3.5 h-3.5 mr-1 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||
截止：{{ exam.scheduled_end.strftime('%m-%d %H:%M') }}
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
{% endif %}
|
||
|
||
<div class="mt-auto pt-4 border-t border-slate-100 flex items-center justify-between gap-2 flex-wrap">
|
||
{% set sub = user_submissions.get(exam.id) %}
|
||
{% if sub %}
|
||
<div class="flex items-center bg-slate-50 px-2.5 py-1.5 rounded-lg border border-slate-200">
|
||
{% if sub.graded %}
|
||
<span class="text-xs font-medium text-slate-600 mr-2 border-r border-slate-200 pr-2">已批改</span>
|
||
<span class="text-sm font-bold text-{{subjectColor}}-600">{{ sub.score }} <span class="text-[10px] text-slate-400 font-normal">/ {{ exam.total_score }}</span></span>
|
||
{% else %}
|
||
<span class="text-xs font-medium text-amber-600 flex items-center">
|
||
<svg class="w-3.5 h-3.5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||
待批改
|
||
</span>
|
||
{% endif %}
|
||
</div>
|
||
<a href="/exams/{{ exam.id }}/result" class="ml-auto inline-flex items-center px-4 py-2 border border-slate-200 text-xs font-medium rounded-xl text-slate-700 bg-white hover:bg-slate-50 hover:border-slate-300 transition-colors shadow-sm">
|
||
查看试卷
|
||
</a>
|
||
{% else %}
|
||
<div class="text-xs text-slate-400 flex items-center">
|
||
<span class="w-5 h-5 rounded-full bg-slate-100 flex items-center justify-center mr-1.5 text-[10px]">{{ exam.creator.name[0] if exam.creator else '?' }}</span>
|
||
{{ exam.creator.name if exam.creator else '未知出题人' }}
|
||
</div>
|
||
{% if exam.status != 'closed' %}
|
||
<a href="/exams/{{ exam.id }}" class="ml-auto inline-flex items-center px-5 py-2 border border-transparent text-sm font-medium rounded-xl shadow-sm text-white bg-{{subjectColor}}-600 hover:bg-{{subjectColor}}-700 transition-colors transform hover:-translate-y-0.5">
|
||
开始考试
|
||
</a>
|
||
{% else %}
|
||
<span class="ml-auto text-sm text-slate-400 font-medium px-4 py-2 bg-slate-50 rounded-xl">已关闭</span>
|
||
{% endif %}
|
||
{% endif %}
|
||
</div>
|
||
|
||
{% if user and (user.role == 'admin' or user.role == 'teacher') %}
|
||
<div class="mt-4 pt-3 border-t border-slate-100/50 flex flex-wrap gap-2 justify-end">
|
||
<a href="/exams/{{ exam.id }}/submissions" class="px-3 py-1.5 bg-slate-50 text-slate-600 hover:bg-slate-100 hover:text-slate-900 rounded-lg text-xs font-medium transition-colors border border-slate-200">提交情况</a>
|
||
<a href="/exams/{{ exam.id }}/print" class="px-3 py-1.5 bg-slate-50 text-slate-600 hover:bg-slate-100 hover:text-slate-900 rounded-lg text-xs font-medium transition-colors border border-slate-200">打印试卷</a>
|
||
|
||
{% if user.role == 'admin' or exam.creator_id == user.id %}
|
||
{% if exam.status == 'available' %}
|
||
<button onclick="toggleExamStatus({{ exam.id }}, 'closed')" class="px-3 py-1.5 bg-orange-50 text-orange-600 hover:bg-orange-100 rounded-lg text-xs font-medium transition-colors border border-orange-200">关闭考试</button>
|
||
{% else %}
|
||
<button onclick="toggleExamStatus({{ exam.id }}, 'available')" class="px-3 py-1.5 bg-green-50 text-green-600 hover:bg-green-100 rounded-lg text-xs font-medium transition-colors border border-green-200">开放考试</button>
|
||
{% endif %}
|
||
<button onclick="deleteExam({{ exam.id }})" class="px-3 py-1.5 bg-red-50 text-red-600 hover:bg-red-100 rounded-lg text-xs font-medium transition-colors border border-red-200">删除</button>
|
||
{% endif %}
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
{% endblock %}
|
||
{% block scripts %}
|
||
<script>
|
||
function toggleExamStatus(examId, status) {
|
||
const label = status === 'closed' ? '关闭' : '开放';
|
||
if (!confirm(`确定${label}该考试？`)) return;
|
||
fetch(`/api/exams/${examId}/status`, {
|
||
method: 'POST',
|
||
headers: {'Content-Type': 'application/json'},
|
||
body: JSON.stringify({ status: status })
|
||
}).then(r => r.json()).then(data => {
|
||
if (data.success) {
|
||
location.reload();
|
||
} else {
|
||
alert(data.message);
|
||
}
|
||
}).catch(() => alert('操作失败'));
|
||
}
|
||
|
||
function deleteExam(examId) {
|
||
if (!confirm('确定删除该试卷？此操作不可恢复，所有提交记录也将被删除。')) return;
|
||
fetch(`/api/exams/${examId}`, {
|
||
method: 'DELETE'
|
||
}).then(r => r.json()).then(data => {
|
||
if (data.success) {
|
||
location.reload();
|
||
} else {
|
||
alert(data.message);
|
||
}
|
||
}).catch(() => alert('删除失败'));
|
||
}
|
||
</script>
|
||
{% endblock %} |