oh-my-muse/design-docs/prototypes/产品-02F-市场原型.html

1356 lines
56 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

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

<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>产品-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>