MyTest/templates/html/index.html

{% extends "base.html" %}

{% block title %}API测试报告 - {{ report_time }}{% endblock %}

{% block content %}
<div id="summary" class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2">测试报告概览</h1>
    <div class="btn-toolbar mb-2 mb-md-0">
        <div class="btn-group me-2">
            <button type="button" class="btn btn-sm btn-outline-secondary">导出PDF</button>
            <button type="button" class="btn btn-sm btn-outline-secondary">发送邮件</button>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-3">
        <div class="stats-card passed">
            <div class="number">{{ summary.passed }}</div>
            <div class="label">通过</div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stats-card failed">
            <div class="number">{{ summary.failed }}</div>
            <div class="label">失败</div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stats-card skipped">
            <div class="number">{{ summary.skipped }}</div>
            <div class="label">跳过</div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stats-card total">
            <div class="number">{{ summary.total }}</div>
            <div class="label">总计</div>
        </div>
    </div>
</div>

<div class="row mt-4">
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title">测试统计</h5>
            </div>
            <div class="card-body">
                <canvas id="testChart" width="400" height="200"></canvas>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title">执行信息</h5>
            </div>
            <div class="card-body">
                <table class="table table-sm">
                    <tr>
                        <th>生成时间:</th>
                        <td>{{ report_time }}</td>
                    </tr>
                    <tr>
                        <th>测试环境:</th>
                        <td>{{ environment or '未指定' }}</td>
                    </tr>
                    <tr>
                        <th>总耗时:</th>
                        <td>{{ summary.duration }}</td>
                    </tr>
                    <tr>
                        <th>成功率:</th>
                        <td>{{ summary.success_rate }}%</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>

<div id="test-cases" class="mt-5">
    <h2 class="h4 mb-3">测试用例详情</h2>
    
    {% for test in tests %}
    <div class="test-case {{ test.status }}">
        <div class="test-name">{{ test.name }}</div>
        <div class="test-duration">耗时: {{ test.duration }}</div>
        <span class="badge bg-{% if test.status == 'passed' %}success{% elif test.status == 'failed' %}danger{% else %}warning{% endif %}">
            {{ test.status|upper }}
        </span>
        
        {% if test.error %}
        <div class="mt-2">
            <button class="btn btn-sm btn-outline-danger" type="button" data-bs-toggle="collapse" 
                    data-bs-target="#error-{{ loop.index }}" aria-expanded="false">
                查看错误详情
            </button>
            <div class="collapse mt-2" id="error-{{ loop.index }}">
                <div class="card card-body">
                    <pre class="mb-0">{{ test.error }}</pre>
                </div>
            </div>
        </div>
        {% endif %}
    </div>
    {% endfor %}
</div>
{% endblock %}

{% block extra_js %}
<script>
// 测试统计图表
var ctx = document.getElementById('testChart').getContext('2d');
var testChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: ['通过', '失败', '跳过'],
        datasets: [{
            data: [{{ summary.passed }}, {{ summary.failed }}, {{ summary.skipped }}],
            backgroundColor: [
                '#27ae60',
                '#e74c3c',
                '#f39c12'
            ],
            borderWidth: 1
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: {
                position: 'bottom',
            }
        }
    }
});
</script>
{% endblock %}