blog-app/templates/watchdog.html

{% extends "base.html" %}
{% block title %}日报 - AI Agent 项目追踪{% endblock %}

{% block content %}
<div class="d-flex flex-wrap justify-content-between align-items-center mb-4 gap-2">
    <div>
        <h1 class="mb-1">升级迭代日报</h1>
        <small class="text-muted">每天 09:00 自动更新 · 最新报告: {{ reports[0].date if reports else "无" }}</small>
    </div>
    <div class="d-flex align-items-center gap-2">
        <select class="form-select form-select-sm w-auto" onchange="location.search='?days='+this.value" aria-label="历史天数">
            {% for d in [7, 14, 30, 90] %}
            <option value="{{ d }}" {{ 'selected' if days == d }}>最近 {{ d }} 天</option>
            {% endfor %}
        </select>
        <form method="post" action="/watchdog/run" id="run-form" class="m-0">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <button type="submit" class="btn btn-primary" id="run-btn">立即运行</button>
        </form>
    </div>
</div>
<div id="wd-pending" class="alert alert-warning d-none mt-2 mb-3">
    <span class="spinner-border spinner-border-sm me-2"></span>
    报告生成中, 通常 1-2 分钟, 完成后页面自动刷新…
</div>

{% if not reports %}
<div class="alert alert-info">
    暂无报告, 点击立即运行生成第一份日报
</div>
{% endif %}

{% if reports and reports[0].meta %}
{% set m = reports[0].meta %}
{% set projs = m.get("projects", {}) %}
<div class="row g-3 mb-4">
    <div class="col-6 col-md-3"><div class="card stat-card text-center"><div class="card-body">
        <div class="stat-number text-primary">{{ projs|length }}</div>
        <div class="stat-label">监控项目</div></div></div></div>
    <div class="col-6 col-md-3"><div class="card stat-card text-center"><div class="card-body">
        <div class="stat-number text-success">{{ projs.values()|selectattr('status','equalto','ok')|list|length }}</div>
        <div class="stat-label">✓ 正常</div></div></div></div>
    <div class="col-6 col-md-3"><div class="card stat-card text-center"><div class="card-body">
        <div class="stat-number text-warning">{{ projs.values()|selectattr('status','equalto','partial')|list|length }}</div>
        <div class="stat-label">⚠ 部分</div></div></div></div>
    <div class="col-6 col-md-3"><div class="card stat-card text-center"><div class="card-body">
        <div class="stat-number text-danger">{{ m.get("sources_failed", [])|length }}</div>
        <div class="stat-label">✗ 失败数据源</div></div></div></div>
</div>
{% endif %}

{% for r in reports %}
<div class="card mb-4">
    <div class="card-header d-flex flex-wrap justify-content-between align-items-center gap-2">
        <div>
            <strong>{{ r.date }}</strong>
            <span class="text-muted small ms-2">生成于 {{ r.created_at[:19] }}</span>
        </div>
        {% set prev = reports[loop.index] if not loop.last else none %}
        {% if prev and r.meta and prev.meta %}
            {% set cur_failed = r.meta.get("sources_failed", []) %}
            {% set prev_failed = prev.meta.get("sources_failed", []) %}
            {% set fixed = prev_failed|reject('in', cur_failed)|list %}
            {% set broke = cur_failed|reject('in', prev_failed)|list %}
            <small class="text-muted">
                {% if fixed %}<span class="badge bg-success-subtle text-success-emphasis">✅ 恢复: {{ fixed|join(", ") }}</span>{% endif %}
                {% if broke %}<span class="badge bg-danger-subtle text-danger-emphasis">⚠ 新增失败: {{ broke|join(", ") }}</span>{% endif %}
                {% if not fixed and not broke %}<span class="badge bg-secondary-subtle text-secondary-emphasis">与昨日相同</span>{% endif %}
            </small>
        {% endif %}
    </div>
    <div class="card-body">
        {% if r.meta %}
        <div class="d-flex flex-wrap gap-1 mb-2">
            {% for name, info in r.meta.get("projects", {}).items() %}
            {% set st = info.get('status', 'unknown') %}
            {% set is_starred = name in starred %}
            <span class="badge {{ 'badge-state-open' if st=='ok' else ('badge-state-partial' if st=='partial' else 'bg-danger') }}"
                  title="{{ name }}: {{ st }}{{ ' (已装)' if is_starred else '' }}">
                {{ name }}{% if is_starred %} ★{% endif %}
                {% if st=='ok' %} ✓{% elif st=='partial' %} ⚠{% else %} ✗{% endif %}
            </span>
            {% endfor %}
            {% for s in r.meta.get("sources_failed", []) %}
            <span class="badge bg-danger" title="数据源失败: {{ s }}">{{ s }} ✗</span>
            {% endfor %}
        </div>
        {% endif %}
        <details {% if loop.first %}open{% endif %}>
            <summary class="text-primary">查看报告内容</summary>
            <div class="watchdog-md mb-0 mt-2" data-md="{{ r.markdown | e }}"></div>
        </details>
    </div>
</div>
{% endfor %}
{% endblock %}

{% block scripts %}
<script>
document.querySelectorAll('.watchdog-md[data-md]').forEach(function(el){
    var raw = el.getAttribute('data-md') || '';
    el.innerHTML = DOMPurify.sanitize(marked.parse(raw));
    el.querySelectorAll('a[href^="http"]').forEach(function(a){
        a.setAttribute('target', '_blank');
        a.setAttribute('rel', 'noopener noreferrer');
    });
});
</script>
<script>
(function(){
    var KEY = 'wd_pending_since';
    var form = document.getElementById('run-form');
    if (form) {
        form.addEventListener('submit', function(){
            var b = document.getElementById('run-btn');
            b.disabled = true;
            b.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>已触发…';
            sessionStorage.setItem(KEY, String(Date.now()));
        });
    }
    var since = parseInt(sessionStorage.getItem(KEY) || '0', 10);
    if (!since) return;
    var ageMin = (Date.now() - since) / 60000;
    var pending = document.getElementById('wd-pending');
    if (ageMin >= 5) {
        sessionStorage.removeItem(KEY);
        if (pending) {
            pending.classList.remove('d-none', 'alert-warning');
            pending.classList.add('alert-danger');
            pending.textContent = '生成超时, 请检查 logs/daily-watchdog-run.log 后重试';
        }
        return;
    }
    if (pending) pending.classList.remove('d-none');
    var knownTop = (document.querySelector('.card-header .text-muted.small') || {}).textContent || '';
    var timer = setInterval(function(){
        fetch(location.href, {credentials: 'same-origin'}).then(function(r){ return r.text(); }).then(function(html){
            var m = html.match(/生成于\s*([0-9:\-\s]+)/);
            var top = m ? m[1].trim() : '';
            if (top && top !== knownTop.trim()) {
                sessionStorage.removeItem(KEY);
                clearInterval(timer);
                location.reload();
                return;
            }
            if ((Date.now() - since) / 60000 > 5) {
                clearInterval(timer);
                sessionStorage.removeItem(KEY);
                if (pending) {
                    pending.classList.remove('alert-warning');
                    pending.classList.add('alert-danger');
                    pending.textContent = '生成超时, 请检查 logs/daily-watchdog-run.log 后重试';
                }
            }
        }).catch(function(){ /* 网络抖动, 下一轮再试 */ });
    }, 15000);
})();
</script>
{% endblock %}