stringadmin
5fcd225825
The renderScene function was passing local data URLs (data:image/png;base64,...) as imageUrl and referenceUrls to createVideoTask, which the /api/ai/video endpoint rejects with 400 Bad Request. The planning phase already uploads images to OSS but the resulting URLs were not returned to the component. - Add imageUrls field to EcommerceVideoPlanResult - Return OSS imageUrls from runVideoPlan alongside existing plan data - Use planResult.imageUrls[0] in handleRender instead of productImageDataUrls[0] - Use planResult?.imageUrls[0] for sourceImage display fallback Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
99 lines
2.2 KiB
CSS
99 lines
2.2 KiB
CSS
/* Shared primitives for new CSS. Keep legacy component debt in legacy-components.css. */
|
|
.ui-surface {
|
|
border: 1px solid var(--border-subtle);
|
|
border-radius: var(--radius-lg);
|
|
background: var(--surface-panel);
|
|
box-shadow: var(--shadow-panel);
|
|
}
|
|
|
|
.ui-muted {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.ui-focus-ring:focus-visible {
|
|
outline: 2px solid rgba(var(--accent-rgb), 0.48);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.page-loading-skeleton {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: 200px;
|
|
padding: 32px;
|
|
}
|
|
|
|
.page-loading-skeleton__bar {
|
|
width: 40%;
|
|
height: 24px;
|
|
border-radius: 8px;
|
|
background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.1), rgba(255,255,255,0.04));
|
|
background-size: 220% 100%;
|
|
animation: skeleton-shimmer 1.4s ease infinite;
|
|
}
|
|
|
|
.page-loading-skeleton__row {
|
|
display: flex;
|
|
gap: 16px;
|
|
}
|
|
|
|
.page-loading-skeleton__card {
|
|
flex: 1;
|
|
height: 140px;
|
|
border-radius: 14px;
|
|
background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.1), rgba(255,255,255,0.04));
|
|
background-size: 220% 100%;
|
|
animation: skeleton-shimmer 1.4s ease infinite;
|
|
animation-delay: 0.15s;
|
|
}
|
|
|
|
.page-loading-skeleton__block {
|
|
width: 100%;
|
|
height: 200px;
|
|
border-radius: 14px;
|
|
background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.1), rgba(255,255,255,0.04));
|
|
background-size: 220% 100%;
|
|
animation: skeleton-shimmer 1.4s ease infinite;
|
|
animation-delay: 0.3s;
|
|
}
|
|
|
|
.page-transition-wrap {
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: 0;
|
|
}
|
|
|
|
/* page-motion--exit moved to page-transition.css */
|
|
|
|
.page-loading-center {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: 200px;
|
|
gap: 12px;
|
|
}
|
|
|
|
.page-loading-center__text {
|
|
font: 400 13px/1 'PingFang SC', 'Microsoft YaHei UI', system-ui, sans-serif;
|
|
color: var(--text-muted, rgba(255,255,255,.45));
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
.page-loading-spinner {
|
|
width: 32px;
|
|
height: 32px;
|
|
border: 3px solid var(--border-subtle, #e5e5e5);
|
|
border-top-color: var(--accent, #0d9488);
|
|
border-radius: 50%;
|
|
animation: page-spin 0.7s linear infinite;
|
|
}
|
|
|
|
@keyframes page-spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|