215 lines
10 KiB
HTML

{% extends "base.html" %}
{% block title %}证书管理系统 - 首页{% endblock %}
{% block content %}
<div class="container-fluid">
<div class="row mb-4">
<!-- CA机构统计卡片 -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-left-primary shadow h-100 py-2">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
CA机构数量</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ ca_count }}</div>
</div>
<div class="col-auto">
<i class="fas fa-shield-alt fa-2x text-gray-300"></i>
</div>
</div>
</div>
<div class="card-footer bg-transparent">
<a href="{{ url_for('ca_list') }}" class="small text-primary stretched-link">
查看所有CA机构 <i class="fas fa-arrow-right ms-1"></i>
</a>
</div>
</div>
</div>
<!-- 证书统计卡片 -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-left-success shadow h-100 py-2">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-success text-uppercase mb-1">
证书总数</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ cert_count }}</div>
</div>
<div class="col-auto">
<i class="fas fa-certificate fa-2x text-gray-300"></i>
</div>
</div>
</div>
<div class="card-footer bg-transparent">
<a href="{{ url_for('certificate_list') }}" class="small text-success stretched-link">
查看所有证书 <i class="fas fa-arrow-right ms-1"></i>
</a>
</div>
</div>
</div>
<!-- 活跃证书卡片 -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-left-info shadow h-100 py-2">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
活跃证书</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ active_count }}</div>
</div>
<div class="col-auto">
<i class="fas fa-check-circle fa-2x text-gray-300"></i>
</div>
</div>
</div>
<div class="card-footer bg-transparent">
<a href="{{ url_for('certificate_list') }}?status=active" class="small text-info stretched-link">
查看活跃证书 <i class="fas fa-arrow-right ms-1"></i>
</a>
</div>
</div>
</div>
<!-- 即将过期证书卡片 -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-left-warning shadow h-100 py-2">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
即将过期证书 (30天内)</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ expiring_soon_count }}</div>
</div>
<div class="col-auto">
<i class="fas fa-exclamation-triangle fa-2x text-gray-300"></i>
</div>
</div>
</div>
<div class="card-footer bg-transparent">
<a href="{{ url_for('certificate_list') }}?expiring=30" class="small text-warning stretched-link">
查看即将过期证书 <i class="fas fa-arrow-right ms-1"></i>
</a>
</div>
</div>
</div>
</div>
<div class="row">
<!-- 最近CA机构 -->
<div class="col-lg-6 mb-4">
<div class="card shadow">
<div class="card-header bg-light d-flex justify-content-between align-items-center py-3">
<h6 class="m-0 font-weight-bold text-primary">
<i class="fas fa-shield-alt me-2"></i> 最近创建的CA机构
</h6>
<a href="{{ url_for('create_ca_view') }}" class="btn btn-sm btn-primary">
<i class="fas fa-plus me-1"></i> 新建CA
</a>
</div>
<div class="card-body">
{% if recent_cas %}
<div class="list-group">
{% for ca in recent_cas %}
<a href="{{ url_for('ca_detail', ca_id=ca.id) }}"
class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
<div>
<h6 class="mb-1">{{ ca.name }}</h6>
<small class="text-muted">{{ ca.common_name }}</small>
</div>
<span class="badge bg-primary rounded-pill">
{{ ca.created_at.strftime('%Y-%m-%d') }}
</span>
</a>
{% endfor %}
</div>
{% else %}
<div class="text-center py-4">
<i class="fas fa-shield-alt fa-3x text-muted mb-3"></i>
<p class="text-muted">暂无CA机构记录</p>
<a href="{{ url_for('create_ca_view') }}" class="btn btn-primary">
<i class="fas fa-plus me-2"></i> 创建第一个CA机构
</a>
</div>
{% endif %}
</div>
</div>
</div>
<!-- 最近证书 -->
<div class="col-lg-6 mb-4">
<div class="card shadow">
<div class="card-header bg-light d-flex justify-content-between align-items-center py-3">
<h6 class="m-0 font-weight-bold text-primary">
<i class="fas fa-certificate me-2"></i> 最近创建的证书
</h6>
<a href="{{ url_for('create_certificate_view') }}" class="btn btn-sm btn-primary">
<i class="fas fa-plus me-1"></i> 新建证书
</a>
</div>
<div class="card-body">
{% if recent_certs %}
<div class="table-responsive">
<table class="table table-hover mb-0">
<thead class="table-light">
<tr>
<th>通用名</th>
<th>状态</th>
<th>有效期</th>
</tr>
</thead>
<tbody>
{% for cert in recent_certs %}
<tr>
<td>
<a href="{{ url_for('certificate_detail', cert_id=cert.id) }}"
class="text-decoration-none">
{{ cert.common_name }}
</a>
</td>
<td>
{% if cert.status == 'active' %}
<span class="badge bg-success rounded-pill">有效</span>
{% elif cert.status == 'revoked' %}
<span class="badge bg-danger rounded-pill">已吊销</span>
{% else %}
<span class="badge bg-secondary rounded-pill">已过期</span>
{% endif %}
</td>
<td>{{ cert.expires_at.strftime('%Y-%m-%d') }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% else %}
<div class="text-center py-4">
<i class="fas fa-certificate fa-3x text-muted mb-3"></i>
<p class="text-muted">暂无证书记录</p>
<a href="{{ url_for('create_certificate_view') }}" class="btn btn-primary">
<i class="fas fa-plus me-2"></i> 创建第一个证书
</a>
</div>
{% endif %}
</div>
</div>
</div>
</div>
</div>
{% endblock %}
{% block scripts %}
{{ super() }}
<script>
// 初始化工具提示
document.addEventListener('DOMContentLoaded', function() {
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
})
</script>
{% endblock %}