oh-my-muse/design-docs/prototypes/产品-02D-智能体工作台原型.html
2026-05-22 23:18:03 +08:00

1492 lines
58 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>产品-02D 智能体工作台原型</title>
<style>
:root {
--bg: #f3f5f4;
--surface: #ffffff;
--surface-soft: #f8faf9;
--surface-strong: #eef3f1;
--ink: #17221f;
--muted: #50615c;
--weak: #7a8985;
--line: #d9e1df;
--line-strong: #bdcbc7;
--accent: #236f61;
--accent-deep: #174f46;
--accent-soft: #e6f3f0;
--blue: #315f89;
--blue-soft: #e8f0f7;
--gold: #80601c;
--gold-soft: #fff5dc;
--danger: #a83d35;
--danger-soft: #fff0ee;
--ok: #28744f;
--ok-soft: #e8f5ed;
--shadow: 0 14px 34px rgba(23, 34, 31, 0.07);
--radius: 8px;
--sidebar: 250px;
color-scheme: light;
}
* {
box-sizing: border-box;
}
html {
min-width: 320px;
background: var(--bg);
color: var(--ink);
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
line-height: 1.45;
}
body {
margin: 0;
}
button,
input,
select,
textarea {
font: inherit;
}
button,
select {
cursor: pointer;
}
.app {
min-height: 100vh;
display: grid;
grid-template-columns: var(--sidebar) minmax(0, 1fr);
grid-template-rows: 58px minmax(0, 1fr);
}
.topbar {
grid-column: 1 / -1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 10px 16px;
border-bottom: 1px solid var(--line);
background: rgba(255, 255, 255, 0.96);
position: sticky;
top: 0;
z-index: 30;
}
.brand,
.top-actions,
.row,
.badge-row,
.mini-actions {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.brand-mark {
width: 34px;
height: 34px;
display: grid;
place-items: center;
border-radius: 7px;
background: var(--accent);
color: #fff;
font-weight: 900;
letter-spacing: 0;
}
.brand h1 {
margin: 0;
font-size: 15px;
line-height: 1.1;
letter-spacing: 0;
}
.brand p {
margin: 2px 0 0;
color: var(--muted);
font-size: 11px;
line-height: 1.1;
}
.avatar {
width: 29px;
height: 29px;
display: grid;
place-items: center;
border: 1px solid var(--line);
border-radius: 50%;
background: var(--surface-soft);
font-size: 12px;
font-weight: 800;
}
.sidebar {
grid-column: 1;
grid-row: 2;
min-height: 0;
overflow: auto;
border-right: 1px solid var(--line);
background: var(--surface);
}
.nav-section {
padding: 12px;
border-bottom: 1px solid var(--line);
}
.nav-title {
margin: 0 0 8px;
color: var(--weak);
font-size: 11px;
font-weight: 850;
letter-spacing: 0;
}
.nav-button {
width: 100%;
min-height: 36px;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 8px;
margin: 0 0 4px;
padding: 7px 8px;
border: 1px solid transparent;
border-radius: 7px;
background: transparent;
color: var(--ink);
text-align: left;
}
.nav-button:hover {
border-color: var(--line);
background: var(--surface-soft);
}
.nav-button.active {
border-color: #a5d5cb;
background: var(--accent-soft);
color: var(--accent-deep);
}
.nav-name {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 12px;
font-weight: 750;
}
.nav-status {
width: 7px;
height: 7px;
border-radius: 999px;
background: var(--line-strong);
}
.nav-button.active .nav-status {
background: var(--accent);
}
.main {
grid-column: 2;
grid-row: 2;
min-width: 0;
min-height: 0;
overflow: auto;
padding: 16px;
}
.screen {
display: none;
max-width: 1640px;
margin: 0 auto;
animation: screen-in 140ms ease-out;
}
.screen.active {
display: block;
}
@keyframes screen-in {
from {
opacity: 0;
transform: translateY(4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.page-head {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
gap: 14px;
margin-bottom: 12px;
}
.kicker {
color: var(--muted);
font-size: 12px;
font-weight: 800;
}
.page-title {
margin: 3px 0 5px;
font-size: 25px;
line-height: 1.18;
letter-spacing: 0;
}
.page-desc {
margin: 0;
color: var(--muted);
font-size: 12px;
}
.button {
min-height: 31px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 5px 10px;
border: 1px solid var(--line-strong);
border-radius: 7px;
background: var(--surface);
color: var(--ink);
font-size: 12px;
font-weight: 750;
white-space: nowrap;
}
.button:hover {
border-color: #91aaa4;
background: #f8fbfa;
}
.button.primary {
border-color: var(--accent);
background: var(--accent);
color: #fff;
}
.button.primary:hover {
background: var(--accent-deep);
}
.button.soft {
border-color: #afd8d0;
background: var(--accent-soft);
color: var(--accent-deep);
}
.button.warn {
border-color: #e5c77d;
background: var(--gold-soft);
color: var(--gold);
}
.button.danger {
border-color: #eeb9b3;
background: var(--danger-soft);
color: var(--danger);
}
.button.ghost {
border-color: transparent;
background: transparent;
color: var(--muted);
}
.button:disabled,
.nav-button:disabled {
cursor: not-allowed;
opacity: 0.54;
}
.button:focus-visible,
.nav-button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 3px solid rgba(35, 111, 97, 0.18);
outline-offset: 2px;
}
.badge {
display: inline-flex;
align-items: center;
max-width: 100%;
min-height: 22px;
padding: 2px 8px;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--surface);
color: var(--muted);
font-size: 11px;
font-weight: 750;
word-break: break-word;
}
.badge.ok {
border-color: #b9dfca;
background: var(--ok-soft);
color: var(--ok);
}
.badge.warn {
border-color: #e6cc89;
background: var(--gold-soft);
color: var(--gold);
}
.badge.danger {
border-color: #ecb4ae;
background: var(--danger-soft);
color: var(--danger);
}
.badge.blue {
border-color: #bfd4e6;
background: var(--blue-soft);
color: var(--blue);
}
.panel,
.filter-bar,
.metric,
.agent-card,
.choice-card,
.step-card,
.status-box,
.detail-box {
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface);
box-shadow: var(--shadow);
}
.filter-bar {
margin-bottom: 12px;
padding: 10px;
}
.filter-grid {
display: grid;
grid-template-columns: minmax(220px, 1.6fr) repeat(4, minmax(122px, 1fr)) auto;
gap: 8px;
align-items: end;
}
.control label {
display: block;
margin-bottom: 4px;
color: var(--muted);
font-size: 11px;
font-weight: 850;
}
.control input,
.control select,
.control textarea {
width: 100%;
min-height: 31px;
padding: 6px 8px;
border: 1px solid var(--line);
border-radius: 7px;
background: var(--surface-soft);
color: var(--ink);
font-size: 12px;
}
.control textarea {
min-height: 86px;
resize: vertical;
}
.hint {
margin: 4px 0 0;
color: var(--weak);
font-size: 11px;
}
.grid-2 {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.grid-3 {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.grid-4 {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}
.main-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(320px, 410px);
gap: 12px;
align-items: start;
}
.panel {
min-width: 0;
overflow: hidden;
}
.panel-head {
min-height: 42px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 9px 11px;
border-bottom: 1px solid var(--line);
background: var(--surface-soft);
}
.panel-title {
margin: 0;
font-size: 13px;
font-weight: 850;
letter-spacing: 0;
}
.panel-body {
padding: 11px;
}
.metric {
min-height: 84px;
padding: 10px;
}
.metric-label {
margin: 0;
color: var(--muted);
font-size: 11px;
font-weight: 850;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.metric-value {
margin: 5px 0 4px;
font-size: 22px;
line-height: 1.1;
font-weight: 900;
letter-spacing: 0;
}
.metric-foot {
color: var(--weak);
font-size: 11px;
}
.agent-grid {
display: grid;
grid-template-columns: repeat(3, minmax(260px, 1fr));
gap: 12px;
}
.agent-card {
min-height: 182px;
display: grid;
gap: 10px;
padding: 12px;
}
.agent-card-head {
display: grid;
grid-template-columns: 42px minmax(0, 1fr);
gap: 10px;
align-items: center;
}
.agent-icon {
width: 42px;
height: 42px;
display: grid;
place-items: center;
border: 1px solid #afd8d0;
border-radius: 8px;
background: var(--accent-soft);
color: var(--accent-deep);
font-size: 15px;
font-weight: 900;
}
.agent-name,
.item-title {
margin: 0;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 14px;
font-weight: 850;
}
.agent-meta,
.item-meta,
.small {
color: var(--muted);
font-size: 11px;
}
.agent-summary {
margin: 0;
color: var(--muted);
font-size: 12px;
}
.choice-card {
min-height: 190px;
padding: 14px;
display: grid;
gap: 10px;
}
.choice-card.selected {
border-color: #8fc7bb;
background: linear-gradient(180deg, #fff, #f1faf7);
}
.choice-card h3,
.step-card h3,
.status-box h3,
.detail-box h3 {
margin: 0;
font-size: 14px;
letter-spacing: 0;
}
.choice-card p,
.step-card p,
.status-box p,
.detail-box p {
margin: 0;
color: var(--muted);
font-size: 12px;
}
.tabs {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-bottom: 12px;
}
.tab {
min-height: 30px;
padding: 5px 10px;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--surface);
color: var(--muted);
font-size: 12px;
font-weight: 750;
}
.tab.active {
border-color: #a5d5cb;
background: var(--accent-soft);
color: var(--accent-deep);
}
.table-wrap {
overflow: auto;
}
table {
width: 100%;
border-collapse: collapse;
min-width: 760px;
font-size: 12px;
}
th,
td {
padding: 9px 10px;
border-bottom: 1px solid var(--line);
text-align: left;
vertical-align: top;
}
th {
background: var(--surface-soft);
color: var(--muted);
font-size: 11px;
font-weight: 850;
white-space: nowrap;
}
tr:last-child td {
border-bottom: 0;
}
.stack {
display: grid;
gap: 10px;
}
.dense-stack {
display: grid;
gap: 6px;
}
.split {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 12px;
}
.status-box,
.detail-box {
padding: 11px;
}
.status-box.warn {
border-color: #e6cc89;
background: var(--gold-soft);
}
.status-box.danger {
border-color: #ecb4ae;
background: var(--danger-soft);
}
.status-box.ok {
border-color: #b9dfca;
background: var(--ok-soft);
}
.prompt-preview,
.output-preview,
.code-like {
padding: 11px;
border: 1px solid var(--line);
border-radius: 7px;
background: #fbfcfb;
color: #263530;
font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
font-size: 12px;
line-height: 1.55;
white-space: pre-wrap;
}
.slider-row {
display: grid;
grid-template-columns: 110px minmax(0, 1fr) 44px;
gap: 10px;
align-items: center;
font-size: 12px;
color: var(--muted);
}
.slider {
height: 8px;
border-radius: 999px;
background: linear-gradient(90deg, var(--accent) 0 42%, var(--line) 42% 100%);
}
.workflow {
display: grid;
gap: 8px;
}
.step-card {
display: grid;
grid-template-columns: 36px minmax(0, 1fr) auto;
gap: 10px;
align-items: start;
padding: 11px;
}
.step-num {
width: 30px;
height: 30px;
display: grid;
place-items: center;
border-radius: 7px;
background: var(--surface-strong);
font-size: 12px;
font-weight: 900;
color: var(--accent-deep);
}
.slot-card {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 10px;
padding: 10px;
border: 1px solid var(--line);
border-radius: 7px;
background: var(--surface-soft);
}
.slot-card.selected {
border-color: #8fc7bb;
background: var(--accent-soft);
}
.footer-note {
margin-top: 12px;
color: var(--weak);
font-size: 11px;
}
@media (max-width: 1120px) {
.app {
grid-template-columns: 1fr;
grid-template-rows: auto auto minmax(0, 1fr);
}
.topbar,
.sidebar,
.main {
grid-column: 1;
}
.sidebar {
grid-row: 2;
border-right: 0;
border-bottom: 1px solid var(--line);
}
.main {
grid-row: 3;
}
.nav-section {
display: flex;
gap: 8px;
overflow: auto;
}
.nav-title {
min-width: max-content;
margin: 8px 4px 0 0;
}
.nav-button {
min-width: 150px;
}
.filter-grid,
.main-grid,
.split {
grid-template-columns: 1fr;
}
.agent-grid,
.grid-3,
.grid-4 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 720px) {
.topbar,
.page-head {
grid-template-columns: 1fr;
display: grid;
}
.agent-grid,
.grid-2,
.grid-3,
.grid-4 {
grid-template-columns: 1fr;
}
.main {
padding: 12px;
}
.page-title {
font-size: 21px;
}
}
</style>
</head>
<body>
<div class="app">
<header class="topbar">
<div class="brand">
<div class="brand-mark">M</div>
<div>
<h1>Muse 智能体工作台</h1>
<p>Agent Workspace · 查看、试用、安装、替换开放槽位;创建与发布按角色开放</p>
</div>
</div>
<div class="top-actions">
<button class="button ghost" type="button" data-go="slot-selector">来自作品槽位:晨雾纪事</button>
<button class="button soft" type="button" data-go="installed">已安装 8</button>
<button class="button" type="button" disabled>普通作者视图</button>
<div class="avatar" aria-label="当前用户">青</div>
</div>
</header>
<aside class="sidebar" aria-label="智能体工作台导航">
<div class="nav-section">
<p class="nav-title">普通作者默认</p>
<button class="nav-button active" type="button" data-go="list"><span class="nav-name">智能体列表</span><span class="nav-status"></span></button>
<button class="nav-button" type="button" data-go="installed"><span class="nav-name">已安装与授权</span><span class="nav-status"></span></button>
<button class="nav-button" type="button" data-go="slot-selector"><span class="nav-name">作品槽位候选选择</span><span class="nav-status"></span></button>
</div>
<div class="nav-section">
<p class="nav-title">资产作者 · 权限开放后</p>
<button class="nav-button" type="button" data-go="create"><span class="nav-name">新建智能体入口</span><span class="nav-status"></span></button>
<button class="nav-button" type="button" data-go="detail"><span class="nav-name">详情与版本</span><span class="nav-status"></span></button>
<button class="nav-button" type="button" data-go="config"><span class="nav-name">配置型编辑器</span><span class="nav-status"></span></button>
<button class="nav-button" type="button" data-go="test"><span class="nav-name">试用与评估</span><span class="nav-status"></span></button>
<button class="nav-button" type="button" data-go="compat"><span class="nav-name">槽位兼容性</span><span class="nav-status"></span></button>
<button class="nav-button" type="button" data-go="publish"><span class="nav-name">发布准备</span><span class="nav-status"></span></button>
<button class="nav-button" type="button" data-go="records"><span class="nav-name">运行与用量记录</span><span class="nav-status"></span></button>
</div>
<div class="nav-section">
<p class="nav-title">高级资产作者 · 权限开放后</p>
<button class="nav-button" type="button" data-go="workflow"><span class="nav-name">工作流编辑器</span><span class="nav-status"></span></button>
</div>
</aside>
<main class="main">
<section class="screen active" data-screen="list">
<div class="page-head">
<div>
<div class="kicker">agent-list</div>
<h2 class="page-title">智能体列表</h2>
<p class="page-desc">账户可用、自己创建、市场已安装和系统默认智能体的统一入口。</p>
</div>
<div class="mini-actions">
<button class="button" type="button" data-go="installed">安装管理</button>
<button class="button" type="button" disabled>新建需资产作者权限</button>
</div>
</div>
<div class="grid-4">
<div class="metric"><p class="metric-label">可用智能体</p><p class="metric-value">24</p><p class="metric-foot">自建 7 · 已安装 8 · 系统 9</p></div>
<div class="metric"><p class="metric-label">授权异常</p><p class="metric-value">3</p><p class="metric-foot">2 个已下架,1 个需重验</p></div>
<div class="metric"><p class="metric-label">可关联槽位</p><p class="metric-value">11</p><p class="metric-foot">写作 5 · 分析 3 · 检测 3</p></div>
<div class="metric"><p class="metric-label">最近运行</p><p class="metric-value">186</p><p class="metric-foot">本周试用与作品调用</p></div>
</div>
<div class="filter-bar">
<div class="filter-grid">
<div class="control"><label>搜索</label><input value="角色声音" aria-label="搜索智能体" /></div>
<div class="control"><label>来源</label><select><option>全部来源</option><option>我创建的</option><option>市场已安装</option><option>系统默认</option></select></div>
<div class="control"><label>形态</label><select><option>全部形态</option><option>配置型</option><option>工作流型</option></select></div>
<div class="control"><label>能力目标</label><select><option>全部能力</option><option>写作</option><option>分析</option><option>检测</option></select></div>
<div class="control"><label>状态</label><select><option>全部状态</option><option>已启用</option><option>授权失效</option><option>版本过期</option></select></div>
<button class="button" type="button">筛选</button>
</div>
</div>
<div class="agent-grid">
<article class="agent-card">
<div class="agent-card-head">
<div class="agent-icon">写</div>
<div>
<h3 class="agent-name">暮色续写助手</h3>
<p class="agent-meta">配置型 · 写作 · 我创建的 · v3</p>
</div>
</div>
<p class="agent-summary">偏慢节奏、细节铺垫和角色内心描写,兼容两个写作开放槽位。</p>
<div class="badge-row"><span class="badge ok">已启用</span><span class="badge blue">可编辑</span><span class="badge ok">2 个兼容槽位</span></div>
<div class="mini-actions"><button class="button soft" type="button" data-go="detail">详情</button><button class="button" type="button" data-go="config">编辑</button><button class="button" type="button" data-go="test">试用</button></div>
</article>
<article class="agent-card">
<div class="agent-card-head">
<div class="agent-icon">检</div>
<div>
<h3 class="agent-name">角色声音检查器</h3>
<p class="agent-meta">配置型 · 检测 · 市场已安装 · v1.8</p>
</div>
</div>
<p class="agent-summary">检查对白、行动和人物档案是否一致;许可允许试用,不允许查看完整 Prompt。</p>
<div class="badge-row"><span class="badge ok">已安装</span><span class="badge">只读</span><span class="badge warn">可升级</span></div>
<div class="mini-actions"><button class="button soft" type="button" data-go="detail">详情</button><button class="button" type="button" data-go="compat">兼容性</button><button class="button" type="button">固定版本</button></div>
</article>
<article class="agent-card">
<div class="agent-card-head">
<div class="agent-icon">析</div>
<div>
<h3 class="agent-name">实体提取工作流</h3>
<p class="agent-meta">工作流型 · 分析 · 我创建的 · 草稿</p>
</div>
</div>
<p class="agent-summary">章节摘要、人物事件提取、低置信知识草稿输出,仍有一个工具授权错误。</p>
<div class="badge-row"><span class="badge warn">草稿</span><span class="badge danger">工具无权</span><span class="badge">不可关联作品</span></div>
<div class="mini-actions"><button class="button soft" type="button" data-go="workflow">继续编辑</button><button class="button" type="button" data-go="test">试用</button></div>
</article>
<article class="agent-card">
<div class="agent-card-head">
<div class="agent-icon">系</div>
<div>
<h3 class="agent-name">系统默认续写子智能体</h3>
<p class="agent-meta">系统级 · 写作 · v12</p>
</div>
</div>
<p class="agent-summary">管理员发布的默认子智能体,可作为系统默认;普通用户不能编辑原件。</p>
<div class="badge-row"><span class="badge blue">系统默认</span><span class="badge">只读</span><span class="badge ok">可作为回退</span></div>
<div class="mini-actions"><button class="button soft" type="button" data-go="detail">查看摘要</button><button class="button" type="button" data-go="compat">槽位合同</button></div>
</article>
<article class="agent-card">
<div class="agent-card-head">
<div class="agent-icon">风</div>
<div>
<h3 class="agent-name">古风对白润色</h3>
<p class="agent-meta">配置型 · 写作 · 市场已安装 · v2.0</p>
</div>
</div>
<p class="agent-summary">来源资产已下架,已有作品绑定需要回退或固定旧许可快照。</p>
<div class="badge-row"><span class="badge danger">已下架</span><span class="badge warn">需重验</span><span class="badge">2 个作品受影响</span></div>
<div class="mini-actions"><button class="button warn" type="button" data-go="installed">处理授权</button><button class="button" type="button" data-go="records">记录</button></div>
</article>
<article class="agent-card">
<div class="agent-card-head">
<div class="agent-icon">节</div>
<div>
<h3 class="agent-name">章节节奏建议器</h3>
<p class="agent-meta">配置型 · 检测 · 我创建的 · v1</p>
</div>
</div>
<p class="agent-summary">输出非关键维度建议和定位,不降低系统质量门控风险等级。</p>
<div class="badge-row"><span class="badge ok">已启用</span><span class="badge blue">检测</span><span class="badge ok">可发布准备</span></div>
<div class="mini-actions"><button class="button soft" type="button" data-go="publish">发布准备</button><button class="button" type="button" data-go="detail">详情</button></div>
</article>
</div>
</section>
<section class="screen" data-screen="create">
<div class="page-head">
<div>
<div class="kicker">agent-create-entry</div>
<h2 class="page-title">新建智能体入口</h2>
<p class="page-desc">选择形态、能力目标和模板;创建动作只产生草稿,不影响作品。</p>
</div>
<button class="button ghost" type="button" data-go="list">返回列表</button>
</div>
<div class="grid-2">
<article class="choice-card selected">
<div class="badge-row"><span class="badge ok">推荐</span><span class="badge">Configured Agent</span></div>
<h3>配置型智能体</h3>
<p>通过能力目标、Prompt 模板、模型档位、参数和上下文策略形成稳定能力。</p>
<div class="grid-3">
<span class="badge blue">写作</span>
<span class="badge blue">分析</span>
<span class="badge blue">检测</span>
</div>
<button class="button primary" type="button" data-go="config">创建配置型草稿</button>
</article>
<article class="choice-card">
<div class="badge-row"><span class="badge warn">高级能力</span><span class="badge">Workflow Agent</span></div>
<h3>工作流型智能体</h3>
<p>编排受控步骤、授权工具和可用子智能体;仅服务写作、分析和检测目标。</p>
<div class="status-box warn">
<h3>工作流权限</h3>
<p>当前账号已开放工作流草稿;外发工具必须经过授权。</p>
</div>
<button class="button" type="button" data-go="workflow">创建工作流草稿</button>
</article>
</div>
<div class="main-grid" style="margin-top:12px;">
<section class="panel">
<div class="panel-head"><h3 class="panel-title">模板选择</h3><span class="badge">查询智能体创建选项</span></div>
<div class="panel-body">
<div class="table-wrap">
<table>
<thead><tr><th>模板</th><th>能力目标</th><th>默认输出</th><th>可用状态</th><th>操作</th></tr></thead>
<tbody>
<tr><td>长篇续写基础模板</td><td>写作</td><td>候选文本</td><td><span class="badge ok">可用</span></td><td><button class="button soft" type="button" data-go="config">使用</button></td></tr>
<tr><td>角色声音检测模板</td><td>检测</td><td>评分与建议</td><td><span class="badge ok">可用</span></td><td><button class="button" type="button">预览</button></td></tr>
<tr><td>章节实体提取模板</td><td>分析</td><td>低置信知识草稿</td><td><span class="badge warn">需要工作流权限</span></td><td><button class="button" type="button" data-go="workflow">使用</button></td></tr>
</tbody>
</table>
</div>
</div>
</section>
<aside class="panel">
<div class="panel-head"><h3 class="panel-title">创建限制</h3><span class="badge ok">可创建</span></div>
<div class="panel-body stack">
<div class="status-box ok"><h3>配额</h3><p>本月还可创建 12 个草稿;工作流草稿剩余 3 个。</p></div>
<div class="status-box"><h3>边界</h3><p>草稿不能关联作品;启用版本前必须通过输出合同、变量、权限、敏感信息和 Prompt 注入校验。</p></div>
<div class="status-box warn"><h3>外部凭据</h3><p>不能录入未托管 API Key、Webhook 密钥或本地文件路径。</p></div>
</div>
</aside>
</div>
</section>
<section class="screen" data-screen="detail">
<div class="page-head">
<div>
<div class="kicker">agent-detail-version</div>
<h2 class="page-title">暮色续写助手</h2>
<p class="page-desc">配置型 · 写作 · 我创建的 · 当前版本 v3 · 最近使用 18 分钟前。</p>
</div>
<div class="mini-actions">
<button class="button" type="button" data-go="test">试用</button>
<button class="button" type="button" data-go="config">编辑新版本</button>
<button class="button primary" type="button" data-go="publish">发布准备</button>
</div>
</div>
<div class="main-grid">
<section class="panel">
<div class="panel-head"><h3 class="panel-title">版本、授权与兼容槽位</h3><span class="badge ok">已启用</span></div>
<div class="panel-body stack">
<div class="grid-4">
<div class="metric"><p class="metric-label">当前版本</p><p class="metric-value">v3</p><p class="metric-foot">2026-05-22 启用</p></div>
<div class="metric"><p class="metric-label">可关联槽位</p><p class="metric-value">2</p><p class="metric-foot">写作子槽位</p></div>
<div class="metric"><p class="metric-label">影响作品</p><p class="metric-value">4</p><p class="metric-foot">1 个固定旧版</p></div>
<div class="metric"><p class="metric-label">失败率</p><p class="metric-value">2.1%</p><p class="metric-foot">近 7 天</p></div>
</div>
<div class="table-wrap">
<table>
<thead><tr><th>版本</th><th>状态</th><th>变更摘要</th><th>回退限制</th><th>操作</th></tr></thead>
<tbody>
<tr><td>v3</td><td><span class="badge ok">当前</span></td><td>加入慢节奏铺垫变量和章节目标引用</td><td>无</td><td><button class="button" type="button" disabled>当前启用</button></td></tr>
<tr><td>v2</td><td><span class="badge">历史</span></td><td>调低温度,限制直接引入新人物</td><td>可回退</td><td><button class="button warn" type="button">回退</button></td></tr>
<tr><td>v1</td><td><span class="badge">历史</span></td><td>初始版本</td><td>模板变量过期</td><td><button class="button" type="button" disabled>不可回退</button></td></tr>
</tbody>
</table>
</div>
</div>
</section>
<aside class="panel">
<div class="panel-head"><h3 class="panel-title">可用动作</h3><span class="badge">查询智能体可用动作</span></div>
<div class="panel-body stack">
<div class="status-box ok"><h3>可编辑</h3><p>所有者可以编辑新版本,已启用版本只能创建后续版本。</p></div>
<div class="status-box warn"><h3>危险操作影响</h3><p>停用会影响 4 个作品槽位;发布申请审核中时不能删除。</p></div>
<div class="mini-actions">
<button class="button" type="button">复制为个人副本</button>
<button class="button warn" type="button">归档</button>
<button class="button danger" type="button">停用</button>
</div>
</div>
</aside>
</div>
</section>
<section class="screen" data-screen="config">
<div class="page-head">
<div>
<div class="kicker">agent-config-editor</div>
<h2 class="page-title">配置型智能体编辑器</h2>
<p class="page-desc">编辑能力目标、Prompt 模板、模型档位、参数、上下文策略和输出合同。</p>
</div>
<div class="mini-actions">
<button class="button" type="button">保存草稿</button>
<button class="button" type="button">校验配置</button>
<button class="button primary" type="button">启用版本</button>
</div>
</div>
<div class="main-grid">
<section class="panel">
<div class="panel-head"><h3 class="panel-title">基础配置</h3><span class="badge warn">草稿</span></div>
<div class="panel-body stack">
<div class="split">
<div class="control"><label>名称</label><input value="暮色续写助手" /></div>
<div class="control"><label>能力目标</label><select><option>写作 Writing</option><option>分析 Analysis</option><option>检测 Detection</option></select></div>
</div>
<div class="control"><label>描述</label><input value="偏慢节奏、细节铺垫和角色内心描写的长篇续写智能体" /></div>
<div class="control"><label>Prompt 模板</label><textarea>你是当前作品的写作子智能体。只输出候选文本,不写入正文,不确认知识。
使用输入中的章节目标、当前正文、已确认作品知识和允许外部来源摘要。
避免直接引入未确认的新设定;如需新增事实,只在候选后附低置信知识草稿摘要。</textarea></div>
<div class="split">
<div class="control"><label>模型档位</label><select><option>创作增强档 · 默认</option><option>快速草稿档</option><option>长上下文档</option></select><p class="hint">不展示底层供应商路由。</p></div>
<div class="control"><label>输出类型</label><select><option>候选文本</option><option>评分与建议</option><option>摘要</option></select></div>
</div>
<div class="slider-row"><span>温度</span><div class="slider"></div><strong>0.72</strong></div>
<div class="slider-row"><span>重试上限</span><div class="slider" style="background:linear-gradient(90deg,var(--accent) 0 25%,var(--line) 25% 100%);"></div><strong>1</strong></div>
</div>
</section>
<aside class="panel">
<div class="panel-head"><h3 class="panel-title">校验结果</h3><span class="badge ok">可启用</span></div>
<div class="panel-body stack">
<div class="status-box ok"><h3>输出合同</h3><p>仅输出候选文本和低置信草稿摘要,不触达正文、知识库、审计或索引。</p></div>
<div class="status-box ok"><h3>上下文策略</h3><p>允许读取当前作品正文、章节目标、已确认作品知识和绑定来源摘要。</p></div>
<div class="status-box ok"><h3>Prompt 安全</h3><p>未发现密钥、外部凭据、系统指令覆盖或高风险注入样例。</p></div>
<div class="status-box warn"><h3>兼容槽位</h3><p>兼容“写作续写子槽位”;“局部润色子槽位”需试用后确认。</p></div>
<button class="button soft" type="button" data-go="compat">查看槽位合同</button>
</div>
</aside>
</div>
</section>
<section class="screen" data-screen="workflow">
<div class="page-head">
<div>
<div class="kicker">agent-workflow-editor</div>
<h2 class="page-title">工作流型智能体编辑器</h2>
<p class="page-desc">用受控步骤、授权工具和可用子智能体编排分析流程。</p>
</div>
<div class="mini-actions">
<button class="button" type="button">保存工作流草稿</button>
<button class="button" type="button">校验工作流</button>
<button class="button primary" type="button" data-go="test">试用</button>
</div>
</div>
<div class="main-grid">
<section class="panel">
<div class="panel-head"><h3 class="panel-title">流程步骤</h3><span class="badge warn">外发未授权 1 项</span></div>
<div class="panel-body workflow">
<article class="step-card">
<div class="step-num">1</div>
<div><h3>章节摘要</h3><p>输入当前章节正文片段;输出 500 字以内摘要。</p><div class="badge-row"><span class="badge ok">授权工具</span><span class="badge">超时 60s</span></div></div>
<button class="button" type="button">配置</button>
</article>
<article class="step-card">
<div class="step-num">2</div>
<div><h3>实体与事件提取</h3><p>调用可用子智能体,输出低置信知识草稿,不入库。</p><div class="badge-row"><span class="badge ok">输出合约</span><span class="badge blue">Analysis</span></div></div>
<button class="button" type="button">配置</button>
</article>
<article class="step-card">
<div class="step-num">3</div>
<div><h3>授权知识检索</h3><p>只读取当前作品绑定且允许用于检索的知识来源。</p><div class="badge-row"><span class="badge warn">工具授权待确认</span><span class="badge">失败降级</span></div></div>
<button class="button warn" type="button">处理</button>
</article>
<article class="step-card">
<div class="step-num">4</div>
<div><h3>结构化分析输出</h3><p>输出摘要、标签、风险说明和知识草稿引用。</p><div class="badge-row"><span class="badge ok">不写事实</span><span class="badge ok">不入 RAG</span></div></div>
<button class="button" type="button">配置</button>
</article>
</div>
</section>
<aside class="panel">
<div class="panel-head"><h3 class="panel-title">工具与外发边界</h3><span class="badge">查询工作流工具目录</span></div>
<div class="panel-body stack">
<div class="status-box ok"><h3>可用工具</h3><p>作品知识检索、图查询、结构化摘要、质量建议。</p></div>
<div class="status-box warn"><h3>工具授权范围</h3><p>必须限定动作、输入来源、输出去向、作品槽位作用域和外发范围。</p></div>
<div class="status-box danger"><h3>阻断项</h3><p>未托管 Webhook 凭据不可用;不能跨作品读取内容。</p></div>
<div class="status-box"><h3>失败策略</h3><p>工具撤权或输出不合约时进入失败反馈,不能扩大权限或补写事实。</p></div>
</div>
</aside>
</div>
</section>
<section class="screen" data-screen="test">
<div class="page-head">
<div>
<div class="kicker">agent-test-bench</div>
<h2 class="page-title">智能体试用与评估</h2>
<p class="page-desc">在沙盒上下文中测试输出、风险、授权和外发范围;试用不写作品事实。</p>
</div>
<div class="mini-actions">
<button class="button" type="button">停止运行</button>
<button class="button primary" type="button">运行试用</button>
</div>
</div>
<div class="main-grid">
<section class="panel">
<div class="panel-head"><h3 class="panel-title">测试上下文</h3><span class="badge">查询智能体测试上下文选项</span></div>
<div class="panel-body stack">
<div class="split">
<div class="control"><label>测试来源</label><select><option>作品样例:晨雾纪事 / 第 12 章</option><option>手动输入片段</option></select></div>
<div class="control"><label>预计用量</label><input value="约 2,800 tokens" /></div>
</div>
<div class="status-box warn"><h3>外发范围</h3><p>将发送正文片段、章节目标、已确认作品知识摘要和绑定知识来源摘要。</p></div>
<div class="prompt-preview">输入片段:
她在长桥尽头停下,第一次意识到雾不是天气,而是某种被反复擦除的记忆。
章节目标:
揭示主角对雾城规则的第一次主动怀疑。</div>
<div class="status-box"><h3>任务状态</h3><p>试用任务已完成;运行中任务可取消,失败或超时时显示可行动原因。</p></div>
<div class="output-preview">试用输出:
她没有立刻回头。桥下的水声像被压低的耳语,断断续续地念着她昨天才写进日记的名字。雾从栏杆缝隙里伸进来,轻轻擦过指节,带走了一点温度,也带走了她刚刚想起的那句话。</div>
</div>
</section>
<aside class="panel">
<div class="panel-head"><h3 class="panel-title">质量与失败原因</h3><span class="badge ok">成功</span></div>
<div class="panel-body stack">
<div class="metric"><p class="metric-label">角色声音</p><p class="metric-value">87</p><p class="metric-foot">非关键建议:对白可再克制</p></div>
<div class="metric"><p class="metric-label">设定一致性</p><p class="metric-value">92</p><p class="metric-foot">引用 3 条已确认作品知识</p></div>
<div class="status-box ok"><h3>输出合同</h3><p>仅返回候选文本;未写正文、规划或局域知识库。</p></div>
<div class="status-box"><h3>运行记录</h3><p>run_20260522_1840 · 归属到试用,不进入作品候选,无候选 ID。</p></div>
<div class="status-box warn"><h3>保存样例</h3><p>保存第 12 章片段需显式确认;默认只保留脱敏摘要和授权快照。</p></div>
</div>
</aside>
</div>
</section>
<section class="screen" data-screen="compat">
<div class="page-head">
<div>
<div class="kicker">agent-slot-compatibility</div>
<h2 class="page-title">可替换槽位与兼容性</h2>
<p class="page-desc">只展示开放槽位合同;保护节点只读,不提供修改入口。</p>
</div>
<button class="button" type="button" data-go="slot-selector">用于作品槽位</button>
</div>
<div class="main-grid">
<section class="panel">
<div class="panel-head"><h3 class="panel-title">开放槽位合同</h3><span class="badge">查询开放槽位合同</span></div>
<div class="panel-body stack">
<div class="slot-card selected">
<div><h3 class="item-title">写作续写子槽位</h3><p class="item-meta">允许输入:正文、章节目标、作品知识摘要;允许输出:候选文本。</p></div>
<span class="badge ok">兼容</span>
</div>
<div class="slot-card">
<div><h3 class="item-title">局部润色子槽位</h3><p class="item-meta">允许输出改写建议;需要保持文本块范围。</p></div>
<span class="badge warn">部分兼容</span>
</div>
<div class="slot-card">
<div><h3 class="item-title">实体提取子槽位</h3><p class="item-meta">允许输出低置信知识草稿;需要分析能力目标。</p></div>
<span class="badge danger">阻断</span>
</div>
<div class="slot-card">
<div><h3 class="item-title">系统级拆分切块</h3><p class="item-meta">保护节点,不开放给普通用户或市场智能体替换。</p></div>
<span class="badge">只读</span>
</div>
</div>
</section>
<aside class="panel">
<div class="panel-head"><h3 class="panel-title">兼容性结果</h3><span class="badge ok">可预检</span></div>
<div class="panel-body stack">
<div class="status-box ok"><h3>允许输入</h3><p>当前正文片段、章节目标、已确认作品知识、授权来源摘要。</p></div>
<div class="status-box ok"><h3>允许输出</h3><p>候选文本和可解释风险说明;不能输出可执行权限指令。</p></div>
<div class="status-box danger"><h3>不可替换保护节点</h3><p>输入输出合规、入 RAG、语义安全围栏、静态检查、审计、Shadow -> Canonical 规则。</p></div>
<button class="button primary" type="button" data-go="slot-selector">进入作品槽位预检</button>
</div>
</aside>
</div>
</section>
<section class="screen" data-screen="slot-selector">
<div class="page-head">
<div>
<div class="kicker">agent-work-slot-selector</div>
<h2 class="page-title">作品槽位候选选择与替换</h2>
<p class="page-desc">来自作品工作台 handoff:晨雾纪事 · 写作续写子槽位。</p>
</div>
<div class="mini-actions">
<button class="button ghost" type="button">返回作品</button>
<button class="button warn" type="button">回退系统默认</button>
<button class="button primary" type="button">确认替换</button>
</div>
</div>
<div class="main-grid">
<section class="panel">
<div class="panel-head"><h3 class="panel-title">候选智能体</h3><span class="badge">查询槽位兼容智能体</span></div>
<div class="panel-body stack">
<div class="status-box"><h3>当前绑定</h3><p>系统默认续写子智能体 v12;当前无作品级替换。</p></div>
<div class="slot-card selected">
<div><h3 class="item-title">暮色续写助手 v3</h3><p class="item-meta">我创建的 · 写作 · 兼容 · 最近试用成功</p></div>
<span class="badge ok">预检通过</span>
</div>
<div class="slot-card">
<div><h3 class="item-title">古风对白润色 v2.0</h3><p class="item-meta">市场已安装 · 来源已下架 · 需重验</p></div>
<span class="badge danger">不可替换</span>
</div>
<div class="slot-card">
<div><h3 class="item-title">章节节奏建议器 v1</h3><p class="item-meta">检测能力目标;输出为评分与建议,不是候选文本。</p></div>
<span class="badge danger">输出不合约</span>
</div>
</div>
</section>
<aside class="panel">
<div class="panel-head"><h3 class="panel-title">替换预检</h3><span class="badge ok">槽位替换预检</span></div>
<div class="panel-body stack">
<div class="detail-box"><h3>来自作品的替换会话</h3><p>来源为作品智能体关联页,替换范围已锁定;会话将在 04:32 后过期。</p></div>
<div class="status-box ok"><h3>替换预检已通过</h3><p>预检已绑定作品、槽位、目标版本、许可快照和槽位合同版本;确认后一次性消费。</p></div>
<div class="status-box ok"><h3>兼容</h3><p>能力目标、输出类型、工具授权和版本均符合写作续写子槽位合同。</p></div>
<div class="status-box warn"><h3>影响范围</h3><p>后续生成使用暮色续写助手 v3;已产生候选不受影响。</p></div>
<div class="status-box"><h3>失败回退</h3><p>运行失败时回到候选失败反馈;不会自动写正文或知识库。</p></div>
</div>
</aside>
</div>
</section>
<section class="screen" data-screen="installed">
<div class="page-head">
<div>
<div class="kicker">agent-installed-library</div>
<h2 class="page-title">已安装智能体与授权</h2>
<p class="page-desc">管理已授权、可安装、已安装、可升级和已下架智能体。</p>
</div>
<button class="button ghost" type="button">刷新授权状态</button>
</div>
<div class="main-grid">
<section class="panel">
<div class="panel-head"><h3 class="panel-title">安装与版本</h3><span class="badge">查询已安装智能体</span></div>
<div class="panel-body">
<div class="table-wrap">
<table>
<thead><tr><th>智能体</th><th>发布者</th><th>许可</th><th>当前版本</th><th>状态</th><th>操作</th></tr></thead>
<tbody>
<tr><td>角色声音检查器</td><td>河岸工坊</td><td>个人使用</td><td>v1.8</td><td><span class="badge warn">可升级 v2.0</span></td><td><button class="button">升级</button> <button class="button">固定</button></td></tr>
<tr><td>古风对白润色</td><td>长灯社</td><td>个人使用</td><td>v2.0</td><td><span class="badge danger">已下架</span></td><td><button class="button warn">停用安装</button></td></tr>
<tr><td>悬念维护助手</td><td>北窗</td><td>可试用</td><td>未安装</td><td><span class="badge ok">可安装</span></td><td><button class="button soft">安装</button></td></tr>
</tbody>
</table>
</div>
</div>
</section>
<aside class="panel">
<div class="panel-head"><h3 class="panel-title">许可详情</h3><span class="badge">License Snapshot</span></div>
<div class="panel-body stack">
<div class="detail-box"><h3>角色声音检查器</h3><p>允许试用、作品槽位关联;不允许查看完整 Prompt;不允许再发布。</p></div>
<div class="status-box"><h3>信任合同</h3><p>可读上下文:作品片段和角色摘要;工具:无写权限;外发:仅模型托管链路。</p></div>
<div class="status-box warn"><h3>升级影响</h3><p>升级默认安装版本不会静默改变已固定作品槽位。</p></div>
<div class="status-box danger"><h3>来源下架</h3><p>古风对白润色不能新安装、新绑定;已有绑定需要回退或固定旧许可快照。</p></div>
</div>
</aside>
</div>
</section>
<section class="screen" data-screen="publish">
<div class="page-head">
<div>
<div class="kicker">agent-publish-prep</div>
<h2 class="page-title">智能体发布准备</h2>
<p class="page-desc">准备市场发布申请;提交后进入市场审核和管理员治理链路。</p>
</div>
<div class="mini-actions">
<button class="button" type="button">保存草稿</button>
<button class="button" type="button">运行发布检查</button>
<button class="button primary" type="button">提交审核</button>
</div>
</div>
<div class="main-grid">
<section class="panel">
<div class="panel-head"><h3 class="panel-title">发布材料</h3><span class="badge warn">草稿</span></div>
<div class="panel-body stack">
<div class="split">
<div class="control"><label>待提交版本</label><select><option>暮色续写助手 v3</option><option>暮色续写助手 v2</option></select></div>
<div class="control"><label>许可类型</label><select><option>个人使用,不允许复制 Prompt</option><option>允许复制为个人副本</option></select></div>
</div>
<div class="control"><label>市场名称</label><input value="暮色续写助手:慢节奏长篇版" /></div>
<div class="control"><label>权利声明</label><textarea>本人拥有该智能体 Prompt、参数和说明的发布权;不包含第三方密钥、私有正文、审计日志或未脱敏数据。</textarea></div>
<div class="control"><label>禁止用途</label><input value="禁止再发布、训练复用、跨作品批量读取和绕过系统保护节点" /></div>
</div>
</section>
<aside class="panel">
<div class="panel-head"><h3 class="panel-title">发布检查</h3><span class="badge ok">可提交</span></div>
<div class="panel-body stack">
<div class="status-box ok"><h3>权利声明</h3><p>已填写,未检测到市场安装资产再发布。</p></div>
<div class="status-box ok"><h3>安全检查</h3><p>未发现密钥、Webhook、私有正文或系统配置。</p></div>
<div class="status-box"><h3>发布包分层</h3><p>展示层只含摘要;审核层读取必要 Prompt、工作流元数据和工具声明。</p></div>
<div class="status-box warn"><h3>兼容槽位</h3><p>展示 2 个兼容槽位;市场审核会再次校验。</p></div>
<div class="status-box"><h3>提交后</h3><p>当前页不处理审核、上架、下架或申诉结论。</p></div>
</div>
</aside>
</div>
</section>
<section class="screen" data-screen="records">
<div class="page-head">
<div>
<div class="kicker">agent-records-usage</div>
<h2 class="page-title">智能体运行与用量记录</h2>
<p class="page-desc">查看试用、作品槽位调用、失败原因和智能体维度用量摘要。</p>
</div>
<button class="button ghost" type="button">刷新记录</button>
</div>
<div class="grid-4">
<div class="metric"><p class="metric-label">调用次数</p><p class="metric-value">186</p><p class="metric-foot">试用 24 · 作品 162</p></div>
<div class="metric"><p class="metric-label">Token</p><p class="metric-value">42.8k</p><p class="metric-foot">待归属 1.2k</p></div>
<div class="metric"><p class="metric-label">失败</p><p class="metric-value">4</p><p class="metric-foot">2 次外发阻断</p></div>
<div class="metric"><p class="metric-label">授权异常</p><p class="metric-value">1</p><p class="metric-foot">来源已下架</p></div>
</div>
<div class="main-grid" style="margin-top:12px;">
<section class="panel">
<div class="panel-head"><h3 class="panel-title">运行记录</h3><span class="badge">查询智能体运行记录</span></div>
<div class="panel-body">
<div class="table-wrap">
<table>
<thead><tr><th>时间</th><th>来源</th><th>槽位 / 版本</th><th>状态</th><th>失败原因</th><th>Token</th><th>操作</th></tr></thead>
<tbody>
<tr><td>18:40</td><td>试用 · 第 12 章样例</td><td>v3</td><td><span class="badge ok">成功</span></td><td>无</td><td>2,816</td><td><button class="button">详情</button></td></tr>
<tr><td>17:55</td><td>作品 · 晨雾纪事</td><td>写作续写 · v3</td><td><span class="badge ok">成功</span></td><td>无</td><td>3,204</td><td><button class="button">跳转来源</button></td></tr>
<tr><td>15:21</td><td>作品 · 夜航线</td><td>局部润色 · v2</td><td><span class="badge danger">失败</span></td><td>授权快照需重验</td><td>0</td><td><button class="button warn">处理</button></td></tr>
<tr><td>11:08</td><td>发布者聚合</td><td>市场安装 · v1.8</td><td><span class="badge warn">待归属</span></td><td>调用日志延迟</td><td>1,216</td><td><button class="button" disabled>仅聚合</button></td></tr>
</tbody>
</table>
</div>
</div>
</section>
<aside class="panel">
<div class="panel-head"><h3 class="panel-title">运行详情</h3><span class="badge">使用者视图</span></div>
<div class="panel-body stack">
<div class="detail-box"><h3>run_20260522_1755</h3><p>作品槽位调用 · 晨雾纪事 · 写作续写子槽位 · v3。</p></div>
<div class="status-box ok"><h3>授权快照</h3><p>作品、槽位、智能体版本、知识来源均有效。</p></div>
<div class="status-box"><h3>可见范围</h3><p>使用者可看自己的作品调用;发布者只看达到阈值后的脱敏聚合,不看单次详情。</p></div>
<div class="status-box warn"><h3>用量归属</h3><p>账户级总账由个人中心承接;此处只展示智能体维度摘要。</p></div>
</div>
</aside>
</div>
</section>
</main>
</div>
<script>
const buttons = document.querySelectorAll("[data-go]");
const screens = document.querySelectorAll("[data-screen]");
const navButtons = document.querySelectorAll(".nav-button");
function showScreen(name) {
screens.forEach((screen) => {
screen.classList.toggle("active", screen.dataset.screen === name);
});
navButtons.forEach((button) => {
button.classList.toggle("active", button.dataset.go === name);
});
document.querySelector(".main").scrollTo({ top: 0, behavior: "smooth" });
}
buttons.forEach((button) => {
button.addEventListener("click", () => showScreen(button.dataset.go));
});
</script>
</body>
</html>