Bruce/DEMO-AGENT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(frontend): 优化对话与管理页面展示体验

Browse Source
This commit is contained in:
bruce
2026-05-30 00:26:18 +08:00
parent df45a89eb1
commit 905067277a
10 changed files with 776 additions and 218 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
templates/audit/log_detail.html
View File

@@ -1,37 +1,56 @@
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>审计日志详情</title>
</head>
<body>
<h1>审计日志详情 #{{ log.id }}</h1>
<nav><a href="{% url 'audit:list' %}">返回审计列表</a></nav>
<section>
<h2>用户输入</h2>
<p>{{ log.user_input }}</p>
{% extends "base.html" %}
{% block title %}审计日志详情{% endblock %}
{% block content %}
<header class="page-header">
<span class="eyebrow">日志详情</span>
<h1 class="page-title">审计日志 #{{ log.id }}</h1>
<p class="page-lead">这里集中展示当前请求的输入、模型输出、知识库引用和工具调用记录。</p>
<p style="margin-top: 14px;"><a class="button" href="{% url 'audit:list' %}">返回审计列表</a></p>
</header>
<section class="stack">
<article class="panel">
<h2 class="section-title">基础信息</h2>
<ul class="meta-list">
<li class="meta-badge">场景：{{ log.scenario_name }}</li>
<li class="meta-badge">状态：{{ log.status }}</li>
<li class="meta-badge">模型：{{ log.model_name }}</li>
<li class="meta-badge">耗时：{{ log.latency_ms }} ms</li>
</ul>
</article>
<article class="panel">
<h2 class="section-title">用户输入</h2>
<div class="detail-item">{{ log.user_input|linebreaksbr }}</div>
</article>
<article class="panel">
<h2 class="section-title">最终回答</h2>
<div class="detail-item">{{ log.final_answer|linebreaksbr }}</div>
</article>
<article class="panel">
<h2 class="section-title">结构化输出</h2>
<pre class="code-block">{{ log.structured_output }}</pre>
</article>
<article class="panel">
<h2 class="section-title">引用来源</h2>
<pre class="code-block">{{ log.retrieved_chunks }}</pre>
</article>
<article class="panel">
<h2 class="section-title">工具调用</h2>
<pre class="code-block">{{ log.tool_calls }}</pre>
</article>
{% if log.error_message %}
<article class="panel">
<h2 class="section-title">错误信息</h2>
<pre class="code-block">{{ log.error_message }}</pre>
</article>
{% endif %}
</section>
<section>
<h2>最终回答</h2>
<p>{{ log.final_answer }}</p>
</section>
<section>
<h2>结构化输出</h2>
<pre>{{ log.structured_output }}</pre>
</section>
<section>
<h2>引用来源</h2>
<pre>{{ log.retrieved_chunks }}</pre>
</section>
<section>
<h2>工具调用</h2>
<pre>{{ log.tool_calls }}</pre>
</section>
{% if log.error_message %}
<section>
<h2>错误信息</h2>
<pre>{{ log.error_message }}</pre>
</section>
{% endif %}
</body>
</html>
{% endblock %}

73
templates/audit/log_list.html
View File

@@ -1,37 +1,40 @@
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>审计日志</title>
</head>
<body>
<h1>审计日志</h1>
<nav><a href="/">返回首页</a></nav>
<table>
<thead>
<tr>
<th>ID</th>
<th>场景</th>
<th>状态</th>
<th>模型</th>
<th>耗时</th>
<th>详情</th>
</tr>
</thead>
<tbody>
{% for log in logs %}
{% extends "base.html" %}
{% block title %}审计日志{% endblock %}
{% block content %}
<header class="page-header">
<span class="eyebrow">执行留痕</span>
<h1 class="page-title">审计日志</h1>
<p class="page-lead">每次 Agent 执行都会记录模型、检索片段、工具调用和最终结果，方便演示链路可解释性。</p>
</header>
<article class="panel">
<table class="kv-table">
<thead>
<tr>
<td>{{ log.id }}</td>
<td>{{ log.scenario_name }}</td>
<td>{{ log.status }}</td>
<td>{{ log.model_name }}</td>
<td>{{ log.latency_ms }} ms</td>
<td><a href="{% url 'audit:detail' log.id %}">查看</a></td>
<th>ID</th>
<th>场景</th>
<th>状态</th>
<th>模型</th>
<th>耗时</th>
<th>详情</th>
</tr>
{% empty %}
<tr><td colspan="6">暂无审计日志。</td></tr>
{% endfor %}
</tbody>
</table>
</body>
</html>
</thead>
<tbody>
{% for log in logs %}
<tr>
<td>{{ log.id }}</td>
<td>{{ log.scenario_name }}</td>
<td>{{ log.status }}</td>
<td>{{ log.model_name }}</td>
<td>{{ log.latency_ms }} ms</td>
<td><a class="button" href="{% url 'audit:detail' log.id %}">查看详情</a></td>
</tr>
{% empty %}
<tr><td colspan="6">暂无审计日志，先去执行一次对话吧。</td></tr>
{% endfor %}
</tbody>
</table>
</article>
{% endblock %}

