feat: 优化首页入口按钮质感，提升商业产品精致度

- 按钮背景改为微渐变+毛玻璃效果(backdrop-filter)
- 边框改为半透明白色，圆角从8px升级到12px
- 增加内高光+外层深度阴影提升层次感
- 字间距、字重大小幅调整，更精致克制
- hover态增加accent光晕+图标变绿+放大效果
- 主按钮增加渐变绿底+内高光+绿色辉光阴影
- 增加按压态scale(0.97)反馈
- 主按钮图标hover放大1.12倍

.env.example

@@ -1,8 +0,0 @@
-# Dev proxy target — the backend API server
-VITE_DEV_PROXY=http://47.110.225.76:3600
-
-# Key server URL for auth/profile endpoints
-VITE_KEY_SERVER_URL=
-
-# Main API base URL (used when not served from omniai.net.cn)
-VITE_API_BASE_URL=

src/App.tsx

@@ -357,7 +357,7 @@ function App() {
     canvasAutoOpenedRecentRef.current = false;
     setWorkspaceExpanded(false);
     if (options?.resetView) {
-      handleSetView("login");
+      handleSetView("workbench");
     }
   }, [clearSessionState, setProjects, setProjectsLoaded, setUsage, clearTasks, setRuntimeNotifications, setServerNotifications, setCanvasWorkflow, setCurrentCanvasProjectId, setWorkspaceExpanded, handleSetView]);
 
