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

feat(ui): 重构注册审核平台原型界面

Browse Source
This commit is contained in:
bruce
2026-06-03 08:41:48 +08:00
parent 77166b5cd3
commit b2c1da3f02
24 changed files with 2563 additions and 536 deletions
Download Patch File Download Diff File Expand all files Collapse all files

576
templates/base.html
View File

@@ -3,349 +3,387 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %}Universal Agent Demo Framework{% endblock %}</title>
<title>{% block title %}注册审核智能体平台{% 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);
--bg: #f5f7fa;
--surface: #ffffff;
--surface-soft: #f8fafc;
--border: #d8e0e8;
--text: #1f2d3d;
--muted: #6a7a8b;
--primary: #2f6fec;
--primary-soft: #eef4ff;
--success: #1f8f5f;
--success-soft: #ecfaf3;
--warning: #c97a16;
--warning-soft: #fff5e8;
--danger: #cc4b3e;
--danger-soft: #fff1ef;
--shadow: 0 8px 24px rgba(31, 45, 61, 0.06);
--radius: 14px;
--radius-lg: 18px;
}
* { box-sizing: border-box; }
body {
margin: 0;
font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", 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;
background: var(--bg);
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
.topbar {
position: sticky;
top: 0;
z-index: 10;
background: rgba(255, 255, 255, 0.95);
border-bottom: 1px solid var(--border);
backdrop-filter: blur(8px);
}
.topbar-inner {
width: min(1680px, calc(100vw - 40px));
margin: 0 auto;
min-height: 64px;
display: flex;
align-items: center;
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 {
.brand {
display: flex;
gap: 10px;
align-items: center;
gap: 12px;
min-width: 0;
}
.brand-mark {
width: 36px;
height: 36px;
border-radius: 10px;
background: var(--primary);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
flex: none;
}
.brand h1 {
margin: 0;
font-size: 1rem;
line-height: 1.2;
}
.brand p {
margin: 2px 0 0;
color: var(--muted);
font-size: 0.82rem;
}
.topnav {
display: flex;
gap: 8px;
flex-wrap: wrap;
justify-content: flex-end;
}
.topnav a {
padding: 9px 12px;
border-radius: 10px;
color: var(--muted);
font-size: 0.92rem;
}
.topnav a:hover {
background: var(--surface-soft);
color: var(--text);
}
.nav-link,
.button,
button {
.page {
width: min(1680px, calc(100vw - 40px));
margin: 24px auto 40px;
display: grid;
gap: 16px;
}
.page-header {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 22px 24px;
box-shadow: var(--shadow);
display: grid;
gap: 10px;
}
.eyebrow {
display: inline-flex;
width: fit-content;
padding: 4px 10px;
border-radius: 999px;
background: var(--primary-soft);
color: var(--primary);
font-size: 0.78rem;
font-weight: 700;
}
.page-title {
margin: 0;
font-size: 1.9rem;
line-height: 1.2;
}
.page-lead {
margin: 0;
color: var(--muted);
line-height: 1.65;
}
.panel {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 18px;
box-shadow: var(--shadow);
}
.section-heading {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
margin-bottom: 14px;
}
.section-title {
margin: 0;
font-size: 1.08rem;
line-height: 1.35;
}
.section-copy, .muted, .help-text {
color: var(--muted);
line-height: 1.6;
font-size: 0.92rem;
}
.grid-2 {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.grid-3 {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
.workspace-grid {
display: grid;
grid-template-columns: 360px minmax(0, 1fr);
gap: 16px;
align-items: start;
}
.workspace-grid-wide {
display: grid;
grid-template-columns: minmax(0, 1.45fr) minmax(420px, 0.85fr);
gap: 16px;
align-items: start;
}
.stack { display: grid; gap: 14px; }
.metric-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}
.metric-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 16px;
}
.metric-label {
color: var(--muted);
font-size: 0.8rem;
}
.metric-value {
margin-top: 8px;
font-size: 1.55rem;
font-weight: 700;
}
.metric-note {
margin-top: 6px;
color: var(--muted);
font-size: 0.86rem;
line-height: 1.5;
}
.button-row, .badge-row, .meta-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
.button, button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
border-radius: 999px;
min-height: 38px;
padding: 0 14px;
border-radius: 10px;
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);
.button-primary, button {
background: var(--primary);
color: #fff;
border-color: var(--primary);
}
.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 {
.pill, .meta-badge, .status {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
padding: 5px 10px;
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);
background: var(--surface-soft);
font-size: 0.82rem;
}
.pill-accent { color: var(--primary); background: var(--primary-soft); border-color: #d8e5ff; }
.pill-success, .status-success { color: var(--success); background: var(--success-soft); border-color: #ccebdc; }
.pill-signal { color: var(--warning); background: var(--warning-soft); border-color: #f3dcc0; }
.pill-danger, .status-failed { color: var(--danger); background: var(--danger-soft); border-color: #f2d3cf; }
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 {
.simple-list, .detail-list, .risk-list {
list-style: none;
padding: 0;
margin: 0;
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);
}
.detail-item, .risk-item {
padding: 12px 14px;
border: 1px solid var(--border);
border-radius: 12px;
background: var(--surface-soft);
line-height: 1.6;
}
.detail-item strong, .risk-item strong { display: block; margin-bottom: 4px; }
textarea, select, input[type="text"], input[type="file"] {
width: 100%;
border: 1px solid var(--border);
border-radius: 10px;
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);
padding: 11px 12px;
color: var(--text);
}
.notice-error {
border-color: rgba(141, 47, 47, 0.25);
background: rgba(255, 238, 238, 0.95);
color: var(--danger);
textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
label { display: block; margin-bottom: 8px; font-weight: 600; }
.checkbox-list { display: grid; gap: 8px; }
.checkbox-item {
display: grid;
grid-template-columns: 20px minmax(0, 1fr);
gap: 10px;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--surface-soft);
}
.kv-table {
.table-wrap { overflow-x: auto; }
.data-table, .kv-table {
width: 100%;
border-collapse: collapse;
}
.kv-table th,
.kv-table td {
.data-table th, .data-table td, .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;
border-bottom: 1px solid #e9eef3;
vertical-align: top;
line-height: 1.55;
}
.kv-table th {
width: 150px;
.data-table th, .kv-table th {
color: var(--muted);
font-size: 0.82rem;
font-weight: 700;
background: var(--surface-soft);
white-space: nowrap;
}
.nowrap { white-space: nowrap; }
.cell-min-220 { min-width: 220px; }
.cell-min-280 { min-width: 280px; }
.detail-list {
display: grid;
gap: 12px;
margin: 0;
padding: 0;
list-style: none;
.notice {
padding: 12px 14px;
border-radius: 10px;
border: 1px solid #d8e5ff;
background: var(--primary-soft);
color: var(--text);
}
.detail-item {
padding: 14px 16px;
border-radius: 18px;
background: #fff;
border: 1px solid rgba(215, 201, 176, 0.75);
.notice-error {
border-color: #f2d3cf;
background: var(--danger-soft);
color: var(--danger);
}
.detail-item strong {
display: block;
margin-bottom: 6px;
}
.code-block {
margin: 0;
padding: 14px;
border-radius: 18px;
background: #2f261d;
color: #fdf8f1;
overflow: auto;
padding: 12px;
border-radius: 10px;
background: #1f2937;
color: #f9fafb;
overflow-x: auto;
font-size: 0.84rem;
line-height: 1.55;
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;
.link-card {
display: block;
padding: 16px;
border: 1px solid var(--border);
border-radius: 12px;
background: var(--surface);
}
.link-card h3 { margin: 0 0 6px; font-size: 1rem; }
.link-card p { margin: 0; color: var(--muted); font-size: 0.9rem; line-height: 1.55; }
@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; }
@media (max-width: 1024px) {
.metric-grid, .grid-2, .grid-3, .workspace-grid, .workspace-grid-wide { grid-template-columns: 1fr; }
.topbar-inner { flex-direction: column; align-items: flex-start; padding: 12px 0; }
.topnav { 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>
<header class="topbar">
<div class="topbar-inner">
<div class="brand">
<div class="brand-mark">RA</div>
<div>
<h1>注册审核智能体平台</h1>
<p>极简后台原型</p>
</div>
</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 class="topnav">
<a href="{% url 'scenarios:index' %}">总览</a>
<a href="{% url 'documents:list' %}">文件中心</a>
<a href="{% url 'chat:index' 'document_review' %}">审核工作台</a>
<a href="{% url 'platform_ui:knowledge-base' %}">知识库</a>
<a href="{% url 'platform_ui:mcp-center' %}">MCP</a>
<a href="{% url 'platform_ui:skills' %}">Skills</a>
<a href="{% url 'platform_ui:command-center' %}">工作台</a>
<a href="{% url 'audit:list' %}">审计</a>
</nav>
</header>
</div>
</header>
<main class="page">
{% if messages %}
<section class="stack" style="margin-bottom: 18px;">
<div class="stack">
{% for message in messages %}
<div class="notice{% if message.tags == 'error' %} notice-error{% endif %}">{{ message }}</div>
{% endfor %}
</section>
</div>
{% endif %}
{% block content %}{% endblock %}
</div>
</main>
</body>
</html>