GenarrativeAI/Genarrative
12
0
Fork 0
Code Issues 39 Pull Requests 8 Actions Packages Projects 1 Releases Wiki Activity

完善创作主页精选素材预览

Browse Source 
新增精选素材分组模型，按素材包、角色、UI、音乐、美宣等分类组合展示素材

补齐素材卡片和预览弹窗中的提示词、作者与生成总成本展示

新增接近全屏的素材预览弹窗，支持底部外置缩略图导航切换

让私有图片、视频和音频预览携带 objectKey 换签读取

补充创作主页素材展示文档和聚焦测试
This commit is contained in:
段舒康
2026-06-22 11:00:05 +08:00
parent fc49ba2a61
commit f67d228c02
8 changed files with 1785 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/index.css
+315
View File
@@ -3617,10 +3617,20 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
border: 1px solid rgba(220, 189, 163, 0.78);
border-radius: 1rem;
background: rgba(255, 254, 251, 0.88);
padding: 0;
color: inherit;
text-align: left;
box-shadow: 0 16px 32px rgba(124, 72, 35, 0.1);
cursor: zoom-in;
}
.creation-landing__asset-card:hover {
border-color: rgba(195, 104, 48, 0.46);
box-shadow: 0 20px 40px rgba(124, 72, 35, 0.14);
}
.creation-landing__asset-preview {
position: relative;
display: grid;
min-height: 9.5rem;
max-height: 23rem;
@@ -3629,6 +3639,64 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
background: linear-gradient(180deg, #fffdfa, #fff4ea);
}
.creation-landing__asset-preview--bundle {
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: stretch;
gap: 0.18rem;
padding: 0.18rem;
}
.creation-landing__asset-preview-tile {
position: relative;
display: grid;
width: 100%;
height: 100%;
min-height: 5rem;
overflow: hidden;
place-items: center;
border-radius: 0.72rem;
background: rgba(255, 255, 255, 0.66);
}
.creation-landing__asset-preview-more {
position: absolute;
right: 0.65rem;
bottom: 0.65rem;
display: inline-flex;
min-width: 2rem;
height: 2rem;
align-items: center;
justify-content: center;
border-radius: 999px;
background: rgba(44, 31, 22, 0.72);
color: #fffdf9;
font-size: 0.78rem;
font-weight: 850;
}
.creation-landing__asset-audio-preview {
display: grid;
width: 100%;
height: 100%;
min-height: 8rem;
place-items: center;
gap: 1rem;
padding: 1rem;
background:
linear-gradient(135deg, rgba(244, 187, 129, 0.4), rgba(255, 247, 236, 0.92)),
radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.9), transparent 42%);
color: #9a5428;
}
.creation-landing__asset-audio-preview svg {
width: 2.6rem;
height: 2.6rem;
}
.creation-landing__asset-audio-preview audio {
width: min(100%, 28rem);
}
.creation-landing__asset-meta {
display: grid;
gap: 0.55rem;
@@ -3675,6 +3743,215 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
white-space: nowrap;
}
.creation-landing__showcase-modal-overlay {
padding: 0.5rem;
background: rgba(11, 8, 6, 0.82);
}
.creation-landing__showcase-modal-panel {
width: min(100vw - 1rem, 88rem);
height: min(96vh, 64rem);
max-height: calc(100vh - 1rem);
overflow: hidden;
border-radius: 1.2rem;
background: #100d0b;
box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5);
}
.creation-landing__showcase-modal-body {
display: flex;
min-height: 0;
flex: 1;
padding: 0;
overflow: hidden;
}
.creation-landing__showcase-modal {
position: relative;
display: grid;
width: 100%;
height: 100%;
min-height: 0;
grid-template-rows: minmax(0, 1fr) auto;
overflow: hidden;
background:
radial-gradient(circle at 18% 12%, rgba(186, 117, 65, 0.18), transparent 32%),
#100d0b;
}
.creation-landing__showcase-modal-close {
z-index: 4;
}
.creation-landing__showcase-modal-stage {
position: relative;
z-index: 1;
display: grid;
min-height: 0;
overflow: hidden;
place-items: center;
padding: clamp(1rem, 3vw, 2.5rem);
}
.creation-landing__showcase-current {
position: relative;
display: grid;
width: 100%;
height: 100%;
min-height: 0;
overflow: hidden;
place-items: center;
}
.creation-landing__showcase-current > img,
.creation-landing__showcase-current > video,
.creation-landing__showcase-current .creation-landing__asset-audio-preview {
max-width: 100%;
max-height: 100%;
border-radius: 0.9rem;
}
.creation-landing__showcase-current > img,
.creation-landing__showcase-current > video {
width: auto;
height: auto;
object-fit: contain;
object-position: center;
box-shadow: 0 18px 52px rgba(0, 0, 0, 0.32);
}
.creation-landing__showcase-current > .creation-landing__showcase-media {
display: block;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
object-fit: contain;
object-position: center;
}
.creation-landing__showcase-dock {
position: relative;
z-index: 3;
display: grid;
gap: 0.85rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(24, 18, 14, 0.94);
backdrop-filter: none;
padding: 0.85rem;
}
.creation-landing__showcase-dock-meta {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(13rem, 0.44fr);
gap: 0.75rem 1rem;
align-items: start;
color: #fff8ef;
}
.creation-landing__showcase-dock-meta h3 {
margin: 0;
overflow: hidden;
color: #fff8ef;
font-size: 1rem;
font-weight: 860;
text-overflow: ellipsis;
white-space: nowrap;
}
.creation-landing__showcase-dock-meta p {
grid-column: 1 / 2;
display: -webkit-box;
min-height: 2.6em;
overflow: hidden;
margin: 0;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
color: rgba(255, 248, 239, 0.72);
font-size: 0.82rem;
font-weight: 620;
line-height: 1.32;
}
.creation-landing__showcase-dock-meta dl {
display: grid;
grid-column: 2 / 3;
grid-row: 1 / span 2;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.55rem;
margin: 0;
}
.creation-landing__showcase-dock-meta div {
min-width: 0;
}
.creation-landing__showcase-dock-meta dt {
color: rgba(255, 248, 239, 0.5);
font-size: 0.68rem;
font-weight: 780;
}
.creation-landing__showcase-dock-meta dd {
overflow: hidden;
margin: 0;
color: #fff8ef;
font-size: 0.82rem;
font-weight: 820;
text-overflow: ellipsis;
white-space: nowrap;
}
.creation-landing__showcase-thumbs {
display: flex;
gap: 0.55rem;
overflow-x: auto;
padding-bottom: 0.1rem;
}
.creation-landing__showcase-thumb {
display: grid;
flex: 0 0 6.5rem;
min-width: 0;
gap: 0.38rem;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 0.72rem;
background: rgba(255, 255, 255, 0.06);
padding: 0.38rem;
color: rgba(255, 248, 239, 0.72);
font-size: 0.68rem;
font-weight: 760;
text-align: center;
}
.creation-landing__showcase-thumb--active {
border-color: rgba(242, 184, 124, 0.8);
background: rgba(242, 184, 124, 0.18);
color: #fff8ef;
}
.creation-landing__showcase-thumb-media {
display: grid;
height: 4.1rem;
overflow: hidden;
place-items: center;
border-radius: 0.52rem;
background: rgba(255, 255, 255, 0.08);
}
.creation-landing__showcase-thumb-media svg {
width: 1.45rem;
height: 1.45rem;
}
.creation-landing__showcase-thumb > span:last-child {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (max-width: 900px) {
.creation-landing__hero,
.creation-landing__section {
@@ -3718,6 +3995,21 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
.creation-landing__asset-waterfall {
column-count: 2;
}
.creation-landing__showcase-modal-panel {
width: calc(100vw - 0.7rem);
height: calc(100vh - 0.7rem);
}
.creation-landing__showcase-dock-meta {
grid-template-columns: 1fr;
}
.creation-landing__showcase-dock-meta p,
.creation-landing__showcase-dock-meta dl {
grid-column: auto;
grid-row: auto;
}
}
@media (max-width: 560px) {
@@ -3763,6 +4055,29 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
.creation-landing__asset-waterfall {
column-count: 1;
}
.creation-landing__showcase-modal-overlay {
padding: 0;
}
.creation-landing__showcase-modal-panel {
width: 100vw;
height: 100vh;
max-height: 100vh;
border-radius: 0;
}
.creation-landing__showcase-modal-stage {
padding: 3.2rem 0.75rem 0.75rem;
}
.creation-landing__showcase-dock {
padding: 0.72rem;
}
.creation-landing__showcase-thumb {
flex-basis: 5.7rem;
}
}
.image-canvas-editor {