344
templates/base.html Normal file
View File

@@ -0,0 +1,344 @@
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %}Universal Agent Demo Framework{% endblock %}</title>
<style>
:root {
--bg: #f4f1ea;
--surface: #fffdf8;
--surface-strong: #fff7ea;
--border: #d7c9b0;
--text: #2f261d;
--muted: #73614f;
--accent: #a54c2b;
--accent-soft: #f1d2b8;
--success: #2b6a4d;
--warning: #9a5a00;
--danger: #8d2f2f;
--shadow: 0 18px 40px rgba(91, 63, 36, 0.10);
}
* { box-sizing: border-box; }
body {
margin: 0;
font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
color: var(--text);
background:
radial-gradient(circle at top left, #f7e2c8 0, transparent 30%),
linear-gradient(180deg, #f6efe2 0%, #f4f1ea 45%, #efe7da 100%);
min-height: 100vh;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.shell {
width: min(1180px, calc(100vw - 32px));
margin: 0 auto;
padding: 24px 0 40px;
}
.topbar {
display: flex;
justify-content: space-between;
gap: 16px;
align-items: center;
margin-bottom: 24px;
padding: 18px 20px;
border: 1px solid rgba(215, 201, 176, 0.7);
background: rgba(255, 253, 248, 0.88);
backdrop-filter: blur(12px);
border-radius: 22px;
box-shadow: var(--shadow);
}
.brand-title {
margin: 0;
font-size: 1.35rem;
font-weight: 700;
}
.brand-note {
margin: 6px 0 0;
color: var(--muted);
font-size: 0.95rem;
}
.nav-links {
display: flex;
gap: 10px;
flex-wrap: wrap;
justify-content: flex-end;
}
.nav-link,
.button,
button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
border-radius: 999px;
border: 1px solid var(--border);
background: var(--surface);
color: var(--text);
padding: 10px 16px;
font-size: 0.95rem;
cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.button-primary,
button {
border-color: var(--accent);
background: linear-gradient(135deg, #b9562f, #94452a);
color: #fffaf4;
box-shadow: 0 10px 22px rgba(165, 76, 43, 0.20);
}
.nav-link:hover,
.button:hover,
button:hover {
text-decoration: none;
transform: translateY(-1px);
box-shadow: 0 12px 24px rgba(91, 63, 36, 0.12);
}
.page-header {
margin-bottom: 24px;
}
.eyebrow {
display: inline-block;
margin-bottom: 10px;
padding: 6px 12px;
border-radius: 999px;
background: rgba(241, 210, 184, 0.8);
color: var(--accent);
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.04em;
}
.page-title {
margin: 0 0 10px;
font-size: clamp(2rem, 3vw, 3rem);
line-height: 1.1;
}
.page-lead {
margin: 0;
color: var(--muted);
font-size: 1rem;
max-width: 720px;
}
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 18px;
}
.panel,
.card {
background: rgba(255, 253, 248, 0.94);
border: 1px solid rgba(215, 201, 176, 0.85);
border-radius: 24px;
padding: 20px;
box-shadow: var(--shadow);
}
.card h2,
.panel h2,
.panel h3 {
margin-top: 0;
}
.meta-list {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 12px 0 0;
padding: 0;
list-style: none;
color: var(--muted);
font-size: 0.92rem;
}
.meta-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: 999px;
background: var(--surface-strong);
border: 1px solid rgba(215, 201, 176, 0.75);
}
.layout-two-columns {
display: grid;
grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
gap: 20px;
align-items: start;
}
.stack {
display: grid;
gap: 16px;
}
textarea,
select,
input[type="text"],
input[type="file"] {
width: 100%;
border-radius: 16px;
border: 1px solid var(--border);
background: #fff;
padding: 12px 14px;
font: inherit;
color: var(--text);
}
textarea { min-height: 150px; resize: vertical; }
label {
display: block;
margin-bottom: 8px;
font-weight: 700;
}
.help-text,
.muted {
color: var(--muted);
font-size: 0.92rem;
}
.checkbox-list {
display: grid;
gap: 8px;
margin-top: 10px;
}
.checkbox-item {
display: flex;
gap: 10px;
align-items: flex-start;
padding: 10px 12px;
border-radius: 16px;
border: 1px solid rgba(215, 201, 176, 0.85);
background: #fff;
}
.status {
display: inline-flex;
align-items: center;
padding: 6px 12px;
border-radius: 999px;
font-size: 0.9rem;
font-weight: 700;
background: var(--surface-strong);
color: var(--accent);
}
.status-success { color: var(--success); }
.status-failed { color: var(--danger); }
.notice {
padding: 14px 16px;
border-radius: 18px;
border: 1px solid rgba(215, 201, 176, 0.85);
background: rgba(255, 247, 234, 0.92);
color: var(--text);
}
.notice-error {
border-color: rgba(141, 47, 47, 0.25);
background: rgba(255, 238, 238, 0.95);
color: var(--danger);
}
.kv-table {
width: 100%;
border-collapse: collapse;
}
.kv-table th,
.kv-table td {
padding: 12px 10px;
border-bottom: 1px solid rgba(215, 201, 176, 0.6);
vertical-align: top;
text-align: left;
}
.kv-table th {
width: 150px;
color: var(--muted);
font-weight: 700;
}
.detail-list {
display: grid;
gap: 12px;
margin: 0;
padding: 0;
list-style: none;
}
.detail-item {
padding: 14px 16px;
border-radius: 18px;
background: #fff;
border: 1px solid rgba(215, 201, 176, 0.75);
}
.detail-item strong {
display: block;
margin-bottom: 6px;
}
.code-block {
margin: 0;
padding: 14px;
border-radius: 18px;
background: #2f261d;
color: #fdf8f1;
overflow: auto;
white-space: pre-wrap;
word-break: break-word;
font-size: 0.92rem;
line-height: 1.6;
}
.section-title {
margin: 0 0 12px;
font-size: 1.1rem;
}
@media (max-width: 900px) {
.layout-two-columns { grid-template-columns: 1fr; }
.topbar { flex-direction: column; align-items: flex-start; }
.nav-links { justify-content: flex-start; }
}
</style>
</head>
<body>
<div class="shell">
<header class="topbar">
<div>
<p class="brand-title">Universal Agent Demo Framework</p>
<p class="brand-note">面向复试演示的可配置 AI Agent 单体系统</p>
</div>
<nav class="nav-links">
<a class="nav-link" href="{% url 'scenarios:index' %}">场景首页</a>
<a class="nav-link" href="{% url 'documents:list' %}">文档中心</a>
<a class="nav-link" href="{% url 'audit:list' %}">审计日志</a>
</nav>
</header>
{% block content %}{% endblock %}
</div>
</body>
</html>

216
templates/chat/index.html
View File

@@ -1,61 +1,169 @@
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>Agent 对话</title>
</head>
<body>
<h1>Agent 对话</h1>
<nav><a href="/">返回首页</a></nav>
{% extends "base.html" %}
{% block title %}{{ scenario.name|default:"Agent 对话" }}{% endblock %}
{% block content %}
{% if error %}
<p>{{ error }}</p>
<section class="notice notice-error">{{ error }}</section>
{% endif %}
{% if scenario %}
<section>
<h2>{{ scenario.name }}</h2>
<p>{{ scenario.description }}</p>
<p>角色：{{ scenario.agent.role }}</p>
<p>目标：{{ scenario.agent.goal }}</p>
<header class="page-header">
<span class="eyebrow">Agent 对话</span>
<h1 class="page-title">{{ scenario.name }}</h1>
<p class="page-lead">{{ scenario.description }}</p>
<ul class="meta-list">
<li class="meta-badge">角色：{{ scenario.agent.role }}</li>
<li class="meta-badge">目标：{{ scenario.agent.goal }}</li>
<li class="meta-badge">已入库文档：{{ document_count }}</li>
<li class="meta-badge">输出类型：{{ scenario.output.type }}</li>
</ul>
</header>
<section class="layout-two-columns">
<div class="stack">
<article class="panel">
<h2 class="section-title">提问面板</h2>
<p class="muted">可以直接提问，也可以勾选部分已入库文档作为当前上下文范围。</p>
<form method="post" class="stack">
{% csrf_token %}
<div>
{{ form.message.label_tag }}
{{ form.message }}
{% if form.message.errors %}
<p class="notice notice-error">{{ form.message.errors|join:" " }}</p>
{% endif %}
</div>
<div>
{{ form.document_ids.label_tag }}
<p class="help-text">不勾选时默认检索当前场景全部已入库文档。</p>
<div class="checkbox-list">
{% for checkbox in form.document_ids %}
<label class="checkbox-item">
{{ checkbox.tag }}
<span>{{ checkbox.choice_label }}</span>
</label>
{% empty %}
<div class="notice">当前场景还没有已入库文档，系统将仅依赖工具和模型能力生成结果。</div>
{% endfor %}
</div>
{% if form.document_ids.errors %}
<p class="notice notice-error">{{ form.document_ids.errors|join:" " }}</p>
{% endif %}
</div>
<div>
<button type="submit">提交问题并执行 Agent</button>
</div>
</form>
</article>
<article class="panel">
<h2 class="section-title">执行说明</h2>
<ul class="detail-list">
<li class="detail-item">
<strong>1. 场景配置</strong>
系统会先读取当前 YAML 场景配置，确定角色、目标、工具和输出结构。
</li>
<li class="detail-item">
<strong>2. RAG 与工具</strong>
如果场景启用了知识库检索，系统会根据你的问题召回相关片段，并执行声明式工具。
</li>
<li class="detail-item">
<strong>3. 结构化结果</strong>
Agent Core 会优先解析 JSON 输出，解析失败时回退为稳定的展示结构。
</li>
</ul>
</article>
</div>
<div class="stack">
<article class="panel">
<h2 class="section-title">回答总览</h2>
{% if result %}
<ul class="meta-list">
<li class="meta-badge">模型：{{ result.model_name }}</li>
<li class="meta-badge {% if result.status == 'success' %}status-success{% else %}status-failed{% endif %}">状态：{{ result.status }}</li>
<li class="meta-badge">耗时：{{ result.latency_ms }} ms</li>
</ul>
<div class="detail-item" style="margin-top: 16px;">
<strong>主回答</strong>
<div>{{ result.answer|linebreaksbr }}</div>
</div>
{% if audit_log %}
<p style="margin-top: 14px;">
<a class="button" href="{% url 'audit:detail' audit_log.id %}">查看本次审计日志</a>
</p>
{% endif %}
{% else %}
<div class="notice">提交问题后，这里会展示 Agent 的主回答、模型信息和执行状态。</div>
{% endif %}
</article>
{% if result %}
<article class="panel">
<h2 class="section-title">结构化结果</h2>
<table class="kv-table">
<tbody>
{% for key, value in result.structured_output.items %}
<tr>
<th>{{ key }}</th>
<td>
{% if key == "answer" or key == "summary" or key == "reply" %}
{{ value|linebreaksbr }}
{% else %}
<pre class="code-block">{{ value }}</pre>
{% endif %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
</article>
<article class="panel">
<h2 class="section-title">引用片段</h2>
{% if result.references %}
<ul class="detail-list">
{% for reference in result.references %}
<li class="detail-item">
<strong>{{ reference.source }}</strong>
<div>{{ reference.content|default:"无正文内容"|linebreaksbr }}</div>
</li>
{% endfor %}
</ul>
{% else %}
<div class="notice">当前回答没有引用知识库片段。</div>
{% endif %}
</article>
<article class="panel">
<h2 class="section-title">工具调用</h2>
{% if result.tool_calls %}
<ul class="detail-list">
{% for tool_call in result.tool_calls %}
<li class="detail-item">
<strong>{{ tool_call.tool_name }}</strong>
<p class="muted">执行状态：{{ tool_call.success }}</p>
{% if tool_call.error %}
<p class="notice notice-error">{{ tool_call.error }}</p>
{% endif %}
<pre class="code-block">{{ tool_call.result }}</pre>
</li>
{% endfor %}
</ul>
{% else %}
<div class="notice">当前场景没有声明工具，或本次执行无需调用工具。</div>
{% endif %}
</article>
{% if result.error %}
<article class="panel">
<h2 class="section-title">错误信息</h2>
<pre class="code-block">{{ result.error }}</pre>
</article>
{% endif %}
{% endif %}
</div>
</section>
<form method="post">
{% csrf_token %}
{{ form.as_p }}
<button type="submit">提交</button>
</form>
{% if result %}
<section>
<h2>回答</h2>
<p>{{ result.answer }}</p>
<p>模型：{{ result.model_name }}</p>
<p>状态：{{ result.status }}</p>
<p>耗时：{{ result.latency_ms }} ms</p>
</section>
<section>
<h2>结构化输出</h2>
<pre>{{ result.structured_output }}</pre>
</section>
<section>
<h2>引用来源</h2>
<pre>{{ result.references }}</pre>
</section>
<section>
<h2>工具调用</h2>
<pre>{{ result.tool_calls }}</pre>
</section>
{% if audit_log %}
<p><a href="{% url 'audit:detail' audit_log.id %}">查看审计日志</a></p>
{% endif %}
{% if result.error %}
<section>
<h2>错误信息</h2>
<pre>{{ result.error }}</pre>
</section>
{% endif %}
{% endif %}
{% endif %}
</body>
</html>
{% endblock %}

99
templates/documents/document_list.html
View File

@@ -1,50 +1,53 @@
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>文件列表</title>
</head>
<body>
<h1>文件列表</h1>
<nav>
<a href="/">返回首页</a>
<a href="{% url 'documents:upload' %}">上传文件</a>
</nav>
<table>
<thead>
<tr>
<th>文件名</th>
<th>场景</th>
<th>类型</th>
<th>大小</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{% for document in documents %}
{% extends "base.html" %}
{% block title %}文档中心{% endblock %}
{% block content %}
<header class="page-header">
<span class="eyebrow">知识库资料</span>
<h1 class="page-title">文档中心</h1>
<p class="page-lead">上传题目材料后，可以在这里管理文件状态，并手动触发入库。</p>
<p style="margin-top: 14px;"><a class="button button-primary" href="{% url 'documents:upload' %}">上传新文件</a></p>
</header>
<article class="panel">
<table class="kv-table">
<thead>
<tr>
<td>{{ document.original_name }}</td>
<td>{{ document.scenario_id }}</td>
<td>{{ document.file_type }}</td>
<td>{{ document.size }}</td>
<td>{{ document.status }}</td>
<td>
{% if document.status != "indexed" %}
<form action="{% url 'documents:index' document.id %}" method="post">
{% csrf_token %}
<button type="submit">入库</button>
</form>
{% endif %}
{% if document.error_message %}
<pre>{{ document.error_message }}</pre>
{% endif %}
</td>
<th>文件名</th>
<th>场景</th>
<th>类型</th>
<th>大小</th>
<th>状态</th>
<th>操作</th>
</tr>
{% empty %}
<tr><td colspan="6">暂无文件。</td></tr>
{% endfor %}
</tbody>
</table>
</body>
</html>
</thead>
<tbody>
{% for document in documents %}
<tr>
<td>{{ document.original_name }}</td>
<td>{{ document.scenario_id }}</td>
<td>{{ document.file_type }}</td>
<td>{{ document.size }}</td>
<td>{{ document.status }}</td>
<td>
{% if document.status != "indexed" %}
<form action="{% url 'documents:index' document.id %}" method="post">
{% csrf_token %}
<button type="submit">执行入库</button>
</form>
{% else %}
<span class="status status-success">已可用于检索</span>
{% endif %}
{% if document.error_message %}
<pre class="code-block" style="margin-top: 10px;">{{ document.error_message }}</pre>
{% endif %}
</td>
</tr>
{% empty %}
<tr><td colspan="6">暂无文件，请先上传题目材料。</td></tr>
{% endfor %}
</tbody>
</table>
</article>
{% endblock %}

65
templates/documents/upload.html
View File

@@ -1,26 +1,39 @@
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>上传文件</title>
</head>
<body>
<h1>上传文件</h1>
<nav><a href="{% url 'documents:list' %}">返回文件列表</a></nav>
<form method="post" enctype="multipart/form-data">
{% csrf_token %}
<p>
<label for="id_scenario_id">场景</label>
<select name="scenario_id" id="id_scenario_id">
{% for scenario in scenarios %}
<option value="{{ scenario.id }}">{{ scenario.name }}</option>
{% endfor %}
</select>
</p>
<p>{{ form.file.label_tag }} {{ form.file }}</p>
{{ form.errors }}
<p>支持 .txt、.md、.pdf 和 .docx 文件。</p>
<button type="submit">上传</button>
</form>
</body>
</html>
{% extends "base.html" %}
{% block title %}上传文件{% endblock %}
{% block content %}
<header class="page-header">
<span class="eyebrow">文件上传</span>
<h1 class="page-title">上传题目材料或知识库文档</h1>
<p class="page-lead">支持 `.txt`、`.md`、`.pdf` 和 `.docx`。上传后可以在文档中心手动执行入库。</p>
</header>
<article class="panel" style="max-width: 760px;">
<form method="post" enctype="multipart/form-data" class="stack">
{% csrf_token %}
<div>
<label for="id_scenario_id">关联场景</label>
<select name="scenario_id" id="id_scenario_id">
{% for scenario in scenarios %}
<option value="{{ scenario.id }}">{{ scenario.name }}</option>
{% endfor %}
</select>
</div>
<div>
{{ form.file.label_tag }}
{{ form.file }}
{% if form.file.errors %}
<p class="notice notice-error">{{ form.file.errors|join:" " }}</p>
{% endif %}
</div>
{% if form.errors %}
<div class="notice notice-error">{{ form.errors }}</div>
{% endif %}
<div style="display: flex; gap: 10px; flex-wrap: wrap;">
<button type="submit">上传文件</button>
<a class="button" href="{% url 'documents:list' %}">返回文件列表</a>
</div>
</form>
</article>
{% endblock %}

43
templates/scenarios/index.html
View File

@@ -1,23 +1,30 @@
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>Universal Agent Demo Framework</title>
</head>
<body>
<h1>Universal Agent Demo Framework</h1>
<p>用于复试展示的通用 AI Agent Demo 框架。</p>
<main>
{% extends "base.html" %}
{% block title %}场景首页{% endblock %}
{% block content %}
<header class="page-header">
<span class="eyebrow">场景总览</span>
<h1 class="page-title">用同一套底座快速切换不同业务 Agent</h1>
<p class="page-lead">当前首页直接读取 YAML 场景配置。你可以从这里进入对话、上传资料，再用审计日志验证整条执行链路。</p>
</header>
<section class="card-grid">
{% for scenario in scenarios %}
<section>
<article class="card">
<h2>{{ scenario.name }}</h2>
<p>{{ scenario.description }}</p>
<p>场景 ID：{{ scenario.id }}</p>
<p><a href="{% url 'chat:index' scenario.id %}">进入对话</a></p>
</section>
<ul class="meta-list">
<li class="meta-badge">场景 ID：{{ scenario.id }}</li>
<li class="meta-badge">输出：{{ scenario.output.type }}</li>
<li class="meta-badge">工具数：{{ scenario.tools|length }}</li>
</ul>
<p style="margin-top: 16px;">
<a class="button button-primary" href="{% url 'chat:index' scenario.id %}">进入对话</a>
</p>
</article>
{% empty %}
<p>暂无可用场景，请检查 configs 目录。</p>
<div class="notice">暂无可用场景，请检查 `configs/` 目录和 YAML 配置内容。</div>
{% endfor %}
</main>
</body>
</html>
</section>
{% endblock %}