@@ -492,7 +492,7 @@ function App() {
         if (nextSession) {
           setSession(nextSession);
         } else {
-          clearAuthenticatedState({ resetView: true });
+          clearAuthenticatedState();
         }
       } finally {
         checking = false;

src/components/AnimatedPanel.tsx

@@ -1,54 +0,0 @@
-import { useEffect, useRef, useState, type ReactNode } from "react";
-
-interface AnimatedPanelProps {
-  open: boolean;
-  children: ReactNode;
-  className?: string;
-  /** Duration in ms for the exit animation before unmounting. */
-  exitDuration?: number;
-}
-
-export function AnimatedPanel({ open, children, className, exitDuration = 140 }: AnimatedPanelProps) {
-  const [mounted, setMounted] = useState(open);
-  const [visible, setVisible] = useState(open);
-  const timerRef = useRef<number | null>(null);
-
-  useEffect(() => {
-    if (open) {
-      if (timerRef.current) {
-        window.clearTimeout(timerRef.current);
-        timerRef.current = null;
-      }
-      setMounted(true);
-      requestAnimationFrame(() => {
-        requestAnimationFrame(() => {
-          setVisible(true);
-        });
-      });
-    } else {
-      setVisible(false);
-      timerRef.current = window.setTimeout(() => {
-        setMounted(false);
-        timerRef.current = null;
-      }, exitDuration);
-    }
-  }, [open, exitDuration]);
-
-  useEffect(() => {
-    return () => {
-      if (timerRef.current) {
-        window.clearTimeout(timerRef.current);
-      }
-    };
-  }, []);
-
-  if (!mounted) return null;
-
-  return (
-    <div
-      className={`${className ?? ""} animated-panel${visible ? " is-visible" : ""}`}
-    >
-      {children}
-    </div>
-  );
-}

src/components/AppShell.tsx

@@ -16,7 +16,6 @@ import { canManageCommunityCases, canReviewCommunity } from "../features/communi
 import type { WebNavItem, WebNotification, WebUsageSummary, WebUserSession, WebViewKey } from "../types";
 import NotificationCenter from "./NotificationCenter";
 import { RechargeModal } from "./RechargeModal/RechargeModal";
-import { AnimatedPanel } from "./AnimatedPanel";
 
 interface AppShellProps {
   activeView: WebViewKey;
@@ -62,8 +61,6 @@ function AppShell({
   const [profileOpen, setProfileOpen] = useState(false);
   const [rechargeOpen, setRechargeOpen] = useState(false);
   const [openSubmenuKey, setOpenSubmenuKey] = useState<WebViewKey | null>(null);
-  const prevActiveViewRef = useRef<WebViewKey>(activeView);
-  const [navJustActivated, setNavJustActivated] = useState<WebViewKey | null>(null);
   const isAuthView = activeView === "login";
   const isImmersiveView = activeView === "agent" || activeView === "avatarConsole";
   const showFloatingNav = !isAuthView && !isImmersiveView && activeView !== "home";
@@ -103,15 +100,6 @@ function AppShell({
     [navItems],
   );
 
-  useEffect(() => {
-    if (activeView !== prevActiveViewRef.current) {
-      setNavJustActivated(activeView);
-      prevActiveViewRef.current = activeView;
-      const timer = window.setTimeout(() => setNavJustActivated(null), 320);
-      return () => window.clearTimeout(timer);
-    }
-  }, [activeView]);
-
   useEffect(() => {
     if (typeof document === "undefined") {
       return;
@@ -235,8 +223,8 @@ function AppShell({
                   <button
                     type="button"
                     className={`floating-nav__button${isActive ? " is-active" : ""}${
-                      navJustActivated === item.key ? " nav-just-activated" : ""
+                      workspaceExpanded && index === 3 ? " has-divider" : ""
-                    }${workspaceExpanded && index === 3 ? " has-divider" : ""}`}
+                    }`}
                     title={`${item.label} / ${item.hint}`}
                     aria-label={item.label}
                     onClick={() => onSelectView(item.children?.[0]?.key ?? item.key)}
@@ -342,7 +330,8 @@ function AppShell({
                     </>
                   )}
                 </button>
-                <AnimatedPanel open={session ? profileOpen : false} className="profile-popover panel-surface">
+                {session && profileOpen ? (
+                  <div className="profile-popover panel-surface">
                     <div className="profile-popover__head">
                       <span className="profile-popover__avatar">
                         {avatarUrl ? <img src={avatarUrl} alt={displayName} /> : avatarLabel}
@@ -421,7 +410,8 @@ function AppShell({
                         </button>
                       </>
                     ) : null}
-                  </AnimatedPanel>
+                  </div>
+                ) : null}
               </div>
             </div>
             </header>

src/components/NotificationCenter.tsx

@@ -10,7 +10,6 @@ import {
 } from "@ant-design/icons";
 import { useEffect, useRef, useState } from "react";
 import type { WebNotification, WebNotificationType, WebViewKey } from "../types";
-import { AnimatedPanel } from "./AnimatedPanel";
 
 const NOTIFICATION_ICONS: Record<WebNotificationType, React.ReactNode> = {
   task_completed: <CheckCircleOutlined style={{ color: "#10b981" }} />,
@@ -116,7 +115,8 @@ function NotificationCenter({ items, onNavigate, onMarkRead, onMarkAllRead, onCl
           <span className="notification-center__badge">{unreadCount > 99 ? "99+" : unreadCount}</span>
         )}
       </button>
-      <AnimatedPanel open={open} className="notification-center__panel" exitDuration={140}>
+      {open && (
+        <div className="notification-center__panel">
           <div className="notification-center__header">
             <span className="notification-center__title">通知中心</span>
             <div className="notification-center__header-actions">
@@ -158,7 +158,8 @@ function NotificationCenter({ items, onNavigate, onMarkRead, onMarkAllRead, onCl
               ))
             )}
           </div>
-        </AnimatedPanel>
+        </div>
+      )}
     </div>
   );
 }

src/components/PageTransition.tsx

@@ -6,46 +6,10 @@ interface PageTransitionProps {
 }
 
 const EXIT_DURATION_MS = 180;
-const REDUCED_MOTION_EXIT_MS = 0;
-
-const NAV_ORDER: string[] = [
-  "home",
-  "workbench",
-  "ecommerce",
-  "ecommerceTemplates",
-  "sizeTemplate",
-  "canvas",
-  "scriptTokens",
-  "tokenUsage",
-  "community",
-  "assets",
-  "more",
-  "imageWorkbench",
-  "resolutionUpscale",
-  "watermarkRemoval",
-  "subtitleRemoval",
-  "digitalHuman",
-  "avatarConsole",
-  "characterMix",
-  "agent",
-  "settings",
-  "login",
-  "profile",
-  "report",
-];
-
-function getNavIndex(key: string): number {
-  return NAV_ORDER.indexOf(key);
-}
-
-const prefersReducedMotion = typeof window !== "undefined"
-  ? window.matchMedia("(prefers-reduced-motion: reduce)").matches
-  : false;
 
 export default function PageTransition({ viewKey, children }: PageTransitionProps) {
   const [displayedChildren, setDisplayedChildren] = useState(children);
   const [phase, setPhase] = useState<"idle" | "exit">("idle");
-  const [exitDirection, setExitDirection] = useState<"forward" | "backward" | "neutral">("neutral");
   const prevKeyRef = useRef(viewKey);
   const timerRef = useRef<ReturnType<typeof setTimeout>>();
 
@@ -54,36 +18,17 @@ export default function PageTransition({ viewKey, children }: PageTransitionProp
       setDisplayedChildren(children);
       return;
     }
-    const prevIndex = getNavIndex(prevKeyRef.current);
-    const nextIndex = getNavIndex(viewKey);
-    if (prevIndex < nextIndex) {
-      setExitDirection("forward");
-    } else if (prevIndex > nextIndex) {
-      setExitDirection("backward");
-    } else {
-      setExitDirection("neutral");
-    }
     prevKeyRef.current = viewKey;
-
-    if (prefersReducedMotion) {
-      setDisplayedChildren(children);
-      setPhase("idle");
-      return;
-    }
-
     setPhase("exit");
-    const duration = prefersReducedMotion ? REDUCED_MOTION_EXIT_MS : EXIT_DURATION_MS;
     timerRef.current = setTimeout(() => {
       setDisplayedChildren(children);
       setPhase("idle");
-    }, duration);
+    }, EXIT_DURATION_MS);
     return () => clearTimeout(timerRef.current);
   }, [viewKey, children]);
 
-  const dirClass = exitDirection === "forward" ? " is-forward" : exitDirection === "backward" ? " is-backward" : "";
-
   return (
-    <div className={phase === "exit" ? `page-transition-wrap page-motion--exit${dirClass}` : "page-transition-wrap"}>
+    <div className={phase === "exit" ? "page-transition-wrap page-motion--exit" : "page-transition-wrap"}>
       {displayedChildren}
     </div>
   );

src/features/community/CommunityPage.tsx

@@ -477,9 +477,8 @@ function CommunityPage({ projects, isAuthenticated, onStartCreate, onOpenProject
                   <div className="community-card-actions">
                     <button
                       type="button"
-                      className={isFavorite ? "is-active heart-animate" : ""}
+                      className={isFavorite ? "is-active" : ""}
                       aria-pressed={isFavorite}
-                      key={isFavorite ? `fav-${cardId}` : `unfav-${cardId}`}
                       onClick={(event) => {
                         event.stopPropagation();
                         void handleToggleFavorite(item, cardId);

src/features/ecommerce/EcommercePage.tsx

@@ -11,7 +11,6 @@ import {
   SkinOutlined,
 } from "@ant-design/icons";
 import { useEffect, useRef, useState, type CSSProperties, type ChangeEvent, type DragEvent, type ReactNode } from "react";
-import { EcommerceProgressBar } from "./EcommerceProgressBar";
 
 const OSS_MUBAN = "https://stringtest.oss-cn-hangzhou.aliyuncs.com/muban";
 const ecommerceGenerated = `${OSS_MUBAN}/ecommerce-carousel-generated.png`;
@@ -2403,7 +2402,6 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
       </div>
 
       <footer className="product-clone-panel__footer">
-        {detailStatus === "generating" ? <EcommerceProgressBar status="generating" label="A+详情页" /> : null}
         <button type="button" className="product-clone-primary" disabled={!canGenerateDetail} onClick={handleDetailGenerate}>
           {detailStatus === "generating" ? <LoadingOutlined /> : null}
           {detailPrimaryLabel}
@@ -2549,7 +2547,6 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
       </div>
 
       <footer className="product-clone-panel__footer">
-        {tryOnStatus === "generating" ? <EcommerceProgressBar status="generating" label="服饰穿戴图" /> : null}
         <button type="button" className="product-clone-primary" disabled={!canGenerateTryOn} onClick={handleTryOnGenerate}>
           {tryOnStatus === "generating" ? <LoadingOutlined /> : null}
           {tryOnPrimaryLabel}
@@ -2595,7 +2592,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
             <span>{productSetPreviewCards[0].label}</span>
           </button>
           <div className="product-set-flow-arrow" aria-hidden="true" />
-          <div className="product-set-card-grid result-reveal">
+          <div className="product-set-card-grid">
             {productSetPreviewCards.slice(1).map((card) => (
               <button key={card.id} type="button" onClick={() => openProductSetPreview(card)}>
                 <img src={card.src} alt={card.label} />
@@ -2608,7 +2605,6 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
         <section className="product-set-empty-preview" aria-live="polite">
           {productSetStatus === "generating" ? <LoadingOutlined /> : <FileImageOutlined />}
           <strong>{productSetStatus === "generating" ? "正在生成" : "等待生成"}</strong>
-          {productSetStatus === "generating" ? <EcommerceProgressBar status="generating" label="商品套图" /> : null}
           <span>{productSetStatus === "generating" ? "AI 正在整理主图、场景、细节与卖点图。" : "上传商品原图并填写信息后，AI 将为您生成专业的电商商品图"}</span>
         </section>
       )}
@@ -2654,7 +2650,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
             <span>原图素材</span>
           </button>
           <div className="clone-ai-flow-arrow" aria-hidden="true" />
-          <div className="clone-ai-result-grid result-reveal">
+          <div className="clone-ai-result-grid">
             {clonePreviewCards.map((card) => (
               <button key={card.id} type="button" onClick={() => openProductSetPreview(card)}>
                 <img src={card.src} alt={card.label} />
@@ -2667,7 +2663,6 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
         <section className="clone-ai-empty-state" aria-live="polite">
           {status === "generating" ? <LoadingOutlined /> : <FileImageOutlined />}
           <strong>{status === "generating" ? "正在生成" : "等待生成"}</strong>
-          {status === "generating" ? <EcommerceProgressBar status="generating" label={`${selectedCloneOutput.label}生成`} /> : null}
           <span>
             {status === "generating"
               ? `AI 正在为 ${platform} / ${market} 整理${selectedCloneOutput.label}。`
@@ -2819,8 +2814,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
 
         <aside
           id={isCloneTool ? "ecommerce-clone-settings-panel" : undefined}
-          className={`product-clone-panel tool-panel-enter`}
+          className="product-clone-panel"
-          key={activeTool}
           aria-label={`${pageLabel}参数`}
           aria-hidden={isCloneTool && isCloneSettingsCollapsed ? true : undefined}
         >

src/features/ecommerce/EcommerceProgressBar.tsx

@@ -1,30 +0,0 @@
-import { useSmoothedProgress } from "../../hooks/useSmoothedProgress";
-
-interface EcommerceProgressBarProps {
-  status: "idle" | "generating" | "done" | "failed" | string;
-  label?: string;
-}
-
-function mapStatus(status: string): "running" | "completed" | "failed" {
-  if (status === "done") return "completed";
-  if (status === "failed") return "failed";
-  if (status === "generating" || status === "modeling") return "running";
-  return "running";
-}
-
-export function EcommerceProgressBar({ status, label }: EcommerceProgressBarProps) {
-  const progress = mapStatus(status) === "running" ? 50 : 100;
-  const smoothed = useSmoothedProgress(progress, mapStatus(status));
-
-  if (status === "idle") return null;
-
-  return (
-    <div className="ecommerce-progress-bar">
-      <span className="ecommerce-progress-bar__label">{label || "AI 正在生成"}</span>
-      <div className="ecommerce-progress-bar__track">
-        <div className="ecommerce-progress-bar__fill" style={{ width: `${smoothed}%` }} />
-      </div>
-      <span className="ecommerce-progress-bar__value">{smoothed}%</span>
-    </div>
-  );
-}

src/features/home/HomePage.tsx

@@ -9,16 +9,6 @@ import {
 } from "@ant-design/icons";
 import { useCallback, useEffect, useMemo, useRef, useState, type CSSProperties } from "react";
 import WelcomeSplash from "./WelcomeSplash";
-import { useScrollEntrance } from "../../hooks/useScrollEntrance";
-
-function ScrollEntrance({ children, className, ...rest }: { children: React.ReactNode; className?: string } & React.HTMLAttributes<HTMLElement>) {
-  const { ref, isVisible } = useScrollEntrance<HTMLElement>();
-  return (
-    <section ref={ref} className={`${className ?? ""} scroll-entrance${isVisible ? " is-visible" : ""}`} {...rest}>
-      {children}
-    </section>
-  );
-}
 
 const OSS_MUBAN = "https://stringtest.oss-cn-hangzhou.aliyuncs.com/muban";
 const heroImage1 = `${OSS_MUBAN}/hero-1.png`;
@@ -266,7 +256,6 @@ function HomePage({ onOpenGenerate, onOpenEcommerce, onOpenScriptReview, onOpenT
                       }}
                     >
                       <img src={slide.imageUrl} alt={slide.title} />
-                      {isActive ? <span className="omni-home__carousel-card-label slide-up-in-260">{slide.title}</span> : null}
                     </button>
                   );
                 })}
@@ -293,7 +282,7 @@ function HomePage({ onOpenGenerate, onOpenEcommerce, onOpenScriptReview, onOpenT
 
       <main className="omni-home__feature-pages" aria-label="OmniAI 功能介绍">
         {HOME_FEATURES.map((feature, index) => (
-          <ScrollEntrance key={feature.key} className={`omni-home__feature-page is-${feature.key}${index % 2 ? " is-alt" : ""}`}>
+          <section key={feature.key} className={`omni-home__feature-page is-${feature.key}${index % 2 ? " is-alt" : ""}`}>
             <div className="omni-home__feature-copy">
               <span>
                 {feature.icon}
@@ -314,10 +303,10 @@ function HomePage({ onOpenGenerate, onOpenEcommerce, onOpenScriptReview, onOpenT
                 <span key={item}>{item}</span>
               ))}
             </div>
-          </ScrollEntrance>
+          </section>
         ))}
 
-        <ScrollEntrance className="omni-home__experience" aria-label="点击体验">
+        <section className="omni-home__experience" aria-label="点击体验">
           <div className="omni-home__experience-copy">
             <span>
               <ThunderboltOutlined />
@@ -348,7 +337,7 @@ function HomePage({ onOpenGenerate, onOpenEcommerce, onOpenScriptReview, onOpenT
               体验电商生成
             </button>
           </div>
-        </ScrollEntrance>
+        </section>
       </main>
     </section>
     </>

src/features/home/WelcomeSplash.tsx

@@ -8,10 +8,6 @@ const MATRIX_CHARS =
   "01アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン" +
   "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()_+[]{};:?/\\|~`";
 
-const prefersReducedMotion = typeof window !== "undefined"
-  ? window.matchMedia("(prefers-reduced-motion: reduce)").matches
-  : false;
-
 export default function WelcomeSplash({ onEnter }: WelcomeSplashProps) {
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const rafRef = useRef(0);
@@ -20,27 +16,15 @@ export default function WelcomeSplash({ onEnter }: WelcomeSplashProps) {
 
   const handleEnter = useCallback(() => {
     setExiting(true);
-    setTimeout(onEnter, prefersReducedMotion ? 0 : 700);
+    setTimeout(onEnter, 700);
   }, [onEnter]);
 
   useEffect(() => {
-    const timer = setTimeout(() => setShowWelcome(true), prefersReducedMotion ? 0 : 6000);
+    const timer = setTimeout(() => setShowWelcome(true), 6000);
     return () => clearTimeout(timer);
   }, []);
 
   useEffect(() => {
-    if (prefersReducedMotion) {
-      const canvas = canvasRef.current;
-      if (!canvas) return;
-      const ctx = canvas.getContext("2d");
-      if (!ctx) return;
-      canvas.width = window.innerWidth;
-      canvas.height = window.innerHeight;
-      ctx.fillStyle = "rgba(0, 0, 0, 0.85)";
-      ctx.fillRect(0, 0, canvas.width, canvas.height);
-      return;
-    }
-
     const canvas = canvasRef.current;
     if (!canvas) return;
     const ctx = canvas.getContext("2d");

src/features/workbench/WorkbenchPage.tsx

@@ -2914,7 +2914,7 @@ function WorkbenchPage({
                         </div>
                       )}
                       {messages.map((message) => (
-                        <article key={message.id} className={`ai-chat-message-row chat-message-enter${message.role === "user" ? " is-user" : ""}`}>
+                        <article key={message.id} className={`ai-chat-message-row${message.role === "user" ? " is-user" : ""}`}>
                           <div className={`ai-chat-avatar${message.role === "user" ? " ai-chat-avatar--user" : ""}`}>
                             {message.role === "user" ? "我" : "AI"}
                           </div>

src/hooks/useScrollEntrance.ts

@@ -1,31 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-
-export function useScrollEntrance<T extends HTMLElement>(threshold = 0.15) {
-  const ref = useRef<T>(null);
-  const [isVisible, setIsVisible] = useState(false);
-
-  useEffect(() => {
-    const el = ref.current;
-    if (!el) return;
-
-    if (typeof IntersectionObserver === "undefined") {
-      setIsVisible(true);
-      return;
-    }
-
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        if (entry.isIntersecting) {
-          setIsVisible(true);
-          observer.unobserve(el);
-        }
-      },
-      { threshold },
-    );
-
-    observer.observe(el);
-    return () => observer.disconnect();
-  }, [threshold]);
-
-  return { ref, isVisible };
-}

src/styles/components/legacy-components.css

@@ -48,7 +48,6 @@
   background: var(--surface-elevated);
   box-shadow: var(--shadow-elevated);
   backdrop-filter: none;
-  transform-origin: top right;
 }
 
 .profile-popover__head {

src/styles/components/motion.css

@@ -34,118 +34,11 @@
   }
 }
 
-/* 260ms variant for carousel labels */
-.slide-up-in-260 {
-  animation: slide-up-in 260ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;
-}
-
 @keyframes backdrop-in {
   from { opacity: 0; }
   to { opacity: 1; }
 }
 
-/* Popover / panel entrance utilities */
-.panel-enter {
-  animation: scale-in 150ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both,
-             slide-up-in 150ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;
-}
-
-.backdrop-enter {
-  animation: backdrop-in 140ms ease both;
-}
-
-/* Heart toggle spring animation */
-@keyframes heart-pop {
-  0% { transform: scale(1); }
-  40% { transform: scale(1.3); }
-  70% { transform: scale(0.9); }
-  100% { transform: scale(1); }
-}
-
-.heart-animate {
-  animation: heart-pop 420ms var(--ease-spring, cubic-bezier(0.34, 1.2, 0.64, 1)) both;
-}
-
-/* Result reveal stagger for generation output grids */
-.result-reveal > * {
-  opacity: 0;
-  animation: slide-up-in 320ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;
-}
-
-.result-reveal > *:nth-child(1) { animation-delay: 0ms; }
-.result-reveal > *:nth-child(2) { animation-delay: 80ms; }
-.result-reveal > *:nth-child(3) { animation-delay: 160ms; }
-.result-reveal > *:nth-child(4) { animation-delay: 240ms; }
-.result-reveal > *:nth-child(5) { animation-delay: 320ms; }
-.result-reveal > *:nth-child(n+6) { animation-delay: 400ms; }
-
-/* Scroll-triggered entrance: hidden until revealed by IntersectionObserver */
-.scroll-entrance {
-  opacity: 0;
-  transform: translateY(16px);
-  transition: opacity 480ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)),
-              transform 480ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
-}
-
-.scroll-entrance.is-visible {
-  opacity: 1;
-  transform: translateY(0);
-}
-
-.scroll-entrance.is-visible > * {
-  animation: slide-up-in 380ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;
-}
-
-.scroll-entrance.is-visible > *:nth-child(1) { animation-delay: 60ms; }
-.scroll-entrance.is-visible > *:nth-child(2) { animation-delay: 140ms; }
-.scroll-entrance.is-visible > *:nth-child(3) { animation-delay: 220ms; }
-
-/* Chat message entrance animation */
-@keyframes chat-message-in {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.chat-message-enter {
-  animation: chat-message-in 220ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;
-}
-
-/* AnimatedPanel: CSS transition-based enter/exit for popovers */
-.animated-panel {
-  opacity: 0;
-  transform: scale(0.95) translateY(8px);
-  transition:
-    opacity 140ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)),
-    transform 140ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
-  pointer-events: none;
-}
-
-.animated-panel.is-visible {
-  opacity: 1;
-  transform: scale(1) translateY(0);
-  pointer-events: auto;
-}
-
-/* Ecommerce tool panel crossfade on tool switch */
-@keyframes tool-panel-fade-in {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-.tool-panel-enter {
-  animation: tool-panel-fade-in 180ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;
-}
-
 /* Stagger utility: apply to parent, children get delayed entrance */
 .motion-stagger > * {
   animation: list-item-in 280ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;

src/styles/components/page-transition.css

@@ -15,26 +15,3 @@
     transform: translateY(0);
   }
 }
-
-/* Directional exit transitions only — entrance is handled by child's page-motion */
-.page-motion--exit.is-forward {
-  animation: page-slide-out-forward 180ms ease both;
-}
-
-.page-motion--exit.is-backward {
-  animation: page-slide-out-backward 180ms ease both;
-}
-
-@keyframes page-slide-out-forward {
-  to {
-    opacity: 0;
-    transform: translateX(-16px);
-  }
-}
-
-@keyframes page-slide-out-backward {
-  to {
-    opacity: 0;
-    transform: translateX(16px);
-  }
-}

src/styles/components/primitives.css

@@ -29,8 +29,7 @@
   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: var(--surface-elevated, #222);
-  background-size: 220% 100%;
   animation: skeleton-shimmer 1.4s ease infinite;
 }
 
@@ -43,8 +42,7 @@
   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: var(--surface-elevated, #222);
-  background-size: 220% 100%;
   animation: skeleton-shimmer 1.4s ease infinite;
   animation-delay: 0.15s;
 }
@@ -53,12 +51,16 @@
   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: var(--surface-elevated, #222);
-  background-size: 220% 100%;
   animation: skeleton-shimmer 1.4s ease infinite;
   animation-delay: 0.3s;
 }
 
+@keyframes skeleton-shimmer {
+  0%, 100% { opacity: 0.4; }
+  50% { opacity: 0.7; }
+}
+
 .page-transition-wrap {
   width: 100%;
   height: 100%;

src/styles/pages/ecommerce.css

@@ -9,48 +9,6 @@
   font-family: Inter, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
 }
 
-/* Ecommerce generation progress bar */
-.ecommerce-progress-bar {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 10px 16px;
-  border-radius: var(--radius-sm, 10px);
-  background: rgba(var(--accent-rgb, 0, 255, 136), 0.08);
-  border: 1px solid rgba(var(--accent-rgb, 0, 255, 136), 0.18);
-  margin: 8px 0;
-}
-
-.ecommerce-progress-bar__label {
-  font-size: 13px;
-  font-weight: 700;
-  color: var(--fg-muted, #aeb8b1);
-  white-space: nowrap;
-}
-
-.ecommerce-progress-bar__track {
-  flex: 1;
-  height: 6px;
-  border-radius: 999px;
-  background: rgba(var(--accent-rgb, 0, 255, 136), 0.12);
-  overflow: hidden;
-}
-
-.ecommerce-progress-bar__fill {
-  height: 100%;
-  border-radius: 999px;
-  background: var(--accent, #00ff88);
-  transition: width 80ms linear;
-}
-
-.ecommerce-progress-bar__value {
-  font-size: 12px;
-  font-weight: 900;
-  color: var(--accent, #00ff88);
-  min-width: 40px;
-  text-align: right;
-}
-
 /* Product set page: target dark two-column workspace with floating detail input. */
 .product-clone-page[data-tool="set"] {
   display: block;

src/styles/pages/home.css

@@ -148,37 +148,83 @@
   min-width: 0;
   min-height: 72px;
   padding: 0 28px;
-  border: 1px solid var(--border-subtle);
+  border: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: 8px;
+  border-radius: 12px;
-  background: var(--bg-inset);
+  background: linear-gradient(180deg, rgba(20, 23, 26, 0.72) 0%, rgba(15, 17, 19, 0.84) 100%);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  box-shadow:
+    0 1px 0 rgba(255, 255, 255, 0.04) inset,
+    0 2px 8px rgba(0, 0, 0, 0.28);
   color: var(--fg-body);
   cursor: pointer;
-  font-size: 17px;
+  font-size: 16px;
-  font-weight: 850;
+  font-weight: 700;
-  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease;
+  letter-spacing: 0.03em;
+  transition:
+    border-color 240ms ease,
+    background 240ms ease,
+    color 240ms ease,
+    transform 240ms cubic-bezier(0.34, 1.2, 0.64, 1),
+    box-shadow 240ms ease;
 }
 
 .omni-home__entry .anticon {
-  font-size: 18px;
+  font-size: 19px;
+  transition: color 240ms ease, transform 240ms ease;
 }
 
 .omni-home__entry:hover {
-  border-color: var(--border-default);
+  border-color: rgba(255, 255, 255, 0.16);
-  background: var(--bg-hover);
+  background: linear-gradient(180deg, rgba(28, 32, 36, 0.78) 0%, rgba(18, 22, 25, 0.88) 100%);
+  box-shadow:
+    0 1px 0 rgba(255, 255, 255, 0.06) inset,
+    0 0 24px rgba(var(--accent-rgb), 0.06),
+    0 4px 16px rgba(0, 0, 0, 0.36);
   color: #ffffff;
-  transform: translateY(-1px);
+  transform: translateY(-2px);
+}
+
+.omni-home__entry:hover .anticon {
+  color: var(--accent);
+  transform: scale(1.08);
+}
+
+.omni-home__entry:active {
+  transform: translateY(0) scale(0.97);
+  box-shadow:
+    0 1px 0 rgba(255, 255, 255, 0.02) inset,
+    0 1px 4px rgba(0, 0, 0, 0.32);
+  transition-duration: 80ms;
 }
 
 .omni-home__entry--primary {
-  border-color: var(--accent);
+  border-color: rgba(var(--accent-rgb), 0.48);
-  background: var(--accent);
+  background: linear-gradient(180deg, rgba(0, 255, 136, 0.22) 0%, rgba(0, 220, 118, 0.14) 100%), var(--accent);
-  color: var(--dg-button-text, #061014);
+  box-shadow:
+    0 1px 0 rgba(255, 255, 255, 0.12) inset,
+    0 0 28px rgba(var(--accent-rgb), 0.18),
+    0 2px 12px rgba(0, 0, 0, 0.28);
+  color: #061014;
 }
 
 .omni-home__entry--primary:hover {
-  border-color: var(--accent-hover, var(--accent));
+  border-color: rgba(var(--accent-rgb), 0.64);
-  background: var(--accent-hover, var(--accent));
+  background: linear-gradient(180deg, rgba(0, 255, 136, 0.28) 0%, rgba(0, 230, 124, 0.18) 100%), var(--accent-hover);
-  color: var(--dg-button-text, #061014);
+  box-shadow:
+    0 1px 0 rgba(255, 255, 255, 0.16) inset,
+    0 0 40px rgba(var(--accent-rgb), 0.28),
+    0 6px 24px rgba(0, 0, 0, 0.36);
+  color: #061014;
+}
+
+.omni-home__entry--primary .anticon {
+  color: #061014;
+}
+
+.omni-home__entry--primary:hover .anticon {
+  color: #061014;
+  transform: scale(1.12);
 }
 
 .omni-home__carousel {
@@ -405,21 +451,6 @@
   transform: translateZ(20px) scale(1.02);
 }
 
-.omni-home__carousel-card-label {
-  position: absolute;
-  bottom: 12px;
-  left: 14px;
-  z-index: 2;
-  padding: 4px 12px;
-  border-radius: 999px;
-  background: rgba(var(--accent-rgb, 0, 255, 136), 0.16);
-  border: 1px solid rgba(var(--accent-rgb, 0, 255, 136), 0.24);
-  color: var(--fg-body, #f3f5f2);
-  font-size: 12px;
-  font-weight: 900;
-  white-space: nowrap;
-}
-
 .omni-home__carousel-card:hover {
   box-shadow:
     0 28px 58px rgb(0 0 0 / 34%),
@@ -585,13 +616,6 @@
   object-position: center;
   transform: none;
   transform-origin: center;
-  transition: transform 280ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)),
-              filter 280ms ease;
-}
-
-.omni-home__feature-visual:hover img {
-  transform: scale(1.03);
-  filter: saturate(1.1) contrast(1.06) brightness(1.04);
 }
 
 .omni-home__feature-stats {
@@ -743,14 +767,6 @@
   padding: 16px 18px;
   box-shadow: 0 20px 46px rgb(0 0 0 / 26%);
   backdrop-filter: blur(12px);
-  cursor: pointer;
-  transition: transform 200ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)),
-              box-shadow 200ms ease;
-}
-
-.omni-home__experience-route:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 24px 52px rgb(0 0 0 / 32%);
 }
 
 .omni-home__experience-route b {

src/styles/pages/legacy-pages.css

@@ -14271,6 +14271,19 @@
 }
 
 /* ─── Page Motion Animation ─── */
+.page-motion {
+  animation: pixel-page-enter 0.3s ease-out;
+}
+
+@keyframes pixel-page-enter {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
 /* ─── Workbench Page Layout Overrides ─── */
 .ai-workbench-page.is-active .ai-workbench-shell {
   grid-template-columns: 1fr auto;

src/styles/pages/script-tokens.css

@@ -3400,6 +3400,7 @@
   width: 100%;
   height: 100%;
   min-height: 520px;
+  max-height: 520px;
   padding: 18px 22px;
   border: none;
   outline: none;
@@ -3409,6 +3410,7 @@
   font-size: 14px;
   line-height: 1.9;
   resize: none;
+  overflow-y: auto;
 }
 
 .script-eval-v4-text-input::placeholder {
@@ -4268,6 +4270,11 @@
 .script-eval-v4-text-shell,
 .script-eval-v4-text-input {
   min-height: calc(100vh - 422px);
+  max-height: calc(100vh - 422px);
+}
+
+.script-eval-v4-text-input {
+  overflow-y: auto;
 }
 
 .script-eval-v4-score-card {

src/styles/shell/app-shell.css

@@ -135,11 +135,6 @@
   font-size: 15px;
   font-weight: 900;
   cursor: pointer;
-  transition: opacity 160ms ease;
-}
-
-.brand-lockup:active {
-  opacity: 0.85;
 }
 
 .brand-lockup__mark {
@@ -308,15 +303,6 @@
   background: var(--bg-hover);
 }
 
-.creator-button:active,
-.member-button:active,
-.profile-button:active,
-.icon-button:active,
-.theme-toggle:active {
-  transform: scale(0.97);
-  transition-duration: 80ms;
-}
-
 .profile-button--guest:hover {
   background: rgba(var(--accent-rgb), 0.88);
   color: #07100b;
@@ -495,15 +481,6 @@
   box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.34);
 }
 
-@keyframes nav-activate-pulse {
-  0% { box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.34), 0 0 8px rgba(var(--accent-rgb), 0.25); }
-  100% { box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.34); }
-}
-
-.floating-nav__button.nav-just-activated {
-  animation: nav-activate-pulse 320ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;
-}
-
 .floating-nav__button:hover .floating-nav__label,
 .floating-nav__button:focus-visible .floating-nav__label,
 .floating-nav__button.is-active .floating-nav__label {

src/styles/themes/dark-green.css

@@ -3990,13 +3990,6 @@
   isolation: isolate;
   break-inside: avoid;
   aspect-ratio: 4 / 5;
-  transition: transform 200ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)),
-              box-shadow 200ms ease;
-}
-
-.web-shell[data-ui-theme="dark-green"] .community-page .community-case-card--mosaic:hover {
-  transform: scale(1.02);
-  box-shadow: 0 8px 24px rgb(0 0 0 / 20%);
 }
 
 .web-shell[data-ui-theme="dark-green"] .community-page .community-case-card--tile-0,

vite.config.ts

@@ -1,49 +1,45 @@
 import react from "@vitejs/plugin-react";
 import { compression } from "vite-plugin-compression2";
-import { defineConfig, loadEnv } from "vite";
+import { defineConfig } from "vite";
 
-export default defineConfig(({ mode }) => {
+export default defineConfig({
-  const env = loadEnv(mode, process.cwd(), "");
+  plugins: [
-
+    react(),
-  return {
+    compression({ algorithms: ["gzip", "brotliCompress"], threshold: 1024 }),
-    plugins: [
+  ],
-      react(),
+  server: {
-      compression({ algorithms: ["gzip", "brotliCompress"], threshold: 1024 }),
+    port: 5174,
-    ],
+    host: "127.0.0.1",
-    server: {
+    proxy: {
-      port: 5174,
+      "/api": {
-      host: "127.0.0.1",
+        target: "http://47.110.225.76:3600",
-      proxy: {
+        changeOrigin: true,
-        "/api": {
+      },
-          target: env.VITE_DEV_PROXY || "http://47.110.225.76:3600",
+    },
-          changeOrigin: true,
+  },
+  preview: {
+    port: 4174,
+    host: "127.0.0.1",
+  },
+  esbuild: {
+    drop: ["debugger"],
+  },
+  build: {
+    sourcemap: "hidden",
+    rollupOptions: {
+      output: {
+        manualChunks(id: string) {
+          if (id.includes("node_modules/react") || id.includes("node_modules/react-dom") || id.includes("node_modules/scheduler")) {
+            return "vendor-react";
+          }
+          if (id.includes("node_modules/@ant-design") || id.includes("node_modules/antd") || id.includes("node_modules/rc-")) {
+            return "vendor-antd";
+          }
+          if (id.includes("node_modules/@xyflow")) {
+            return "vendor-xyflow";
+          }
         },
       },
     },
-    preview: {
+  },
-      port: 4174,
+});
-      host: "127.0.0.1",
-    },
-    esbuild: {
-      drop: ["console", "debugger"],
-    },
-    build: {
-      sourcemap: "hidden",
-      rollupOptions: {
-        output: {
-          manualChunks(id: string) {
-            if (id.includes("node_modules/react") || id.includes("node_modules/react-dom") || id.includes("node_modules/scheduler")) {
-              return "vendor-react";
-            }
-            if (id.includes("node_modules/@ant-design") || id.includes("node_modules/antd") || id.includes("node_modules/rc-")) {
-              return "vendor-antd";
-            }
-            if (id.includes("node_modules/@xyflow")) {
-              return "vendor-xyflow";
-            }
-          },
-        },
-      },
-    },
-  };
-});