1492 lines
58 KiB
HTML
1492 lines
58 KiB
HTML
<!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>
|