首页功能页更改 #9

Merged
stringadmin merged 4 commits from 首页功能页更改 into master 2026-06-03 13:44:58 +00:00
7 changed files with 56 additions and 34 deletions
Showing only changes of commit 7afcfa54c2 - Show all commits
+1 -1
View File
@@ -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",
+2 -2
View File
@@ -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 ? (
<div className="studio-canvas-image">
<img src={referenceImage} alt="参考图预览" /> <img src={referenceImage} alt="参考图预览" />
</div>
) : ( ) : (
<div className="image-workbench-empty"> <div className="studio-canvas-ghost">
<div className="studio-canvas-ghost__icon">
<PictureOutlined /> <PictureOutlined />
<strong></strong> </div>
<span></span> <div className="studio-canvas-ghost__title"></div>
<div className="studio-canvas-ghost__hint"></div>
</div> </div>
)} )}
</section> </section>
+2
View File
@@ -458,6 +458,7 @@ function ProfilePage({
const renderActivePanel = () => { const renderActivePanel = () => {
if (activePanel === "works") { if (activePanel === "works") {
return visibleWorks.length ? ( return visibleWorks.length ? (
<div className="profile-page__works-scroll">
<div className="profile-page__list-grid motion-stagger"> <div className="profile-page__list-grid motion-stagger">
{visibleWorks.map((task) => ( {visibleWorks.map((task) => (
<article key={task.id} className="profile-page__list-card"> <article key={task.id} className="profile-page__list-card">
@@ -473,6 +474,7 @@ function ProfilePage({
</article> </article>
))} ))}
</div> </div>
</div>
) : ( ) : (
renderEmptyState("向全世界展示你最得意的创作。", "开始创作", onOpenWorkbench) renderEmptyState("向全世界展示你最得意的创作。", "开始创作", onOpenWorkbench)
); );
+8 -11
View File
@@ -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%);
+4 -1
View File
@@ -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 {
+16
View File
@@ -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个可见 */
}