1356 lines
56 KiB
HTML
1356 lines
56 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>产品-02F 市场原型</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: 252px;
|
||
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;
|
||
}
|
||
|
||
button:focus-visible,
|
||
input:focus-visible,
|
||
select:focus-visible,
|
||
textarea:focus-visible {
|
||
outline: 3px solid rgba(35, 111, 97, 0.28);
|
||
outline-offset: 2px;
|
||
}
|
||
|
||
.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,
|
||
.filters {
|
||
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: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
gap: 16px;
|
||
margin-bottom: 14px;
|
||
}
|
||
|
||
.section-label {
|
||
color: var(--accent);
|
||
font-size: 11px;
|
||
font-weight: 850;
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.page-title {
|
||
margin: 2px 0 4px;
|
||
font-size: 26px;
|
||
line-height: 1.15;
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.page-desc {
|
||
max-width: 860px;
|
||
margin: 0;
|
||
color: var(--muted);
|
||
font-size: 13px;
|
||
}
|
||
|
||
.button {
|
||
min-height: 32px;
|
||
padding: 6px 10px;
|
||
border: 1px solid var(--line-strong);
|
||
border-radius: 7px;
|
||
background: var(--surface);
|
||
color: var(--ink);
|
||
font-size: 12px;
|
||
font-weight: 760;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.button:hover:not(:disabled) {
|
||
border-color: #92b9b2;
|
||
background: var(--surface-soft);
|
||
}
|
||
|
||
.button.primary {
|
||
border-color: var(--accent);
|
||
background: var(--accent);
|
||
color: #fff;
|
||
}
|
||
|
||
.button.soft {
|
||
border-color: #a5d5cb;
|
||
background: var(--accent-soft);
|
||
color: var(--accent-deep);
|
||
}
|
||
|
||
.button.warn {
|
||
border-color: #e4c57b;
|
||
background: var(--gold-soft);
|
||
color: var(--gold);
|
||
}
|
||
|
||
.button.danger {
|
||
border-color: #e5ada8;
|
||
background: var(--danger-soft);
|
||
color: var(--danger);
|
||
}
|
||
|
||
.button.ghost {
|
||
background: transparent;
|
||
}
|
||
|
||
.button:disabled {
|
||
cursor: not-allowed;
|
||
color: var(--weak);
|
||
background: var(--surface-strong);
|
||
border-color: var(--line);
|
||
}
|
||
|
||
.grid-4 {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||
gap: 12px;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.metric,
|
||
.panel,
|
||
.asset-card,
|
||
.topic-card,
|
||
.detail-box,
|
||
.status-box {
|
||
border: 1px solid var(--line);
|
||
border-radius: var(--radius);
|
||
background: var(--surface);
|
||
box-shadow: var(--shadow);
|
||
}
|
||
|
||
.metric {
|
||
padding: 12px;
|
||
}
|
||
|
||
.metric-label {
|
||
margin: 0;
|
||
color: var(--weak);
|
||
font-size: 11px;
|
||
font-weight: 800;
|
||
}
|
||
|
||
.metric-value {
|
||
margin: 4px 0 2px;
|
||
font-size: 26px;
|
||
font-weight: 900;
|
||
line-height: 1.1;
|
||
}
|
||
|
||
.metric-foot {
|
||
margin: 0;
|
||
color: var(--muted);
|
||
font-size: 12px;
|
||
}
|
||
|
||
.main-grid {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr) 360px;
|
||
gap: 12px;
|
||
align-items: start;
|
||
}
|
||
|
||
.two-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: 12px;
|
||
}
|
||
|
||
.three-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
gap: 12px;
|
||
}
|
||
|
||
.panel {
|
||
overflow: hidden;
|
||
}
|
||
|
||
.panel-head {
|
||
min-height: 44px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
padding: 10px 12px;
|
||
border-bottom: 1px solid var(--line);
|
||
background: var(--surface-soft);
|
||
}
|
||
|
||
.panel-title,
|
||
.item-title {
|
||
margin: 0;
|
||
font-size: 14px;
|
||
line-height: 1.25;
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.panel-body {
|
||
padding: 12px;
|
||
}
|
||
|
||
.stack {
|
||
display: grid;
|
||
gap: 10px;
|
||
}
|
||
|
||
.asset-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: 10px;
|
||
}
|
||
|
||
.asset-card,
|
||
.topic-card {
|
||
padding: 12px;
|
||
box-shadow: none;
|
||
}
|
||
|
||
.asset-card.selected {
|
||
border-color: #8fcfc4;
|
||
background: #fbfefd;
|
||
}
|
||
|
||
.asset-top {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
gap: 10px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.asset-icon {
|
||
width: 36px;
|
||
height: 36px;
|
||
display: grid;
|
||
place-items: center;
|
||
border-radius: 8px;
|
||
background: var(--accent-soft);
|
||
color: var(--accent-deep);
|
||
font-weight: 900;
|
||
flex: 0 0 auto;
|
||
}
|
||
|
||
.item-meta,
|
||
.detail-box p,
|
||
.status-box p {
|
||
margin: 4px 0 0;
|
||
color: var(--muted);
|
||
font-size: 12px;
|
||
}
|
||
|
||
.badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
min-height: 22px;
|
||
padding: 3px 7px;
|
||
border: 1px solid var(--line);
|
||
border-radius: 999px;
|
||
background: var(--surface-strong);
|
||
color: var(--muted);
|
||
font-size: 11px;
|
||
font-weight: 820;
|
||
line-height: 1.1;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.badge.ok {
|
||
border-color: #b7ddc5;
|
||
background: var(--ok-soft);
|
||
color: var(--ok);
|
||
}
|
||
|
||
.badge.warn {
|
||
border-color: #ead089;
|
||
background: var(--gold-soft);
|
||
color: var(--gold);
|
||
}
|
||
|
||
.badge.danger {
|
||
border-color: #e8b4b0;
|
||
background: var(--danger-soft);
|
||
color: var(--danger);
|
||
}
|
||
|
||
.badge.blue {
|
||
border-color: #b7cee2;
|
||
background: var(--blue-soft);
|
||
color: var(--blue);
|
||
}
|
||
|
||
.split {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: 10px;
|
||
}
|
||
|
||
.control {
|
||
display: grid;
|
||
gap: 5px;
|
||
}
|
||
|
||
.control label {
|
||
color: var(--muted);
|
||
font-size: 11px;
|
||
font-weight: 850;
|
||
}
|
||
|
||
input,
|
||
select,
|
||
textarea {
|
||
width: 100%;
|
||
min-height: 34px;
|
||
padding: 7px 9px;
|
||
border: 1px solid var(--line-strong);
|
||
border-radius: 7px;
|
||
background: var(--surface);
|
||
color: var(--ink);
|
||
}
|
||
|
||
textarea {
|
||
min-height: 92px;
|
||
resize: vertical;
|
||
}
|
||
|
||
.status-box,
|
||
.detail-box {
|
||
padding: 10px;
|
||
box-shadow: none;
|
||
}
|
||
|
||
.status-box.ok {
|
||
border-color: #b7ddc5;
|
||
background: var(--ok-soft);
|
||
}
|
||
|
||
.status-box.warn {
|
||
border-color: #ead089;
|
||
background: var(--gold-soft);
|
||
}
|
||
|
||
.status-box.danger {
|
||
border-color: #e8b4b0;
|
||
background: var(--danger-soft);
|
||
}
|
||
|
||
.status-box h3,
|
||
.detail-box h3 {
|
||
margin: 0;
|
||
font-size: 12px;
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.table-wrap {
|
||
overflow: auto;
|
||
border: 1px solid var(--line);
|
||
border-radius: var(--radius);
|
||
}
|
||
|
||
table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
min-width: 780px;
|
||
background: var(--surface);
|
||
}
|
||
|
||
th,
|
||
td {
|
||
padding: 9px 10px;
|
||
border-bottom: 1px solid var(--line);
|
||
text-align: left;
|
||
vertical-align: top;
|
||
font-size: 12px;
|
||
}
|
||
|
||
th {
|
||
color: var(--muted);
|
||
background: var(--surface-soft);
|
||
font-size: 11px;
|
||
font-weight: 850;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
tr:last-child td {
|
||
border-bottom: 0;
|
||
}
|
||
|
||
.timeline {
|
||
display: grid;
|
||
gap: 10px;
|
||
}
|
||
|
||
.timeline-item {
|
||
display: grid;
|
||
grid-template-columns: 86px minmax(0, 1fr) auto;
|
||
gap: 10px;
|
||
align-items: start;
|
||
padding: 10px;
|
||
border: 1px solid var(--line);
|
||
border-radius: 8px;
|
||
background: var(--surface);
|
||
}
|
||
|
||
.time {
|
||
color: var(--weak);
|
||
font-size: 11px;
|
||
font-weight: 850;
|
||
}
|
||
|
||
.toast {
|
||
display: none;
|
||
margin-bottom: 12px;
|
||
padding: 10px 12px;
|
||
border: 1px solid #b7ddc5;
|
||
border-radius: 8px;
|
||
background: var(--ok-soft);
|
||
color: var(--ok);
|
||
font-size: 12px;
|
||
font-weight: 760;
|
||
}
|
||
|
||
.toast.show {
|
||
display: block;
|
||
}
|
||
|
||
.muted {
|
||
color: var(--muted);
|
||
}
|
||
|
||
@media (max-width: 1180px) {
|
||
.main-grid,
|
||
.two-grid,
|
||
.three-grid,
|
||
.asset-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.grid-4 {
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
}
|
||
}
|
||
|
||
@media (max-width: 760px) {
|
||
.app {
|
||
display: block;
|
||
}
|
||
|
||
.topbar {
|
||
position: static;
|
||
}
|
||
|
||
.sidebar {
|
||
border-right: 0;
|
||
border-bottom: 1px solid var(--line);
|
||
}
|
||
|
||
.nav-section {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: 6px;
|
||
}
|
||
|
||
.nav-title {
|
||
grid-column: 1 / -1;
|
||
}
|
||
|
||
.page-head,
|
||
.topbar {
|
||
align-items: stretch;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.grid-4,
|
||
.split {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.timeline-item {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
/* 与 02B-02D 原型统一工作台密度,市场也保持工具页尺度。 */
|
||
:root {
|
||
--sidebar: 250px;
|
||
}
|
||
|
||
.page-head {
|
||
gap: 14px;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.section-label {
|
||
color: var(--muted);
|
||
}
|
||
|
||
.page-title {
|
||
font-size: 25px;
|
||
line-height: 1.18;
|
||
margin: 3px 0 5px;
|
||
}
|
||
|
||
.page-desc {
|
||
font-size: 12px;
|
||
}
|
||
|
||
.button {
|
||
min-height: 31px;
|
||
padding: 5px 10px;
|
||
}
|
||
|
||
.grid-4 {
|
||
gap: 10px;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.metric {
|
||
min-height: 74px;
|
||
padding: 10px;
|
||
}
|
||
|
||
.metric-value {
|
||
font-size: 22px;
|
||
}
|
||
|
||
.metric-foot {
|
||
font-size: 11px;
|
||
}
|
||
|
||
.main-grid {
|
||
grid-template-columns: minmax(0, 1fr) minmax(320px, 410px);
|
||
}
|
||
|
||
.panel-head {
|
||
min-height: 42px;
|
||
padding: 10px 12px;
|
||
}
|
||
|
||
.panel-title,
|
||
.item-title {
|
||
font-size: 13px;
|
||
}
|
||
|
||
.panel-body {
|
||
padding: 12px;
|
||
}
|
||
|
||
.asset-card,
|
||
.topic-card {
|
||
padding: 10px;
|
||
}
|
||
|
||
.asset-icon {
|
||
width: 32px;
|
||
height: 32px;
|
||
border-radius: 7px;
|
||
}
|
||
|
||
input,
|
||
select,
|
||
textarea {
|
||
font-size: 12px;
|
||
}
|
||
|
||
@media (max-width: 1180px) {
|
||
.main-grid,
|
||
.two-grid,
|
||
.three-grid,
|
||
.asset-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 760px) {
|
||
.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>发现、授权、安装、绑定、发布与治理结果展示</p>
|
||
</div>
|
||
</div>
|
||
<div class="top-actions">
|
||
<button class="button ghost" type="button" data-go="publisher">发布者中心</button>
|
||
<button class="button ghost" type="button" data-go="records">资产记录</button>
|
||
<span class="avatar">青</span>
|
||
</div>
|
||
</header>
|
||
|
||
<aside class="sidebar">
|
||
<section class="nav-section">
|
||
<p class="nav-title">发现</p>
|
||
<button class="nav-button active" type="button" data-go="discovery"><span class="nav-name">市场首页</span><span class="nav-status"></span></button>
|
||
<button class="nav-button" type="button" data-go="category"><span class="nav-name">分类推荐</span><span class="nav-status"></span></button>
|
||
</section>
|
||
<section class="nav-section">
|
||
<p class="nav-title">资产使用</p>
|
||
<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="acquire"><span class="nav-name">获取授权</span><span class="nav-status"></span></button>
|
||
<button class="nav-button" type="button" data-go="install"><span class="nav-name">安装与跳转授权</span><span class="nav-status"></span></button>
|
||
</section>
|
||
<section class="nav-section">
|
||
<p class="nav-title">发布者</p>
|
||
<button class="nav-button" type="button" data-go="publisher"><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>
|
||
</section>
|
||
<section class="nav-section">
|
||
<p class="nav-title">治理与记录</p>
|
||
<button class="nav-button" type="button" data-go="governance"><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>
|
||
</section>
|
||
</aside>
|
||
|
||
<main class="main">
|
||
<div id="toast" class="toast" role="status"></div>
|
||
|
||
<section class="screen active" data-screen="discovery">
|
||
<div class="page-head">
|
||
<div>
|
||
<div class="section-label">市场首页</div>
|
||
<h2 class="page-title">发现可授权的作品、智能体和知识库</h2>
|
||
<p class="page-desc">市场只负责资产发现、授权、安装和跨空间入口。获取不会自动安装,安装不会自动绑定作品,也不会写入作品正文、规划或知识。</p>
|
||
</div>
|
||
<div class="mini-actions">
|
||
<button class="button ghost" type="button" data-go="category">查看分类推荐</button>
|
||
<button class="button primary" type="button" data-go="publish">提交资产</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid-4">
|
||
<div class="metric"><p class="metric-label">可见资产</p><p class="metric-value">128</p><p class="metric-foot">作品 34 · 智能体 52 · 知识库 42</p></div>
|
||
<div class="metric"><p class="metric-label">已获取</p><p class="metric-value">18</p><p class="metric-foot">其中 9 个已安装</p></div>
|
||
<div class="metric"><p class="metric-label">需处理授权</p><p class="metric-value">2</p><p class="metric-foot">1 个来源下架 · 1 个需重验</p></div>
|
||
<div class="metric"><p class="metric-label">发布待办</p><p class="metric-value">3</p><p class="metric-foot">需补充 1 · 审核中 2</p></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="filters">
|
||
<input aria-label="搜索市场资产" value="角色 声音 长篇" />
|
||
<select aria-label="资产类型"><option>全部资产</option><option>作品资产</option><option>智能体资产</option><option>知识库资产</option></select>
|
||
<select aria-label="许可"><option>全部许可</option><option>个人使用</option><option>仅阅读</option><option>允许生成引用</option></select>
|
||
<button class="button soft" type="button" data-toast="已按当前筛选刷新市场资产列表。">搜索</button>
|
||
</div>
|
||
|
||
<div class="asset-grid">
|
||
<article class="asset-card selected">
|
||
<div class="asset-top">
|
||
<div class="row"><span class="asset-icon">智</span><div><h3 class="item-title">角色声音检查器</h3><p class="item-meta">智能体 · 河岸工坊 · v1.8 · 个人使用</p></div></div>
|
||
<span class="badge ok">可获取</span>
|
||
</div>
|
||
<p class="item-meta">检测角色对白偏移,输出风险说明和修正建议;不能替换系统保护节点。</p>
|
||
<div class="badge-row"><span class="badge blue">推荐:适合长篇</span><span class="badge">可安装到账户</span><span class="badge">需作品槽位关联</span></div>
|
||
<div class="mini-actions" style="margin-top:10px;"><button class="button primary" type="button" data-go="detail">查看详情</button><button class="button" type="button" data-go="acquire">获取授权</button></div>
|
||
</article>
|
||
|
||
<article class="asset-card">
|
||
<div class="asset-top">
|
||
<div class="row"><span class="asset-icon">知</span><div><h3 class="item-title">中世纪城邦资料库</h3><p class="item-meta">知识库 · 井台档案 · v3.2 · 允许生成引用</p></div></div>
|
||
<span class="badge warn">已获取未安装</span>
|
||
</div>
|
||
<p class="item-meta">包含城邦制度、商队路线、服饰和常见冲突资料。绑定后只作为授权来源参与检索或生成。</p>
|
||
<div class="badge-row"><span class="badge">可绑定作品</span><span class="badge">不写局域知识库</span></div>
|
||
<div class="mini-actions" style="margin-top:10px;"><button class="button" type="button" data-go="install">安装与跳转授权</button><button class="button ghost" type="button" data-go="records">记录</button></div>
|
||
</article>
|
||
|
||
<article class="asset-card">
|
||
<div class="asset-top">
|
||
<div class="row"><span class="asset-icon">作</span><div><h3 class="item-title">海雾港设定摘读</h3><p class="item-meta">作品资产 · 北窗 · v2.1 · 仅阅读授权</p></div></div>
|
||
<span class="badge ok">可阅读</span>
|
||
</div>
|
||
<p class="item-meta">公开片段和设定摘要。当前只支持阅读、收藏和授权记录,不写入作品。</p>
|
||
<div class="badge-row"><span class="badge">可阅读</span><span class="badge">可收藏</span><span class="badge warn">后续使用未开放</span></div>
|
||
<div class="mini-actions" style="margin-top:10px;"><button class="button" type="button" data-go="detail">阅读详情</button><button class="button" type="button" data-go="records">授权记录</button></div>
|
||
</article>
|
||
|
||
<article class="asset-card">
|
||
<div class="asset-top">
|
||
<div class="row"><span class="asset-icon">智</span><div><h3 class="item-title">古风对白润色</h3><p class="item-meta">智能体 · 长灯社 · v2.0</p></div></div>
|
||
<span class="badge danger">已下架</span>
|
||
</div>
|
||
<p class="item-meta">停止新获取和新安装;已有作品绑定需要回退或替换。</p>
|
||
<div class="badge-row"><span class="badge danger">不可获取</span><span class="badge warn">可查看治理结果</span></div>
|
||
<div class="mini-actions" style="margin-top:10px;"><button class="button danger" type="button" data-go="governance">处理影响</button><button class="button ghost" type="button" data-go="records">查看记录</button></div>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<aside class="panel">
|
||
<div class="panel-head"><h3 class="panel-title">我的市场状态</h3><span class="badge blue">账户视图</span></div>
|
||
<div class="panel-body stack">
|
||
<div class="status-box ok"><h3>已获取不等于已安装</h3><p>18 个资产已获取,其中 9 个安装到账户,4 个等待目标空间确认或已有目标空间记录。</p></div>
|
||
<div class="status-box warn"><h3>待处理来源</h3><p>古风对白润色已下架,晨雾纪事的写作槽位建议回退系统默认。</p></div>
|
||
<div class="status-box"><h3>发布者入口</h3><p>2 个申请审核中,1 个知识库发布需要补充权利说明。</p></div>
|
||
<button class="button soft" type="button" data-go="publisher">进入发布者中心</button>
|
||
</div>
|
||
</aside>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="screen" data-screen="category">
|
||
<div class="page-head">
|
||
<div>
|
||
<div class="section-label">分类推荐</div>
|
||
<h2 class="page-title">按创作场景组织资产和曝光结果</h2>
|
||
<p class="page-desc">这里展示用户可见的分类、专题、推荐理由和发布者可见的聚合曝光,不提供后台推荐配置或人工处置按钮。</p>
|
||
</div>
|
||
<button class="button ghost" type="button" data-go="discovery">返回市场首页</button>
|
||
</div>
|
||
|
||
<div class="three-grid">
|
||
<article class="topic-card"><div class="badge-row"><span class="badge blue">专题</span><span class="badge">写作增强</span></div><h3 class="item-title" style="margin-top:8px;">长篇角色一致性</h3><p class="item-meta">推荐检测型智能体、人物资料库和设定模板;适合 20 万字以上项目。</p><button class="button" type="button" data-go="detail" style="margin-top:10px;">查看推荐资产</button></article>
|
||
<article class="topic-card"><div class="badge-row"><span class="badge blue">分类</span><span class="badge">世界观资料</span></div><h3 class="item-title" style="margin-top:8px;">资料库与参考来源</h3><p class="item-meta">知识库资产只作为授权来源,绑定后仍不能自动写入作品事实。</p><button class="button" type="button" data-go="install" style="margin-top:10px;">选择知识库</button></article>
|
||
<article class="topic-card"><div class="badge-row"><span class="badge warn">发布者可见</span><span class="badge">曝光摘要</span></div><h3 class="item-title" style="margin-top:8px;">本周展示结果</h3><p class="item-meta">角色声音检查器进入 2 个专题位,点击区间 220-260,获取区间 18-24。</p><button class="button" type="button" data-go="publisher" style="margin-top:10px;">查看我的曝光</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 ok">用户可见</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>近期同类作品安装后回退率低</td><td><span class="badge ok">可获取</span></td><td><button class="button" type="button" data-go="detail">详情</button></td></tr>
|
||
<tr><td>资料库与参考来源</td><td>中世纪城邦资料库</td><td>知识库</td><td>资料处理完整,可用于生成引用</td><td><span class="badge warn">已获取未安装</span></td><td><button class="button" type="button" data-go="install">安装</button></td></tr>
|
||
<tr><td>古风对白</td><td>古风对白润色</td><td>智能体</td><td>治理结果已停止展示</td><td><span class="badge danger">已下架隐藏</span></td><td><button class="button danger" type="button" data-go="governance">处理</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"><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="detail">
|
||
<div class="page-head">
|
||
<div>
|
||
<div class="section-label">资产详情</div>
|
||
<h2 class="page-title">角色声音检查器</h2>
|
||
<p class="page-desc">检测角色对白偏移,输出风险说明和修正建议。安装到账户后,还需要在作品开放槽位中单独关联。</p>
|
||
</div>
|
||
<div class="mini-actions">
|
||
<button class="button ghost" type="button" data-go="discovery">返回发现</button>
|
||
<button class="button primary" type="button" data-go="acquire">获取授权</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="two-grid">
|
||
<div class="detail-box"><h3>资产类型</h3><p>智能体资产 · 检测能力 · 当前版本 v1.8</p></div>
|
||
<div class="detail-box"><h3>发布者</h3><p>河岸工坊 · 已完成发布者实名与权利声明</p></div>
|
||
<div class="detail-box"><h3>许可</h3><p>个人使用;允许安装到账户并关联自己的作品开放槽位。</p></div>
|
||
<div class="detail-box"><h3>禁止用途</h3><p>禁止再发布、批量读取他人作品、替换系统保护节点或用于训练复用。</p></div>
|
||
</div>
|
||
|
||
<div class="panel" style="box-shadow:none;">
|
||
<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></tr></thead>
|
||
<tbody>
|
||
<tr><td>v1.8</td><td>2026-05-16</td><td><span class="badge ok">当前版本</span></td><td>增加长篇角色关系上下文摘要,保持只读检测输出。</td></tr>
|
||
<tr><td>v1.7</td><td>2026-04-29</td><td><span class="badge">可固定旧版</span></td><td>已安装用户可保持旧版,不影响新获取。</td></tr>
|
||
<tr><td>治理状态</td><td>今天</td><td><span class="badge ok">正常</span></td><td>无下架、召回或申诉中的公开结果。</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<aside class="panel">
|
||
<div class="panel-head"><h3 class="panel-title">当前账户动作</h3><span class="badge warn">未获取</span></div>
|
||
<div class="panel-body stack">
|
||
<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>
|
||
<button class="button primary" type="button" data-go="acquire">获取授权</button>
|
||
<button class="button" type="button" data-go="install">查看安装流程</button>
|
||
<button class="button" type="button" data-go="records">资产记录</button>
|
||
<button class="button" type="button" disabled title="市场资产不能直接写入作品事实">直接写入作品事实</button>
|
||
</div>
|
||
</aside>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="screen" data-screen="acquire">
|
||
<div class="page-head">
|
||
<div>
|
||
<div class="section-label">获取授权</div>
|
||
<h2 class="page-title">确认许可后获取使用权</h2>
|
||
<p class="page-desc">本页只确认授权和外部权益引用,不处理站内支付。确认后资产进入账户可用状态,仍需单独安装或绑定。</p>
|
||
</div>
|
||
<button class="button ghost" type="button" data-go="detail">返回详情</button>
|
||
</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="split">
|
||
<div class="control"><label>资产</label><input value="角色声音检查器 v1.8" readonly /></div>
|
||
<div class="control"><label>许可</label><select><option>个人使用 · 不允许再发布</option><option>团队内部使用 · 需外部授权</option></select></div>
|
||
</div>
|
||
<div class="split">
|
||
<div class="control"><label>权益展示</label><input value="免费获取;高级额度由外部订单确认" readonly /></div>
|
||
<div class="control"><label>外部授权引用</label><input value="不需要外部订单" readonly /></div>
|
||
</div>
|
||
<div class="control"><label>必须确认的限制</label><textarea readonly>获取授权不表示拥有原资产;不能查看完整 Prompt;不能再发布、训练复用或绕过系统保护节点;安装和作品关联需要后续单独确认。</textarea></div>
|
||
<div class="status-box warn"><h3>获取后的事实变化</h3><p>只生成账户授权记录和资产版本快照;不会安装、不会绑定作品、不会写正文或知识。</p></div>
|
||
<div class="mini-actions">
|
||
<button class="button primary" type="button" data-go="install" data-toast="授权已获取:现在可以选择安装到账户,或稍后从资产详情继续。">确认获取授权</button>
|
||
<button class="button ghost" type="button" data-go="detail">取消</button>
|
||
</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 ok"><h3>知识库</h3><p>先安装到知识库工作台,再按用途绑定作品。</p></div>
|
||
<div class="status-box ok"><h3>作品资产</h3><p>当前可阅读、收藏、查看授权记录;后续使用需要作品工作台完成使用检查。</p></div>
|
||
<div class="status-box danger"><h3>禁止自动写入</h3><p>任何市场资产都不能因为获取而进入作品正式事实。</p></div>
|
||
</div>
|
||
</aside>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="screen" data-screen="install">
|
||
<div class="page-head">
|
||
<div>
|
||
<div class="section-label">安装与跳转授权</div>
|
||
<h2 class="page-title">把已授权资产放到正确的使用位置</h2>
|
||
<p class="page-desc">安装、关联和绑定分开执行。市场只生成跳转授权,最终结果回到目标空间确认。</p>
|
||
</div>
|
||
<button class="button ghost" type="button" data-go="detail">返回资产详情</button>
|
||
</div>
|
||
|
||
<div class="three-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="control"><label>安装版本</label><select><option>角色声音检查器 v1.8</option><option>固定旧版 v1.7</option></select></div>
|
||
<button class="button soft" type="button" data-toast="已安装到账户。下一步仍需选择作品槽位。">安装到账户</button>
|
||
<div class="control"><label>目标作品</label><select><option>晨雾纪事</option><option>夜航线</option></select></div>
|
||
<div class="control"><label>开放槽位</label><select><option>角色声音检测</option><option>写作续写建议</option></select></div>
|
||
<div class="status-box ok"><h3>关联预览</h3><p>只影响后续检测建议;已有候选和正文不变。</p></div>
|
||
<button class="button primary" type="button" data-toast="已生成跳转授权,请在目标作品空间完成槽位确认。">去作品确认关联</button>
|
||
</div>
|
||
</section>
|
||
|
||
<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="detail-box"><h3>中世纪城邦资料库 v3.2</h3><p>已安装到账户;允许检索和生成引用。</p></div>
|
||
<div class="control"><label>目标作品</label><select><option>晨雾纪事</option><option>海雾港</option></select></div>
|
||
<div class="control"><label>用途</label><select><option>可检索,可用于生成引用</option><option>只检索,不进入生成上下文</option></select></div>
|
||
<div class="status-box warn"><h3>绑定不是入库</h3><p>绑定只提供授权来源;与局域知识冲突时不能覆盖作品知识。</p></div>
|
||
<button class="button primary" type="button" data-toast="已生成跳转授权,请在作品知识来源中确认绑定。">去作品确认绑定</button>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="panel">
|
||
<div class="panel-head"><h3 class="panel-title">作品资产当前可用</h3><span class="badge blue">仅阅读</span></div>
|
||
<div class="panel-body stack">
|
||
<div class="detail-box"><h3>海雾港设定摘读 v2.1</h3><p>允许阅读、收藏和查看授权记录;后续使用需作品工作台补齐使用检查。</p></div>
|
||
<button class="button soft" type="button" data-toast="已打开阅读摘要,作品内容不会改变。">阅读摘要</button>
|
||
<button class="button" type="button" data-toast="已收藏到市场资产记录。">收藏</button>
|
||
<button class="button ghost" type="button" data-go="records">查看授权记录</button>
|
||
<div class="status-box danger"><h3>后续使用未开放</h3><p>模板化、参考写入和生成上下文绑定需要作品工作台补齐检查后才能使用。</p></div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<div class="panel" style="margin-top:12px;">
|
||
<div class="panel-head"><h3 class="panel-title">受影响资产处理</h3><span class="badge danger">需要处理</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>古风对白润色 v2.0</td><td><span class="badge danger">已下架</span></td><td>停止新安装和新绑定;已有绑定建议回退</td><td>回退系统默认或选择替代智能体</td><td><button class="button danger" type="button" data-go="governance">处理</button></td></tr>
|
||
<tr><td>城邦资料库 v3.1</td><td><span class="badge warn">可升级</span></td><td>新版本更新地名冲突说明</td><td>查看差异后升级或固定旧版</td><td><button class="button" type="button" data-toast="已固定旧版,现有作品绑定保持不变。">固定旧版</button></td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="screen" data-screen="publisher">
|
||
<div class="page-head">
|
||
<div>
|
||
<div class="section-label">发布者中心</div>
|
||
<h2 class="page-title">我的市场资产和提交状态</h2>
|
||
<p class="page-desc">发布者在这里查看草稿、审核、上架、下架、召回、申诉和聚合曝光结果;审核和处置由管理员控制台完成。</p>
|
||
</div>
|
||
<button class="button primary" type="button" data-go="publish">提交新资产</button>
|
||
</div>
|
||
|
||
<div class="grid-4">
|
||
<div class="metric"><p class="metric-label">已上架</p><p class="metric-value">7</p><p class="metric-foot">智能体 4 · 知识库 2 · 作品 1</p></div>
|
||
<div class="metric"><p class="metric-label">审核中</p><p class="metric-value">2</p><p class="metric-foot">平均等待 18 小时</p></div>
|
||
<div class="metric"><p class="metric-label">需补充</p><p class="metric-value">1</p><p class="metric-foot">权利声明缺少来源说明</p></div>
|
||
<div class="metric"><p class="metric-label">本周获取</p><p class="metric-value">42</p><p class="metric-foot">聚合区间,非结算口径</p></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">
|
||
<div class="table-wrap">
|
||
<table>
|
||
<thead><tr><th>资产</th><th>类型</th><th>版本</th><th>状态</th><th>曝光 / 获取</th><th>下一步</th><th>操作</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>角色声音检查器</td><td>智能体</td><td>v1.8</td><td><span class="badge ok">已上架</span></td><td>曝光 220-260 · 获取 18-24</td><td>观察反馈,可提交新版本</td><td><button class="button" type="button" data-go="records">记录</button></td></tr>
|
||
<tr><td>北境商队资料库</td><td>知识库</td><td>v1.0</td><td><span class="badge warn">需补充</span></td><td>未展示</td><td>补充资料来源权利</td><td><button class="button warn" type="button" data-go="publish">补充材料</button></td></tr>
|
||
<tr><td>慢节奏续写助手</td><td>智能体</td><td>v3.0</td><td><span class="badge blue">审核中</span></td><td>未展示</td><td>等待审核结果</td><td><button class="button" type="button" data-go="governance">进度</button></td></tr>
|
||
<tr><td>旧版对白修饰包</td><td>智能体</td><td>v2.0</td><td><span class="badge danger">已下架</span></td><td>已隐藏</td><td>查看原因或申诉</td><td><button class="button danger" type="button" data-go="governance">申诉</button></td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<aside class="panel">
|
||
<div class="panel-head"><h3 class="panel-title">待处理事项</h3><span class="badge warn">3 项</span></div>
|
||
<div class="panel-body stack">
|
||
<div class="status-box warn"><h3>补充材料</h3><p>北境商队资料库需要补充资料来源和授权说明。</p></div>
|
||
<div class="status-box"><h3>审核中</h3><p>慢节奏续写助手已提交 16 小时,当前只能查看进度。</p></div>
|
||
<div class="status-box danger"><h3>下架结果</h3><p>旧版对白修饰包因权利争议停止展示,可在 5 天内申诉。</p></div>
|
||
<button class="button soft" type="button" data-go="governance">查看治理结果</button>
|
||
</div>
|
||
</aside>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="screen" data-screen="publish">
|
||
<div class="page-head">
|
||
<div>
|
||
<div class="section-label">发布提交</div>
|
||
<h2 class="page-title">准备市场上架申请</h2>
|
||
<p class="page-desc">发布提交只整理材料、运行检查并提交审核。通过、驳回、下架和召回结论来自管理员治理链路。</p>
|
||
</div>
|
||
<button class="button ghost" type="button" data-go="publisher">返回提交状态</button>
|
||
</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>知识库资产</option><option>智能体资产</option><option>作品资产</option></select></div>
|
||
<div class="control"><label>待发布版本</label><select><option>北境商队资料库 v1.0</option><option>角色声音检查器 v1.9 草稿</option></select></div>
|
||
</div>
|
||
<div class="split">
|
||
<div class="control"><label>市场名称</label><input value="北境商队资料库:城市与路线" /></div>
|
||
<div class="control"><label>分类</label><select><option>世界观资料 / 城邦与贸易</option><option>写作增强 / 长篇一致性</option></select></div>
|
||
</div>
|
||
<div class="control"><label>许可与权益展示</label><textarea>允许个人作品绑定为检索来源和生成引用;不允许再发布、训练复用、批量导出原始资料。权益展示:免费获取,外部订单可解锁团队使用。</textarea></div>
|
||
<div class="control"><label>权利声明</label><textarea>发布者拥有资料整理、摘要和结构化标签的发布权;引用的公共资料已记录来源,不包含未授权第三方全文、用户隐私、密钥、审计日志或系统配置。</textarea></div>
|
||
<div class="mini-actions">
|
||
<button class="button" type="button" data-toast="发布草稿已保存。">保存草稿</button>
|
||
<button class="button soft" type="button" data-toast="发布检查完成:仍需补充 1 条来源说明。">运行发布检查</button>
|
||
<button class="button primary" type="button" disabled title="发布检查未通过,不能提交审核。">提交审核</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<aside class="panel">
|
||
<div class="panel-head"><h3 class="panel-title">发布检查</h3><span class="badge warn">需补充</span></div>
|
||
<div class="panel-body stack">
|
||
<div class="status-box ok"><h3>资产版本</h3><p>已固定为 v1.0;审核和授权都以该版本为准。</p></div>
|
||
<div class="status-box ok"><h3>隐私与密钥</h3><p>未发现密钥、私有作品正文、审计日志或系统配置。</p></div>
|
||
<div class="status-box warn"><h3>资料来源</h3><p>12 条资料缺少可公开来源说明,需要补充后才能提交。</p></div>
|
||
<div class="status-box danger"><h3>禁止一键发布局域知识</h3><p>作品内局域知识库不能直接复制上架;必须是独立知识资产。</p></div>
|
||
<div class="status-box danger"><h3>作品资产使用声明</h3><p>未完成作品工作台检查前,只能发布为阅读、收藏和授权记录,不允许声明模板化或参考写入。</p></div>
|
||
<button class="button warn" type="button" data-toast="已定位到缺少来源说明的资料条目。">补充来源说明</button>
|
||
</div>
|
||
</aside>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="screen" data-screen="governance">
|
||
<div class="page-head">
|
||
<div>
|
||
<div class="section-label">治理结果与申诉</div>
|
||
<h2 class="page-title">查看审核、下架、召回和申诉影响</h2>
|
||
<p class="page-desc">市场只展示结果、影响和申诉入口,不提供管理员审核、下架或召回操作。</p>
|
||
</div>
|
||
<button class="button ghost" type="button" data-go="publisher">返回发布者中心</button>
|
||
</div>
|
||
|
||
<div class="main-grid">
|
||
<section class="panel">
|
||
<div class="panel-head"><h3 class="panel-title">古风对白润色 v2.0</h3><span class="badge danger">已下架</span></div>
|
||
<div class="panel-body stack">
|
||
<div class="status-box danger"><h3>结果摘要</h3><p>因权利争议停止市场展示、新获取、新安装和新绑定。已有安装保留记录,但后续生成建议回退或替换。</p></div>
|
||
<div class="table-wrap">
|
||
<table>
|
||
<thead><tr><th>影响项</th><th>当前处理</th><th>用户可行动作</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>新获取</td><td><span class="badge danger">停止</span></td><td>不能获取,查看替代资产</td></tr>
|
||
<tr><td>新安装</td><td><span class="badge danger">停止</span></td><td>已授权但未安装用户不能继续安装</td></tr>
|
||
<tr><td>新绑定 / 新关联</td><td><span class="badge danger">停止</span></td><td>选择其他智能体或回退系统默认</td></tr>
|
||
<tr><td>既有作品绑定</td><td><span class="badge warn">需处理</span></td><td>停用安装、替换绑定或申诉</td></tr>
|
||
<tr><td>已确认作品事实</td><td><span class="badge">不自动删除</span></td><td>后续合规流程另行处理</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div class="mini-actions">
|
||
<button class="button danger" type="button" data-toast="已停用该资产安装,后续生成不会再使用。">停用安装</button>
|
||
<button class="button warn" type="button" data-go="install">替换绑定</button>
|
||
<button class="button soft" type="button" data-toast="申诉已提交,处理结果会更新在本页。">提交申诉</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<aside class="panel">
|
||
<div class="panel-head"><h3 class="panel-title">申诉材料</h3><span class="badge warn">5 天内</span></div>
|
||
<div class="panel-body stack">
|
||
<div class="control"><label>申诉对象</label><input value="旧版对白修饰包 v2.0 下架结果" readonly /></div>
|
||
<div class="control"><label>申诉理由</label><textarea>补充权利来源、授权证明和替代说明。请勿上传用户私有正文、密钥或无关审计材料。</textarea></div>
|
||
<div class="status-box"><h3>处理进度</h3><p>提交后由市场治理人员处理;本页只显示进度和结果。</p></div>
|
||
<div class="status-box ok"><h3>审核通过示例</h3><p>慢节奏续写助手 v3.0 已通过安全和权利检查,等待上架排程。</p></div>
|
||
<button class="button primary" type="button" data-toast="申诉材料已补充。">补充材料</button>
|
||
</div>
|
||
</aside>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="screen" data-screen="records">
|
||
<div class="page-head">
|
||
<div>
|
||
<div class="section-label">资产记录</div>
|
||
<h2 class="page-title">资产级授权、安装、绑定、发布和曝光记录</h2>
|
||
<p class="page-desc">这里围绕单个资产展示记录;账户总账、购买记录总览和用量汇总由个人中心承接。</p>
|
||
</div>
|
||
<button class="button ghost" type="button" data-go="detail">返回资产详情</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="filters">
|
||
<select aria-label="记录类型"><option>全部记录</option><option>授权</option><option>安装</option><option>绑定</option><option>发布</option><option>治理</option><option>曝光</option></select>
|
||
<select aria-label="角色视图"><option>我的使用记录</option><option>发布者聚合</option></select>
|
||
<button class="button" type="button" data-toast="资产记录已刷新。">刷新</button>
|
||
</div>
|
||
<div class="timeline">
|
||
<div class="timeline-item"><span class="time">今天 18:42</span><div><h3 class="item-title">安装到账户</h3><p class="item-meta">版本 v1.8;安装后尚未自动关联作品。</p></div><span class="badge ok">成功</span></div>
|
||
<div class="timeline-item"><span class="time">今天 18:45</span><div><h3 class="item-title">跳转授权已生成</h3><p class="item-meta">晨雾纪事 · 角色声音检测;需在目标作品空间确认。</p></div><span class="badge warn">待确认</span></div>
|
||
<div class="timeline-item"><span class="time">昨天 20:18</span><div><h3 class="item-title">发布者曝光摘要</h3><p class="item-meta">进入“长篇角色一致性”专题;曝光区间 220-260。</p></div><span class="badge blue">聚合</span></div>
|
||
<div class="timeline-item"><span class="time">05-16</span><div><h3 class="item-title">版本上架</h3><p class="item-meta">v1.8 审核通过并上架,旧版可固定使用。</p></div><span class="badge ok">已上架</span></div>
|
||
<div class="timeline-item"><span class="time">05-12</span><div><h3 class="item-title">外部授权引用</h3><p class="item-meta">团队使用权益来自外部订单;本市场只保留引用状态。</p></div><span class="badge warn">外部</span></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<aside class="panel">
|
||
<div class="panel-head"><h3 class="panel-title">记录边界</h3><span class="badge">02G 承接总览</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"><h3>部分记录脱敏</h3><p>发布者只能看到聚合曝光;使用者只能看到自己的授权和作品绑定。</p></div>
|
||
<button class="button soft" type="button" data-toast="将跳转到个人中心的市场授权总览;该页面由 02G 承接。">去个人中心总览</button>
|
||
<button class="button" type="button" data-go="governance">查看治理结果</button>
|
||
</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");
|
||
const toast = document.getElementById("toast");
|
||
|
||
// 切换原型页面,模拟左侧导航和跨空间返回后的刷新位置。
|
||
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" });
|
||
}
|
||
|
||
// 展示轻量操作反馈,用于表达获取、安装、绑定、申诉等动作的成功状态。
|
||
function showToast(message) {
|
||
if (!message) return;
|
||
toast.textContent = message;
|
||
toast.classList.add("show");
|
||
window.clearTimeout(showToast.timer);
|
||
showToast.timer = window.setTimeout(() => {
|
||
toast.classList.remove("show");
|
||
}, 3600);
|
||
}
|
||
|
||
buttons.forEach((button) => {
|
||
button.addEventListener("click", () => {
|
||
showToast(button.dataset.toast);
|
||
showScreen(button.dataset.go);
|
||
});
|
||
});
|
||
|
||
document.querySelectorAll("[data-toast]:not([data-go])").forEach((button) => {
|
||
button.addEventListener("click", () => showToast(button.dataset.toast));
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|