首页功能页更改 #9
@@ -73,7 +73,7 @@ function AppShell({
|
|||||||
const [navJustActivated, setNavJustActivated] = useState<WebViewKey | null>(null);
|
const [navJustActivated, setNavJustActivated] = useState<WebViewKey | null>(null);
|
||||||
const isAuthView = activeView === "login";
|
const isAuthView = activeView === "login";
|
||||||
const isImmersiveView = activeView === "agent" || activeView === "avatarConsole";
|
const isImmersiveView = activeView === "agent" || activeView === "avatarConsole";
|
||||||
const showFloatingNav = !isAuthView && !isImmersiveView && activeView !== "home";
|
const showFloatingNav = (!isAuthView || !!session) && !isImmersiveView && activeView !== "home";
|
||||||
const toolSurfaceViews = [
|
const toolSurfaceViews = [
|
||||||
"workbench",
|
"workbench",
|
||||||
"canvas",
|
"canvas",
|
||||||
|
|||||||
@@ -193,9 +193,9 @@ function getHomeCarouselCardStyle(offset: number): CSSProperties {
|
|||||||
const depth = Math.abs(offset);
|
const depth = Math.abs(offset);
|
||||||
const direction = Math.sign(offset);
|
const direction = Math.sign(offset);
|
||||||
const isActive = depth === 0;
|
const isActive = depth === 0;
|
||||||
const xByDepth = [0, 286, 456, 610, 735, 840];
|
const xByDepth = [0, 190, 320, 430, 520, 590];
|
||||||
const yByDepth = [8, -2, -8, -13, -18, -24];
|
const yByDepth = [8, -2, -8, -13, -18, -24];
|
||||||
const scaleByDepth = [1, 0.98, 0.94, 0.91, 0.88, 0.84];
|
const scaleByDepth = [1, 1, 1, 1, 1, 1];
|
||||||
const x = direction * (xByDepth[depth] ?? xByDepth[xByDepth.length - 1]!);
|
const x = direction * (xByDepth[depth] ?? xByDepth[xByDepth.length - 1]!);
|
||||||
const y = yByDepth[depth] ?? yByDepth[yByDepth.length - 1]!;
|
const y = yByDepth[depth] ?? yByDepth[yByDepth.length - 1]!;
|
||||||
const z = isActive ? 90 : 28 - depth;
|
const z = isActive ? 90 : 28 - depth;
|
||||||
|
|||||||
@@ -1284,12 +1284,16 @@ function ImageWorkbenchPage({ initialTool = "workbench", onOpenMore, onSelectVie
|
|||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
) : referenceImage ? (
|
) : referenceImage ? (
|
||||||
<img src={referenceImage} alt="参考图预览" />
|
<div className="studio-canvas-image">
|
||||||
|
<img src={referenceImage} alt="参考图预览" />
|
||||||
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="image-workbench-empty">
|
<div className="studio-canvas-ghost">
|
||||||
<PictureOutlined />
|
<div className="studio-canvas-ghost__icon">
|
||||||
<strong>上传参考图后在此预览</strong>
|
<PictureOutlined />
|
||||||
<span>生成结果也会显示在这里</span>
|
</div>
|
||||||
|
<div className="studio-canvas-ghost__title">上传参考图后在此预览</div>
|
||||||
|
<div className="studio-canvas-ghost__hint">生成结果也会显示在这里</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@@ -458,20 +458,22 @@ function ProfilePage({
|
|||||||
const renderActivePanel = () => {
|
const renderActivePanel = () => {
|
||||||
if (activePanel === "works") {
|
if (activePanel === "works") {
|
||||||
return visibleWorks.length ? (
|
return visibleWorks.length ? (
|
||||||
<div className="profile-page__list-grid motion-stagger">
|
<div className="profile-page__works-scroll">
|
||||||
{visibleWorks.map((task) => (
|
<div className="profile-page__list-grid motion-stagger">
|
||||||
<article key={task.id} className="profile-page__list-card">
|
{visibleWorks.map((task) => (
|
||||||
<div className="profile-page__list-card-head">
|
<article key={task.id} className="profile-page__list-card">
|
||||||
<strong>{task.title}</strong>
|
<div className="profile-page__list-card-head">
|
||||||
<span>{task.type}</span>
|
<strong>{task.title}</strong>
|
||||||
</div>
|
<span>{task.type}</span>
|
||||||
<p>{task.prompt}</p>
|
</div>
|
||||||
<div className="profile-page__list-card-meta">
|
<p>{task.prompt}</p>
|
||||||
<span>{task.status}</span>
|
<div className="profile-page__list-card-meta">
|
||||||
<span>{task.createdAt}</span>
|
<span>{task.status}</span>
|
||||||
</div>
|
<span>{task.createdAt}</span>
|
||||||
</article>
|
</div>
|
||||||
))}
|
</article>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
renderEmptyState("向全世界展示你最得意的创作。", "开始创作", onOpenWorkbench)
|
renderEmptyState("向全世界展示你最得意的创作。", "开始创作", onOpenWorkbench)
|
||||||
|
|||||||
@@ -278,8 +278,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.omni-home__carousel {
|
.omni-home__carousel {
|
||||||
width: min(100%, 1280px);
|
width: min(100%, 1440px);
|
||||||
min-height: clamp(340px, 34vw, 500px);
|
min-height: clamp(400px, 38vw, 560px);
|
||||||
aspect-ratio: auto;
|
aspect-ratio: auto;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
color: #f6f8f6;
|
color: #f6f8f6;
|
||||||
@@ -287,8 +287,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.omni-home__carousel-stage {
|
.omni-home__carousel-stage {
|
||||||
width: min(100%, 1160px);
|
width: min(100%, 1320px);
|
||||||
height: clamp(320px, 31vw, 450px);
|
height: clamp(380px, 36vw, 520px);
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
transform-style: preserve-3d;
|
transform-style: preserve-3d;
|
||||||
@@ -315,12 +315,12 @@
|
|||||||
top: 50%;
|
top: 50%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
display: grid;
|
display: grid;
|
||||||
width: clamp(214px, 17vw, 286px);
|
width: clamp(480px, 42vw, 720px);
|
||||||
height: clamp(122px, 9.8vw, 162px);
|
height: clamp(270px, 23.6vw, 405px);
|
||||||
place-items: center;
|
place-items: center;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
border: 0;
|
border: 0;
|
||||||
border-radius: clamp(10px, 1.2vw, 16px);
|
border-radius: clamp(16px, 1.8vw, 24px);
|
||||||
background: #0d1110;
|
background: #0d1110;
|
||||||
color: #101412;
|
color: #101412;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
@@ -374,7 +374,7 @@
|
|||||||
saturate(1.08)
|
saturate(1.08)
|
||||||
contrast(1.02)
|
contrast(1.02)
|
||||||
drop-shadow(0 18px 18px rgb(0 0 0 / 14%));
|
drop-shadow(0 18px 18px rgb(0 0 0 / 14%));
|
||||||
object-fit: cover;
|
object-fit: contain;
|
||||||
transform: translateZ(12px);
|
transform: translateZ(12px);
|
||||||
transition:
|
transition:
|
||||||
filter 640ms cubic-bezier(0.22, 1, 0.36, 1),
|
filter 640ms cubic-bezier(0.22, 1, 0.36, 1),
|
||||||
@@ -387,9 +387,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.omni-home__carousel-card.is-active {
|
.omni-home__carousel-card.is-active {
|
||||||
width: clamp(390px, 37vw, 620px);
|
|
||||||
height: clamp(220px, 20.8vw, 350px);
|
|
||||||
border-radius: clamp(16px, 1.8vw, 24px);
|
|
||||||
box-shadow:
|
box-shadow:
|
||||||
0 18px 40px rgb(0 0 0 / 26%),
|
0 18px 40px rgb(0 0 0 / 26%),
|
||||||
inset 0 -1px 0 rgb(0 0 0 / 8%);
|
inset 0 -1px 0 rgb(0 0 0 / 8%);
|
||||||
|
|||||||
@@ -563,7 +563,10 @@ textarea.image-workbench-prompt {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background: var(--bg-inset);
|
background:
|
||||||
|
radial-gradient(circle, rgba(var(--accent-rgb), 0.12) 1px, transparent 1.4px),
|
||||||
|
var(--bg-inset);
|
||||||
|
background-size: 22px 22px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.image-workbench-canvas img {
|
.image-workbench-canvas img {
|
||||||
|
|||||||
@@ -1 +1,17 @@
|
|||||||
/* Profile page rules move here as they are retired from legacy-pages.css. */
|
/* Profile page rules move here as they are retired from legacy-pages.css. */
|
||||||
|
|
||||||
|
/* ── 代表作滚动容器:固定3列,刚好显示9个(3行),超出可滚动,隐藏滚动条 ── */
|
||||||
|
.profile-page__works-scroll {
|
||||||
|
max-height: 390px; /* 3行卡片:3 × 120(min-height) + 2 × 10(gap) = 380px,留10px余量 */
|
||||||
|
overflow-y: auto;
|
||||||
|
scrollbar-width: none; /* Firefox */
|
||||||
|
-ms-overflow-style: none; /* IE/Edge */
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-page__works-scroll::-webkit-scrollbar {
|
||||||
|
display: none; /* Chrome/Safari/Edge */
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-page__works-scroll .profile-page__list-grid {
|
||||||
|
grid-template-columns: repeat(3, 1fr); /* 固定3列,刚好3×3=9个可见 */
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user