Merge origin/master into feature/首页和下方的功能页面 - 解决冲突

Reviewed-on: #5

.env.example

@@ -0,0 +1,8 @@
+# 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("workbench");
+      handleSetView("login");
     }
   }, [clearSessionState, setProjects, setProjectsLoaded, setUsage, clearTasks, setRuntimeNotifications, setServerNotifications, setCanvasWorkflow, setCurrentCanvasProjectId, setWorkspaceExpanded, handleSetView]);
 
@@ -492,7 +492,7 @@ function App() {
         if (nextSession) {
           setSession(nextSession);
         } else {
-          clearAuthenticatedState();
+          clearAuthenticatedState({ resetView: true });
         }
       } finally {
         checking = false;

src/api/adVideoPlanClient.ts

@@ -1,7 +1,8 @@
 import { buildApiUrl, buildAuthHeaders } from "./serverConnection";
 
 const TEXT_MODEL = "qwen-max";
-const VISION_MODEL = "qwen3.6-plus";
+const VISION_MODEL = "qwen3.7-plus";
+const VISION_FALLBACK_MODEL = "qwen-vl-plus";
 
 export interface AdVideoUserConfig {
   platform: string;
@@ -107,16 +108,42 @@ interface ChatMessage {
   content: string;
 }
 
+const MAX_RETRIES = 3;
+const RETRY_BASE_MS = 2000;
+const CHAT_TIMEOUT_MS = 120_000; // 2 minutes per AI call
+
+function isTransientError(err: unknown): boolean {
+  if (!(err instanceof Error)) return false;
+  const msg = err.message.toLowerCase();
+  return /\b429\b/.test(msg) || msg.includes("signal timed out") || msg.includes("aborted") || msg.includes("timeout");
+}
+
+async function retryOnTransient<T>(fn: () => Promise<T>, signal?: AbortSignal): Promise<T> {
+  for (let attempt = 0; attempt <= MAX_RETRIES; attempt++) {
+    try {
+      return await fn();
+    } catch (err) {
+      if (signal?.aborted) throw err;
+      if (attempt === MAX_RETRIES) throw err;
+      if (!isTransientError(err)) throw err;
+      const delay = RETRY_BASE_MS * 2 ** attempt + Math.random() * 1000;
+      await new Promise((r) => setTimeout(r, delay));
+    }
+  }
+  throw new Error("unreachable");
+}
+
 async function chat(
   systemPrompt: string,
   userContent: string,
   options?: { model?: string; signal?: AbortSignal },
 ): Promise<string> {
+  return retryOnTransient(async () => {
     const messages: ChatMessage[] = [
       { role: "system", content: systemPrompt },
       { role: "user", content: userContent },
     ];
-  const timeoutSignal = AbortSignal.timeout(60000);
+    const timeoutSignal = AbortSignal.timeout(CHAT_TIMEOUT_MS);
     const combinedSignal = options?.signal
       ? AbortSignal.any([options.signal, timeoutSignal])
       : timeoutSignal;
@@ -137,6 +164,7 @@ async function chat(
       payload?.content ?? payload?.choices?.[0]?.message?.content ?? payload?.text ?? "";
     if (!content) throw new Error("模型未返回有效内容");
     return content;
+  }, options?.signal);
 }
 
 async function visionChat(
@@ -149,30 +177,43 @@ async function visionChat(
     ...imageUrls.map((url) => ({ type: "image_url", image_url: { url } })),
     { type: "text", text },
   ];
-  const timeoutSignal = AbortSignal.timeout(60000);
+  const messages = [
+    { role: "system", content: systemPrompt },
+    { role: "user", content },
+  ];
+
+  for (const model of [VISION_MODEL, VISION_FALLBACK_MODEL]) {
+    const timeoutSignal = AbortSignal.timeout(CHAT_TIMEOUT_MS);
     const combinedSignal = signal
       ? AbortSignal.any([signal, timeoutSignal])
       : timeoutSignal;
+    try {
+      const out = await retryOnTransient(async () => {
         const res = await fetch(buildApiUrl("ai/chat"), {
           method: "POST",
           headers: buildAuthHeaders(),
-    body: JSON.stringify({
+          body: JSON.stringify({ model, messages, stream: false, temperature: 0.3 }),
-      model: VISION_MODEL,
-      messages: [
-        { role: "system", content: systemPrompt },
-        { role: "user", content },
-      ],
-      stream: false,
-      temperature: 0.3,
-    }),
           signal: combinedSignal,
         });
-  if (!res.ok) throw new Error(`图片理解调用失败 (${res.status})`);
+        if (!res.ok) {
+          const errBody = await res.text().catch(() => "");
+          if (model === VISION_MODEL && errBody.includes("image format")) throw new Error("IMAGE_FORMAT_FALLBACK");
+          throw new Error(`图片理解调用失败 (${res.status})`);
+        }
         const payload = await res.json();
-  const out: string =
+        const result: string =
           payload?.content ?? payload?.choices?.[0]?.message?.content ?? payload?.text ?? "";
-  if (!out) throw new Error("图片理解未返回有效内容");
+        if (!result) throw new Error("图片理解未返回有效内容");
+        return result;
+      }, signal);
       return out;
+    } catch (err) {
+      if (err instanceof Error && err.message === "IMAGE_FORMAT_FALLBACK") continue;
+      if (model === VISION_MODEL && err instanceof Error && err.message?.includes("图片理解调用失败")) continue;
+      throw err;
+    }
+  }
+  throw new Error("图片理解调用失败，所有模型均不可用");
 }
 
 const IMAGE_UNDERSTANDING_PROMPT = `你是电商产品图片分析专家。请分析用户提供的产品图片，识别产品主体、外观、颜色、材质、形状、尺寸感、品牌标识、关键部件、可视化卖点和适合展示的镜头角度。请用简洁的中文段落描述，不要编造图片中看不到的信息。`;

src/api/aiGenerationClient.ts

@@ -403,6 +403,24 @@ export const aiGenerationClient = {
     return readJsonResponse<{ url: string; ossKey?: string }>(res, "Asset upload response failed");
   },
 
+  async uploadAssetBinary(blob: Blob, options?: { name?: string; mimeType?: string; scope?: string }): Promise<{ url: string; signedUrl?: string; ossKey?: string }> {
+    const form = new FormData();
+    form.append("file", blob, options?.name || "upload.png");
+    if (options?.scope) form.append("scope", options.scope);
+    if (options?.mimeType) form.append("mimeType", options.mimeType);
+    // Exclude Content-Type so browser auto-sets multipart/form-data with boundary
+    const { "Content-Type": _ct, ...authHeaders } = buildAuthHeaders();
+    const res = await fetch(buildApiUrl("oss/upload-binary"), {
+      method: "POST",
+      headers: authHeaders,
+      body: form,
+    });
+    if (!res.ok) {
+      await throwResponseError(res, "Binary asset upload failed");
+    }
+    return readJsonResponse<{ url: string; ossKey?: string }>(res, "Binary asset upload response failed");
+  },
+
   async uploadAssetByUrl(input: UploadAssetByUrlInput): Promise<{ url: string; signedUrl?: string; ossKey?: string }> {
     const res = await fetch(buildApiUrl("oss/upload-by-url"), {
       method: "POST",

src/api/scriptEvalClient.ts

@@ -10,39 +10,50 @@ export interface ScriptEvalResult {
   suggestions: string[];
 }
 
-const EVAL_SYSTEM_PROMPT = `你是一位专业的剧本评测专家。请对用户提供的剧本进行六维评分分析，并以严格的 JSON 格式返回结果。
+const EVAL_SYSTEM_PROMPT = `你是一位资深影视剧本评审专家，拥有二十年以上的编剧、制片和剧本医生经验。你精通各类影视叙事理论（三幕式、英雄之旅、起承转合、序列法），同时深度跟踪AIGC短剧/漫剧行业最新趋势。你的任务是对用户提供的剧本进行严谨、系统、多维度的量化评分。
 
-六个评分维度：
+【剧本类型识别】
-1. hook（钩子设计，满分20）：开篇吸引力、悬念设置、黄金三秒法则
+收到剧本后，首先判断类型：AIGC短剧/漫剧（单集5-30分钟，竖屏平台，高密度反转、强节奏）或传统影视剧本（单集40分钟以上，长视频平台，完整起承转合）。类型判定将影响各维度的评价侧重点。
-2. character（角色塑造，满分15）：人物立体度、动机合理性、弧光设计
-3. plot（剧情结构，满分20）：起承转合、节奏把控、冲突设计
-4. dialogue（台词对白，满分15）：语言质感、角色差异化、潜台词
-5. visual（画面表现，满分15）：镜头感、空间层次、视觉冲击力
-6. content（内容深度，满分15）：主题表达、情感共鸣、思想内核
 
-请严格按以下 JSON 格式返回（不要包含任何其他文字）：
+【评分体系（100分制，六个维度）】
+1. hook 钩子设计（20分）：开篇钩子、集末钩子、场景内钩子、悬念链完整性。短剧前3秒须有即时爆点；长剧第一幕结束前须建立核心悬念。
+2. plot 剧情结构（20分）：结构框架、节奏控制、冲突设计、逻辑自洽。短剧"每分钟有事件"，反转密度加分；长剧需处理好B线C线与主线交织。
+3. character 角色塑造（18分）：主角弧光、角色辨识度、角色动机、配角质量。短剧角色须在前2分钟建立；长剧需要内在矛盾和多阶段成长。
+4. dialogue 台词对白（15分）：角色语言区分度、信息传递效率、潜台词与留白、金句与记忆点。
+5. visual 画面表现（15分）：场景描写质量、视觉叙事技巧、镜头感与节奏、制作可行性。AIGC需考虑AI生成技术边界与一致性。
+6. content 内容深度（12分）：主题表达、情感共鸣、社会/人性洞察。
+
+【评分铁律】
+- 扣分必须明确指出剧本中的具体段落/场景/台词。
+- 严禁给出任何维度的满分，必须有扣分理由。
+- 优缺点都要充分展开，不可只批不夸或只夸不批。
+- 不因题材类型偏见降低评分，不因某一方面出色而抬高其他维度（避免光环效应）。
+- 敢于拉开各维度分数差距，避免全部给中等分数。
+
+【等级标准】按总分百分比：S≥90 | A 80-89 | B 70-79 | C 60-69 | D<60。
+
+请严格按以下 JSON 格式返回（不要包含任何其他文字，不要用代码块包裹以外的说明）：
 {
-  "dimensionScores": { "hook": 数字, "character": 数字, "plot": 数字, "dialogue": 数字, "visual": 数字, "content": 数字 },
+  "dimensionScores": { "hook": 数字, "plot": 数字, "character": 数字, "dialogue": 数字, "visual": 数字, "content": 数字 },
-  "summary": "一句话总结评价",
+  "summary": "200-300字综合评价，概括整体质量、市场潜力与目标受众匹配度",
-  "issues": ["问题1", "问题2", ...],
+  "issues": ["每条指出具体维度的扣分点并引用剧本原文位置", ...],
-  "highlights": ["亮点1", "亮点2", ...],
+  "highlights": ["核心亮点，引用剧本具体场景", ...],
-  "suggestions": ["建议1", "建议2", ...]
+  "suggestions": ["按优先级排列的改进建议（最优先/次优先/可优化）", ...]
 }`;
 
-const DIMENSION_WEIGHTS: Record<string, { maxScore: number; weight: number }> = {
+const DIMENSION_WEIGHTS: Record<string, { maxScore: number }> = {
-  hook: { maxScore: 20, weight: 0.2 },
+  hook: { maxScore: 20 },
-  character: { maxScore: 15, weight: 0.15 },
+  plot: { maxScore: 20 },
-  plot: { maxScore: 20, weight: 0.2 },
+  character: { maxScore: 18 },
-  dialogue: { maxScore: 15, weight: 0.15 },
+  dialogue: { maxScore: 15 },
-  visual: { maxScore: 15, weight: 0.15 },
+  visual: { maxScore: 15 },
-  content: { maxScore: 15, weight: 0.15 },
+  content: { maxScore: 12 },
 };
 
 function computeTotalAndGrade(scores: Record<string, number>): { totalScore: number; grade: string } {
   const totalScore = Math.round(
     Object.entries(DIMENSION_WEIGHTS).reduce((sum, [key, dim]) => {
-      const score = Math.max(0, Math.min(dim.maxScore, scores[key] ?? 0));
+      return sum + Math.max(0, Math.min(dim.maxScore, scores[key] ?? 0));
-      return sum + (score / dim.maxScore) * 100 * dim.weight;
     }, 0),
   );
   const grade = totalScore >= 90 ? "S" : totalScore >= 80 ? "A" : totalScore >= 70 ? "B" : totalScore >= 60 ? "C" : "D";
@@ -56,6 +67,7 @@ function extractJson(text: string): unknown {
 }
 
 export async function evaluateScript(script: string, signal?: AbortSignal): Promise<ScriptEvalResult> {
+  console.log("[API] 发送评测请求，剧本长度:", script.slice(0, 8000).length, "字符");
   const res = await fetch(buildApiUrl("ai/chat"), {
     method: "POST",
     headers: buildAuthHeaders(),
@@ -71,11 +83,15 @@ export async function evaluateScript(script: string, signal?: AbortSignal): Prom
     signal,
   });
 
+  console.log("[API] 响应状态:", res.status, res.statusText);
+
   if (!res.ok) {
     throw new Error(`评测请求失败 (${res.status})`);
   }
 
   const payload = await res.json();
+  console.log("[API] 原始响应体:", payload);
+
   const content: string = payload?.choices?.[0]?.message?.content
     ?? payload?.result?.content
     ?? payload?.content
@@ -84,7 +100,11 @@ export async function evaluateScript(script: string, signal?: AbortSignal): Prom
 
   if (!content) throw new Error("模型未返回有效内容");
 
+  console.log("[API] 模型返回内容 (前500字符):", content.slice(0, 500));
+
   const parsed = extractJson(content) as Record<string, unknown>;
+  console.log("[API] 解析后的JSON:", parsed);
+
   const dimensionScores: Record<string, number> = {};
   const rawScores = parsed.dimensionScores as Record<string, number> | undefined;
   if (!rawScores || typeof rawScores !== "object") throw new Error("评分格式异常");
@@ -95,6 +115,7 @@ export async function evaluateScript(script: string, signal?: AbortSignal): Prom
   }
 
   const { totalScore, grade } = computeTotalAndGrade(dimensionScores);
+  console.log("[API] 计算后总分:", totalScore, "等级:", grade);
 
   return {
     totalScore,

src/components/AnimatedPanel.tsx

@@ -0,0 +1,54 @@
+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,6 +16,7 @@ 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;
@@ -61,6 +62,8 @@ 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";
@@ -100,6 +103,15 @@ 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;
@@ -223,8 +235,8 @@ function AppShell({
                   <button
                     type="button"
                     className={`floating-nav__button${isActive ? " is-active" : ""}${
-                      workspaceExpanded && index === 3 ? " has-divider" : ""
+                      navJustActivated === item.key ? " nav-just-activated" : ""
-                    }`}
+                    }${workspaceExpanded && index === 3 ? " has-divider" : ""}`}
                     title={`${item.label} / ${item.hint}`}
                     aria-label={item.label}
                     onClick={() => onSelectView(item.children?.[0]?.key ?? item.key)}
@@ -330,8 +342,7 @@ function AppShell({
                     </>
                   )}
                 </button>
-                {session && profileOpen ? (
+                <AnimatedPanel open={session ? profileOpen : false} className="profile-popover panel-surface">
-                  <div className="profile-popover panel-surface">
                     <div className="profile-popover__head">
                       <span className="profile-popover__avatar">
                         {avatarUrl ? <img src={avatarUrl} alt={displayName} /> : avatarLabel}
@@ -410,8 +421,7 @@ function AppShell({
                         </button>
                       </>
                     ) : null}
-                  </div>
+                  </AnimatedPanel>
-                ) : null}
               </div>
             </div>
             </header>

src/components/NotificationCenter.tsx

@@ -10,6 +10,7 @@ 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" }} />,
@@ -115,8 +116,7 @@ function NotificationCenter({ items, onNavigate, onMarkRead, onMarkAllRead, onCl
           <span className="notification-center__badge">{unreadCount > 99 ? "99+" : unreadCount}</span>
         )}
       </button>
-      {open && (
+      <AnimatedPanel open={open} className="notification-center__panel" exitDuration={140}>
-        <div className="notification-center__panel">
           <div className="notification-center__header">
             <span className="notification-center__title">通知中心</span>
             <div className="notification-center__header-actions">
@@ -158,8 +158,7 @@ function NotificationCenter({ items, onNavigate, onMarkRead, onMarkAllRead, onCl
               ))
             )}
           </div>
-        </div>
+        </AnimatedPanel>
-      )}
     </div>
   );
 }

src/components/PageTransition.tsx

@@ -7,9 +7,40 @@ interface PageTransitionProps {
 
 const EXIT_DURATION_MS = 180;
 
+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);
+}
+
 export default function PageTransition({ viewKey, children }: PageTransitionProps) {
   const [displayedChildren, setDisplayedChildren] = useState(children);
   const [phase, setPhase] = useState<"idle" | "exit">("idle");
+  const [direction, setDirection] = useState<"forward" | "backward" | "neutral">("neutral");
   const prevKeyRef = useRef(viewKey);
   const timerRef = useRef<ReturnType<typeof setTimeout>>();
 
@@ -18,6 +49,15 @@ export default function PageTransition({ viewKey, children }: PageTransitionProp
       setDisplayedChildren(children);
       return;
     }
+    const prevIndex = getNavIndex(prevKeyRef.current);
+    const nextIndex = getNavIndex(viewKey);
+    if (prevIndex < nextIndex) {
+      setDirection("forward");
+    } else if (prevIndex > nextIndex) {
+      setDirection("backward");
+    } else {
+      setDirection("neutral");
+    }
     prevKeyRef.current = viewKey;
     setPhase("exit");
     timerRef.current = setTimeout(() => {
@@ -27,8 +67,10 @@ export default function PageTransition({ viewKey, children }: PageTransitionProp
     return () => clearTimeout(timerRef.current);
   }, [viewKey, children]);
 
+  const dirClass = direction === "forward" ? " is-forward" : direction === "backward" ? " is-backward" : "";
+
   return (
-    <div className={phase === "exit" ? "page-transition-wrap page-motion--exit" : "page-transition-wrap"}>
+    <div className={phase === "exit" ? `page-transition-wrap page-motion--exit${dirClass}` : `page-transition-wrap${phase === "idle" && direction !== "neutral" ? ` page-motion--enter${dirClass}` : ""}`}>
       {displayedChildren}
     </div>
   );

src/features/community/CommunityPage.tsx

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

src/features/ecommerce/EcommercePage.tsx

@@ -11,6 +11,7 @@ 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`;
@@ -1321,18 +1322,15 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
   });
 
   const uploadProductImages = async (): Promise<string[]> => {
+    const SUPPORTED_IMAGE_TYPES = new Set(["image/jpeg", "image/png", "image/webp", "image/gif"]);
     const urls: string[] = [];
     for (const item of productImages) {
       try {
         const resp = await fetch(item.src);
-        const blob = await resp.blob();
+        const rawBlob = await resp.blob();
-        const dataUrl = await new Promise<string>((resolve, reject) => {
+        const mimeType = SUPPORTED_IMAGE_TYPES.has(rawBlob.type) ? rawBlob.type : "image/png";
-          const reader = new FileReader();
+        const blob = rawBlob.type === mimeType ? rawBlob : new Blob([rawBlob], { type: mimeType });
-          reader.onload = () => resolve(String(reader.result));
+        const { url } = await aiGenerationClient.uploadAssetBinary(blob, { name: item.name, mimeType, scope: "ecommerce-product" });
-          reader.onerror = () => reject(reader.error);
-          reader.readAsDataURL(blob);
-        });
-        const { url } = await aiGenerationClient.uploadAsset({ dataUrl, name: item.name, mimeType: blob.type });
         urls.push(url);
       } catch {
         // skip images that fail to upload
@@ -2405,6 +2403,7 @@ 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}
@@ -2550,6 +2549,7 @@ 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 +2595,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">
+          <div className="product-set-card-grid result-reveal">
             {productSetPreviewCards.slice(1).map((card) => (
               <button key={card.id} type="button" onClick={() => openProductSetPreview(card)}>
                 <img src={card.src} alt={card.label} />
@@ -2608,6 +2608,7 @@ 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>
       )}
@@ -2653,7 +2654,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
             <span>原图素材</span>
           </button>
           <div className="clone-ai-flow-arrow" aria-hidden="true" />
-          <div className="clone-ai-result-grid">
+          <div className="clone-ai-result-grid result-reveal">
             {clonePreviewCards.map((card) => (
               <button key={card.id} type="button" onClick={() => openProductSetPreview(card)}>
                 <img src={card.src} alt={card.label} />
@@ -2666,6 +2667,7 @@ 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}。`
@@ -2817,7 +2819,8 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
 
         <aside
           id={isCloneTool ? "ecommerce-clone-settings-panel" : undefined}
-          className="product-clone-panel"
+          className={`product-clone-panel tool-panel-enter`}
+          key={activeTool}
           aria-label={`${pageLabel}参数`}
           aria-hidden={isCloneTool && isCloneSettingsCollapsed ? true : undefined}
         >

src/features/ecommerce/EcommerceProgressBar.tsx

@@ -0,0 +1,30 @@
+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/ecommerce/ecommerceVideoService.ts

@@ -9,7 +9,6 @@ import {
   type AdVideoUserConfig,
 } from "../../api/adVideoPlanClient";
 import { aiGenerationClient } from "../../api/aiGenerationClient";
-import { uploadAssetWithProgress } from "../../api/uploadWithProgress";
 import { waitForTask } from "../../api/taskSubscription";
 import { resolveVideoRequestModel } from "../../utils/resolveVideoModel";
 import type {
@@ -34,12 +33,18 @@ export async function runVideoPlan(
 
   onStepStart("upload");
   const imageUrls: string[] = [];
-  for (const dataUrl of imageDataUrls) {
+  const SUPPORTED_IMAGE_TYPES = new Set(["image/jpeg", "image/png", "image/webp", "image/gif"]);
-    const result = await uploadAssetWithProgress(
+  for (const srcUrl of imageDataUrls) {
-      { dataUrl, scope: "ecommerce-product", mimeType: "image/png" },
+    try {
-      { signal },
+      const resp = await fetch(srcUrl);
-    );
+      const rawBlob = await resp.blob();
+      const mimeType = SUPPORTED_IMAGE_TYPES.has(rawBlob.type) ? rawBlob.type : "image/png";
+      const blob = rawBlob.type === mimeType ? rawBlob : new Blob([rawBlob], { type: mimeType });
+      const result = await aiGenerationClient.uploadAssetBinary(blob, { mimeType, scope: "ecommerce-product" });
       imageUrls.push(result.url);
+    } catch {
+      // skip images that fail to upload
+    }
   }
   onStepDone("upload");
 

src/features/home/HomePage.tsx

@@ -9,10 +9,20 @@ import {
 } from "@ant-design/icons";
 import { useCallback, useEffect, useMemo, useRef, useState, type CSSProperties } from "react";
 import type { WebViewKey, WebImageWorkbenchTool } from "../../types";
+import { useScrollEntrance } from "../../hooks/useScrollEntrance";
 import WelcomeSplash from "./WelcomeSplash";
 import ToolboxSection from "./ToolboxSection";
 import ScriptReviewVisual from "./ScriptReviewVisual";
 
+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`;
 const heroImage2 = `${OSS_MUBAN}/hero-2.png`;

src/features/home/WelcomeSplash.tsx

@@ -8,6 +8,10 @@ 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);
@@ -16,15 +20,27 @@ export default function WelcomeSplash({ onEnter }: WelcomeSplashProps) {
 
   const handleEnter = useCallback(() => {
     setExiting(true);
-    setTimeout(onEnter, 700);
+    setTimeout(onEnter, prefersReducedMotion ? 0 : 700);
   }, [onEnter]);
 
   useEffect(() => {
-    const timer = setTimeout(() => setShowWelcome(true), 6000);
+    const timer = setTimeout(() => setShowWelcome(true), prefersReducedMotion ? 0 : 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${message.role === "user" ? " is-user" : ""}`}>
+                        <article key={message.id} className={`ai-chat-message-row chat-message-enter${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

@@ -0,0 +1,31 @@
+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,6 +48,7 @@
   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,11 +34,118 @@
   }
 }
 
+/* 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,3 +15,56 @@
     transform: translateY(0);
   }
 }
+
+/* Directional page transitions */
+.page-motion--enter.is-forward {
+  animation: page-slide-in-forward 200ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;
+}
+
+.page-motion--enter.is-backward {
+  animation: page-slide-in-backward 200ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;
+}
+
+.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-in-forward {
+  from {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes page-slide-in-backward {
+  from {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@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,7 +29,8 @@
   width: 40%;
   height: 24px;
   border-radius: 8px;
-  background: var(--surface-elevated, #222);
+  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;
 }
 
@@ -42,7 +43,8 @@
   flex: 1;
   height: 140px;
   border-radius: 14px;
-  background: var(--surface-elevated, #222);
+  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;
 }
@@ -51,16 +53,12 @@
   width: 100%;
   height: 200px;
   border-radius: 14px;
-  background: var(--surface-elevated, #222);
+  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;
 }
 
-@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,6 +9,48 @@
   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

@@ -405,6 +405,21 @@
   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%),
@@ -570,6 +585,13 @@
   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);
 }
 
 
@@ -722,6 +744,14 @@
   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,19 +14271,6 @@
 }
 
 /* ─── 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/shell/app-shell.css

@@ -135,6 +135,11 @@
   font-size: 15px;
   font-weight: 900;
   cursor: pointer;
+  transition: opacity 160ms ease;
+}
+
+.brand-lockup:active {
+  opacity: 0.85;
 }
 
 .brand-lockup__mark {
@@ -303,6 +308,15 @@
   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;
@@ -481,6 +495,15 @@
   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,6 +3990,13 @@
   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,8 +1,11 @@
 import react from "@vitejs/plugin-react";
 import { compression } from "vite-plugin-compression2";
-import { defineConfig } from "vite";
+import { defineConfig, loadEnv } from "vite";
 
-export default defineConfig({
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd(), "");
+
+  return {
     plugins: [
       react(),
       compression({ algorithms: ["gzip", "brotliCompress"], threshold: 1024 }),
@@ -12,7 +15,7 @@ export default defineConfig({
       host: "127.0.0.1",
       proxy: {
         "/api": {
-        target: "http://47.110.225.76:3600",
+          target: env.VITE_DEV_PROXY || "http://47.110.225.76:3600",
           changeOrigin: true,
         },
       },
@@ -42,4 +45,5 @@ export default defineConfig({
         },
       },
     },
+  };
 });