feat: enhance website flow and user workbench
This commit is contained in:
boos
@@ -10817,6 +10817,85 @@ textarea {
|
|||||||
gap: 18px;
|
gap: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.user-dashboard-workbench {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(0, 1fr) minmax(340px, 0.82fr);
|
||||||
|
gap: 14px;
|
||||||
|
margin-bottom: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-dashboard-suggestion,
|
||||||
|
.user-dashboard-workbench-metrics {
|
||||||
|
border: 1px solid var(--console-line);
|
||||||
|
border-radius: 18px;
|
||||||
|
background:
|
||||||
|
linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 8%, var(--color-bg-card)), color-mix(in srgb, var(--color-bg-card) 82%, var(--color-bg)));
|
||||||
|
box-shadow: var(--shadow-card);
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-dashboard-suggestion {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(0, 1fr) auto;
|
||||||
|
gap: 6px 18px;
|
||||||
|
align-items: center;
|
||||||
|
padding: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-dashboard-suggestion span,
|
||||||
|
.user-dashboard-workbench-metrics span {
|
||||||
|
color: var(--color-text-muted);
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 760;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-dashboard-suggestion strong {
|
||||||
|
color: var(--color-text-primary);
|
||||||
|
font-size: 20px;
|
||||||
|
letter-spacing: -0.03em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-dashboard-suggestion p {
|
||||||
|
max-width: 68ch;
|
||||||
|
margin: 0;
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-dashboard-suggestion .btn {
|
||||||
|
grid-row: 1 / span 3;
|
||||||
|
grid-column: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-dashboard-workbench-metrics {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
|
gap: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-dashboard-workbench-metrics>div {
|
||||||
|
display: grid;
|
||||||
|
align-content: center;
|
||||||
|
gap: 6px;
|
||||||
|
min-width: 0;
|
||||||
|
min-height: 92px;
|
||||||
|
padding: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-dashboard-workbench-metrics>div+div {
|
||||||
|
border-left: 1px solid var(--console-line);
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-dashboard-workbench-metrics strong {
|
||||||
|
overflow: hidden;
|
||||||
|
color: var(--color-text-primary);
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 800;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
.user-dashboard-stat-grid {
|
.user-dashboard-stat-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
@@ -10917,6 +10996,8 @@ textarea {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.user-dashboard-entry {
|
.user-dashboard-entry {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
min-height: 108px;
|
min-height: 108px;
|
||||||
display: grid;
|
display: grid;
|
||||||
align-content: center;
|
align-content: center;
|
||||||
@@ -10932,6 +11013,34 @@ textarea {
|
|||||||
transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.12s ease;
|
transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.12s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.user-dashboard-entry::after {
|
||||||
|
position: absolute;
|
||||||
|
inset: auto 12px 12px auto;
|
||||||
|
width: 44px;
|
||||||
|
height: 44px;
|
||||||
|
border-radius: 999px;
|
||||||
|
content: "";
|
||||||
|
background: color-mix(in srgb, var(--color-primary) 10%, transparent);
|
||||||
|
filter: blur(4px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-dashboard-entry[data-kind="video"]::after {
|
||||||
|
background: color-mix(in srgb, #14b8a6 14%, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-dashboard-entry[data-kind="image"]::after {
|
||||||
|
background: color-mix(in srgb, var(--color-success) 13%, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-dashboard-entry[data-kind="workspace"]::after {
|
||||||
|
background: color-mix(in srgb, var(--color-warning) 13%, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-dashboard-entry>* {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
.user-dashboard-entry svg {
|
.user-dashboard-entry svg {
|
||||||
width: 22px;
|
width: 22px;
|
||||||
height: 22px;
|
height: 22px;
|
||||||
@@ -11054,6 +11163,10 @@ textarea {
|
|||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.user-dashboard-workbench {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
.user-dashboard-grid {
|
.user-dashboard-grid {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
}
|
}
|
||||||
@@ -11062,10 +11175,26 @@ textarea {
|
|||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.user-dashboard-stat-grid,
|
.user-dashboard-stat-grid,
|
||||||
.user-dashboard-entry-grid,
|
.user-dashboard-entry-grid,
|
||||||
|
.user-dashboard-workbench-metrics,
|
||||||
.user-dashboard-profile-actions {
|
.user-dashboard-profile-actions {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.user-dashboard-suggestion {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-dashboard-suggestion .btn {
|
||||||
|
grid-row: auto;
|
||||||
|
grid-column: auto;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-dashboard-workbench-metrics>div+div {
|
||||||
|
border-top: 1px solid var(--console-line);
|
||||||
|
border-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.user-dashboard-hero,
|
.user-dashboard-hero,
|
||||||
.user-dashboard-header {
|
.user-dashboard-header {
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
|
|||||||
@@ -139,6 +139,63 @@ export default function UserDashboard({ onLogout }: { onLogout?: () => void }) {
|
|||||||
const activeKeyCount = keys.filter((key) => key.enabled).length;
|
const activeKeyCount = keys.filter((key) => key.enabled).length;
|
||||||
const userInitial = (profile.username || profile.email || 'U').trim().slice(0, 1).toUpperCase();
|
const userInitial = (profile.username || profile.email || 'U').trim().slice(0, 1).toUpperCase();
|
||||||
const lastActivityLabel = recentLogs[0] ? formatDateLabel(recentLogs[0].created_at) : '暂无调用';
|
const lastActivityLabel = recentLogs[0] ? formatDateLabel(recentLogs[0].created_at) : '暂无调用';
|
||||||
|
const primarySuggestion = activeKeyCount === 0
|
||||||
|
? {
|
||||||
|
title: '先创建一个 API 密钥',
|
||||||
|
body: '密钥创建后，工作流、生图助手和外部客户端都会进入同一套日志与计费。',
|
||||||
|
action: '管理密钥',
|
||||||
|
to: '/user/dashboard/keys',
|
||||||
|
}
|
||||||
|
: recentLogs.length === 0
|
||||||
|
? {
|
||||||
|
title: '从一次创作任务开始',
|
||||||
|
body: '试试生图助手或工作流，产出会自动进入工作空间。',
|
||||||
|
action: '打开生图助手',
|
||||||
|
to: '/user/picture-agent',
|
||||||
|
}
|
||||||
|
: failedRequests > 0
|
||||||
|
? {
|
||||||
|
title: '检查失败调用',
|
||||||
|
body: '最近存在失败请求，进入使用记录可以查看模型、延迟和错误原因。',
|
||||||
|
action: '查看使用记录',
|
||||||
|
to: '/user/usage',
|
||||||
|
}
|
||||||
|
: {
|
||||||
|
title: '继续扩展你的创作链路',
|
||||||
|
body: '把现有模型调用升级为工作流，复用提示词、图片、视频和归档产出。',
|
||||||
|
action: '打开工作流',
|
||||||
|
to: '/user/workflows',
|
||||||
|
};
|
||||||
|
const creationActions = [
|
||||||
|
{
|
||||||
|
label: '工作流',
|
||||||
|
note: '画布编排图片、视频与 API 节点',
|
||||||
|
to: '/user/workflows',
|
||||||
|
kind: 'workflow',
|
||||||
|
svg: <svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 6h5v5H4zM15 4h5v5h-5zM15 15h5v5h-5zM9 8h6M17.5 9v6M9 11l6 6" /></svg>,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '视频助手',
|
||||||
|
note: '脚本拆解、镜头规划、素材生成',
|
||||||
|
to: '/user/comfyui-agent',
|
||||||
|
kind: 'video',
|
||||||
|
svg: <svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" /><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '生图助手',
|
||||||
|
note: '使用生图模型并自动归档产出',
|
||||||
|
to: '/user/picture-agent',
|
||||||
|
kind: 'image',
|
||||||
|
svg: <svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-5-6h.01M5 4h14a2 2 0 012 2v12a2 2 0 01-2 2H5a2 2 0 01-2-2V6a2 2 0 012-2z" /></svg>,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '工作空间',
|
||||||
|
note: '查看已生成图片、视频与音频',
|
||||||
|
to: '/user/workspace',
|
||||||
|
kind: 'workspace',
|
||||||
|
svg: <svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 7a2 2 0 012-2h4l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H6a2 2 0 01-2-2V7z" /><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M8 13h8M8 16h5" /></svg>,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="user-dashboard-page animate-fade-in">
|
<div className="user-dashboard-page animate-fade-in">
|
||||||
@@ -172,6 +229,29 @@ export default function UserDashboard({ onLogout }: { onLogout?: () => void }) {
|
|||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
<section className="user-dashboard-workbench">
|
||||||
|
<div className="user-dashboard-suggestion">
|
||||||
|
<span>下一步</span>
|
||||||
|
<strong>{primarySuggestion.title}</strong>
|
||||||
|
<p>{primarySuggestion.body}</p>
|
||||||
|
<Link to={primarySuggestion.to} className="btn btn-primary">{primarySuggestion.action}</Link>
|
||||||
|
</div>
|
||||||
|
<div className="user-dashboard-workbench-metrics">
|
||||||
|
<div>
|
||||||
|
<span>今日入口</span>
|
||||||
|
<strong>创作工作台</strong>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span>产出归档</span>
|
||||||
|
<strong>Workspace</strong>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span>计费口径</span>
|
||||||
|
<strong>Token + Media</strong>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<div className="user-dashboard-stat-grid">
|
<div className="user-dashboard-stat-grid">
|
||||||
<div className="card user-dashboard-stat" data-tone="volume">
|
<div className="card user-dashboard-stat" data-tone="volume">
|
||||||
<div className="user-dashboard-stat-label">总请求次数</div>
|
<div className="user-dashboard-stat-label">总请求次数</div>
|
||||||
@@ -200,26 +280,18 @@ export default function UserDashboard({ onLogout }: { onLogout?: () => void }) {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="user-dashboard-entry-grid">
|
<div className="user-dashboard-entry-grid">
|
||||||
<Link to="/user/workflows" className="user-dashboard-entry">
|
{creationActions.map((action) => (
|
||||||
<svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 6h5v5H4zM15 4h5v5h-5zM15 15h5v5h-5zM9 8h6M17.5 9v6M9 11l6 6" /></svg>
|
<Link
|
||||||
<span>工作流</span>
|
key={action.to}
|
||||||
<small>画布编排图片、视频与 API 节点</small>
|
to={action.to}
|
||||||
</Link>
|
className="user-dashboard-entry"
|
||||||
<Link to="/user/comfyui-agent" className="user-dashboard-entry">
|
data-kind={action.kind}
|
||||||
<svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" /><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
|
>
|
||||||
<span>视频助手</span>
|
{action.svg}
|
||||||
<small>脚本拆解、镜头规划、素材生成</small>
|
<span>{action.label}</span>
|
||||||
</Link>
|
<small>{action.note}</small>
|
||||||
<Link to="/user/picture-agent" className="user-dashboard-entry">
|
</Link>
|
||||||
<svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-5-6h.01M5 4h14a2 2 0 012 2v12a2 2 0 01-2 2H5a2 2 0 01-2-2V6a2 2 0 012-2z" /></svg>
|
))}
|
||||||
<span>生图助手</span>
|
|
||||||
<small>使用生图模型并自动归档产出</small>
|
|
||||||
</Link>
|
|
||||||
<Link to="/user/workspace" className="user-dashboard-entry">
|
|
||||||
<svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 7a2 2 0 012-2h4l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H6a2 2 0 01-2-2V7z" /><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M8 13h8M8 16h5" /></svg>
|
|
||||||
<span>工作空间</span>
|
|
||||||
<small>查看已生成图片、视频与音频</small>
|
|
||||||
</Link>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|||||||
+206
-1
@@ -358,6 +358,7 @@ a {
|
|||||||
.console-preview-section,
|
.console-preview-section,
|
||||||
.factory-section,
|
.factory-section,
|
||||||
.studio-section,
|
.studio-section,
|
||||||
|
.pipeline-section,
|
||||||
.control-section,
|
.control-section,
|
||||||
.deploy-section,
|
.deploy-section,
|
||||||
.final-section {
|
.final-section {
|
||||||
@@ -1103,6 +1104,7 @@ a {
|
|||||||
.ops-section,
|
.ops-section,
|
||||||
.factory-section,
|
.factory-section,
|
||||||
.studio-section,
|
.studio-section,
|
||||||
|
.pipeline-section,
|
||||||
.control-section,
|
.control-section,
|
||||||
.deploy-section,
|
.deploy-section,
|
||||||
.final-section {
|
.final-section {
|
||||||
@@ -1124,6 +1126,7 @@ a {
|
|||||||
|
|
||||||
.section-heading span,
|
.section-heading span,
|
||||||
.studio-copy span,
|
.studio-copy span,
|
||||||
|
.pipeline-copy span,
|
||||||
.control-panel span,
|
.control-panel span,
|
||||||
.ops-copy span,
|
.ops-copy span,
|
||||||
.console-preview-copy > span,
|
.console-preview-copy > span,
|
||||||
@@ -1140,6 +1143,7 @@ a {
|
|||||||
.section-heading h2,
|
.section-heading h2,
|
||||||
.workflow-panel h2,
|
.workflow-panel h2,
|
||||||
.studio-copy h2,
|
.studio-copy h2,
|
||||||
|
.pipeline-copy h2,
|
||||||
.control-panel h2,
|
.control-panel h2,
|
||||||
.ops-copy h2,
|
.ops-copy h2,
|
||||||
.console-preview-copy h2,
|
.console-preview-copy h2,
|
||||||
@@ -1249,6 +1253,9 @@ a {
|
|||||||
.endpoint-card p,
|
.endpoint-card p,
|
||||||
.studio-copy p,
|
.studio-copy p,
|
||||||
.studio-flow p,
|
.studio-flow p,
|
||||||
|
.pipeline-copy p,
|
||||||
|
.pipeline-request p,
|
||||||
|
.pipeline-steps p,
|
||||||
.workflow-panel p,
|
.workflow-panel p,
|
||||||
.ops-copy p,
|
.ops-copy p,
|
||||||
.ops-card p,
|
.ops-card p,
|
||||||
@@ -1264,6 +1271,9 @@ a {
|
|||||||
.capability-card,
|
.capability-card,
|
||||||
.endpoint-card,
|
.endpoint-card,
|
||||||
.studio-flow article,
|
.studio-flow article,
|
||||||
|
.pipeline-request,
|
||||||
|
.pipeline-steps article,
|
||||||
|
.pipeline-output,
|
||||||
.control-grid > div,
|
.control-grid > div,
|
||||||
.ops-card,
|
.ops-card,
|
||||||
.console-preview-stats > div,
|
.console-preview-stats > div,
|
||||||
@@ -1276,6 +1286,9 @@ a {
|
|||||||
.capability-card:hover,
|
.capability-card:hover,
|
||||||
.endpoint-card:hover,
|
.endpoint-card:hover,
|
||||||
.studio-flow article:hover,
|
.studio-flow article:hover,
|
||||||
|
.pipeline-request:hover,
|
||||||
|
.pipeline-steps article:hover,
|
||||||
|
.pipeline-output:hover,
|
||||||
.control-grid > div:hover,
|
.control-grid > div:hover,
|
||||||
.ops-card:hover,
|
.ops-card:hover,
|
||||||
.console-preview-stats > div:hover,
|
.console-preview-stats > div:hover,
|
||||||
@@ -1350,6 +1363,183 @@ a {
|
|||||||
letter-spacing: -0.045em;
|
letter-spacing: -0.045em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.pipeline-section {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
|
||||||
|
gap: 18px;
|
||||||
|
align-items: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pipeline-copy,
|
||||||
|
.pipeline-board {
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: 32px;
|
||||||
|
background: var(--panel-gradient);
|
||||||
|
box-shadow: inset 0 1px 0 var(--surface-highlight);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pipeline-copy {
|
||||||
|
display: grid;
|
||||||
|
align-content: center;
|
||||||
|
gap: 18px;
|
||||||
|
padding: 34px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pipeline-board {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(190px, 0.62fr) minmax(0, 1fr) minmax(220px, 0.72fr);
|
||||||
|
gap: 12px;
|
||||||
|
padding: clamp(18px, 3vw, 30px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pipeline-board::before {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
content: "";
|
||||||
|
background:
|
||||||
|
linear-gradient(var(--console-grid-y) 1px, transparent 1px),
|
||||||
|
linear-gradient(90deg, var(--console-grid-x) 1px, transparent 1px);
|
||||||
|
background-size: 38px 38px;
|
||||||
|
mask-image: linear-gradient(90deg, transparent, black 18%, black 82%, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pipeline-request,
|
||||||
|
.pipeline-output,
|
||||||
|
.pipeline-steps article {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: 20px;
|
||||||
|
background: var(--surface);
|
||||||
|
box-shadow: inset 0 1px 0 var(--surface-highlight);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pipeline-request {
|
||||||
|
display: grid;
|
||||||
|
align-content: center;
|
||||||
|
gap: 10px;
|
||||||
|
padding: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pipeline-request span,
|
||||||
|
.pipeline-output-head span,
|
||||||
|
.pipeline-output-row span,
|
||||||
|
.pipeline-steps article span {
|
||||||
|
color: var(--faint);
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pipeline-request strong {
|
||||||
|
max-width: 16ch;
|
||||||
|
color: var(--text);
|
||||||
|
font-size: clamp(21px, 2.2vw, 30px);
|
||||||
|
line-height: 1.04;
|
||||||
|
letter-spacing: -0.04em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pipeline-steps {
|
||||||
|
display: grid;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pipeline-steps article {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 36px minmax(0, 1fr) auto;
|
||||||
|
gap: 12px;
|
||||||
|
align-items: center;
|
||||||
|
min-height: 78px;
|
||||||
|
padding: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pipeline-steps em {
|
||||||
|
width: 34px;
|
||||||
|
height: 34px;
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
border: 1px solid var(--line-strong);
|
||||||
|
border-radius: 12px;
|
||||||
|
color: var(--text);
|
||||||
|
background: var(--pill-featured-bg);
|
||||||
|
font-family: var(--font-geist-mono), monospace;
|
||||||
|
font-size: 11px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pipeline-steps strong {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 3px;
|
||||||
|
color: var(--text);
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pipeline-steps article span {
|
||||||
|
justify-self: end;
|
||||||
|
min-width: 74px;
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: 999px;
|
||||||
|
padding: 6px 8px;
|
||||||
|
background: var(--surface-muted);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pipeline-output {
|
||||||
|
display: grid;
|
||||||
|
align-content: center;
|
||||||
|
gap: 10px;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pipeline-output-head {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 10px;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pipeline-output-head strong,
|
||||||
|
.pipeline-output-row em {
|
||||||
|
color: var(--acid);
|
||||||
|
font-family: var(--font-geist-mono), monospace;
|
||||||
|
font-size: 11px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pipeline-output-row {
|
||||||
|
min-height: 54px;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(0, 1fr) auto;
|
||||||
|
gap: 4px 8px;
|
||||||
|
align-items: center;
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
border-radius: 16px;
|
||||||
|
background: var(--surface-muted);
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pipeline-output-row strong {
|
||||||
|
overflow: hidden;
|
||||||
|
color: var(--text);
|
||||||
|
font-size: 13px;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pipeline-output-row span {
|
||||||
|
grid-column: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pipeline-output-row em {
|
||||||
|
grid-row: 1 / span 2;
|
||||||
|
grid-column: 2;
|
||||||
|
align-self: center;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
.endpoint-grid {
|
.endpoint-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
@@ -1811,6 +2001,7 @@ a {
|
|||||||
.api-section,
|
.api-section,
|
||||||
.workflow-section,
|
.workflow-section,
|
||||||
.ops-section,
|
.ops-section,
|
||||||
|
.pipeline-section,
|
||||||
.console-preview-section,
|
.console-preview-section,
|
||||||
.studio-section,
|
.studio-section,
|
||||||
.control-section,
|
.control-section,
|
||||||
@@ -1838,7 +2029,8 @@ a {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.section-heading.split,
|
.section-heading.split,
|
||||||
.endpoint-grid {
|
.endpoint-grid,
|
||||||
|
.pipeline-board {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1859,6 +2051,7 @@ a {
|
|||||||
.api-section,
|
.api-section,
|
||||||
.workflow-section,
|
.workflow-section,
|
||||||
.ops-section,
|
.ops-section,
|
||||||
|
.pipeline-section,
|
||||||
.console-preview-section,
|
.console-preview-section,
|
||||||
.studio-section,
|
.studio-section,
|
||||||
.control-section,
|
.control-section,
|
||||||
@@ -1942,6 +2135,8 @@ a {
|
|||||||
|
|
||||||
.workflow-panel,
|
.workflow-panel,
|
||||||
.studio-copy,
|
.studio-copy,
|
||||||
|
.pipeline-copy,
|
||||||
|
.pipeline-board,
|
||||||
.control-section,
|
.control-section,
|
||||||
.ops-copy,
|
.ops-copy,
|
||||||
.ops-grid,
|
.ops-grid,
|
||||||
@@ -1978,8 +2173,18 @@ a {
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.pipeline-steps article {
|
||||||
|
grid-template-columns: 34px minmax(0, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pipeline-steps article span {
|
||||||
|
grid-column: 2;
|
||||||
|
justify-self: start;
|
||||||
|
}
|
||||||
|
|
||||||
.factory-section,
|
.factory-section,
|
||||||
.control-section,
|
.control-section,
|
||||||
|
.pipeline-section,
|
||||||
.console-preview-section,
|
.console-preview-section,
|
||||||
.deploy-section {
|
.deploy-section {
|
||||||
gap: 22px;
|
gap: 22px;
|
||||||
|
|||||||
@@ -88,6 +88,39 @@ const studioFlow = [
|
|||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
|
const creationPipeline = [
|
||||||
|
{
|
||||||
|
stage: "01",
|
||||||
|
title: "输入创作目标",
|
||||||
|
body: "商品文案、角色图片、参考音频、附件脚本或 API 请求进入统一入口。",
|
||||||
|
signal: "Prompt / File",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
stage: "02",
|
||||||
|
title: "路由合适模型",
|
||||||
|
body: "按对话、生图、视频、TTS、Comfy 后端和站点健康自动选择能力。",
|
||||||
|
signal: "Router",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
stage: "03",
|
||||||
|
title: "执行工作流",
|
||||||
|
body: "生图助手、视频助手、数字人或 Comfy 画布提交任务并持续记录进度。",
|
||||||
|
signal: "Workflow",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
stage: "04",
|
||||||
|
title: "归档最终产出",
|
||||||
|
body: "只把生成完成的图片、视频和音频写入工作空间，同时沉淀日志与成本。",
|
||||||
|
signal: "Workspace",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const creationOutputs = [
|
||||||
|
["商品讲解视频", "digital-human", "完成"],
|
||||||
|
["封面主视觉", "gpt-image-2", "归档"],
|
||||||
|
["短视频脚本", "gpt-5.5", "可复制"],
|
||||||
|
];
|
||||||
|
|
||||||
const workflowModes = [
|
const workflowModes = [
|
||||||
["cloud", "Comfy Cloud API 后端"],
|
["cloud", "Comfy Cloud API 后端"],
|
||||||
["runninghub", "RunningHub API 后端"],
|
["runninghub", "RunningHub API 后端"],
|
||||||
@@ -435,6 +468,48 @@ export default function Home() {
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<section className="pipeline-section" data-motion="section">
|
||||||
|
<div className="pipeline-copy">
|
||||||
|
<span>Product Flow</span>
|
||||||
|
<h2>用户给出目标，BossAI 把它推进到可交付产出</h2>
|
||||||
|
<p>
|
||||||
|
官网看到的能力不是单点功能。进入后台后，用户可以把一个商品讲解、图片创意或视频脚本一路交给模型路由、工作流执行和工作空间归档。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="pipeline-board" aria-label="BossAI 产品流转演示">
|
||||||
|
<div className="pipeline-request" data-motion="card">
|
||||||
|
<span>用户输入</span>
|
||||||
|
<strong>生成 30 秒新品讲解视频</strong>
|
||||||
|
<p>附人物图、商品卖点、参考音频</p>
|
||||||
|
</div>
|
||||||
|
<div className="pipeline-steps">
|
||||||
|
{creationPipeline.map((item) => (
|
||||||
|
<article data-motion="card" key={item.stage}>
|
||||||
|
<em>{item.stage}</em>
|
||||||
|
<div>
|
||||||
|
<strong>{item.title}</strong>
|
||||||
|
<p>{item.body}</p>
|
||||||
|
</div>
|
||||||
|
<span>{item.signal}</span>
|
||||||
|
</article>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div className="pipeline-output" data-motion="card">
|
||||||
|
<div className="pipeline-output-head">
|
||||||
|
<span>产出归档</span>
|
||||||
|
<strong>Workspace</strong>
|
||||||
|
</div>
|
||||||
|
{creationOutputs.map(([name, model, state]) => (
|
||||||
|
<div className="pipeline-output-row" key={name}>
|
||||||
|
<strong>{name}</strong>
|
||||||
|
<span>{model}</span>
|
||||||
|
<em>{state}</em>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<section id="api" className="api-section" data-motion="section">
|
<section id="api" className="api-section" data-motion="section">
|
||||||
<div className="section-heading split">
|
<div className="section-heading split">
|
||||||
<div>
|
<div>
|
||||||
|
|||||||
Reference in New Issue
Block a user