feat(frontend): 优化对话与管理页面展示体验
This commit is contained in:
@@ -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 %}
|
||||
|
||||
Reference in New Issue
Block a user