278 lines
10 KiB
HTML
278 lines
10 KiB
HTML
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
|
|
<div class="stat-card bg-gradient-to-br from-blue-500 to-blue-600">
|
|
<div class="stat-icon">
|
|
<i class="fas fa-users"></i>
|
|
</div>
|
|
<div>
|
|
<p class="stat-label">总用户数</p>
|
|
<h3 class="stat-number">{{.Stats.TotalUsers}}</h3>
|
|
</div>
|
|
</div>
|
|
<div class="stat-card bg-gradient-to-br from-emerald-500 to-emerald-600">
|
|
<div class="stat-icon">
|
|
<i class="fas fa-file-alt"></i>
|
|
</div>
|
|
<div>
|
|
<p class="stat-label">总简历数</p>
|
|
<h3 class="stat-number">{{.Stats.TotalResumes}}</h3>
|
|
</div>
|
|
</div>
|
|
<div class="stat-card bg-gradient-to-br from-violet-500 to-violet-600">
|
|
<div class="stat-icon">
|
|
<i class="fas fa-folder-open"></i>
|
|
</div>
|
|
<div>
|
|
<p class="stat-label">作品集项目</p>
|
|
<h3 class="stat-number">{{.Stats.TotalPortfolio}}</h3>
|
|
</div>
|
|
</div>
|
|
<div class="stat-card bg-gradient-to-br from-orange-500 to-orange-600">
|
|
<div class="stat-icon">
|
|
<i class="fas fa-clipboard-list"></i>
|
|
</div>
|
|
<div>
|
|
<p class="stat-label">答题记录</p>
|
|
<h3 class="stat-number">{{.Stats.TotalQuizRecords}}</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-3 gap-5 mt-5">
|
|
<div class="bg-white rounded-xl shadow-sm border border-slate-100 p-5 flex items-center gap-4">
|
|
<div class="w-12 h-12 rounded-lg bg-amber-50 flex items-center justify-center text-amber-500">
|
|
<i class="fas fa-star text-xl"></i>
|
|
</div>
|
|
<div>
|
|
<p class="text-sm text-slate-500">收藏题目</p>
|
|
<h4 class="text-xl font-bold text-slate-800">{{.Stats.TotalFavorites}}</h4>
|
|
</div>
|
|
</div>
|
|
<div class="bg-white rounded-xl shadow-sm border border-slate-100 p-5 flex items-center gap-4">
|
|
<div class="w-12 h-12 rounded-lg bg-rose-50 flex items-center justify-center text-rose-500">
|
|
<i class="fas fa-times-circle text-xl"></i>
|
|
</div>
|
|
<div>
|
|
<p class="text-sm text-slate-500">错题总数</p>
|
|
<h4 class="text-xl font-bold text-slate-800">{{.Stats.TotalWrongAnswers}}</h4>
|
|
</div>
|
|
</div>
|
|
<div class="bg-white rounded-xl shadow-sm border border-slate-100 p-5 flex items-center gap-4">
|
|
<div class="w-12 h-12 rounded-lg bg-sky-50 flex items-center justify-center text-sky-500">
|
|
<i class="fas fa-clock text-xl"></i>
|
|
</div>
|
|
<div>
|
|
<p class="text-sm text-slate-500">运行时长</p>
|
|
<h4 class="text-xl font-bold text-slate-800">{{.Uptime}}</h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-5 grid grid-cols-1 lg:grid-cols-3 gap-5">
|
|
<div class="lg:col-span-2 bg-white rounded-xl shadow-sm border border-slate-100 overflow-hidden">
|
|
<div class="px-5 py-4 border-b border-slate-100 flex items-center justify-between">
|
|
<h3 class="font-semibold text-slate-800 flex items-center gap-2">
|
|
<i class="fas fa-users text-blue-500"></i> 最近用户
|
|
</h3>
|
|
<a href="{{.AdminPath}}/users" class="btn btn-secondary btn-sm">
|
|
<i class="fas fa-list"></i> 查看全部
|
|
</a>
|
|
</div>
|
|
<div class="divide-y divide-slate-50">
|
|
{{ range .RecentUsers }}
|
|
<div class="px-5 py-4 flex items-center gap-4 hover:bg-slate-50 transition-colors">
|
|
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center text-white font-medium text-sm flex-shrink-0">
|
|
{{if .Name}}{{substr .Name 0 1}}{{else}}U{{end}}
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<p class="font-medium text-slate-800 truncate">{{.Name}}</p>
|
|
<p class="text-sm text-slate-500 truncate">{{.Email}}</p>
|
|
</div>
|
|
<div class="flex gap-2 flex-shrink-0">
|
|
<a href="{{$.AdminPath}}/user/{{.ID}}/resume" class="btn btn-primary btn-xs">
|
|
<i class="fas fa-file-alt"></i> 简历
|
|
</a>
|
|
<a href="{{$.AdminPath}}/user/{{.ID}}/portfolio" class="btn btn-info btn-xs">
|
|
<i class="fas fa-folder-open"></i> 作品集
|
|
</a>
|
|
<a href="{{$.AdminPath}}/user/{{.ID}}/quiz" class="btn btn-success btn-xs">
|
|
<i class="fas fa-question-circle"></i> 答题
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{{ else }}
|
|
<div class="text-center py-12">
|
|
<div class="w-16 h-16 mx-auto mb-4 rounded-full bg-slate-100 flex items-center justify-center">
|
|
<i class="fas fa-users text-slate-400 text-2xl"></i>
|
|
</div>
|
|
<p class="text-slate-500">暂无用户</p>
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
<div class="bg-white rounded-xl shadow-sm border border-slate-100 overflow-hidden">
|
|
<div class="px-5 py-4 border-b border-slate-100 flex items-center justify-between">
|
|
<h3 class="font-semibold text-slate-800 flex items-center gap-2">
|
|
<i class="fas fa-file-alt text-emerald-500"></i> 最近简历
|
|
</h3>
|
|
<a href="{{.AdminPath}}/resumes" class="btn btn-secondary btn-sm">
|
|
<i class="fas fa-list"></i> 全部
|
|
</a>
|
|
</div>
|
|
<div class="divide-y divide-slate-50">
|
|
{{ range .RecentResumes }}
|
|
<div class="px-5 py-4 flex items-center gap-3 hover:bg-slate-50 transition-colors">
|
|
<div class="w-10 h-10 rounded-lg bg-gradient-to-br from-emerald-400 to-emerald-600 flex items-center justify-center text-white flex-shrink-0">
|
|
<i class="fas fa-file-alt"></i>
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<p class="font-medium text-slate-800 truncate text-sm">{{.BasicInfo.Name}}</p>
|
|
<p class="text-xs text-slate-500 truncate">{{.BasicInfo.Title}}</p>
|
|
</div>
|
|
<a href="/{{.Route}}" target="_blank" class="text-blue-500 hover:text-blue-600 text-sm flex-shrink-0">
|
|
<i class="fas fa-external-link-alt"></i>
|
|
</a>
|
|
</div>
|
|
{{ else }}
|
|
<div class="text-center py-12">
|
|
<div class="w-16 h-16 mx-auto mb-4 rounded-full bg-slate-100 flex items-center justify-center">
|
|
<i class="fas fa-file-alt text-slate-400 text-2xl"></i>
|
|
</div>
|
|
<p class="text-slate-500">暂无简历</p>
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-5 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5">
|
|
<a href="{{.AdminPath}}/users" class="quick-action-card">
|
|
<div class="quick-action-icon bg-blue-50 text-blue-500">
|
|
<i class="fas fa-user-plus"></i>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-medium text-slate-800">用户管理</h4>
|
|
<p class="text-sm text-slate-500">添加/编辑用户信息</p>
|
|
</div>
|
|
<i class="fas fa-chevron-right text-slate-300"></i>
|
|
</a>
|
|
<a href="{{.AdminPath}}/resumes" class="quick-action-card">
|
|
<div class="quick-action-icon bg-emerald-50 text-emerald-500">
|
|
<i class="fas fa-file-medical"></i>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-medium text-slate-800">简历管理</h4>
|
|
<p class="text-sm text-slate-500">查看和编辑简历</p>
|
|
</div>
|
|
<i class="fas fa-chevron-right text-slate-300"></i>
|
|
</a>
|
|
<a href="{{.AdminPath}}/portfolios" class="quick-action-card">
|
|
<div class="quick-action-icon bg-violet-50 text-violet-500">
|
|
<i class="fas fa-folder-plus"></i>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-medium text-slate-800">作品集管理</h4>
|
|
<p class="text-sm text-slate-500">管理项目作品集</p>
|
|
</div>
|
|
<i class="fas fa-chevron-right text-slate-300"></i>
|
|
</a>
|
|
<a href="{{.AdminPath}}/settings" class="quick-action-card">
|
|
<div class="quick-action-icon bg-slate-50 text-slate-500">
|
|
<i class="fas fa-cog"></i>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-medium text-slate-800">系统设置</h4>
|
|
<p class="text-sm text-slate-500">配置系统参数</p>
|
|
</div>
|
|
<i class="fas fa-chevron-right text-slate-300"></i>
|
|
</a>
|
|
</div>
|
|
|
|
<style>
|
|
.stat-card {
|
|
position: relative;
|
|
border-radius: 0.5rem;
|
|
padding: 1.25rem;
|
|
color: white;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
overflow: hidden;
|
|
box-shadow: 0 0.25rem 0.38rem -0.06rem rgba(0, 0, 0, 0.1);
|
|
}
|
|
.stat-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -50%;
|
|
right: -20%;
|
|
width: 7.50rem;
|
|
height: 7.50rem;
|
|
background: rgba(255,255,255,0.1);
|
|
border-radius: 50%;
|
|
}
|
|
.stat-card::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -30%;
|
|
right: 10%;
|
|
width: 5rem;
|
|
height: 5rem;
|
|
background: rgba(255,255,255,0.08);
|
|
border-radius: 50%;
|
|
}
|
|
.stat-icon {
|
|
width: 3.25rem;
|
|
height: 3.25rem;
|
|
background: rgba(255,255,255,0.2);
|
|
border-radius: 0.75rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.5rem;
|
|
flex-shrink: 0;
|
|
position: relative;
|
|
z-index: 1;
|
|
backdrop-filter: blur(0.25rem);
|
|
}
|
|
.stat-label {
|
|
font-size: 0.875rem;
|
|
opacity: 0.9;
|
|
margin-bottom: 0.25rem;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
.stat-number {
|
|
font-size: 1.75rem;
|
|
font-weight: 700;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.quick-action-card {
|
|
background: white;
|
|
border: 0.06rem solid #f1f5f9;
|
|
border-radius: 0.75rem;
|
|
padding: 1.25rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
text-decoration: none;
|
|
transition: all 0.2s ease;
|
|
box-shadow: 0 0.06rem 0.12rem rgba(0,0,0,0.04);
|
|
}
|
|
.quick-action-card:hover {
|
|
border-color: #e2e8f0;
|
|
transform: translateY(-0.12rem);
|
|
box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.06);
|
|
}
|
|
.quick-action-icon {
|
|
width: 2.75rem;
|
|
height: 2.75rem;
|
|
border-radius: 0.625rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.125rem;
|
|
flex-shrink: 0;
|
|
}
|
|
</style>
|