feat: 个人中心界面UI优化，提升商业产品精致度

ProfilePage组件优化：
- 新增个性签名编辑功能（内联编辑/确认/取消交互）
- 新增 icon 导入（EditOutlined, CheckOutlined, CloseOutlined）
- 新增 formatProfileDate 工具函数，统一日期格式化（中文友好）
- 新增 formatTaskType 函数，任务类型中文化显示
- 新增 formatTaskStatus 函数，任务状态中文化显示
- 新增 formatAssetStatus 函数，资产状态中文化显示
- 优化空状态展示，增加图标占位

dark-green主题层样式增强：
- 个人中心背景增加微光渐变（accent光晕+半透明遮罩）
- Banner区域高度优化为214px，增加底部渐变分割线
- Banner叠加层增加径向光晕效果
- Banner编辑按钮增加毛玻璃质感（backdrop-filter）
- 侧边栏/主体/选项卡/列表卡片等多处细节增强
- 按钮、标签、统计数字等组件加入微交互
- 保持暗绿主题配色体系不变，仅提升精致度

.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,36 +108,63 @@ 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> {
-  const messages: ChatMessage[] = [
-    { role: "system", content: systemPrompt },
-    { role: "user", content: userContent },
-  ];
-  const timeoutSignal = AbortSignal.timeout(60000);
-  const combinedSignal = options?.signal
-    ? AbortSignal.any([options.signal, timeoutSignal])
-    : timeoutSignal;
-  const res = await fetch(buildApiUrl("ai/chat"), {
-    method: "POST",
-    headers: buildAuthHeaders(),
-    body: JSON.stringify({
-      model: options?.model ?? TEXT_MODEL,
-      messages,
-      stream: false,
-      temperature: 0.4,
-    }),
-    signal: combinedSignal,
-  });
-  if (!res.ok) throw new Error(`AI 调用失败 (${res.status})`);
-  const payload = await res.json();
-  const content: string =
-    payload?.content ?? payload?.choices?.[0]?.message?.content ?? payload?.text ?? "";
-  if (!content) throw new Error("模型未返回有效内容");
-  return content;
+  return retryOnTransient(async () => {
+    const messages: ChatMessage[] = [
+      { role: "system", content: systemPrompt },
+      { role: "user", content: userContent },
+    ];
+    const timeoutSignal = AbortSignal.timeout(CHAT_TIMEOUT_MS);
+    const combinedSignal = options?.signal
+      ? AbortSignal.any([options.signal, timeoutSignal])
+      : timeoutSignal;
+    const res = await fetch(buildApiUrl("ai/chat"), {
+      method: "POST",
+      headers: buildAuthHeaders(),
+      body: JSON.stringify({
+        model: options?.model ?? TEXT_MODEL,
+        messages,
+        stream: false,
+        temperature: 0.4,
+      }),
+      signal: combinedSignal,
+    });
+    if (!res.ok) throw new Error(`AI 调用失败 (${res.status})`);
+    const payload = await res.json();
+    const content: string =
+      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 combinedSignal = signal
-    ? AbortSignal.any([signal, timeoutSignal])
-    : timeoutSignal;
-  const res = await fetch(buildApiUrl("ai/chat"), {
-    method: "POST",
-    headers: buildAuthHeaders(),
-    body: JSON.stringify({
-      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})`);
-  const payload = await res.json();
-  const out: string =
-    payload?.content ?? payload?.choices?.[0]?.message?.content ?? payload?.text ?? "";
-  if (!out) throw new Error("图片理解未返回有效内容");
-  return out;
+  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({ model, messages, stream: false, temperature: 0.3 }),
+          signal: combinedSignal,
+        });
+        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 result: string =
+          payload?.content ?? payload?.choices?.[0]?.message?.content ?? payload?.text ?? "";
+        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）：开篇吸引力、悬念设置、黄金三秒法则
-2. character（角色塑造，满分15）：人物立体度、动机合理性、弧光设计
-3. plot（剧情结构，满分20）：起承转合、节奏把控、冲突设计
-4. dialogue（台词对白，满分15）：语言质感、角色差异化、潜台词
-5. visual（画面表现，满分15）：镜头感、空间层次、视觉冲击力
-6. content（内容深度，满分15）：主题表达、情感共鸣、思想内核
+【剧本类型识别】
+收到剧本后，首先判断类型：AIGC短剧/漫剧（单集5-30分钟，竖屏平台，高密度反转、强节奏）或传统影视剧本（单集40分钟以上，长视频平台，完整起承转合）。类型判定将影响各维度的评价侧重点。
 
-请严格按以下 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": 数字 },
-  "summary": "一句话总结评价",
-  "issues": ["问题1", "问题2", ...],
-  "highlights": ["亮点1", "亮点2", ...],
-  "suggestions": ["建议1", "建议2", ...]
+  "dimensionScores": { "hook": 数字, "plot": 数字, "character": 数字, "dialogue": 数字, "visual": 数字, "content": 数字 },
+  "summary": "200-300字综合评价，概括整体质量、市场潜力与目标受众匹配度",
+  "issues": ["每条指出具体维度的扣分点并引用剧本原文位置", ...],
+  "highlights": ["核心亮点，引用剧本具体场景", ...],
+  "suggestions": ["按优先级排列的改进建议（最优先/次优先/可优化）", ...]
 }`;
 
-const DIMENSION_WEIGHTS: Record<string, { maxScore: number; weight: number }> = {
-  hook: { maxScore: 20, weight: 0.2 },
-  character: { maxScore: 15, weight: 0.15 },
-  plot: { maxScore: 20, weight: 0.2 },
-  dialogue: { maxScore: 15, weight: 0.15 },
-  visual: { maxScore: 15, weight: 0.15 },
-  content: { maxScore: 15, weight: 0.15 },
+const DIMENSION_WEIGHTS: Record<string, { maxScore: number }> = {
+  hook: { maxScore: 20 },
+  plot: { maxScore: 20 },
+  character: { maxScore: 18 },
+  dialogue: { maxScore: 15 },
+  visual: { maxScore: 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 + (score / dim.maxScore) * 100 * dim.weight;
+      return sum + Math.max(0, Math.min(dim.maxScore, scores[key] ?? 0));
     }, 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 ? (
-                  <div className="profile-popover panel-surface">
+                <AnimatedPanel open={session ? profileOpen : false} 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>
-                ) : null}
+                  </AnimatedPanel>
               </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 && (
-        <div className="notification-center__panel">
+      <AnimatedPanel open={open} className="notification-center__panel" exitDuration={140}>
           <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 dataUrl = await new Promise<string>((resolve, reject) => {
-          const reader = new FileReader();
-          reader.onload = () => resolve(String(reader.result));
-          reader.onerror = () => reject(reader.error);
-          reader.readAsDataURL(blob);
-        });
-        const { url } = await aiGenerationClient.uploadAsset({ dataUrl, name: item.name, mimeType: blob.type });
+        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 { url } = await aiGenerationClient.uploadAssetBinary(blob, { name: item.name, mimeType, scope: "ecommerce-product" });
         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 result = await uploadAssetWithProgress(
-      { dataUrl, scope: "ecommerce-product", mimeType: "image/png" },
-      { signal },
-    );
-    imageUrls.push(result.url);
+  const SUPPORTED_IMAGE_TYPES = new Set(["image/jpeg", "image/png", "image/webp", "image/gif"]);
+  for (const srcUrl of imageDataUrls) {
+    try {
+      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,6 +9,16 @@ 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`;
@@ -256,6 +266,7 @@ 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>
                   );
                 })}
@@ -282,7 +293,7 @@ function HomePage({ onOpenGenerate, onOpenEcommerce, onOpenScriptReview, onOpenT
 
       <main className="omni-home__feature-pages" aria-label="OmniAI 功能介绍">
         {HOME_FEATURES.map((feature, index) => (
-          <section key={feature.key} className={`omni-home__feature-page is-${feature.key}${index % 2 ? " is-alt" : ""}`}>
+          <ScrollEntrance key={feature.key} className={`omni-home__feature-page is-${feature.key}${index % 2 ? " is-alt" : ""}`}>
             <div className="omni-home__feature-copy">
               <span>
                 {feature.icon}
@@ -303,10 +314,10 @@ function HomePage({ onOpenGenerate, onOpenEcommerce, onOpenScriptReview, onOpenT
                 <span key={item}>{item}</span>
               ))}
             </div>
-          </section>
+          </ScrollEntrance>
         ))}
 
-        <section className="omni-home__experience" aria-label="点击体验">
+        <ScrollEntrance className="omni-home__experience" aria-label="点击体验">
           <div className="omni-home__experience-copy">
             <span>
               <ThunderboltOutlined />
@@ -337,7 +348,7 @@ function HomePage({ onOpenGenerate, onOpenEcommerce, onOpenScriptReview, onOpenT
               体验电商生成
             </button>
           </div>
-        </section>
+        </ScrollEntrance>
       </main>
     </section>
     </>

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/profile/ProfilePage.tsx

@@ -1,7 +1,10 @@
 import {
   CameraOutlined,
+  CheckOutlined,
   CheckCircleFilled,
+  CloseOutlined,
   DeleteOutlined,
+  EditOutlined,
   LockOutlined,
   MailOutlined,
   MobileOutlined,
@@ -135,6 +138,48 @@ function mapAssetToSavedItem(asset: Awaited<ReturnType<typeof assetClient.list>>
   };
 }
 
+function formatProfileDate(value: string | null | undefined): string {
+  if (!value) return "刚刚";
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+
+  return new Intl.DateTimeFormat("zh-CN", {
+    month: "numeric",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  }).format(date);
+}
+
+function formatTaskType(type: WebGenerationPreviewTask["type"]): string {
+  const labels: Record<WebGenerationPreviewTask["type"], string> = {
+    image: "图像",
+    video: "视频",
+    agent: "智能体",
+    "digital-human": "数字人",
+    "character-mix": "角色融合",
+  };
+  return labels[type] || type;
+}
+
+function formatTaskStatus(status: WebGenerationPreviewTask["status"]): string {
+  const labels: Record<WebGenerationPreviewTask["status"], string> = {
+    queued: "排队中",
+    running: "生成中",
+    completed: "已完成",
+    failed: "失败",
+  };
+  return labels[status] || status;
+}
+
+function formatAssetStatus(status: string | undefined): string {
+  const normalized = String(status || "").toLowerCase();
+  if (normalized === "completed" || normalized === "ready" || normalized === "success") return "可用";
+  if (normalized === "running" || normalized === "processing") return "处理中";
+  if (normalized === "failed" || normalized === "error") return "失败";
+  return status || "资产";
+}
+
 function ProfilePage({
   session,
   usage,
@@ -182,6 +227,9 @@ function ProfilePage({
   const [profileNotice, setProfileNotice] = useState<string | null>(null);
   const [localAvatarUrl, setLocalAvatarUrl] = useState(() => session?.user.avatarUrl || readLocalProfileValue(userId, "avatar"));
   const [profileBio, setProfileBio] = useState(() => session?.user.bio || readLocalProfileValue(userId, "bio"));
+  const [isBioEditing, setIsBioEditing] = useState(false);
+  const [bioEditBackup, setBioEditBackup] = useState("");
+  const [bioStatusNotice, setBioStatusNotice] = useState<string | null>(null);
   const [bannerUrl, setBannerUrl] = useState(() => session?.user.backgroundUrl || readLocalProfileValue(userId, "background"));
 
   const completedTasks = tasks.filter((task) => task.status === "completed");
@@ -497,8 +545,29 @@ function ProfilePage({
     void syncProfilePatch({ bio: nextBio || null });
   };
 
+  const startBioEdit = () => {
+    setBioEditBackup(profileBio);
+    setBioStatusNotice(null);
+    setIsBioEditing(true);
+  };
+
+  const confirmBioEdit = () => {
+    handleBioBlur();
+    setIsBioEditing(false);
+    setBioStatusNotice("个性签名已保存");
+  };
+
+  const cancelBioEdit = () => {
+    setProfileBio(bioEditBackup);
+    setIsBioEditing(false);
+    setBioStatusNotice(null);
+  };
+
   const renderEmptyState = (text: string, actionLabel: string, action: () => void) => (
     <div className="profile-page__empty-state">
+      <span className="profile-page__empty-mark" aria-hidden="true">
+        <PlusOutlined />
+      </span>
       <p className="profile-page__empty-text">{text}</p>
       <button type="button" className="profile-page__empty-btn" onClick={action}>
         <PlusOutlined />
@@ -515,12 +584,12 @@ function ProfilePage({
             <article key={task.id} className="profile-page__list-card">
               <div className="profile-page__list-card-head">
                 <strong>{task.title}</strong>
-                <span>{task.type}</span>
+                <span>{formatTaskType(task.type)}</span>
               </div>
               <p>{task.prompt}</p>
               <div className="profile-page__list-card-meta">
-                <span>{task.status}</span>
-                <span>{task.createdAt}</span>
+                <span>{formatTaskStatus(task.status)}</span>
+                <span>{formatProfileDate(task.createdAt)}</span>
               </div>
             </article>
           ))}
@@ -537,7 +606,7 @@ function ProfilePage({
             <article key={project.id} className="profile-page__list-card">
               <div className="profile-page__list-card-head">
                 <strong>{project.name}</strong>
-                <span>{project.updatedAt}</span>
+                <span>{formatProfileDate(project.updatedAt)}</span>
                 {onDeleteProject ? (
                   <button
                     type="button"
@@ -569,12 +638,12 @@ function ProfilePage({
             <article key={asset.id} className="profile-page__list-card">
               <div className="profile-page__list-card-head">
                 <strong>{asset.name}</strong>
-                <span>{asset.status}</span>
+                <span>{formatAssetStatus(asset.status)}</span>
               </div>
               <p>{asset.description}</p>
               <div className="profile-page__list-card-meta">
                 <span>{asset.type}</span>
-                <span>{asset.updatedAt}</span>
+                <span>{formatProfileDate(asset.updatedAt)}</span>
               </div>
             </article>
           ))}
@@ -637,15 +706,39 @@ function ProfilePage({
                 </span>
               </div>
               <strong className="profile-page__username">{displayName}</strong>
-              <textarea
-                className="profile-page__bio"
-                value={profileBio}
-                onChange={(event) => setProfileBio(event.target.value)}
-                onBlur={handleBioBlur}
-                placeholder={displayedBio}
-                rows={2}
-                maxLength={80}
-              />
+              {isBioEditing ? (
+                <div className="profile-page__bio-editor">
+                  <textarea
+                    className="profile-page__bio"
+                    value={profileBio}
+                    onChange={(event) => setProfileBio(event.target.value)}
+                    placeholder="填写一句个人签名"
+                    rows={2}
+                    maxLength={80}
+                    autoFocus
+                  />
+                  <div className="profile-page__bio-actions">
+                    <button type="button" className="profile-page__bio-action profile-page__bio-action--save" onClick={confirmBioEdit}>
+                      <CheckOutlined />
+                      保存
+                    </button>
+                    <button type="button" className="profile-page__bio-action" onClick={cancelBioEdit}>
+                      <CloseOutlined />
+                      取消
+                    </button>
+                  </div>
+                </div>
+              ) : (
+                <button
+                  type="button"
+                  className={`profile-page__bio-display${profileBio.trim() ? "" : " is-empty"}`}
+                  onClick={startBioEdit}
+                >
+                  <span>{displayedBio}</span>
+                  <EditOutlined className="profile-page__bio-edit-icon" />
+                </button>
+              )}
+              {bioStatusNotice ? <span className="profile-page__bio-status">{bioStatusNotice}</span> : null}
               {profileNotice ? <span className="profile-page__sync-notice">{profileNotice}</span> : null}
             </div>
 
@@ -664,18 +757,21 @@ function ProfilePage({
               </div>
             </div>
 
-            <button type="button" className="profile-page__share-btn">
+            <button type="button" className="profile-page__share-btn profile-page__share-btn--plan">
               <ShareAltOutlined />
               {packageLabel}
             </button>
 
-            <button type="button" className="profile-page__share-btn" onClick={onOpenWorkbench}>
+            <button type="button" className="profile-page__share-btn profile-page__share-btn--primary" onClick={onOpenWorkbench}>
+              <PlusOutlined />
               进入工作台
             </button>
-            <button type="button" className="profile-page__share-btn" onClick={onOpenCommunity}>
+            <button type="button" className="profile-page__share-btn profile-page__share-btn--secondary" onClick={onOpenCommunity}>
+              <ShareAltOutlined />
               打开社区
             </button>
-            <button type="button" className="profile-page__share-btn" onClick={onLogout}>
+            <button type="button" className="profile-page__share-btn profile-page__share-btn--danger" onClick={onLogout}>
+              <LockOutlined />
               退出登录
             </button>
           </aside>
@@ -731,13 +827,25 @@ function ProfilePage({
               <div className="profile-page__upload-card profile-page__upload-card--meta">
                 {accountPanel === "credits" ? (
                   <>
-                    <span>当前账号：{displayName}</span>
-                    <span>积分剩余：{(usage.balanceCents / 100).toFixed(2)}</span>
+                    <span className="profile-page__meta-item">
+                      <small>当前账号</small>
+                      <strong>{displayName}</strong>
+                    </span>
+                    <span className="profile-page__meta-item">
+                      <small>积分剩余</small>
+                      <strong>{(usage.balanceCents / 100).toFixed(2)}</strong>
+                    </span>
                   </>
                 ) : (
                   <>
-                    <span>任务总数：{tasks.length}</span>
-                    <span>已完成：{completedTasks.length}</span>
+                    <span className="profile-page__meta-item">
+                      <small>任务总数</small>
+                      <strong>{tasks.length}</strong>
+                    </span>
+                    <span className="profile-page__meta-item">
+                      <small>已完成</small>
+                      <strong>{completedTasks.length}</strong>
+                    </span>
                   </>
                 )}
               </div>

src/features/script-tokens/ScriptTokensPage.tsx

@@ -1,5 +1,5 @@
 import { CopyOutlined, DownOutlined, DownloadOutlined, FileTextOutlined, ReloadOutlined, TrophyOutlined, UploadOutlined } from "@ant-design/icons";
-import { useMemo, useRef, useState, type ChangeEvent, type KeyboardEvent } from "react";
+import { useEffect, useMemo, useRef, useState, type ChangeEvent, type KeyboardEvent } from "react";
 import { evaluateScript } from "../../api/scriptEvalClient";
 
 interface ScoreDimension {
@@ -35,9 +35,9 @@ const scoreDimensions: ScoreDimension[] = [
   {
     key: "character",
     label: "角色塑造",
-    maxScore: 15,
-    weight: 0.15,
-    description: "人物立体度、动机合理性、弧光设计",
+    maxScore: 18,
+    weight: 0.18,
+    description: "主角弧光、角色辨识度、动机、配角质量",
   },
   {
     key: "plot",
@@ -63,9 +63,9 @@ const scoreDimensions: ScoreDimension[] = [
   {
     key: "content",
     label: "内容深度",
-    maxScore: 15,
-    weight: 0.15,
-    description: "主题表达、情感共鸣、思想内核",
+    maxScore: 12,
+    weight: 0.12,
+    description: "主题表达、情感共鸣、社会/人性洞察",
   },
 ];
 
@@ -170,6 +170,10 @@ function ScriptTokensPage() {
   const [copied, setCopied] = useState(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
+  useEffect(() => {
+    console.log("[剧本评分] 页面已加载，ScriptTokensPage mounted");
+  }, []);
+
   const hasContent = Boolean(script.trim());
   const lineNumbers = useMemo(() => {
     const count = Math.min(160, Math.max(10, script.split(/\r\n|\r|\n/).length));
@@ -202,14 +206,26 @@ function ScriptTokensPage() {
   };
 
   const handleEvaluate = async () => {
+    console.log("[剧本评测] 点击开始评测，hasContent:", hasContent, "script长度:", script.length);
     if (!hasContent) return;
     setLoading(true);
     setResult(null);
     setEvalError(null);
     try {
+      console.log("[剧本评测] 开始评测，剧本长度:", script.length, "字符");
       const aiResult = await evaluateScript(script);
+      console.log("[剧本评测] 评测完成，结果:", {
+        总分: aiResult.totalScore,
+        等级: aiResult.grade,
+        维度得分: aiResult.dimensionScores,
+        摘要: aiResult.summary,
+        亮点: aiResult.highlights,
+        问题: aiResult.issues,
+        建议: aiResult.suggestions,
+      });
       setResult(aiResult);
     } catch (err) {
+      console.error("[剧本评测] 评测失败:", err);
       setEvalError(err instanceof Error ? err.message : "评测服务暂时不可用，请稍后重试");
     }
     setDetailsExpanded(true);

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

@@ -148,37 +148,83 @@
   min-width: 0;
   min-height: 72px;
   padding: 0 28px;
-  border: 1px solid var(--border-subtle);
-  border-radius: 8px;
-  background: var(--bg-inset);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 12px;
+  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-weight: 850;
-  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease;
+  font-size: 16px;
+  font-weight: 700;
+  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);
-  background: var(--bg-hover);
+  border-color: rgba(255, 255, 255, 0.16);
+  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);
-  background: var(--accent);
-  color: var(--dg-button-text, #061014);
+  border-color: rgba(var(--accent-rgb), 0.48);
+  background: linear-gradient(180deg, rgba(0, 255, 136, 0.22) 0%, rgba(0, 220, 118, 0.14) 100%), var(--accent);
+  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));
-  background: var(--accent-hover, var(--accent));
-  color: var(--dg-button-text, #061014);
+  border-color: rgba(var(--accent-rgb), 0.64);
+  background: linear-gradient(180deg, rgba(0, 255, 136, 0.28) 0%, rgba(0, 230, 124, 0.18) 100%), var(--accent-hover);
+  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,6 +451,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 +631,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);
 }
 
 .omni-home__feature-stats {
@@ -721,6 +789,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/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,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,
@@ -5387,6 +5394,787 @@
   aspect-ratio: auto;
 }
 
+/* Profile center: commercial SaaS polish while preserving the dark-green theme. */
+.web-shell[data-ui-theme="dark-green"] .profile-page {
+  background:
+    radial-gradient(circle at 18% 0%, rgba(var(--accent-rgb), 0.08), transparent 28%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.015), transparent 220px),
+    var(--dg-page);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__banner {
+  height: 214px;
+  background:
+    linear-gradient(135deg, rgba(var(--accent-rgb), 0.11), transparent 34%),
+    linear-gradient(180deg, var(--bg-elevated), var(--dg-page));
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__banner::after {
+  content: "";
+  position: absolute;
+  inset: auto 0 0;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.4), transparent);
+  opacity: 0.7;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__banner.has-image {
+  background-position: center;
+  background-size: cover;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__banner-overlay {
+  background:
+    linear-gradient(180deg, rgba(13, 13, 15, 0.18), rgba(13, 13, 15, 0.78)),
+    radial-gradient(circle at 50% 100%, rgba(var(--accent-rgb), 0.12), transparent 34%);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__banner-btn {
+  height: 36px;
+  padding: 0 14px;
+  border-color: rgba(255, 255, 255, 0.2);
+  background: rgba(10, 12, 13, 0.66);
+  backdrop-filter: blur(14px);
+  flex-direction: row;
+  justify-content: center;
+  min-width: 104px;
+  line-height: 1;
+  font-weight: 600;
+  transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__banner-btn .anticon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.1);
+  color: #fff;
+  font-size: 13px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__banner .profile-page__banner-btn {
+  top: 18px;
+  right: max(18px, calc((100vw - 1240px) / 2 + 18px));
+  bottom: auto;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__banner-btn:hover {
+  border-color: rgba(var(--accent-rgb), 0.45);
+  background: rgba(12, 18, 16, 0.86);
+  transform: translateY(-1px);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__body {
+  grid-template-columns: 292px minmax(0, 1fr);
+  gap: 34px;
+  width: min(1240px, calc(100% - 56px));
+  margin-top: -72px;
+  padding-bottom: 56px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__sidebar,
+.web-shell[data-ui-theme="dark-green"] .profile-page__list-card,
+.web-shell[data-ui-theme="dark-green"] .profile-page__review-item,
+.web-shell[data-ui-theme="dark-green"] .profile-page__empty-state,
+.web-shell[data-ui-theme="dark-green"] .profile-page__upload-card {
+  border-color: rgba(255, 255, 255, 0.075);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent),
+    var(--bg-surface);
+  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__sidebar {
+  gap: 18px;
+  padding: 22px;
+  border-radius: var(--radius-lg);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__sidebar-head {
+  gap: 10px;
+  width: 100%;
+  padding-bottom: 4px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__avatar-ring::before {
+  content: "";
+  position: absolute;
+  inset: -7px;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.22), transparent 68%);
+  opacity: 0.9;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__avatar-ring .profile-page__avatar,
+.web-shell[data-ui-theme="dark-green"] .profile-page__avatar {
+  position: relative;
+  width: 88px;
+  height: 88px;
+  border: 4px solid var(--dg-page);
+  background:
+    linear-gradient(135deg, rgba(var(--accent-rgb), 0.26), rgba(var(--accent-rgb), 0.08)),
+    var(--bg-elevated);
+  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.32);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__avatar-edit {
+  left: 50%;
+  top: 50%;
+  width: 88px;
+  height: 88px;
+  border-color: rgba(255, 255, 255, 0.18);
+  background: rgba(8, 10, 11, 0.68);
+  color: #fff;
+  font-size: 20px;
+  opacity: 0;
+  transform: translate(-50%, -50%);
+  transition: opacity var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__avatar-badge {
+  right: -3px;
+  bottom: 10px;
+  z-index: 4;
+  border: 2px solid var(--bg-surface);
+  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__avatar-ring:hover .profile-page__avatar-edit,
+.web-shell[data-ui-theme="dark-green"] .profile-page__avatar-ring:active .profile-page__avatar-edit,
+.web-shell[data-ui-theme="dark-green"] .profile-page__avatar-edit:focus-visible {
+  opacity: 1;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__avatar-ring:hover .profile-page__avatar-edit:hover,
+.web-shell[data-ui-theme="dark-green"] .profile-page__avatar-edit:focus-visible {
+  background: rgba(8, 10, 11, 0.82);
+  transform: translate(-50%, -50%) scale(1.02);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__username {
+  max-width: 100%;
+  overflow: hidden;
+  font-size: 21px;
+  letter-spacing: 0;
+  line-height: 1.25;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__bio {
+  width: 100%;
+  min-height: 56px;
+  padding: 10px 12px;
+  border-color: rgba(255, 255, 255, 0.07);
+  background: rgba(255, 255, 255, 0.025);
+  color: var(--fg-muted);
+  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__bio:focus {
+  background: var(--bg-elevated);
+  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.08);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__bio-editor {
+  display: grid;
+  gap: 8px;
+  width: 100%;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__bio-actions {
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__bio-action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  min-width: 68px;
+  height: 30px;
+  padding: 0 10px;
+  border: 1px solid rgba(255, 255, 255, 0.075);
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.025);
+  color: var(--fg-muted);
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: 600;
+  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__bio-action:hover {
+  border-color: rgba(255, 255, 255, 0.14);
+  background: rgba(255, 255, 255, 0.045);
+  color: var(--fg-body);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__bio-action--save {
+  border-color: rgba(var(--accent-rgb), 0.34);
+  background: rgba(var(--accent-rgb), 0.1);
+  color: var(--accent);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__bio-action--save:hover {
+  border-color: rgba(var(--accent-rgb), 0.5);
+  background: rgba(var(--accent-rgb), 0.16);
+  color: var(--accent-hover);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__bio-display {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  min-height: 48px;
+  padding: 10px 12px;
+  border: 1px solid rgba(255, 255, 255, 0.055);
+  border-radius: var(--radius-sm);
+  background: rgba(255, 255, 255, 0.018);
+  color: var(--fg-muted);
+  cursor: pointer;
+  text-align: left;
+  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__bio-display span {
+  overflow: hidden;
+  font-size: 13px;
+  line-height: 1.45;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__bio-display.is-empty span {
+  color: var(--fg-soft);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__bio-edit-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: rgba(var(--accent-rgb), 0.08);
+  color: var(--accent);
+  font-size: 12px;
+  opacity: 0.78;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__bio-display:hover,
+.web-shell[data-ui-theme="dark-green"] .profile-page__bio-display:focus-visible {
+  border-color: rgba(var(--accent-rgb), 0.28);
+  background: rgba(var(--accent-rgb), 0.055);
+  color: var(--fg-body);
+  outline: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__bio-display:hover .profile-page__bio-edit-icon,
+.web-shell[data-ui-theme="dark-green"] .profile-page__bio-display:focus-visible .profile-page__bio-edit-icon {
+  opacity: 1;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__bio-status {
+  color: var(--accent);
+  font-size: 11px;
+  line-height: 1.3;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__counts {
+  gap: 0;
+  width: 100%;
+  padding: 12px 0;
+  border-top: 1px solid rgba(255, 255, 255, 0.065);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.065);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__count strong {
+  font-size: 19px;
+  line-height: 1.1;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__count span {
+  margin-top: 4px;
+  color: var(--fg-soft);
+  font-size: 12px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__share-btn {
+  min-height: 40px;
+  padding: 0 15px;
+  border-radius: var(--radius-sm);
+  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__share-btn--plan {
+  justify-content: center;
+  border-color: rgba(var(--accent-rgb), 0.24);
+  background: rgba(var(--accent-rgb), 0.07);
+  color: var(--accent);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__share-btn--primary {
+  border-color: rgba(var(--accent-rgb), 0.62);
+  background: var(--accent);
+  color: var(--dg-button-text);
+  font-weight: 700;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__share-btn--secondary {
+  background: rgba(255, 255, 255, 0.025);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__share-btn--danger {
+  margin-top: 2px;
+  border-color: transparent;
+  color: var(--fg-soft);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__share-btn:hover {
+  transform: translateY(-1px);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__share-btn--primary:hover {
+  border-color: var(--accent-hover);
+  background: var(--accent-hover);
+  color: var(--dg-button-text);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__share-btn--danger:hover {
+  border-color: rgba(255, 90, 95, 0.36);
+  background: rgba(255, 90, 95, 0.1);
+  color: #ff9a9d;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__main {
+  gap: 22px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__main-tabs {
+  min-height: 52px;
+  margin-bottom: 2px;
+  padding: 4px;
+  border: 1px solid rgba(255, 255, 255, 0.065);
+  border-radius: var(--radius-md);
+  background: rgba(255, 255, 255, 0.022);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__main-tabs button {
+  min-height: 42px;
+  padding: 0 18px;
+  border: 0;
+  border-radius: var(--radius-sm);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__main-tabs button.is-active {
+  background: rgba(var(--accent-rgb), 0.12);
+  color: var(--accent);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__main-tabs button.is-active::after {
+  content: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__section {
+  gap: 14px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__section-label {
+  margin-bottom: 0;
+  color: var(--fg-body);
+  font-size: 15px;
+  letter-spacing: 0;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__list-grid {
+  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
+  gap: 14px;
+  max-height: min(470px, 48vh);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding-right: 6px;
+  scrollbar-color: rgba(var(--accent-rgb), 0.42) transparent;
+  scrollbar-width: thin;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__list-grid::-webkit-scrollbar,
+.web-shell[data-ui-theme="dark-green"] .profile-page__review-list::-webkit-scrollbar {
+  width: 6px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__list-grid::-webkit-scrollbar-track,
+.web-shell[data-ui-theme="dark-green"] .profile-page__review-list::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__list-grid::-webkit-scrollbar-thumb,
+.web-shell[data-ui-theme="dark-green"] .profile-page__review-list::-webkit-scrollbar-thumb {
+  border-radius: 999px;
+  background: rgba(var(--accent-rgb), 0.28);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__list-grid::-webkit-scrollbar-thumb:hover,
+.web-shell[data-ui-theme="dark-green"] .profile-page__review-list::-webkit-scrollbar-thumb:hover {
+  background: rgba(var(--accent-rgb), 0.42);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__list-card {
+  min-height: 136px;
+  padding: 16px;
+  border-radius: var(--radius-md);
+  transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__list-card:hover,
+.web-shell[data-ui-theme="dark-green"] .profile-page__review-item:hover {
+  border-color: rgba(var(--accent-rgb), 0.28);
+  background:
+    linear-gradient(180deg, rgba(var(--accent-rgb), 0.045), transparent),
+    var(--bg-surface);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__list-card-head strong {
+  min-width: 0;
+  font-size: 14px;
+  line-height: 1.35;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__list-card-head span {
+  padding: 4px 8px;
+  border-radius: 999px;
+  background: rgba(var(--accent-rgb), 0.1);
+  color: var(--accent);
+  font-size: 11px;
+  line-height: 1;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__list-card p {
+  display: -webkit-box;
+  min-height: 38px;
+  overflow: hidden;
+  color: var(--fg-muted);
+  font-size: 12px;
+  line-height: 1.55;
+  text-overflow: ellipsis;
+  white-space: normal;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__list-card-meta {
+  padding-top: 10px;
+  border-top: 1px solid rgba(255, 255, 255, 0.055);
+  color: var(--fg-soft);
+  line-height: 1.35;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__empty-state {
+  position: relative;
+  min-height: 280px;
+  overflow: hidden;
+  padding: 46px 28px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__empty-state::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(circle at 50% 0%, rgba(var(--accent-rgb), 0.09), transparent 42%);
+  pointer-events: none;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__empty-mark {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 52px;
+  height: 52px;
+  border: 1px solid rgba(var(--accent-rgb), 0.22);
+  border-radius: 50%;
+  background: rgba(var(--accent-rgb), 0.08);
+  color: var(--accent);
+  font-size: 18px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__empty-text {
+  position: relative;
+  color: var(--fg-muted);
+  font-size: 13px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__empty-btn {
+  position: relative;
+  min-height: 38px;
+  border-color: rgba(var(--accent-rgb), 0.32);
+  background: rgba(var(--accent-rgb), 0.08);
+  color: var(--accent);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__review-list {
+  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
+  gap: 14px;
+  max-height: min(470px, 48vh);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding-right: 6px;
+  scrollbar-color: rgba(var(--accent-rgb), 0.42) transparent;
+  scrollbar-width: thin;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__review-item {
+  min-height: 74px;
+  padding: 10px;
+  border-radius: var(--radius-md);
+  transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__review-item:hover {
+  transform: translateY(-2px);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__review-item img,
+.web-shell[data-ui-theme="dark-green"] .profile-page__review-thumb {
+  flex-basis: 70px;
+  width: 70px;
+  height: 52px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__review-item strong {
+  font-size: 13px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__list-bar {
+  margin-bottom: 0;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__list-tabs {
+  gap: 4px;
+  padding: 3px;
+  border: 1px solid rgba(255, 255, 255, 0.065);
+  border-radius: var(--radius-sm);
+  background: rgba(255, 255, 255, 0.02);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__list-tabs button {
+  min-height: 32px;
+  padding: 0 14px;
+  border: 0;
+  border-radius: 8px;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__list-tabs button.is-active {
+  background: rgba(var(--accent-rgb), 0.1);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__upload-card--meta {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+  padding: 14px;
+  border-radius: var(--radius-md);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__meta-item {
+  display: grid;
+  gap: 6px;
+  min-width: 0;
+  padding: 14px;
+  border: 1px solid rgba(255, 255, 255, 0.055);
+  border-radius: var(--radius-sm);
+  background: rgba(255, 255, 255, 0.025);
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__meta-item small {
+  overflow: hidden;
+  color: var(--fg-soft);
+  font-size: 12px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.web-shell[data-ui-theme="dark-green"] .profile-page__meta-item strong {
+  overflow: hidden;
+  color: var(--fg-body);
+  font-size: 17px;
+  line-height: 1.25;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@media (max-width: 900px) {
+  .web-shell[data-ui-theme="dark-green"] .profile-page__body {
+    grid-template-columns: 1fr;
+    width: min(100% - 36px, 760px);
+    margin-top: -54px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page__sidebar {
+    align-items: stretch;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page__main-tabs {
+    overflow-x: auto;
+  }
+}
+
+@media (max-width: 560px) {
+  .web-shell[data-ui-theme="dark-green"] .profile-page__banner {
+    height: 152px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page__banner .profile-page__banner-btn {
+    top: 10px;
+    right: 12px;
+    width: 36px;
+    min-width: 36px;
+    height: 36px;
+    padding: 0;
+    border-radius: 999px;
+    font-size: 0;
+    gap: 0;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page__banner-btn .anticon {
+    width: 24px;
+    height: 24px;
+    background: transparent;
+    font-size: 14px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page__body {
+    width: min(100% - 28px, 560px);
+    margin-top: -32px;
+    padding-bottom: 88px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page__sidebar {
+    gap: 13px;
+    padding: 18px;
+    border-radius: var(--radius-md);
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page__sidebar-head {
+    gap: 7px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page__avatar-ring .profile-page__avatar,
+  .web-shell[data-ui-theme="dark-green"] .profile-page__avatar {
+    width: 76px;
+    height: 76px;
+    border-width: 3px;
+    font-size: 24px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page__avatar-edit {
+    width: 76px;
+    height: 76px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page__avatar-badge {
+    bottom: 6px;
+    width: 18px;
+    height: 18px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page__username {
+    font-size: 20px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page__bio {
+    min-height: 46px;
+    padding: 8px 10px;
+    font-size: 12px;
+    line-height: 1.45;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page__bio-display {
+    min-height: 42px;
+    padding: 8px 10px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page__bio-display span {
+    font-size: 12px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page__counts {
+    padding: 9px 0;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page__count strong {
+    font-size: 18px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page__share-btn {
+    min-height: 36px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page__main-tabs button {
+    flex: 0 0 auto;
+    padding: 0 14px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page__upload-card--meta {
+    grid-template-columns: 1fr;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page__list-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 8px;
+    max-height: min(312px, 46vh);
+    padding-right: 4px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page__list-card {
+    min-height: 112px;
+    padding: 9px;
+    gap: 8px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page__list-card-head {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 6px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page__list-card-head strong {
+    width: 100%;
+    font-size: 12px;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page__list-card-head span {
+    max-width: 100%;
+    overflow: hidden;
+    padding: 3px 7px;
+    font-size: 10px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page__list-card p {
+    min-height: 30px;
+    font-size: 11px;
+    line-height: 1.45;
+  }
+
+  .web-shell[data-ui-theme="dark-green"] .profile-page__list-card-meta {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 4px;
+    padding-top: 8px;
+    font-size: 10px;
+  }
+}
+
 /* Ecommerce generation page: keep its carousel and composer independent from
    the community carousel rules that share class names. */
 .web-shell[data-ui-theme="dark-green"] .ecommerce-landing-page {

vite.config.ts

@@ -1,45 +1,49 @@
 import react from "@vitejs/plugin-react";
 import { compression } from "vite-plugin-compression2";
-import { defineConfig } from "vite";
+import { defineConfig, loadEnv } from "vite";
 
-export default defineConfig({
-  plugins: [
-    react(),
-    compression({ algorithms: ["gzip", "brotliCompress"], threshold: 1024 }),
-  ],
-  server: {
-    port: 5174,
-    host: "127.0.0.1",
-    proxy: {
-      "/api": {
-        target: "http://47.110.225.76:3600",
-        changeOrigin: true,
-      },
-    },
-  },
-  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";
-          }
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd(), "");
+
+  return {
+    plugins: [
+      react(),
+      compression({ algorithms: ["gzip", "brotliCompress"], threshold: 1024 }),
+    ],
+    server: {
+      port: 5174,
+      host: "127.0.0.1",
+      proxy: {
+        "/api": {
+          target: env.VITE_DEV_PROXY || "http://47.110.225.76:3600",
+          changeOrigin: true,
         },
       },
     },
-  },
-});
+    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";
+            }
+          },
+        },
+      },
+    },
+  };
+});